To 0.11.0 (#720)

* アプデ情報の情報整理

* GTM情報を書き換える

* デザイン調整

* アプデ情報追加

* update htu

* 辞書読み上げを最初のキャラに

public/howtouse.md

@@ -61,6 +61,8 @@
 
 <img src="res/image7.png" style="max-height: 12rem" alt="左にあるアイコンをクリックしてほかのキャラクターアイコンが表示されている様子。" />
 
+キャラクターの表示順序は「キャラクター並び替え」で変更できます。
+
 ## テキスト欄の並び替え
 
 テキスト欄周辺をドラッグすることで、テキスト欄の順番を並び替えられます。
@@ -201,11 +203,30 @@
 
 <img src="res/toolbar-customize.png" style="max-height: 12rem" alt="ツールバーカスタマイズ画面。" />
 
-## デフォルトスタイル・試聴
+## キャラクターの並び替え・試聴
 
-「設定」の「デフォルトスタイル」で、キャラクターごとのデフォルトのスタイルを変更することができます。  
+「設定」の「キャラクターの並び替え」で、キャラクターの表示順序を変更することができます。
 また、キャラクターごとのサンプルボイスを試聴することもできます。
 
+## デフォルトスタイル
+
+「設定」の「デフォルトスタイル」で、キャラクターごとのデフォルトのスタイルを変更することができます。
+
+## 読み方＆アクセント辞書
+
+難しい単語や新しい単語は正しい読みにならないことがありますが、辞書機能を使って読み方を登録しておくことができます。
+辞書機能は「設定」の「読み方＆アクセント辞書」で利用できます。
+
+読み方＆アクセント辞書画面を開くと、左に登録した単語のリストが表示されます。
+「追加」ボタンで新規に単語を登録できます。
+
+<img src="res/dict01.png" style="max-height: 12rem" alt="読み方＆アクセント辞書の単語リスト画面。" />
+
+「単語」に登録したいテキストを、「読み」にそのテキストの読み方をひらがなかカタカナで入力してください。
+「アクセント調整」で自然になるアクセントを登録できます。
+
+<img src="res/dict02.png" style="max-height: 12rem" alt="単語と読みとアクセントの登録画面。" />
+
 ## オプション
 
 「設定」の「オプション」でいろいろな設定を変更することができます。

public/updateInfos.json

@@ -1,4 +1,31 @@
 [
+  {
+    "version": "0.11.0",
+    "descriptions": [
+      "キャラクター「玄野武宏」「白上虎太郎」「青山龍星」「冥鳴ひまり」を追加",
+      "読み方＆アクセント辞書機能の追加",
+      "キャラクター並び替え機能の追加",
+      "ヘルプからアップデートの有無を確認可能に",
+      "利用規約の同意を促すダイアログを追加",
+      "UXの向上",
+      "開発環境の向上",
+      "バグ修正"
+    ],
+    "contributors": [
+      "aoirint",
+      "gobosan",
+      "Hiroshiba",
+      "HyodaKazuaki",
+      "Lapis256",
+      "Oyaki122",
+      "PickledChair",
+      "Segu-g",
+      "takana-v",
+      "xuzijian629",
+      "y-chan",
+      "Yosshi999"
+    ]
+  },
   {
     "version": "0.10.4",
     "descriptions": ["途中に疑問形があるとおかしくなる問題を修正"],

src/components/AudioDetail.vue

@@ -786,10 +786,10 @@ $pitch-label-height: 24px;
   .accent-phrase-table {
     flex-grow: 1;
     align-self: stretch;
-    margin-left: 5px;
-    margin-right: 5px;
-    margin-bottom: 5px;
-    padding-left: 5px;
+    margin-left: 4px;
+    margin-right: 4px;
+    margin-bottom: 4px;
+    padding-left: 4px;
 
     display: flex;
     overflow-x: scroll;

src/components/DictionaryManageDialog.vue

@@ -354,6 +354,12 @@ export default defineComponent({
       resetSelect();
     };
 
+    const styleId = computed(() => {
+      if (!store.getters.USER_ORDERED_CHARACTER_INFOS) return 0;
+      return store.getters.USER_ORDERED_CHARACTER_INFOS[0].metas.styles[0]
+        .styleId;
+    });
+
     const kanaRegex = createKanaRegex();
     const isOnlyHiraOrKana = ref(true);
     const accentPhrase = ref<AccentPhrase | undefined>();
@@ -402,7 +408,7 @@ export default defineComponent({
         accentPhrase.value = (
           await store.dispatch("FETCH_ACCENT_PHRASES", {
             text: text + "ガ'",
-            styleId: 0,
+            styleId: styleId.value,
             isKana: true,
           })
         )[0];
@@ -427,7 +433,7 @@ export default defineComponent({
         accentPhrase.value = (
           await store.dispatch("FETCH_MORA_DATA", {
             accentPhrases: [accentPhrase.value],
-            styleId: 0,
+            styleId: styleId.value,
           })
         )[0];
       }
@@ -453,7 +459,7 @@ export default defineComponent({
 
       const audioItem: AudioItem = {
         text: yomi.value,
-        styleId: 0,
+        styleId: styleId.value,
         query,
       };
 

src/components/HowToUse.vue

@@ -34,5 +34,6 @@ export default defineComponent({
 .markdown :deep(img) {
   border: 1px solid #333;
   vertical-align: middle;
+  margin-bottom: 1rem;
 }
 </style>

src/components/UpdateInfo.vue

@@ -23,13 +23,12 @@ export default defineComponent({
   setup() {
     const store = useStore();
 
-    const infos = ref<UpdateInfo[]>();
-    store.dispatch("GET_UPDATE_INFOS").then((obj) => (infos.value = obj));
-
-    let isCheckingFailed = ref<boolean>(false);
+    const updateInfos = ref<UpdateInfo[]>();
+    store.dispatch("GET_UPDATE_INFOS").then((obj) => (updateInfos.value = obj));
 
     let isCheckingFinished = ref<boolean>(false);
 
+    // 最新版があるか調べる
     const currentVersion = ref("");
     const latestVersion = ref("");
     window.electron
@@ -46,11 +45,8 @@ export default defineComponent({
           },
         })
           .then((response) => {
-            if (!response.ok) {
-              isCheckingFailed.value = true;
-            } else {
-              return response.json();
-            }
+            if (!response.ok) throw new Error("Network response was not ok.");
+            return response.json();
           })
           .then((json) => {
             const obj = json.find(
@@ -70,47 +66,26 @@ export default defineComponent({
           .catch((err) => {
             throw new Error(err);
           });
-      })
-      .catch(() => {
-        isCheckingFailed.value = true;
       });
 
-    const isCheckingFailedComputed = computed(() => {
-      return isCheckingFailed.value;
-    });
-
-    const isCheckingFinishedComputed = computed(() => {
-      return isCheckingFinished.value;
-    });
-
     const isUpdateAvailable = computed(() => {
       return isCheckingFinished.value && latestVersion.value !== "";
     });
 
     const html = computed(() => {
-      if (!infos.value) return "";
+      if (!updateInfos.value) return "";
 
       let html = "";
 
       if (isUpdateAvailable.value) {
-        html += `<h3>アップデートがあります！</h3>`;
-        html += `<h4>最新版のダウンロードページ</h4>`;
-        html += `<a href="https://voicevox.hiroshiba.jp/" target="_blank">https://voicevox.hiroshiba.jp/</a>`;
-      } else if (isCheckingFinishedComputed.value && !isUpdateAvailable.value) {
-        html += `<h3>お使いの VOICEBOX は最新です！</h3>`;
-      } else if (
-        !isCheckingFinishedComputed.value &&
-        !isCheckingFailedComputed.value
-      ) {
-        html += `<h3>アップデートを確認中です…</h3>`;
-      } else {
-        html += `<h3>アップデートの確認に失敗しました…</h3>`;
+        html += `<h3>最新バージョン ${latestVersion.value} が見つかりました</h3>`;
+        html += `<a href="https://voicevox.hiroshiba.jp/" target="_blank">ダウンロードページ</a>`;
       }
 
       html += `<hr />`;
       html += `<h3>アップデート履歴</h3>`;
 
-      for (const info of infos.value) {
+      for (const info of updateInfos.value) {
         const version: string = info.version;
         const descriptions: string[] = info.descriptions;
         const contributors: string[] = info.contributors;

src/styles/_index.scss

@@ -16,16 +16,16 @@ img {
 
 // スクロールバーのデザイン
 ::-webkit-scrollbar {
-  width: 15px;
-  height: 15px;
+  width: 12px;
+  height: 12px;
   background-color: rgba(colors.$primary-light-rgb, 0.2);
   border-radius: 5px;
 }
 ::-webkit-scrollbar-thumb {
-  background-color: rgba(colors.$primary-light-rgb, 0.5);
+  background-color: rgba(colors.$primary-light-rgb, 0.6);
   border-radius: 5px;
   &:hover {
-    background-color: rgba(colors.$primary-light-rgb, 0.6);
+    background-color: rgba(colors.$primary-light-rgb, 0.7);
   }
   &:active {
     background-color: rgba(colors.$primary-light-rgb, 0.8);