Merge pull request #2 from UniMagic-VRC/feat/setup-env

環境構築についてのドキュメントを記載

docs/中枢向け情報/01_環境構築/01_通常版.md

@@ -0,0 +1,121 @@
+---
+sidebar_position: 1
+---
+
+# 通常版
+
+完全にまっさらな Windows 環境の人向けに書いています
+
+Mac 環境の人は適時読み替えてください
+
+また、すでに完了している手順がある場合は適時手順を飛ばしてください
+
+## 対象者
+
+- ドキュメントを更新しようとしている
+- 実際にどのように表示されるかを確認したい
+
+## nodejs のインストール
+
+docusaurus は nodejs というツールを用いてページを生成しています
+
+そのため、実際のプレビューを表示するには nodejs のインストールが必要になります
+
+### nvm のインストール
+
+nodejs は頻繁に更新されていますが、自動更新機能などは提供されていません
+
+そのため、nodejs のバージョン管理を行う nvm というツールを導入します
+
+1. インストーラーのダウンロード  
+   [Releases · coreybutler/nvm-windows](https://github.com/coreybutler/nvm-windows/releases)  
+   上記リンクを開き、 `Latest` 表示のあるリリースの Assets から `nvm-setup.exe` をダウンロードします
+
+2. インストール  
+   ダウンロードが済んだらインストーラーを実行し、指示に従ってインストールを完了します
+
+### nodejs のインストール
+
+本題の nodejs をインストールします
+
+管理者権限のコマンドプロンプトまたは PowerShell を開き、
+
+```
+nvm install lts
+nvm use lts
+```
+
+を実行します
+
+完了したら
+
+```
+node -v
+npm -v
+```
+
+を実行し、バージョン番号が正しく表示されることを確認します
+
+## VSCode のインストール
+
+1. インストーラーのダウンロード
+   [Download Visual Studio Code - Mac, Linux, Windows](https://code.visualstudio.com/download)  
+   上記リンクから`Windows`を押し、ダウンロードをします
+2. インストール
+   ダウンロードが済んだらインストーラーを実行し、指示に従ってインストールを完了します
+
+## GitHub Desktop のセットアップ
+
+### インストール
+
+1. インストーラーのダウンロード
+   [GitHub Desktop | Simple collaboration from your desktop](https://github.com/apps/desktop?ref_cta=download+desktop&ref_loc=installing+github+desktop&ref_page=docs)  
+   上記リンクを開き、Download now を押し、遷移先のページからインストーラーをダウンロードします
+2. インストール
+   ダウンロードが済んだらインストーラーを実行し、指示に従ってインストールを完了します
+
+### 認証
+
+初回起動時に、GitHub へのログインを促されるので認証をおこないます
+
+1. `Sign in to GitHub.com`ボタンを押します
+2. ブラウザが開くので、アカウントが合っていることを確認して認証を行います  
+   ブラウザから外部アプリを開く許可を求められて場合は許可してください
+3. `Configure Git`画面になったらそのまま`Finish`ボタンを押して完了します
+
+## リポジトリのクローン
+
+手元のパソコンでドキュメントを編集するために、データをダウンロードします
+
+1. `Clone a Repository from the Internet`を押します
+2. `UniMagic-VRC`内の対象リポジトリを選択し、`Clone`を押します
+3. `Open in Visual Studio Code`を押し、VSCode を開きます
+
+## VSCode の設定
+
+リポジトリのクローンの章で VSCode でプロジェクトを開いている前提で話を進めます
+
+1. 推奨された拡張機能をインストールすることを促されるので、インストールします
+
+   > Do you want to install the recommended extensions from Prettier, Microsoft and others for this repository?  
+   > [ Install ] / [ Show Recommendations ]
+
+   で Install を選択してください
+
+2. インストールが完了したら表示言語の切り替えを促されるので、切り替えます
+
+   > Would you like to change Visual Studio Code's display language to Japanese and restart?  
+   > [ Change Language and Restart ]
+
+   で Change Language and Restart を選択してください
+
+## 依存関係のインストール
+
+1. 画面左のタブから「実行とデバッグ(再生ボタンと虫のアイコン)」を開きます
+2. 上部、再生ボタンの右のドロップダウンから「依存関係のインストール」を選択し、再生ボタンを押します
+   実行中は画面下部の色が変わり、完了すると元に戻ります
+3. 完了したら、先程のドロップダウンから「Docusaurus を起動」を選択し、再生ボタンを押します
+4. 開いたブラウザ上で正しくプレビューが表示されることを確認します
+
+環境構築は以上で完了です  
+お疲れ様でした

docs/中枢向け情報/01_環境構築/02_簡易版.md

@@ -0,0 +1,14 @@
+---
+sidebar_position: 2
+---
+
+# 簡易版
+
+これは環境構築がめんどくさい!!!という人向けの超簡易版環境構築ドキュメントです
+
+1. 編集したいリポジトリを開く
+2. 「.」(ピリオド)キーを押す
+
+以上!
+
+プレビューはマークダウンファイルを開いたうえで右上にある見開きの本に虫眼鏡を合わせたようなアイコンをクリックすると表示できます

docs/中枢向け情報/01_環境構築/_category_.json

@@ -0,0 +1,8 @@
+{
+  "label": "環境構築",
+  "position": 1,
+  "link": {
+    "type": "generated-index",
+    "description": "環境構築用ドキュメントです"
+  }
+}

docs/中枢向け情報/01_ページの作成.md → docs/中枢向け情報/02_Docusaurusの使い方/01_ページの作成.md

@@ -4,14 +4,14 @@ sidebar_position: 1
 
 # ページの作成
 
-Docusaurus環境下では、`pagename.md`という形のファイル(`.md` ファイル)でページを作成します。
+Docusaurus 環境下では、`pagename.md`という形のファイル(`.md` ファイル)でページを作成します。
 ここで、`.md`は、マークダウンファイルを表す拡張子です。
 
 ここでは、実際のページの作り方を解説します。
 
 ## Create your first Markdown Page
-例えば、このページ(ページの作成)を作ることを考えます。
 
+例えば、このページ(ページの作成)を作ることを考えます。
 
 `docs/中枢向け情報/ページの作成.md`を作成します。
 
@@ -21,4 +21,4 @@ Docusaurus環境下では、`pagename.md`という形のファイル(`.md` フ
 これは新しいドキュメントで、内容はないようです。
 ```
 
-ページを作った後、自分でページをビルドすれば内容を確認できます。ビルド方法は後述します。
+ページを作った後、自分でページをビルドすれば内容を確認できます。ビルド方法は後述します。

docs/中枢向け情報/02_ドキュメントの作成.md → docs/中枢向け情報/02_Docusaurusの使い方/02_ドキュメントの作成.md

@@ -21,16 +21,16 @@ sidebar_position: 2
 
 # ドキュメントの作成
 
-このとき、サイドバーの見出しは、`#`1つから始まる大見出し(今回なら"ドキュメントの作成")になります。
+このとき、サイドバーの見出しは、`#`1 つから始まる大見出し(今回なら"ドキュメントの作成")になります。
 ```
 
 `sidebar_position`が増えたことに注意してください。これは、"このフォルダ内において、このページは何番目に表示されるか"を意味します。
 
-今回の場合、2番目です。ちなみに、1番目は"ページの作成"ページでした。
+今回の場合、2 番目です。ちなみに、1 番目は"ページの作成"ページでした。
 
 ## サイドバーとグループ化
 
-先述した通り、サイドバーに表示される順番は`sidebar_position`の番号順、サイドバーに表示される見出しは`#`1つから始まる大見出しになります。
+先述した通り、サイドバーに表示される順番は`sidebar_position`の番号順、サイドバーに表示される見出しは`#`1 つから始まる大見出しになります。
 
 ここで、`sidebar_position`の番号は連番である必要はありません。例えば、このページの`sidebar_position`を`100`に設定することも可能です。
 
@@ -39,16 +39,18 @@ sidebar_position: 2
 1. フォルダを作ります。名前は分かればなんでも構いません。
 1. フォルダ内に、同じグループに入れたいページのファイルを全て入れます。
 1. フォルダ内に、`_category.json`を作ります。内容は以下のようにします。
+
 ```md title="_category.json"
 {
-  "label": "グループの名称",
-  "position": [任意の整数 sidebar_positionと同じ感じです],
-  "link": {
-    "type": "generated-index",
-    "description": "ここにはグループの説明を入れます。"
-  }
+"label": "グループの名称",
+"position": [任意の整数 sidebar_position と同じ感じです],
+"link": {
+"type": "generated-index",
+"description": "ここにはグループの説明を入れます。"
+}
 }
 ```
+
 これで、各ページをまとめたグループが完成し、ドキュメントとして整理した形にすることができます。
 
-サイドバーを手動でカスタムする方法もありますが、ここでは割愛します。
+サイドバーを手動でカスタムする方法もありますが、ここでは割愛します。

docs/中枢向け情報/02_Docusaurusの使い方/03_ページの確認と変更の反映.md

@@ -0,0 +1,24 @@
+---
+sidebar_position: 3
+---
+
+# ページの確認と変更の反映
+
+Docusaurus にはサイトを生成する機能が搭載されています。ここでは、ローカルでサイトを生成して確認する方法と、変更をオンライン上のサイトへ反映する方法を説明します。
+
+## ビルドしてページを確認する
+
+コマンドプロンプトを起動し、Docusaurus 全体のディレクトリまで移動します。以下のコマンドを打ちます。
+
+```bash
+npx docusaurus start
+```
+
+ブラウザが開き、ページを確認することができます。この状態でページの内容を変更すると、リアルタイムに変更された部分を確認しながら編集ができます。
+
+## 変更の反映
+
+変更をオンライン上のサイトへ反映する時は、GitHub の該当リポジトリの master ブランチに Push してください。
+:::tip[GitHub の運用について]
+後でちゃんと書くつもりです。
+:::

docs/中枢向け情報/04_使用可能な各種記法.md → docs/中枢向け情報/02_Docusaurusの使い方/04_使用可能な各種記法.md

@@ -5,19 +5,20 @@ sidebar_position: 4
 # 使用可能な各種記法
 
 ## マークダウン記法
-Docusaurusでは、マークダウン記法が使えます。マークダウン記法の使い方については、[Markdown記法 サンプル集](https://qiita.com/tbpgr/items/989c6badefff69377da7)をご覧ください。ここでも、簡単なものについては紹介します。
 
-:::tip Notionの活用
+Docusaurus では、マークダウン記法が使えます。マークダウン記法の使い方については、[Markdown 記法 サンプル集](https://qiita.com/tbpgr/items/989c6badefff69377da7)をご覧ください。ここでも、簡単なものについては紹介します。
 
-実際にマークダウン記法を覚える必要はほとんどありません。なぜなら、多くのマークダウン記法はNotionからのコピペに対応しているからです。
+:::tip Notion の活用
 
-マークダウン記法を覚えるのが面倒な人や、そこに時間を割きたくない人は、一度ローカル環境のNotionでページを作り、そこから各ページにコピペをすることでマークダウン記法を使うことができます。
+実際にマークダウン記法を覚える必要はほとんどありません。なぜなら、多くのマークダウン記法は Notion からのコピペに対応しているからです。
+
+マークダウン記法を覚えるのが面倒な人や、そこに時間を割きたくない人は、一度ローカル環境の Notion でページを作り、そこから各ページにコピペをすることでマークダウン記法を使うことができます。
 
 :::
 
-## Docusaurusの記法
+## Docusaurus の記法
 
-Docusaulusは、マークダウン記法に加えて専用の記法を持っています。もちろん、併用可能です。
+Docusaulus は、マークダウン記法に加えて専用の記法を持っています。もちろん、併用可能です。
 
 実際の書き方は、このページのファイル`04_使用可能な各種記法.md`の中身をご覧ください。
 
@@ -69,7 +70,7 @@ Markdown text with [links](./hello.md)
 ```md
 :::tip My tip
 
-tipを書くことができます。便利でしょう？
+tip を書くことができます。便利でしょう？
 
 :::
 
@@ -82,12 +83,12 @@ tipを書くことができます。便利でしょう？
 
 :::tip My tip
 
-tipを書くことができます。便利でしょう？
+tip を書くことができます。便利でしょう？
 
 :::
 
 :::danger Take care
 
 夏は熱中症に、冬は風邪に気を付けましょう。
 
-:::
+:::

docs/中枢向け情報/02_Docusaurusの使い方/_category_.json

@@ -0,0 +1,8 @@
+{
+  "label": "Docusaurusの使い方",
+  "position": 2,
+  "link": {
+    "type": "generated-index",
+    "description": "運営中枢向けの、主にドキュメントを書くために必要な情報です。将来的に運営中枢向けの独自Information Hubへ移管します。情報の翻訳にあたり、いくつかの不要な情報を省いています。必要に応じて、Docusaulus公式の情報も確認してください。"
+  }
+}