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

[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]

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

• ヘルプでアップデートを確認できるようにする #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

// 最新版があるか調べる
const useFetchLatestVersion( currentVersionGetter: () => Promise<string> ) {
	const isCheckingFinished = ref<boolean>(false);
	const currentVersion = ref("");
	const latestVersion = ref("");

	fetch("https://api.github.com/repos/VOICEVOX/voicevox/releases", {
	      method: "GET",
    })
    // 略

    return { isCheckingFinished, latestVersion }
}

<script>
// `UpdateNotificationDialog.vue`と`HelpDialog.vue`

const { isCheckingFinished, latestVersion } = useFetchLatestVersion( () => window.electron.getAppInfos() )

const isUpdateAvailable = computed(() => {
  return isCheckingFinished.value && latestVersion.value !== "";
});
</script>

あるいは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 なるほどです、その形でも全然良いかなと思います！！