Merge pull request #990 from utelecon/202403-wifi-structure

modify structure of utokyo_wifi/index page
utelecon · Oct 31, 2024 · 4214021 · 4214021
2 parents 68a172e + edce83d
commit 4214021
Show file tree

Hide file tree

Showing 11 changed files with 88 additions and 123 deletions.
diff --git a/src/components/en/systems/utokyo_wifi/Apply.mdx b/src/components/en/systems/utokyo_wifi/Apply.mdx
@@ -7,7 +7,7 @@ import ApplyHelpMFA from "./ApplyHelpMFA.mdx";
 
 {/**
   * @typedef {object} Props
-  * @property {boolean} support
+  * @property {boolean} [support]
   * @property {boolean} [blockLink]
   * @property {boolean} [inlineHelp]
   * @property {boolean} [utasOnly]

diff --git a/src/components/en/systems/utokyo_wifi/Connect.mdx b/src/components/en/systems/utokyo_wifi/Connect.mdx
@@ -2,20 +2,24 @@ import Help from "@components/utils/Help.astro";
 
 {/**
   * @typedef {object} Props
-  * @property {boolean} support
-  * @property {string} deviceDescription
+  * @property {boolean} [support]
   * @property {string} applyStep
   * @property {JSX.Element} connectConfiguration
   */}
 
-- This process can only be done in the place where UTokyo Wi-Fi (Wi-Fi with SSID `0000UTokyo`) is visible on the Wi-Fi setting menu of your own devices.
+This process can only be done in the place where UTokyo Wi-Fi (Wi-Fi with SSID `0000UTokyo`) is visible on the Wi-Fi setting menu of your own devices.
+{:.additional-info}
 
-1. Select `0000UTokyo` on the Wi-Fi connection settings screen of {props.deviceDescription}.
+1. Select `0000UTokyo` on the Wi-Fi connection settings screen of the device you want to connect.
 2. Enter the user ID and password of your UTokyo Wi-Fi account (not of your UTokyo Account). You can find your user ID and password in the notification email you received in {props.applyStep}. If you have just finished your application, you can also find them on the application completion screen of the account menu.
 3. Once you establish a connection, you can use it just like any normal Wi-Fi.
 
-- When connecting, you may be asked to verify your certificate or to enter the information described in the {props.connectConfiguration}.
-- Please refer to [ECCS Tutor’s page](https://www.sodan.ecc.u-tokyo.ac.jp/en/faq/utokyo-wifi-en/) as well if you are unsure. There are detailed connection instructions for each device. You may also refer to [the "User's Guide" on the page of the Wi-Fi system called "eduroam"](https://www.eduroam.jp/for_users/), which has a similar connection method (replace `eduroam` with UTokyo Wi-Fi SSID when you read the page).
+When connecting, you may be asked to verify your certificate or to enter the information described in the {props.connectConfiguration}.
+{:.additional-info}
+
+Please refer to [ECCS Tutor’s page](https://www.sodan.ecc.u-tokyo.ac.jp/en/faq/utokyo-wifi-en/) as well if you are unsure. There are detailed connection instructions for each device. You may also refer to [the "User's Guide" on the page of the Wi-Fi system called "eduroam"](https://www.eduroam.jp/for_users/), which has a similar connection method (replace `eduroam` with UTokyo Wi-Fi SSID when you read the page).
+{:.additional-info}
+
 <Help lang="en" support={props.support}>
   - If the signal is weak, the connection may be interrupted. Try different locations or times of the day.
   - When you enter your user ID, please include the alphabetical part as well.

diff --git a/src/components/en/systems/utokyo_wifi/index.mdx b/src/components/en/systems/utokyo_wifi/index.mdx
@@ -2,53 +2,11 @@ import If from "@components/utils/If.astro";
 import Apply from "./Apply.mdx";
 import Connect from "./Connect.mdx";
 
-{/**
-  * @typedef {object} Props
-  * @property {import("@components/types").Variant} variant
-  * @property {boolean} [important]
-  */}
-
-<If cond={props.variant === "oc"}>
-  - **Task: Apply for an account**
-    <Apply
-      variant="oc"
-      utasOnly
-      support
-      jouhouSecurity= {<a href="/en/utokyo_wifi/#jouhou-security">"Information Security Education" section on UTokyo Wi-Fi page</a>}
-    />
-  - **Task: Try connecting**
-    <Connect
-      deviceDescription="the device you want to connect"
-      applyStep="the step above"
-      connectConfiguration={<a href="/en/utokyo_wifi/#connect-configuration">"Connect Configuration" section on UTokyo Wi-Fi page</a>}
-      support
-    />
-
-
-  <Fragment slot="else">
-    ### Step 1: Check the devices to be used
-
-      Laptops, smartphones, and tablets can generally connect to UTokyo Wi-Fi. However, other types of electronic devices and older devices may not be able to connect. For example, devices that do not support WPA2-Enterprise cannot be connected. Please check for updates to the OS and drivers of your devices and update them appropriately before connecting to UTokyo Wi-Fi.
-
-    ### Step 2: Apply for a UTokyo Wi-Fi Account
-
-       In order to use UTokyo Wi-Fi, a UTokyo Wi-Fi account must be issued each academic year. In this “Step 2”, we will explain the procedure for applying for a UTokyo Wi-Fi account.
-
-      You can apply for your own account using the “UTokyo Wi-Fi Account Menu”. The user ID and password for your account can be viewed on the “UTokyo Wi-Fi Account Menu” screen only immediately after submitting application, and you will also be notified by email. Please note that you can use your issued UTokyo Wi-Fi account to connect to UTokyo Wi-Fi on multiple devices.
-
-      <Apply
-        blockLink
-        inlineHelp
-        jouhouSecurity={<><a href="#jouhou-security">"Information Security Education"</a> section</>}
-      />
-
-    ### Step 3: Connect to UTokyo Wi-Fi
-
-      <Connect
-        deviceDescription="the device you checked in Step 1"
-        applyStep="Step 2"
-        connectConfiguration={<><a href="#connect-configuration">"Connect Configuration" section</a> section below</>}
-      />
-    {:.procedure.gap}
-  </Fragment>
-</If>
+- **Task: Apply for an account**
+  <Apply utasOnly support />
+- **Task: Try connecting**
+  <Connect
+    applyStep="the step above"
+    connectConfiguration={<a href="/en/utokyo_wifi/#connect-configuration">"Connect Configuration" section on UTokyo Wi-Fi page</a>}
+    support
+  />
diff --git a/src/components/ja/systems/utokyo_wifi/Apply.mdx b/src/components/ja/systems/utokyo_wifi/Apply.mdx
@@ -14,18 +14,16 @@ import ApplyHelpMFA from "./ApplyHelpMFA.mdx";
   * - `./index.mdx`
   * 
   * 利用ページ：
-  * - https://utelecon.adm.u-tokyo.ac.jp/oc/#important
   * - https://utelecon.adm.u-tokyo.ac.jp/oc/#utokyo_wifi
   * - https://utelecon.adm.u-tokyo.ac.jp/utokyo_wifi/#利用開始までの手順
   */}
 
 {/**
   * @typedef {object} Props
-  * @property {boolean} support
+  * @property {boolean} [support]
   * @property {boolean} [inlineHelp]
   * @property {boolean} [blockLink]
   * @property {boolean} [utasOnly]
-  * @property {JSX.Element} jouhouSecurity
   */}
 
 1. <If cond={props.blockLink}>

diff --git a/src/components/ja/systems/utokyo_wifi/Connect.mdx b/src/components/ja/systems/utokyo_wifi/Connect.mdx
@@ -2,14 +2,14 @@ import Help from "@components/utils/Help.astro";
 
 {/**
   * @typedef {object} Props
-  * @property {string} deviceDescription
   * @property {string} applyStep
   * @property {JSX.Element} connectConfiguration
   */}
 
-- この作業はキャンパス内のUTokyo Wi-Fi（SSIDが`0000UTokyo`となっているWi-Fi）が見える場所でしかできません．
+この作業はキャンパス内のUTokyo Wi-Fi（SSIDが`0000UTokyo`となっているWi-Fi）が見える場所でしかできません．
+{:.additional-info}
 
-1. <>{ props.deviceDescription }のWi-Fi接続設定画面で，`0000UTokyo`を選んでください．</>
+1. UTokyo Wi-Fiに接続したい機器のWi-Fi接続設定画面で，`0000UTokyo`を選んでください．
 1. UTokyo Wi-FiアカウントのユーザーIDとパスワードを入力してください（UTokyo Accountではありません）．ユーザーIDとパスワードは，{ props.applyStep }で届く通知メールから確認できるほか，申請直後であればアカウントメニューの申請完了画面にも表示されています．
 1. 接続が完了すれば，後は普通のWi-Fiと同様に使えます．
 

diff --git a/src/components/ja/systems/utokyo_wifi/index.mdx b/src/components/ja/systems/utokyo_wifi/index.mdx
@@ -1,47 +1,11 @@
-import If from "@components/utils/If.astro";
 import Apply from "./Apply.mdx";
 import Connect from "./Connect.mdx";
 
-{/**
-  * @typedef {object} Props
-  * @property {import("@components/types").Variant} variant
-  */}
-
-<If cond={props.variant === "oc"}>
-  - **作業：アカウントを申請する**
-    <Apply
-      variant="oc"
-      utasOnly
-      support
-      jouhouSecurity={<a href="/utokyo_wifi/#jouhou-security">UTokyo Wi-Fiのページの「情報セキュリティ教育」の項</a>}
-    />
-  - **作業：実際に接続する**
-    <Connect
-      deviceDescription="UTokyo Wi-Fiに接続したい機器"
-      applyStep="上の手順"
-      connectConfiguration={<a href="/utokyo_wifi/#connect-configuration">UTokyo Wi-Fiのページの「接続の詳細な設定」</a>}
-      support
-    />
-
-  <Fragment slot="else">
-
-    ### 準備編：UTokyo Wi-Fiアカウントの発行を申請する
-    {:#apply}
-    次の手順に沿って，UTokyo Wi-Fiアカウントの発行を申請してください．ただし，有効なUTokyo Wi-Fiアカウントをすでに持っている場合は，アカウント発行の手順を繰り返す必要はありません．2台目以降の端末をUTokyo Wi-Fiに接続する場合でも，同じアカウントで利用できます．
-      <Apply
-        blockLink
-        inlineHelp
-        jouhouSecurity={<>「<a href="#jouhou-security">情報セキュリティ教育</a>」の項</>}
-      />
-
-    ### 利用編：UTokyo Wi-Fiに実際に接続する
-    {:#connect}
-    次の手順に沿って，UTokyo Wi-Fiに実際に接続してください．
-      <Connect
-        deviceDescription="利用する機器"
-        applyStep="準備編の操作"
-        connectConfiguration={<>下の「<a href="#connect-configuration">接続の詳細な設定</a>」の項</>}
-      />
-    {:.procedure.gap}
-  </Fragment>
-</If>
+- **作業：アカウントの発行を申請する**
+  <Apply utasOnly support />
+- **作業：実際に接続する**
+  <Connect
+    applyStep="上の手順"
+    connectConfiguration={<a href="/utokyo_wifi/#connect-configuration">UTokyo Wi-Fiのページの「接続の詳細な設定」</a>}
+    support
+  />
diff --git a/src/pages/en/utokyo_wifi/index.mdx b/src/pages/en/utokyo_wifi/index.mdx
@@ -5,8 +5,8 @@ breadcrumb:
 slug: utokyo_wifi
 ---
 
-import UTokyoWiFi from "@components/en/systems/utokyo_wifi/index.mdx";
-
+import Apply from "@components/en/systems/utokyo_wifi/Apply.mdx";
+import Connect from "@components/en/systems/utokyo_wifi/Connect.mdx";
 import Mfa100 from "./_Mfa100.mdx";
 
 <Mfa100 />
@@ -58,12 +58,27 @@ UTokyo Wi-Fi is only available to users who have completed the Information Secur
 
 ### Using UTokyo Wi-Fi on Shared Devices
 
-UTokyo Wi-Fi is only available on individuals' own device: **it is prohibited to use UTokyo Wi-Fi on a shared device by more than one person.** Because it allows anyone other than the user who owns a UTokyo Wi-Fi Account to use the service, and it is considered to be lending of an account, which is prohibited by the Terms of Use. However, if the OS user account is set up separately for each individual, and the UTokyo Wi-Fi account can only be used by the person who has obtained it, UTokyo Wi-Fi is able to be used.
+Laptops, smartphones, and tablets can generally connect to UTokyo Wi-Fi. However, other types of electronic devices and older devices may not be able to connect. For example, devices that do not support WPA2-Enterprise cannot be connected. Please check for updates to the OS and drivers of your devices and update them appropriately before connecting to UTokyo Wi-Fi.
+
+Please note that UTokyo Wi-Fi is only available on individuals' own device: **it is prohibited to use UTokyo Wi-Fi on a shared device by more than one person.** Because it allows anyone other than the user who owns a UTokyo Wi-Fi Account to use the service, and it is considered to be lending of an account, which is prohibited by the Terms of Use. However, if the OS user account is set up separately for each individual, and the UTokyo Wi-Fi account can only be used by the person who has obtained it, UTokyo Wi-Fi is able to be used.
 
 ## Steps to start using the service
 {:#initial-setup}
 
-<UTokyoWiFi variant="individual" class="gap" />
+### Preparation: Apply for a UTokyo Wi-Fi Account
+
+In order to use UTokyo Wi-Fi, a UTokyo Wi-Fi account must be issued each academic year. In this “Step 2”, we will explain the procedure for applying for a UTokyo Wi-Fi account.
+
+You can apply for your own account using the “UTokyo Wi-Fi Account Menu”. The user ID and password for your account can be viewed on the “UTokyo Wi-Fi Account Menu” screen only immediately after submitting application, and you will also be notified by email. Please note that you can use your issued UTokyo Wi-Fi account to connect to UTokyo Wi-Fi on multiple devices.
+
+<Apply blockLink inlineHelp />
+
+### Usage: Connect to UTokyo Wi-Fi
+
+<Connect
+  applyStep="the above 'Preparation'"
+  connectConfiguration={<><a href="#connect-configuration">"Connect Configuration" section</a> below</>}
+/>
 
 ### Connect Configuration
 {:#connect-configuration}

diff --git a/src/pages/utokyo_wifi/_IssueAccount.mdx b/src/pages/utokyo_wifi/_IssueAccount.mdx
@@ -1,3 +1,3 @@
-初めて接続する場合や，アカウントの再発行が必要な場合は，UTokyo Wi-Fi全般の説明ページにある**[利用開始までの手順の「準備編」](/utokyo_wifi#apply)**の説明に沿ってアカウントの発行を申請してください．
+初めて接続する場合や，アカウントの再発行が必要な場合は，UTokyo Wi-Fi全般の説明ページにある**[利用開始までの手順の「準備編」](/utokyo_wifi/#apply)**の説明に沿ってアカウントの発行を申請してください．
 
 有効なUTokyo Wi-Fiアカウントをすでに持っている場合は，アカウント発行の手続きを繰り返す必要はありません．2台目以降の端末をUTokyo Wi-Fiに接続する場合でも，同じアカウントで利用できます．
diff --git a/src/pages/utokyo_wifi/_TroubleConnect.mdx b/src/pages/utokyo_wifi/_TroubleConnect.mdx
@@ -1,2 +1,2 @@
 利用にあたって問題が発生した場合は，以下のページを確認してください．問い合わせ方法についても詳しく記載されています．
-<b class="box center">[UTokyo Wi-Fiのトラブルシューティング](./trouble_shooting)</b>
+<b class="box center">[UTokyo Wi-Fiのトラブルシューティング](/utokyo_wifi/trouble_shooting)</b>
diff --git a/src/pages/utokyo_wifi/index.mdx b/src/pages/utokyo_wifi/index.mdx
@@ -4,8 +4,8 @@ breadcrumb:
   title: UTokyo Wi-Fi
 ---
 
-import UTokyoWiFi from "@components/ja/systems/utokyo_wifi/index.mdx"
-
+import Apply from "@components/ja/systems/utokyo_wifi/Apply.mdx"
+import Connect from "@components/ja/systems/utokyo_wifi/Connect.mdx"
 import Mfa100 from "./_Mfa100.mdx";
 
 <Mfa100 />
@@ -16,6 +16,7 @@ UTokyo Wi-Fiは，東京大学の構成員が教育・研究などの大学の
 
 ## 利用の前に
 {:#before-to-use}
+
 ### 利用対象者
 - UTokyo Wi-Fiを利用できるのは，[UTokyo Account](/utokyo_account/)を持つ東京大学の構成員（教職員・学生）です．
     - UTokyo Accountの多要素認証を有効化していない場合，UTokyo Wi-Fiを利用することはできません．詳細は下の「[UTokyo Accountの多要素認証](#mfa)」の項を参照してください．
@@ -41,15 +42,35 @@ UTokyo Wi-Fiの利用にあたっては，情報セキュリティ教育の受
 
 ### 利用できる機器について
 {:#device-condition}
+
 通常のノートパソコンやスマートフォン，タブレットでは基本的にUTokyo Wi-Fiの利用が可能ですが，これ以外の電子機器や古い機器では接続ができないことがあります．例えば，WPA2-Enterprise方式に対応していない機器は接続できません．接続にあたっては，その機器のOSやドライバのアップデートを確認し，適切に更新して利用するようにしてください．
 
-また，UTokyo Wi-Fiは，各個人が占有して利用する機器でのみ利用可能で，**複数人が共用する機器での利用は禁止です**．共用機器での利用は，UTokyo Wi-Fiアカウントを取得した本人以外に利用させることになり，利用規程で禁止されているアカウントの貸与にあたるためです．なお，OSのユーザーアカウントが個人別に設定されていて，UTokyo Wi-Fiアカウントを取得した本人以外が利用できない，という状況であれば問題ありません．
+なお，UTokyo Wi-Fiは，各個人が専有して利用する機器でのみ利用可能で，**複数人が共用する機器での利用は禁止です**．共用機器での利用は，UTokyo Wi-Fiアカウントを取得した本人以外に利用させることになり，利用規程で禁止されているアカウントの貸与にあたるためです．ただし，OSのユーザーアカウントが個人別に設定されていて，UTokyo Wi-Fiアカウントが取得した本人以外に利用できない，という状況であれば問題ありません．
 
 ## 利用開始までの手順
 {:#initial-setup}
 
-<UTokyoWiFi variant="individual" class="gap" />
+### 準備編：UTokyo Wi-Fiアカウントの発行を申請する
+{:#apply}
+
+次の手順に沿って，UTokyo Wi-Fiアカウントの発行を申請してください．ただし，有効なUTokyo Wi-Fiアカウントをすでに持っている場合は，アカウント発行の手順を繰り返す必要はありません．2台目以降の端末をUTokyo Wi-Fiに接続する場合でも，同じアカウントで利用できます．
+
+<Apply blockLink inlineHelp />
+
+### 利用編：UTokyo Wi-Fiに実際に接続する
+{:#connect}
 
+次の手順に沿って，UTokyo Wi-Fiに実際に接続してください．
+
+<Connect
+  applyStep="上の「準備編」"
+  connectConfiguration={<>下の「<a href="#connect-configuration">接続の詳細な設定</a>」の項</>}
+/>
+
+#### 端末の種類ごとの詳しい接続手順
+{:#procedure-by-device-type}
+
+以下の各ページで，端末の種類ごとに詳しい接続手順を説明しています．
 
 #### 端末の種類別の詳しい接続手順
 {:#procedure-by-device-type}
@@ -62,7 +83,7 @@ UTokyo Wi-Fiの利用にあたっては，情報セキュリティ教育の受
 * [設定支援ツールを用いてAndroidでUTokyo Wi-Fiを利用する方法](./android-cat/)
 {:.cards}
 
-### 接続の詳細な設定
+#### 接続の詳細な設定
 {:#connect-configuration}
 
 <table>

diff --git a/src/styles/components/lists.scss b/src/styles/components/lists.scss
@@ -27,18 +27,23 @@ ol {
       margin-bottom: 0;
     }
   }
+
+  & > li > p.additional-info {
+    display: list-item;
+    list-style-type: circle;
+    margin-left: 40px;
+
+    @media (max-width: 640px) {
+      margin-left: 20px;
+    }
+  }
 }
 
 li > ul > li:first-child,
 li > ol > li:first-child {
   margin-top: 0.125em;
 }
 
-li > ul.gap > li:first-child,
-li > ol.gap > li:first-child {
-  margin-top: 0.125em;
-}
-
 @counter-style decimal-bracket {
   system: extends decimal;
   prefix: "[";