commit 702ab4fee01be99b79b6aaf6cc135e27458f3d22 parent 0e2118ac37f6d5e8bc0dc111d6fc9279f7670b9e Author: Yuukin256 <52195426+Yuukin256@users.noreply.github.com> Date: Mon, 8 Apr 2024 15:23:41 +0900 各所の文章を更新&ビジュアル刷新 (#35) * Twitter を X に変更 (#16) * トップと「このアプリについて」の内容を最新のものに更新 * 「所属クラス」を「マイクラス」に、「科目名」を「マイ時間割」に機能名変更 * フッターの内容を追加修正 * マイ時間割機能のデフォルト科目名表示が機能するように修正 * アイコンを変更 * メインビジュアルを追加 * テーマカラーを #029494 に変更 * 「使い方」ページを改訂 * トップページから使い方ページへのリンクを追加 * スタイル等微修正 Diffstat:
27 files changed, 189 insertions(+), 124 deletions(-)
diff --git a/public/app-example.png b/public/app-example.png Binary files differ. diff --git a/public/app-example1.png b/public/app-example1.png Binary files differ. diff --git a/public/favicon.ico b/public/favicon.ico Binary files differ. diff --git a/public/icon_x1024.png b/public/icon_x1024.png Binary files differ. diff --git a/public/icon_x192.png b/public/icon_x192.png Binary files differ. diff --git a/public/icon_x512.png b/public/icon_x512.png Binary files differ. diff --git a/public/main_visual.png b/public/main_visual.png Binary files differ. diff --git a/public/manifest.json b/public/manifest.json @@ -6,16 +6,52 @@ "short_name": "時間割", "description": "岸和田高校の時間割を確認できるアプリ", "display": "standalone", - "theme_color": "#1976d2", - "background_color": "#1976d2", + "theme_color": "#029494", + "background_color": "#029494", "icons": [ { + "src": "/icon_x192.png", + "sizes": "192x192", + "type": "image/png", + "purpose": "any" + }, + { "src": "/icon_x512.png", "sizes": "512x512", "type": "image/png", "purpose": "any" }, { + "src": "/icon_x1024.png", + "sizes": "1024x1024", + "type": "image/png", + "purpose": "any" + }, + { + "src": "/maskable_icon_x48.png", + "sizes": "48x48", + "type": "image/png", + "purpose": "maskable" + }, + { + "src": "/maskable_icon_x72.png", + "sizes": "72x72", + "type": "image/png", + "purpose": "maskable" + }, + { + "src": "/maskable_icon_x96.png", + "sizes": "96x96", + "type": "image/png", + "purpose": "maskable" + }, + { + "src": "/maskable_icon_x128.png", + "sizes": "128x128", + "type": "image/png", + "purpose": "maskable" + }, + { "src": "/maskable_icon_x192.png", "sizes": "192x192", "type": "image/png", diff --git a/public/maskable_icon.png b/public/maskable_icon.png Binary files differ. diff --git a/public/maskable_icon_x128.png b/public/maskable_icon_x128.png Binary files differ. diff --git a/public/maskable_icon_x192.png b/public/maskable_icon_x192.png Binary files differ. diff --git a/public/maskable_icon_x384.png b/public/maskable_icon_x384.png Binary files differ. diff --git a/public/maskable_icon_x48.png b/public/maskable_icon_x48.png Binary files differ. diff --git a/public/maskable_icon_x512.png b/public/maskable_icon_x512.png Binary files differ. diff --git a/public/maskable_icon_x72.png b/public/maskable_icon_x72.png Binary files differ. diff --git a/public/maskable_icon_x96.png b/public/maskable_icon_x96.png Binary files differ. diff --git a/src/client/components/Layout/index.tsx b/src/client/components/Layout/index.tsx @@ -44,7 +44,7 @@ export default function Layout({ children, title, footer }: Props) { <Toolbar sx={{ gap: 2 }}> <IconButton color='inherit' - title='ホームに戻る' + title='トップに戻る' edge='start' component={NextLinkComposed} to={{ pathname: '/' }} diff --git a/src/client/components/SlideFooter/index.tsx b/src/client/components/SlideFooter/index.tsx @@ -65,6 +65,19 @@ const prioritySlideData: SlideData[] = [ ), severity: 'warning', }, + { + id: 13, + content: ( + <> + 新年度開始直後は時間割情報に誤りがある可能性がありますのでご注意ください。誤ったデータにお気づきの際は + <Link href={BUG_REPORT_FORM_URL} target='_blank' rel='noopener'> + 報告フォーム + </Link> + にお願いします。 + </> + ), + severity: 'warning', + }, ]; const extraSlideData: SlideData[] = [ @@ -87,33 +100,29 @@ const extraSlideData: SlideData[] = [ </> ), }, - FEEDBACK_FORM_URL - ? { - id: 103, - content: ( - <> - <Link href={FEEDBACK_FORM_URL} target='_blank' rel='noopener'> - フィードバックアンケート - </Link> - で、このアプリの評価にご協力お願いします。ご意見・ご要望もお待ちしております。 - </> - ), - } - : [], - BUG_REPORT_FORM_URL - ? { - id: 104, - content: ( - <> - アプリの不具合や時間割情報の誤りを見つけた場合は、 - <Link href={BUG_REPORT_FORM_URL} target='_blank' rel='noopener'> - Googleフォーム - </Link> - で報告お願いします。 - </> - ), - } - : [], + { + id: 103, + content: ( + <> + <Link href={FEEDBACK_FORM_URL} target='_blank' rel='noopener'> + フィードバックアンケート + </Link> + で、このアプリの評価にご協力お願いします。ご意見・ご要望もお待ちしております。 + </> + ), + }, + { + id: 104, + content: ( + <> + アプリの不具合や時間割情報の誤りを見つけた場合は、 + <Link href={BUG_REPORT_FORM_URL} target='_blank' rel='noopener'> + Googleフォーム + </Link> + で報告お願いします。 + </> + ), + }, // { // id: 105, // content: ( @@ -126,27 +135,17 @@ const extraSlideData: SlideData[] = [ id: 106, content: ( <> - 自分の選択科目を登録して、自分だけの時間割アプリにしよう！ - <Link href='/setting'>設定ページ</Link> - から自分の選択科目を設定できます。特に3年生におすすめ！ + 各時限の時間割をタップすると、授業場所などの詳細表示が出ます。メモ機能も詳細表示内に移動しました。 </> ), }, - { - id: 107, - content: ( - <> - 科目数が多すぎて表示が溢れている場合は、科目名をタップすると全て表示されます。頂いたご意見を参考に改善しました。ありがとうございました。 - </> - ), - }, -].flat(); +]; export default function SlideFooter() { const [slideData, setSlideData] = useState([...prioritySlideData]); useIsomorphicEffect( () => setSlideData([...prioritySlideData, ...shuffle(extraSlideData)]), - [] + [], ); return ( diff --git a/src/client/features/daily/components/Lessons/DetailDialog.tsx b/src/client/features/daily/components/Lessons/DetailDialog.tsx @@ -76,7 +76,7 @@ export default function DetailDialog({ </TableHead> <TableBody> {courses.map((course) => ( - <TableRow key={course.dayPeriod}> + <TableRow key={course.name}> <TableCell>{course.name}</TableCell> <TableCell>{course.room}</TableCell> </TableRow> diff --git a/src/client/features/daily/components/Lessons/Lesson.tsx b/src/client/features/daily/components/Lessons/Lesson.tsx @@ -1,6 +1,6 @@ import { useDisclosure } from '@mantine/hooks'; import CommentIcon from '@mui/icons-material/CommentOutlined'; -import { Button, Stack } from '@mui/material'; +import { Button } from '@mui/material'; import { alpha, styled } from '@mui/material/styles'; import { useAtomValue } from 'jotai'; @@ -66,42 +66,42 @@ export default function Lesson({ date, period, courses, basis }: Props) { <ListItem> <Button sx={(theme) => ({ - [theme.breakpoints.up('xs')]: { fontSize: 24 }, - [theme.breakpoints.up('sm')]: { fontSize: 28 }, + [theme.breakpoints.up('xs')]: { fontSize: 24, px: 1 }, + [theme.breakpoints.up('sm')]: { fontSize: 28, px: 2 }, padding: 0, textAlign: 'left', fontWeight: 'unset', color: 'unset', - backgroundColor: alpha(theme.palette.primary.main, 0.05), + backgroundColor: alpha( + theme.palette.primary.main, + theme.palette.mode === 'light' ? 0.1 : 0.15, + ), width: '100%', + textTransform: 'none', + flexDirection: 'row', + alignItems: 'center', + gap: 1, + overflow: 'clip', })} + variant='text' onClick={handlers.open} > - <Stack - direction='row' - alignItems='center' - spacing={1} - overflow='clip' - px={{ xs: 1, sm: 2 }} - width='100%' - > - <PeriodSpan>{period}.</PeriodSpan> - <LessonSpan> - {gradeClass && basis?.type === 'dayPeriod' ? ( - <LessonNameWithMySubject - dayPeriod={basis.dayPeriod} - gradeClass={gradeClass} - subjects={shortNames} - /> - ) : ( - shortNames.join('/') - )} - </LessonSpan> - - {note !== '' && <CommentIcon fontSize='small' />} - - {basis && <BasisChip data={basis} date={date} period={period} />} - </Stack> + <PeriodSpan>{period}.</PeriodSpan> + <LessonSpan> + {gradeClass && basis?.type === 'dayPeriod' ? ( + <LessonNameWithMySubject + dayPeriod={basis.dayPeriod} + gradeClass={gradeClass} + subjects={shortNames} + /> + ) : ( + shortNames.join('/') + )} + </LessonSpan> + + {note !== '' && <CommentIcon fontSize='small' />} + + {basis && <BasisChip data={basis} date={date} period={period} />} </Button> <DetailDialog diff --git a/src/client/features/setting/components/MySubjectForm.tsx b/src/client/features/setting/components/MySubjectForm.tsx @@ -55,7 +55,11 @@ function SubjectInputGrid({ gradeClass }: SubjectInputGridProps) { <SubjectInputField gradeClass={gradeClass} dayPeriod={dayPeriod} - defaultSubject={data?.standardTimetable[dayPeriod]?.join('/') ?? ''} + defaultSubject={ + data?.standardTimetable[dayPeriod] + ?.map((c) => c.shortName) + .join('/') ?? '' + } /> </Grid> ))} @@ -67,12 +71,12 @@ export default function MySubjectForm() { const [myGradeClass] = useMyClass(); const [selectedClass, setClass] = useState<GradeClass | ''>( - myGradeClass ?? '' + myGradeClass ?? '', ); const handleClassChange = useCallback( (e: SelectChangeEvent<GradeClass | ''>) => setClass(e.target.value as GradeClass | ''), - [setClass] + [setClass], ); return ( diff --git a/src/client/features/setting/index.tsx b/src/client/features/setting/index.tsx @@ -35,14 +35,14 @@ export default function SettingView() { fontWeight={400} gutterBottom > - 所属クラス + マイクラス </Typography> <Typography variant='body2' color={(theme) => theme.vars.palette.text.secondary} mb={1} > - インストールしたアプリをホーム画面から起動すると、設定したクラスの時間割ページを開きます。 + アプリをホーム画面から起動すると、設定したクラスの時間割ページを開きます。 </Typography> {!isPwa && ( <Alert severity='error' sx={{ mt: 1, mb: 2 }}> @@ -60,14 +60,14 @@ export default function SettingView() { fontWeight={400} gutterBottom > - 科目名 + マイ時間割 </Typography> <Typography variant='body2' color={(theme) => theme.vars.palette.text.secondary} mb={2} > - 曜日時限ごとの科目名を自分で設定できます。入力内容は自動で保存されます。 + 自分の選択科目に合わせて、曜日時限ごとに表示する科目名を自分で設定できます。入力内容は自動で保存されます。 </Typography> <MySubjectForm /> </div> diff --git a/src/client/utils/getMuiTheme.ts b/src/client/utils/getMuiTheme.ts @@ -1,6 +1,13 @@ import { grey } from '@mui/material/colors'; import { experimental_extendTheme as extendTheme } from '@mui/material/styles'; +const primaryColor = { + main: '#029494', + light: '#34A9A9', + dark: '#016767', + contrastText: '#fff', +}; + const secondaryColor = { main: '#e91e63', light: '#ff6090', @@ -13,6 +20,7 @@ const getMuiTheme = () => { colorSchemes: { light: { palette: { + primary: primaryColor, secondary: secondaryColor, background: { default: grey[50], @@ -20,7 +28,10 @@ const getMuiTheme = () => { }, }, dark: { - palette: { secondary: secondaryColor }, + palette: { + primary: primaryColor, + secondary: secondaryColor, + }, }, }, typography: { diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx @@ -6,7 +6,7 @@ const MyDocument = () => { <Html lang='ja'> <Head> <link rel='manifest' href='/manifest.json' /> - <meta name='theme-color' content='#1976d2' /> + <meta name='theme-color' content='#029494' /> <link rel='icon' sizes='16x16' href='/favicon.ico' /> <link rel='apple-touch-icon' diff --git a/src/pages/about.tsx b/src/pages/about.tsx @@ -1,7 +1,8 @@ import InstagramIcon from '@mui/icons-material/Instagram'; import SchoolIcon from '@mui/icons-material/School'; -import TwitterIcon from '@mui/icons-material/Twitter'; +import XIcon from '@mui/icons-material/X'; import { Box, Divider, List, ListItem, Stack } from '@mui/material'; +import Image from 'next/image'; import Head from 'client/components/Head'; import Layout from 'client/components/Layout'; @@ -16,20 +17,33 @@ const AboutPage: NextPage = () => { <> <Head title='このアプリについて' /> <Layout title='このアプリについて'> - <Box px={2} pb={2} width={1} height='fit-content'> - <p> - 大阪府立岸和田高等学校 - IT部制作「岸高時間割アプリ」です。元は76期情報ゼミの研究活動で制作していたものを、IT部に引き継ぎました。 - アプリの公開期間は2024年3月頃までの予定です。早期に修正することが不可能な問題が発生した場合は公開を中断する可能性があります。 - </p> + <Box p={2} height='fit-content'> + <Image + src='/main_visual.png' + width={1920} + height={1080} + style={{ width: '100%', height: 'auto', borderRadius: '3px' }} + alt='岸高時間割アプリ メインビジュアル' + /> <p> - このアプリでは、 - 時間割変更（曜日変更）が反映されたクラスの時間割を簡単に確認することができます。詳しくは + 「岸高時間割アプリ」は大阪府立岸和田高等学校IT部が制作・運営を行っているWebアプリです。このアプリでは、時間割変更（曜日変更）が反映されたクラスの時間割を簡単に確認することができます。詳しくは <Link href={{ pathname: '/how-to-use' }}>使い方</Link> をご覧ください。 </p> + <p> + このアプリは、課題研究の活動において76期情報ゼミで制作していたものをIT部に引き継いだものです。現在はIT部およびIT部OBが制作・運営を行っています。またアプリの公開にあたり、IT部顧問をはじめ岸和田高校の先生方にご協力頂いております。この場を借りて感謝申し上げます。 + </p> + + <p> + アプリの開発や運営に少しでも興味がある方は、ぜひ下のIT部SNSのDMまでご連絡ください。担い手があまり居なくて困っています。 + </p> + + <p> + 2023年度に特に大きな問題無くアプリを運営できたため、2024年度以降は特に期限を定めずにアプリを公開します。なお、アプリの運営を続けることが困難な事態が発生した場合は公開を中断する可能性があります。予めご了承ください。 + </p> + <WarningOfUse /> {BUG_REPORT_FORM_URL && ( @@ -66,7 +80,9 @@ const AboutPage: NextPage = () => { </> )} - <p>今後の開発に活かすため、皆さんのご協力をお願いします。</p> + {(BUG_REPORT_FORM_URL || FEEDBACK_FORM_URL) && ( + <p>今後の開発に活かすため、皆さんのご協力をお願いします。</p> + )} <Divider /> @@ -86,13 +102,13 @@ const AboutPage: NextPage = () => { <ListItem> <Stack direction='row' spacing={1} alignItems='center'> - <TwitterIcon fontSize='inherit' /> + <XIcon fontSize='inherit' /> <Link href='https://twitter.com/Kishiwada_it' target='_blank' rel='noopener' > - IT部 Twitter + IT部 X (旧Twitter) </Link> </Stack> </ListItem> diff --git a/src/pages/how-to-use.tsx b/src/pages/how-to-use.tsx @@ -1,11 +1,10 @@ -import EventIcon from '@mui/icons-material/Event'; +import CommentIcon from '@mui/icons-material/CommentOutlined'; import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import HomeIcon from '@mui/icons-material/Home'; import InstallMobileIcon from '@mui/icons-material/InstallMobile'; import IosShareIcon from '@mui/icons-material/IosShare'; import MenuIcon from '@mui/icons-material/Menu'; import MoreVertIcon from '@mui/icons-material/MoreVert'; -import NoteAddIcon from '@mui/icons-material/NoteAdd'; import { Accordion, AccordionDetails, @@ -46,53 +45,43 @@ const HouToUsePage: NextPage = () => { sx={{ display: 'flex', justifyContent: 'space-evenly', my: 2 }} > <Image - src='/app-example.png' - width={432} - height={768} + src='/app-example1.png' + width={750} + height={1334} style={{ width: 'auto', - height: '50vh', + height: '60vh', border: '1px solid gray', }} alt='時間割ページの表示例' /> </Box> <p> - 時間割ページでは上の画像のように、クラス別に1日ごとに時間割を表示しています。過去5日間と未来1ヶ月間の時間割を表示します。 + 時間割ページでは上の画像のように、クラス別に1日ごとに時間割を表示しています。過去5日間と未来1ヶ月間の時間割を表示します。左右にフリックすることで前後の日付に移動できます。 </p> <p> - 左右にフリックすることで前後の日付に移動できます。 - <EventIcon + 各時限をタップすると、その時間の詳細が開きます。詳細表示では授業場所を確認したり、メモ機能を利用したりできます。臨時変更がある際はメモ機能をお使いください。メモが入力されている場合は{' '} + <CommentIcon fontSize='inherit' style={{ verticalAlign: 'text-bottom' }} - /> - を押すとカレンダーが開き、日付を選択できます。 - </p> - <p> - <NoteAddIcon - fontSize='inherit' - style={{ verticalAlign: 'text-bottom' }} - /> - を押すと授業ごとにメモを入力できます。小テストや提出物、臨時変更の予定など、ご自由にお使いください。メモの内容はブラウザアプリに保存されるため、別のブラウザで開いてもデータは引き継がれません。 + />{' '} + が表示されます。 </p> <p> - その科目名の元となっている曜日時限を{' '} + その時間割の元となっている曜日時限を <Chip component='span' label='金1' size='small' />{' '} のように表示しています。時間割変更がある場合は色が変わって{' '} <Chip component='span' label='金1' size='small' color='warning' />{' '} のように強調表示されます。 </p> - <p> - 左下にデータ更新日を表示しています。タップすると、さらに詳細に1コマずつのデータ更新日時が表示されます。 - </p> </Box> <Box mb={4}> <Typography variant='h3' fontSize={20}> - 表示科目名変更機能（3年生にオススメ！） + マイ時間割機能（3年生にオススメ！） </Typography> <p> - 主に3年生は授業展開が多いため、上の画像のようにいくつもの科目名がスラッシュで区切られて表示され、一部がはみ出て見えないこともあります。 + 主に3年生は授業展開が多いため、いくつもの科目名がスラッシュで区切られて表示され、一部がはみ出て見えないこともあります。 </p> <p> そこで、曜日時限ごとに自分の選択科目を設定し、時間割ページで自分専用の時間割を表示する機能があります。 @@ -101,7 +90,7 @@ const HouToUsePage: NextPage = () => { fontSize='inherit' style={{ verticalAlign: 'text-bottom' }} />{' '} - 内の設定ページから自分の時間割を設定してみては？（まずはこのページを最後までお読みください） + 内の設定ページから自分の時間割を設定してみてください。 </p> <p> ※3年生以外でもお使いいただけます。 @@ -112,7 +101,7 @@ const HouToUsePage: NextPage = () => { <Box mb={4}> <Typography variant='h3' fontSize={20} id='install'> - インストール機能（PWA）と所属クラス機能 + インストール機能（PWA）とマイクラス機能 </Typography> <p> このアプリではPWAという技術を使用しているので、ブラウザで動作するWebアプリでありながら通常のアプリのようにインストールして使うことができます。インストールすると、ホーム画面のアイコンからダイレクトに自分のクラスの時間割を開けるようになります。 @@ -203,7 +192,7 @@ const HouToUsePage: NextPage = () => { アプリへの評価やご意見、ご要望も募集しています。アプリ内の「フィードバック」からぜひご協力ください。 </p> <p> - トップページから各クラスの時間割ページを開けます。「岸高時間割アプリ」を使って快適な高校生活を送ろう！ + トップページから各クラスの時間割ページを開けます。「岸高時間割アプリ」を使って快適な高校生活を送りましょう！ </p> <Button diff --git a/src/pages/index.tsx b/src/pages/index.tsx @@ -1,4 +1,5 @@ import { Box, Typography, Stack, Button } from '@mui/material'; +import Image from 'next/image'; import Head from 'client/components/Head'; import Layout from 'client/components/Layout'; @@ -13,11 +14,20 @@ const Page: NextPage = () => { <> <Head title='トップ' /> <Layout title='トップ'> - <Box px={2} pb={2} width={1} height='fit-content'> + <Box p={2} height='fit-content'> + <Image + src='/main_visual.png' + width={1920} + height={1080} + style={{ width: '100%', height: 'auto', borderRadius: '3px' }} + alt='岸高時間割アプリ メインビジュアル' + /> + <p> - 岸和田高校IT部制作「岸高時間割アプリ」です。詳細は「 + 岸和田高校IT部が制作・運営している「岸高時間割アプリ」です。詳細は「 <Link href='/about'>このアプリについて</Link> - 」をご覧ください。 + 」をご覧ください。使い方や機能の説明については「 + <Link href='/how-to-use'>使い方</Link>」をご覧ください。 </p> <WarningOfUse />
