Electron-Vueについて

なにそれ

electronというフロントエンド技術で、デスクトップアプリを作れるフレームワークがあり
それをvueで記述してビルドできるようにしてくれたもの(+ cliによる雛形作成)

(electronが使われている例: Atom、VScode、SlackとDiscordのデスクトップ版など)

環境

• Mac Book Pro (Catalina)
• Node.js(v12.16.1)
• vue-cli(3系)

ドキュメント: electron-vue 日本語
ドキュメント: electron

始め方

vue init simulatedgreg/electron-vue　プロジェクト名
で対話形式で、勝手にプロジェクトが出来上がるので、src/renderer以下にゴリゴリとコンポーネントを書く。

※ 灰色はテストで使用した音源[DOVA-SYNDROME]

• mainは、主にウィンドウ関連の設定や開発時のプレビューの設定などが入っている。

• rendererが主にいじる部分で、vuex、vue-ruterなどは普通のvueと同じ感覚で書くことができる。

詰まったところ

• multispinnerがメンテされてない(githubのセキュリティ警告を気にする人)
  listrを使おう
  こちらをパクッ参考に作ったものelectron-vue build設定

  (※node-multispinnerは最後の更新が4~5年前になっている。)

• Mac系でプレビューもビルドも失敗する。
  index.ejsのif (!process.browser) {を
  if (!htmlWebpackPlugin.options.isBrowser && !htmlWebpackPlugin.options.isDevelopment) {に書き換え

それ以外は、ドキュメント通りにやればプレビューが見れるはず?

オーディオプレイヤーについて

完成品

※現物のサイズはこちら

使用したモジュール

• electron-vue
• JsMediaTags

仕様など

• 基本的には、JavaScriptのAudioオブジェクトを利用して曲の再生、停止を制御しています。

• アーティストや曲のアートワークは、JsMediaTagsというものを利用して、トラックが遷移するたびに、 ファイルパスを渡して穿り出すという形にしています。

• 設定はLocalStrageを使用して行う予定(開発中)

反省

vuexの使い方も含めて、課題が色々残っていますが、electron、vue, electron-vueそれぞれのドキュメントを行ったり来たりしながら、自分なりに動けたところは、良かったかなと思っています。

最後に

今後もこまめに成果物を公開していくので、コメント、マサカリなど色々ください〜