how-to-use.tsx (8869B)
1 import CommentIcon from '@mui/icons-material/CommentOutlined'; 2 import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; 3 import HomeIcon from '@mui/icons-material/Home'; 4 import InstallMobileIcon from '@mui/icons-material/InstallMobile'; 5 import IosShareIcon from '@mui/icons-material/IosShare'; 6 import MenuIcon from '@mui/icons-material/Menu'; 7 import MoreVertIcon from '@mui/icons-material/MoreVert'; 8 import { 9 Accordion, 10 AccordionDetails, 11 AccordionSummary, 12 Box, 13 Button, 14 Chip, 15 Divider, 16 Typography, 17 } from '@mui/material'; 18 import Image from 'next/image'; 19 20 import Head from 'client/components/Head'; 21 import Layout from 'client/components/Layout'; 22 import { NextLinkComposed } from 'client/components/Link'; 23 import WarningOfUse from 'client/components/WarningOfUse'; 24 25 import type { NextPage } from 'next'; 26 27 const HouToUsePage: NextPage = () => { 28 return ( 29 <> 30 <Head title='使い方' /> 31 <Layout title='使い方'> 32 <Box px={2} mb='50vh' width={1} height='fit-content'> 33 <p> 34 IT部制作「岸高時間割アプリ」は、時間割変更（曜日変更）が反映されたクラスごとの時間割表を表示するアプリです。初めてお使いの方は、まずは下記の「利用上の注意・免責事項」をお読みください。 35 </p> 36 <WarningOfUse /> 37 <p> 38 上記の内容を理解し、了承された方のみこのアプリをお使いください。以下にアプリの使い方が続きます。 39 </p> 40 <Box mb={4}> 41 <Typography variant='h3' fontSize={20}> 42 時間割ページの使い方 43 </Typography> 44 <Box 45 sx={{ display: 'flex', justifyContent: 'space-evenly', my: 2 }} 46 > 47 <Image 48 src='/app-example1.png' 49 width={750} 50 height={1334} 51 style={{ 52 width: 'auto', 53 height: '60vh', 54 border: '1px solid gray', 55 }} 56 alt='時間割ページの表示例' 57 /> 58 </Box> 59 <p> 60 時間割ページでは上の画像のように、クラス別に1日ごとの時間割を表示しています。過去5日間と未来1ヶ月間の時間割を表示します。左右にフリックすることで前後の日付に移動できます。 61 </p> 62 <p> 63 各時限をタップすると、その時間の詳細が開きます。詳細表示では授業場所を確認したり、臨時変更情報を登録したり、メモ機能を利用したりできます。臨時変更やメモはブラウザ内に保存され、他の利用者には共有されません。メモが入力されている場合は、科目名の横に{' '} 64 <CommentIcon 65 fontSize='inherit' 66 style={{ verticalAlign: 'text-bottom' }} 67 />{' '} 68 が表示されます。 69 </p> 70 <p> 71 その時間割の元となっている曜日時限を 72 <Chip component='span' label='金1' size='small' />{' '} 73 のように表示しています。時間割変更がある場合は色が変わって{' '} 74 <Chip component='span' label='金1' size='small' color='warning' />{' '} 75 <Chip 76 component='span' 77 label='臨時' 78 size='small' 79 color='warning' 80 />{' '} 81 のように強調表示されます。 82 </p> 83 </Box> 84 85 <Box mb={4}> 86 <Typography variant='h3' fontSize={20}> 87 マイ時間割機能（3年生にオススメ！） 88 </Typography> 89 <p> 90 主に3年生は授業展開が多いため、いくつもの科目名がスラッシュで区切られて表示され、一部がはみ出て見えないこともあります。 91 </p> 92 <p> 93 そこで、曜日時限ごとに自分の選択科目を設定し、時間割ページで自分専用の時間割を表示する機能があります。 94 あとで右上{' '} 95 <MenuIcon 96 fontSize='inherit' 97 style={{ verticalAlign: 'text-bottom' }} 98 />{' '} 99 内の設定ページから自分の時間割を設定してみてください。 100 </p> 101 <p> 102 ※3年生以外でもお使いいただけます。 103 <br /> 104 ※設定した科目名はブラウザアプリに保存されるため、別のブラウザで開いてもデータは引き継がれません。 105 </p> 106 </Box> 107 108 <Box mb={4}> 109 <Typography variant='h3' fontSize={20} id='install'> 110 インストール機能（PWA）とマイクラス機能 111 </Typography> 112 <p> 113 このアプリではPWAという技術を使用しているので、ブラウザで動作するWebアプリでありながら通常のアプリのようにインストールして使うことができます。インストールすると、ホーム画面のアイコンからダイレクトに自分のクラスの時間割を開けるようになります。 114 </p> 115 116 <Accordion> 117 <AccordionSummary expandIcon={<ExpandMoreIcon />}> 118 インストール方法 (iPhone) 119 </AccordionSummary> 120 <AccordionDetails> 121 <ol> 122 <li> 123 このアプリをSafariで開く 124 <Box ml='2em'> 125 QRコードリーダーで開いている場合は、右下のアイコンをタップしてSafariで開く。Safari以外のブラウザで開いている場合はURLをコピー&ペーストするなどしてSafariで開き直す。 126 </Box> 127 </li> 128 <li> 129 共有メニュー{' '} 130 <IosShareIcon 131 fontSize='inherit' 132 style={{ verticalAlign: 'text-bottom' }} 133 />{' '} 134 を開く 135 </li> 136 <li>「ホーム画面に追加」をタップ</li> 137 <li>ポップアップ内の「追加」をタップ</li> 138 </ol> 139 </AccordionDetails> 140 </Accordion> 141 142 <Accordion> 143 <AccordionSummary expandIcon={<ExpandMoreIcon />}> 144 インストール方法 (Android) 145 </AccordionSummary> 146 <AccordionDetails> 147 <ol> 148 <li> 149 このアプリをChromeで開く 150 <Box ml='2em'> 151 上部のアドレスバーをタップして編集できる状態になっていればOKです。Googleレンズのアプリ内ブラウザで開いているなどの場合は、メニュー 152 <MoreVertIcon 153 fontSize='inherit' 154 style={{ verticalAlign: 'text-bottom' }} 155 /> 156 から「Chromeで開く」をタップ。その他の場合でも頑張ってChromeで開いてください。 157 </Box> 158 </li> 159 <li> 160 メニュー{' '} 161 <MoreVertIcon 162 fontSize='inherit' 163 style={{ verticalAlign: 'text-bottom' }} 164 />{' '} 165 内の「 166 <InstallMobileIcon 167 fontSize='inherit' 168 style={{ verticalAlign: 'text-bottom' }} 169 /> 170 アプリをインストール」をタップ 171 </li> 172 <li>ダイアログ内の「インストール」をタップ</li> 173 </ol> 174 </AccordionDetails> 175 </Accordion> 176 177 <p> 178 アプリをインストールした状態で時間割ページを開いて数秒すると「所属クラスに設定」ボタンが表示されます。設定後、ホーム画面のアイコンから起動すると、設定したクラスの時間割ページが開きます。 179 </p> 180 181 <p> 182 ちなみに、表示のライトモードとダークモードは右上{' '} 183 <MenuIcon 184 fontSize='inherit' 185 style={{ verticalAlign: 'text-bottom' }} 186 />{' '} 187 内の設定ページで切り替え可能です。 188 </p> 189 </Box> 190 191 <Divider /> 192 193 <p>説明は以上で終わりです。</p> 194 <p> 195 アプリの不具合や時間割の間違いを見つけた場合は、アプリ内の「不具合・誤情報報告」のGoogleフォームに報告をお願いします。 196 </p> 197 <p> 198 アプリへの評価やご意見、ご要望も募集しています。アプリ内の「フィードバック」からぜひご協力ください。 199 </p> 200 <p> 201 トップページから各クラスの時間割ページを開けます。「岸高時間割アプリ」を使って快適な高校生活を送りましょう！ 202 </p> 203 204 <Button 205 component={NextLinkComposed} 206 to='/' 207 variant='contained' 208 startIcon={<HomeIcon />} 209 sx={{ mx: 2, mb: 2 }} 210 > 211 トップページへ 212 </Button> 213 214 <Divider /> 215 216 <p>これからどうすれば良いのか迷った人向け↓</p> 217 <ol> 218 <li>アプリをインストールする</li> 219 <li>所属クラスを設定する</li> 220 <li>いろいろ触ってみる</li> 221 <li>自分の科目名を登録する</li> 222 </ol> 223 </Box> 224 </Layout> 225 </> 226 ); 227 }; 228 229 export default HouToUsePage;