エディターのメイン画面でアップデートを通知する

src/components/UpdateNotificationDialog.vue

@@ -0,0 +1,158 @@
+<template>
+  <q-dialog v-model="modelValueComputed">
+    <q-card class="q-py-sm q-px-md">
+      <q-card-section align="center">
+        <div class="text-h6">
+          <q-icon name="info" color="primary" />アップデート通知
+        </div>
+        <p>
+          新しいバージョンが利用可能です。<br />
+          公式サイトから最新版をダウンロードできます。
+        </p>
+      </q-card-section>
+      <q-card-actions align="center">
+        <q-btn
+          padding="xs md"
+          label="キャンセル"
+          unelevated
+          color="surface"
+          text-color="display"
+          class="q-mt-sm"
+          @click="closeUpdateNotificationDialog()"
+        />
+        <q-btn
+          padding="xs md"
+          label="詳細"
+          unelevated
+          color="primary"
+          text-color="display-on-primary"
+          class="q-mt-sm"
+          @click="openUpdateInfoDialog()"
+        />
+        <q-btn
+          padding="xs md"
+          label="公式サイトを開く"
+          unelevated
+          color="primary"
+          text-color="display-on-primary"
+          class="q-mt-sm"
+          @click="
+            openOfficialWebsite();
+            closeUpdateNotificationDialog();
+          "
+        />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+
+  <q-dialog
+    no-esc-dismiss
+    no-shake
+    transition-show="none"
+    transition-hide="none"
+    :model-value="showUpdateInfoDialog"
+    @update:model-value="closeUpdateInfoDialog"
+  >
+    <q-card class="q-py-none q-px-md">
+      <!-- 新バージョンのアップデート情報を表示 -->
+      <q-card-section class="q-py-sm q-px-md">
+        <div class="scrollable-area">
+          <h5>更新情報</h5>
+          <template
+            v-for="(info, infoIndex) of latestUpdateInfos"
+            :key="infoIndex"
+          >
+            <div v-if="semver.lt(currentVersion, info.version)">
+              <h6>バージョン {{ info.version }}</h6>
+              <ul>
+                <template
+                  v-for="(item, descriptionIndex) of info.descriptions"
+                  :key="descriptionIndex"
+                >
+                  <li>{{ item }}</li>
+                </template>
+              </ul>
+            </div>
+          </template>
+        </div>
+      </q-card-section>
+      <q-card-section class="q-py-none q-px-md">
+        <q-card-actions align="center" class="button-area">
+          <q-btn
+            padding="xs md"
+            label="閉じる"
+            unelevated
+            color="surface"
+            text-color="display"
+            class="q-my-xs"
+            @click="closeUpdateInfoDialog()"
+          />
+        </q-card-actions>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import semver from "semver";
+import { useFetchLatestUpdateInfos } from "@/composables/useFetchLatestVersion";
+
+const props =
+  defineProps<{
+    modelValue: boolean;
+  }>();
+const emit =
+  defineEmits<{
+    (e: "update:modelValue", value: boolean): void;
+  }>();
+
+const modelValueComputed = computed({
+  get: () => props.modelValue,
+  set: (val) => emit("update:modelValue", val),
+});
+
+const closeUpdateNotificationDialog = () => {
+  modelValueComputed.value = false;
+};
+
+const currentVersion = ref("");
+
+window.electron.getAppInfos().then((obj) => {
+  currentVersion.value = obj.version;
+});
+
+const latestUpdateInfos = useFetchLatestUpdateInfos();
+
+const showUpdateInfoDialog = ref<boolean>(false);
+
+const openUpdateInfoDialog = () => {
+  showUpdateInfoDialog.value = true;
+};
+
+const closeUpdateInfoDialog = () => {
+  showUpdateInfoDialog.value = false;
+};
+
+const openOfficialWebsite = () => {
+  window.open("https://voicevox.hiroshiba.jp/", "_blank");
+};
+</script>
+
+<style scoped lang="scss">
+@use '@/styles/colors' as colors;
+
+.scrollable-area {
+  overflow-y: auto;
+  height: 250px;
+}
+.scrollable-area h5 {
+  margin: 10px 0;
+}
+.scrollable-area h6 {
+  margin: 15px 0;
+}
+.button-area {
+  border-top: 1px solid colors.$splitter; /* ボタン領域の上部に線を引く */
+}
+</style>

src/components/help/HelpDialog.vue

@@ -86,7 +86,6 @@
 
 <script setup lang="ts">
 import { computed, ref, type Component } from "vue";
-import semver from "semver";
 import HelpPolicy from "./HelpPolicy.vue";
 import LibraryPolicy from "./LibraryPolicy.vue";
 import HowToUse from "./HowToUse.vue";
@@ -97,6 +96,7 @@ import QAndA from "./QAndA.vue";
 import ContactInfo from "./ContactInfo.vue";
 import { UpdateInfo as UpdateInfoObject } from "@/type/preload";
 import { useStore } from "@/store";
+import { useFetchLatestVersion } from "@/composables/useFetchLatestVersion";
 
 type PageItem = {
   type: "item";
@@ -131,48 +131,7 @@ const store = useStore();
 const updateInfos = ref<UpdateInfoObject[]>();
 store.dispatch("GET_UPDATE_INFOS").then((obj) => (updateInfos.value = obj));
 
-const isCheckingFinished = ref<boolean>(false);
-
-// 最新版があるか調べる
-const currentVersion = ref("");
-const latestVersion = ref("");
-window.electron
-  .getAppInfos()
-  .then((obj) => {
-    currentVersion.value = obj.version;
-  })
-  .then(() => {
-    fetch("https://api.github.com/repos/VOICEVOX/voicevox/releases", {
-      method: "GET",
-      headers: {
-        "Content-Type": "application/json",
-        Accept: "application/json",
-      },
-    })
-      .then((response) => {
-        if (!response.ok) throw new Error("Network response was not ok.");
-        return response.json();
-      })
-      .then((json) => {
-        const newerVersion = json.find(
-          (item: { prerelease: boolean; tag_name: string }) => {
-            return (
-              !item.prerelease &&
-              semver.valid(currentVersion.value) &&
-              semver.valid(item.tag_name) &&
-              semver.lt(currentVersion.value, item.tag_name)
-            );
-          }
-        );
-        if (newerVersion) {
-          latestVersion.value = newerVersion.tag_name;
-        }
-        isCheckingFinished.value = true;
-      })
-      .catch((err) => {
-        throw new Error(err);
-      });
-  });
+const { isCheckingFinished, latestVersion } = useFetchLatestVersion();
 
 const isUpdateAvailable = computed(() => {
   return isCheckingFinished.value && latestVersion.value !== "";

src/composables/useFetchLatestVersion.ts

@@ -0,0 +1,68 @@
+import { ref } from "vue";
+import semver from "semver";
+import { UpdateInfo as UpdateInfoObject } from "@/type/preload";
+
+// 最新版があるか調べる
+export const useFetchLatestVersion = () => {
+  const isCheckingFinished = ref<boolean>(false);
+  const currentVersion = ref("");
+  const latestVersion = ref("");
+
+  window.electron
+    .getAppInfos()
+    .then((obj) => {
+      currentVersion.value = obj.version;
+    })
+    .then(() => {
+      fetch("https://api.github.com/repos/VOICEVOX/voicevox/releases", {
+        method: "GET",
+        headers: {
+          "Content-Type": "application/json",
+          Accept: "application/json",
+        },
+      })
+        .then((response) => {
+          if (!response.ok) throw new Error("Network response was not ok.");
+          return response.json();
+        })
+        .then((json) => {
+          const newerVersion = json.find(
+            (item: { prerelease: boolean; tag_name: string }) => {
+              return (
+                !item.prerelease &&
+                semver.valid(currentVersion.value) &&
+                semver.valid(item.tag_name) &&
+                semver.lt(currentVersion.value, item.tag_name)
+              );
+            }
+          );
+          if (newerVersion) {
+            latestVersion.value = newerVersion.tag_name;
+          }
+          isCheckingFinished.value = true;
+        })
+        .catch((err) => {
+          throw new Error(err);
+        });
+    });
+
+  return { isCheckingFinished, latestVersion };
+};
+
+// 最新の更新情報を取得する
+export const useFetchLatestUpdateInfos = () => {
+  const latestUpdateInfos = ref<UpdateInfoObject[]>();
+
+  fetch(
+    "https://raw.githubusercontent.com/VOICEVOX/voicevox_blog/master/src/data/updateInfos.json"
+  )
+    .then((response) => {
+      if (!response.ok) throw new Error("Network response was not ok.");
+      return response.json();
+    })
+    .then((json) => {
+      latestUpdateInfos.value = json;
+    });
+
+  return latestUpdateInfos;
+};

src/store/type.ts

@@ -1165,6 +1165,7 @@ export type UiStoreState = {
   isAcceptTermsDialogOpen: boolean;
   isDictionaryManageDialogOpen: boolean;
   isEngineManageDialogOpen: boolean;
+  isUpdateNotificationDialogOpen: boolean;
   isMaximized: boolean;
   isPinned: boolean;
   isFullscreen: boolean;
@@ -1230,6 +1231,7 @@ export type UiStoreTypes = {
       isToolbarSettingDialogOpen?: boolean;
       isCharacterOrderDialogOpen?: boolean;
       isEngineManageDialogOpen?: boolean;
+      isUpdateNotificationDialogOpen?: boolean;
     };
     action(payload: {
       isDefaultStyleSelectDialogOpen?: boolean;
@@ -1242,6 +1244,7 @@ export type UiStoreTypes = {
       isToolbarSettingDialogOpen?: boolean;
       isCharacterOrderDialogOpen?: boolean;
       isEngineManageDialogOpen?: boolean;
+      isUpdateNotificationDialogOpen?: boolean;
     }): void;
   };
 

src/store/ui.ts

@@ -60,6 +60,7 @@ export const uiStoreState: UiStoreState = {
   isAcceptTermsDialogOpen: false,
   isDictionaryManageDialogOpen: false,
   isEngineManageDialogOpen: false,
+  isUpdateNotificationDialogOpen: false,
   isMaximized: false,
   isPinned: false,
   isFullscreen: false,
@@ -169,6 +170,7 @@ export const uiStore = createPartialStore<UiStoreTypes>({
         isToolbarSettingDialogOpen?: boolean;
         isCharacterOrderDialogOpen?: boolean;
         isEngineManageDialogOpen?: boolean;
+        isUpdateNotificationDialogOpen?: boolean;
       }
     ) {
       for (const [key, value] of Object.entries(dialogState)) {

src/views/EditorHome.vue

@@ -176,6 +176,9 @@
     v-model="isAcceptRetrieveTelemetryDialogOpenComputed"
   />
   <accept-terms-dialog v-model="isAcceptTermsDialogOpenComputed" />
+  <update-notification-dialog
+    v-model="isUpdateNotificationDialogOpenComputed"
+  />
 </template>
 
 <script setup lang="ts">
@@ -203,6 +206,8 @@ import AcceptTermsDialog from "@/components/AcceptTermsDialog.vue";
 import DictionaryManageDialog from "@/components/DictionaryManageDialog.vue";
 import EngineManageDialog from "@/components/EngineManageDialog.vue";
 import ProgressDialog from "@/components/ProgressDialog.vue";
+import UpdateNotificationDialog from "@/components/UpdateNotificationDialog.vue";
+import { useFetchLatestVersion } from "@/composables/useFetchLatestVersion";
 import { AudioItem, EngineState } from "@/store/type";
 import {
   AudioKey,
@@ -541,6 +546,12 @@ watch(userOrderedCharacterInfos, (userOrderedCharacterInfos) => {
   }
 });
 
+// エディタのアップデート確認
+const { isCheckingFinished, latestVersion } = useFetchLatestVersion();
+const isUpdateAvailable = computed(() => {
+  return isCheckingFinished.value && latestVersion.value !== "";
+});
+
 // ソフトウェアを初期化
 const isCompletedInitialStartup = ref(false);
 onMounted(async () => {
@@ -623,6 +634,8 @@ onMounted(async () => {
     import.meta.env.MODE !== "development" &&
     store.state.acceptTerms !== "Accepted";
 
+  isUpdateNotificationDialogOpenComputed.value = isUpdateAvailable.value;
+
   isCompletedInitialStartup.value = true;
 });
 
@@ -798,6 +811,15 @@ const isAcceptRetrieveTelemetryDialogOpenComputed = computed({
     }),
 });
 
+// アップデート通知
+const isUpdateNotificationDialogOpenComputed = computed({
+  get: () => store.state.isUpdateNotificationDialogOpen,
+  set: (val) =>
+    store.dispatch("SET_DIALOG_OPEN", {
+      isUpdateNotificationDialogOpen: val,
+    }),
+});
+
 // ドラッグ＆ドロップ
 const dragEventCounter = ref(0);
 const loadDraggedFile = (event: { dataTransfer: DataTransfer | null }) => {

tests/unit/store/Vuex.spec.ts

@@ -51,6 +51,7 @@ describe("store/vuex.js test", () => {
         isDefaultStyleSelectDialogOpen: false,
         isDictionaryManageDialogOpen: false,
         isEngineManageDialogOpen: false,
+        isUpdateNotificationDialogOpen: false,
         isAcceptRetrieveTelemetryDialogOpen: false,
         isAcceptTermsDialogOpen: false,
         isMaximized: false,