docs: ヘルプとライセンスを追加

README.md

@@ -1,46 +1,74 @@
-# expanded-shogi-board
+# Expanded-Shogi-Board (ちょっと便利な将棋盤)
 
-This template should help get you started developing with Vue 3 in Vite.
+Copyright (C) 2023 Hideaki Sakai
+See the end of the file for license conditions.
+ライセンス条件に関しては、このファイルの最後を見てください。
 
-## Recommended IDE Setup
+## 概要
+「**ちょっと便利な将棋盤**」は、言葉の通り、実際の将棋盤よりもちょっと便利に使える将棋盤を目指して開発したものです。盤の右側に表示されている、盤と同じ色の縦長の領域が先手の駒台、左側に表示されているのが後手の駒台です。盤の下側または右側に表示されているのが、モードを切り替えるボタンと、盤の向きを切り替えるボタンです。 
+[Vue.js](https://ja.vuejs.org/) (TypeScript) と[SVG](https://developer.mozilla.org/ja/docs/Web/SVG)を利用して開発しました。
 
-[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
+[GitHub Pages のウェブページ](https://hideboz.github.io/Expanded-Shogi-Board/) でご試用いただけます。
 
-## Type Support for `.vue` Imports in TS
+![ちょっと便利な将棋盤のスクリーンショット](images/expanded-shogi-board-screenshot.png)
 
-TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
-
-If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
-
-1. Disable the built-in TypeScript Extension
-    1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette
-    2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
-2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
-
-## Customize configuration
-
-See [Vite Configuration Reference](https://vitejs.dev/config/).
-
-## Project Setup
+## セットアップ方法
+セットアップするには、以下のコマンドを実行してください。
 
 ```sh
 npm install
 ```
 
-### Compile and Hot-Reload for Development
+## 開発用サーバの起動方法
+開発用サーバを起動して動作を確認するには、以下のコマンドを実行して、表示されるURLにブラウザからアクセスしてください。
 
 ```sh
 npm run dev
 ```
 
-### Type-Check, Compile and Minify for Production
+## ビルド方法
+ビルドするには、以下のコマンドを実行してください。
+`/dist`ディレクトリにビルドされます。
 
 ```sh
 npm run build
 ```
 
-### Lint with [ESLint](https://eslint.org/)
+## 操作方法
 
-```sh
-npm run lint
-```
+### 基本操作
+
+駒を動かすには、まず動かしたい駒をクリックした後、動かす先をクリックしてください。
+「**編集モード**」と「**操作モード**」の切り替えボタンをクリックすると、モードを切り替えることができます。「**通常の向き**」と「**先後逆向き**」の切り替えボタンをクリックすると、将棋盤の向きを逆向きにしたり、戻したりすることができます。
+
+### 編集モード
+
+「**編集モード**」は、盤面を好きなように編集したいときに使うモードです。「**編集モード**」に切り替えると、盤のすぐ下に「使わない駒置き場」が表示されるようになります。駒を盤上で動かすだけでなく、盤、先手と後手の駒台、使わない駒置き場の間で好きに移動することができます。また、盤上の駒を右クリックすると、成りにしたり、駒の向きを先手後手逆にしたり、王と玉を入れ替えたりすることができます。
+
+### 操作モード
+
+「**操作モード**」に切り替えると、「**⇐ 戻る**」と「**進む ⇒**」ボタンが表示されるようになります。「**操作モード**」においては、実際に将棋を指すときと同様に、駒を動かせるのは、盤上で動かすこと、相手の駒を取ること、駒台の駒を打つことのみになります。また、駒が成れる場合は、自動的に成りか不成かを尋ねるメニューが表示されます。「**操作モード**」で駒を動かすと、駒の動きが履歴に保存されて、「**⇐ 戻る**」と「**進む ⇒**」ボタンで履歴を辿ることができます。「**編集モード**」に切り替えると、「**操作モード**」で保存された履歴は削除されlます。
+
+## 謝辞
+駒画像は [Shogi Images](https://sunfish-shogi.github.io/shogi-images/) のものを使用させていただきました。
+
+## ライセンス (License)
+本ソフトウェアはGNUアフェロ一般公衆ライセンスで公開されています。COPYINGを参照してください。
+(This software is released under the GNU Affero General Public License, see COPYING.)
+
+![GNUアフェロ一般公衆ライセンス](images/agplv3-with-text-100x42.png)
+
+This file is part of Expanded-Shogi-Board.
+
+Expanded-Shogi-Board is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Expanded-Shogi-Board is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with Expanded-Shogi-Board.  If not, see <https://www.gnu.org/licenses/>.

help.html

@@ -0,0 +1,82 @@
+<!-- Help page.
+    Copyright (C) 2023 Hideaki Sakai
+    
+    This file is part of Expanded-Shogi-Board.
+    
+    Expanded-Shogi-Board is free software: you can redistribute it and/or modify
+    it under the terms of the GNU Affero General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+    
+    Expanded-Shogi-Board is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU Affero General Public License for more details.
+    
+    You should have received a copy of the GNU Affero General Public License
+    along with Expanded-Shogi-Board.  If not, see <https://www.gnu.org/licenses/>.
+-->
+<!DOCTYPE html>
+<html lang="ja">
+
+<head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ちょっと便利な将棋盤 ヘルプページ</title>
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
+</head>
+
+<body>
+    <div class="container">
+
+        <h1>ちょっと便利な将棋盤 ヘルプページ</h1>
+
+        <main class="mt-5">
+            <h2>概要</h2>
+
+            <p>
+                「ちょっと便利な将棋盤」は、言葉の通り、実際の将棋盤よりもちょっと便利に使える将棋盤を目指して開発したものです。盤の右側に表示されている、盤と同じ色の縦長の領域が先手の駒台、左側に表示されているのが後手の駒台です。盤の下側または右側に表示されているのが、モードを切り替えるボタンと、盤の向きを切り替えるボタンです。
+            </p>
+
+            <h2 class="mt-4">基本操作</h2>
+
+            <p>
+                駒を動かすには、まず動かしたい駒をクリックした後、動かす先をクリックしてください。
+                「<span class="text-primary">編集モード</span>」と「<span
+                    class="text-primary">操作モード</span>」の切り替えボタンをクリックすると、モードを切り替えることができます。
+                「<span class="text-primary">通常の向き</span>」と「<span
+                    class="text-primary">先後逆向き</span>」の切り替えボタンをクリックすると、将棋盤の向きを逆向きにしたり、戻したりすることができます。
+            </p>
+
+            <h2 class="mt-4">編集モード</h2>
+
+            <p>
+                「<span class="text-primary">編集モード</span>」は、盤面を好きなように編集したいときに使うモードです。「<span
+                    class="text-primary">編集モード</span>」に切り替えると、盤のすぐ下に「使わない駒置き場」が表示されるようになります。駒を盤上で動かすだけでなく、盤、先手と後手の駒台、使わない駒置き場の間で好きに移動することができます。また、盤上の駒を右クリックすると、成りにしたり、駒の向きを先手後手逆にしたり、王と玉を入れ替えたりすることができます。
+            </p>
+
+            <h2 class="mt-4">操作モード</h2>
+
+            <p>
+                「<span class="text-primary">操作モード</span>」に切り替えると、「<span class="text-primary">&DoubleLeftArrow; 戻る</span>」と「<span class="text-primary">進む
+                &DoubleRightArrow;</span>」ボタンが表示されるようになります。「<span
+                    class="text-primary">操作モード</span>」においては、実際に将棋を指すときと同様に、駒を動かせるのは、盤上で動かすこと、相手の駒を取ること、駒台の駒を打つことのみになります。また、駒が成れる場合は、自動的に成りか不成かを尋ねるメニューが表示されます。「<span
+                    class="text-primary">操作モード</span>」で駒を動かすと、駒の動きが履歴に保存されて、「<span class="text-primary">&DoubleLeftArrow; 戻る</span>」と「<span class="text-primary">進む
+                &DoubleRightArrow;</span>」ボタンで履歴を辿ることができます。「<span class="text-primary">編集モード</span>」に切り替えると、「<span
+                    class="text-primary">操作モード</span>」で保存された履歴は削除されlます。
+            </p>
+        </main>
+
+        <footer>
+        <p class="mt-5 text-secondary">Copyright (C) 2023 Hideaki Sakai</p>
+        </footer>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
+        integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
+        crossorigin="anonymous"></script>
+</body>
+
+</html>

index.html

@@ -12,8 +12,9 @@
 
 <body>
     <div id="app"></div>
-    <a href="https://twitter.com/crestboz" target="_blank">連絡先</a>
-    <a href="https://github.com/hideboz/free-shogi-board-ts" target="_blank">Source</a>
+    <a href="https://github.com/hideboz/expanded-shogi-board" target="_blank">Source</a>
+    <a href="https://twitter.com/hideaki_sakai" target="_blank">連絡先</a>
+    <a href="help.html" target="_blank">ヘルプ</a>
 
     <script type="module" src="/src/main.ts"></script>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"

src/components/TheBoard.vue

@@ -513,16 +513,16 @@ onMounted(() => {
                     <div class="btn-group my-2 mx-1" role="group" aria-label="Second group">
                         <input @click="setDirection(true)" type="radio" class="btn-check" name="btnradioDirection" id="btnradio3"
                             autocomplete="off" checked>
-                        <label class="btn btn-outline-primary" for="btnradio3">通常</label>
+                        <label class="btn btn-outline-primary" for="btnradio3">通常の向き</label>
 
                         <input @click="setDirection(false)" type="radio" class="btn-check" name="btnradioDirection" id="btnradio4"
                             autocomplete="off">
-                        <label class="btn btn-outline-primary" for="btnradio4">先後逆 &circlearrowleft;</label>
+                        <label class="btn btn-outline-primary" for="btnradio4">先後逆向き</label>
                     </div>
 
                 </div>
 
-                <div v-if="!editFlag" class="mb-2">
+                <div v-if="!editFlag" class="my-2">
                     <button :disabled="!moveList.hasBackward()" type="button" class="btn btn-primary mx-1"
                         @click="backwardHistory">&DoubleLeftArrow; 戻る</button>
                     <button :disabled="!moveList.hasForward()" type="button" class="btn btn-primary mx-1"

vite.config.ts

@@ -1,5 +1,5 @@
 import { fileURLToPath, URL } from 'node:url'
-
+import { resolve } from 'path'
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 
@@ -15,5 +15,14 @@ export default defineConfig({
         alias: {
             '@': fileURLToPath(new URL('./src', import.meta.url))
         }
-    }
+    },
+
+    build: {
+        rollupOptions: {
+            input: {
+                main: resolve(__dirname, 'index.html'),
+                help: resolve(__dirname, 'help.html'),
+            },
+        },
+    },
 })