アップデート可能かどうかを通知する

[Hiroshiba]

内容

アップデートがあるかを調べるには、ホームページに行くか、ツイートを見るしかありません。 たまに「アップデートしたらすごく良くなってた」という意見もツイッターに見られ、アップデートはもうちょっと積極的に通知しても良いのかなと思いました。

ご要望 https://twitter.com/umbrella_ue/status/1439251866076868614

実現方法

electron-builderに通知機能があるかも・・・？

[aoirint]

• https://api.github.com/repos/hiroshiba/voicevox/releases
  • https://docs.github.com/en/rest/reference/repos#releases
• https://github.com/Hiroshiba/voicevox/releases.atom

詳しくありませんが、GitHub Releaseが作成されているので、GitHub REST APIを利用するか、RSSをダウンロードして、通知する方法はあると思います。

いずれもアップデートがあることしかわからないので、electron側にアップデート関連の機能があれば、それがいいのかなと思いました。

[Hiroshiba]

実はすでにヘルプ内でアップデートがあった時に内容を表示する機能はあったりします。

• https://github.com/VOICEVOX/voicevox/pull/690

これをエディターのメイン画面で行えば完了なはず･･･？

[liszt01]

このissueに取り組んでみようと思います。

エディターのメイン画面を開いたときにアップデートがあれば、ダイアログを表示して

• ヘルプのアップデート情報に飛ぶ（あるいは直接ダウンロードページに飛ぶ）
• スキップする

という選択肢を提示する感じでよいでしょうか？

[Hiroshiba]

@liszt01 ぜひお願いします！！

直別ダウンロードページに飛ぶ形が良さそうに感じました！ ボタンの文言は、よくある文言を調べて合わせると良さそうかなと…！

不明な点があればなんでも聞いてください！

[liszt01]

components/ に UpdateNotificationDialog.vue (仮名)を作って views/EditorHome.vue に <update-notification-dialog /> を追加しようと思います. UpdateNotificationDialog.vue では <q-dialog v-if="props.isUpdateAvailable" ...> でアップデート可能なときにダイアログを表示させようと考えています.

そこで components/help/HelpDialog.vue で定義されている, アップデート可能かどうかの変数 isUpdateAvailable を別のファイルで利用する方法を教えていただきたいです! https://github.com/VOICEVOX/voicevox/blob/68775584018143712420783a08e4aef87046fc0c/src/components/help/HelpDialog.vue#L177C1-L179C4

[Hiroshiba]

良いですね！！

UpdateNotificationDialog.vueとHelpDialog.vueは依存関係がないので直接的な値の受け渡しをさせるのはコーディング的に妙なことになっちゃうかもです。 こういう時は共通処理部分を関数で切り出しちゃって、両方がその関数を実行するのが良いかなと思います！ ただこの部分はVuejsなので、一般的な関数化と違いコンポーザブルを使う必要がありそうです。 多分こんな感じになると思います↓

```ts // どこかのファイル.ts // 最新版があるか調べる const useFetchLatestVersion( currentVersionGetter: () => Promise ) { const isCheckingFinished = ref(false); const currentVersion = ref(""); const latestVersion = ref(""); fetch("https://api.github.com/repos/VOICEVOX/voicevox/releases", { method: "GET", }) // 略 return { isCheckingFinished, latestVersion } } ``` ```vue ```

あるいはVuejsとしてではなく、VuexとしてTypeScript関数を作ってしまうのも手かもしれません。（こっちの方がいいかも） 辞書一覧を取得してくるLOAD_USER_DICTあたりが参考になるかもです。

どちらにせよ結構慣れてないと難しいと思うので、ちょっと難しそうだったら言っていただければサポートできると思います！！

[liszt01]

丁寧に説明してくださって, ありがとうございます! 示していただいた例をもとに composables/ に useFetchLatestVersion.ts を追加しようと思います.

再び質問なのですが, useFetchLatestVersion() 内の currentVersion は window.electron.getAppInfos() から値をもらうことになるので,

// `UpdateNotificationDialog.vue`と`HelpDialog.vue`

useFetchLatestVersion( () => window.electron.getAppInfos() )

上のように引数として受け取るよりも

// `useFetchLatestVersion.ts`

const useFetchLatestVersion() {
  const isCheckingFinished = ref<boolean>(false);
  const currentVersion = ref("");
  const latestVersion = ref("");

  window.electron
    .getAppInfos()
    .then((obj) => {
      currentVersion.value = obj.version;
    })
...

useFetchLatestVersion() 内に直接書いたほうがシンプルかと思いました. @Hiroshiba さんの意見を伺いたいです.

[Hiroshiba]

@liszt01 なるほどです、その形でも全然良いかなと思います！！