2020-05-11に更新

electron-vueでオーディオプレイヤーを作ってみた

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以下にゴリゴリとコンポーネントを書く。

image
※ 灰色はテストで使用した音源[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) {に書き換え

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

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

完成品

image
現物のサイズはこちら

使用したモジュール

  • electron-vue
  • JsMediaTags

仕様など

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

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

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

反省

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

最後に

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

ツイッターでシェア
みんなに共有、忘れないようにメモ

taka1156

Crieitは個人で開発中です。 興味がある方は是非記事の投稿をお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

有料記事を販売できるようになりました!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください!
ボードとは?

関連記事

コメント