ElectronとVueとの連携について

electronというフロントエンド技術で、デスクトップアプリを作れるフレームワークがあり、有名なサービスとしては、Atom、VScode、SlackとDiscordのデスクトップ版などで使われているそうです。

今回は、それをvueで記述してビルドできるようにしてくれるプラグインvue-cli-plugin-electron-builderを使って、Vueで作成してみました。

では、これから簡単な手順や実際に作ってみたオーディオプレイヤーについて紹介します。

環境

プロジェクトの作り方

  1. vue create プロジェクト名

  2. yarn install

  3. vue add electron-builder

  4. electron:serveでローカルで実行

  5. electron:buildでビルド

AudioPlayerについて

完成品
imageimageimage

使用したモジュール

  • howler.js
    HTML 5 Audio機能を用いた音楽再生管理のためのライブラリ
  • music-metadata-browser
    MP3、M4Aなどの音楽ファイルに含まれているID3情報を読み出すためのものです
  • electron-browser-storage
    メインプロセスでWebStrageを使うためのもの

仕様など

  • 基本的には、howler.jsを利用して曲の再生、停止を制御しています。

  • アーティストや曲のアートワークは、music-metadata-browserというもの
    を利用して、初回に全てのID3情報を取り出しています。

詰まった点

windowの情報を設定として保存したい(WebStrage)

electronはmainとrendererでプロセスが分かれており、ウィンドウ関連はメインプロセスになっています。
そのため、ウィンドウの色や大きさを、設定し読み込みたい場合、メインプロセスで適用させてやらないと反映されませんが、通常の方法では、メインプロセスでWebStrageが使えません。

その時活躍するのがelectron-browser-storageです。
また、設定に関する操作はレンダラープロセスのGUIを通して行うのでプロセス間通信を行いメインに定義されたイベントを発火する必要があります。

プロセス間通信についてはこちらを参考にしました 。
[Electron] IPC には新しい ipcRenderer.invoke() メソッドを使ったほうが便利 (v7+) - Qiita

Howler.jsで曲を変更する時にいちいちオブジェクトごと作り替えるのがめんどくさい。

自分なりにHowlerのソースコードを読み込んで、このようにしたら、音量、ループ状態の設定を維持したまま変更できると考え実装しました。

(一応、issueコメント残してみました)
goldfire/howler.js - github

Howl.prototype.changeMusic = function(o) {
  var self = this;
  self.unload(true);
  self._duration = 0;
  self._sprite = {};
  self._src = typeof o.data !== 'string' ? o.data : [o.data];
  self._format = typeof o.format !== 'string' ? o.format : [o.format];
};

WindowsとMacでUIが違いすぎる

WebKitのベンダープレフィックスで頑張って合わせましょう。
自分の場合は、Mac寄りのシンプルなデザインになるように調節しました。

レンジ入力(シークバー)

input[type='range'] {
  appearance: none;
  height: 3px;
  width: 70%;
  background-color: gray;
  cursor: pointer;
  border-radius: 8px;
  outline: none;
}

input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  background-color: white;
}

プレイリストのスクロールバー

.play-list::-webkit-scrollbar {
  width: 5px;
}

.play-list::-webkit-scrollbar-track {
  display: none;
}

.play-list::-webkit-scrollbar-thumb {
  width: 100%;
  background-color: gray;
  border-radius: 5px;
}

MacとWindowsで表示サイズが同じにならない

ウィンドウ自体のサイズはcssで解決できない問題で、デフォルトだとタイトルバーがウィンドウサイズの計算に入っており、MacとWindowsで表示サイズが違うという状態になってしまいます。

これはuseContentSizeをtrueにすれば解決できます。
Electron ドキュメント - new BrowserWindow([options])

function createWindow(setting) {
  win = new BrowserWindow({
    width: 310,
    height: 520,
    x: 100,
    y: 100,
    resizable: true,
    alwaysOnTop: setting.alwaysOnTop,
    backgroundColor: setting.backgroundColor,
    autoHideMenuBar: true,
    useContentSize: true,
    webPreferences: {
      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION
    }
  });

  // 略...
}

反省

ウィンドウ縮小化状態の再生状態が稀に狂うことがあったり、まだまだ改善の余地がありますが、
それぞれのドキュメントを行ったり来たりしながら、自分なりに動けたところは、良かったかなと思っています。