アニメの開始時間を通知してくれるアプリケーションをElectron + React + gulpで作った
こちらの上の方にあるreleaseからダウンロードできます。Win/Mac版がありますがWinでは動作確認してないので問題があったら教えてください。
使い方や機能などはREADMEに書いているのでこちらでは実装の話をしようかと。
概要
タイトル通り、Electron + React + gulpで作ってます。
Reactについては学習のために使ったみたいなところもあって適しているかは微妙。
だいたいCoffeeScriptでやってます。詳しい構成はpackage.jsonやgulpfileあたりを見てもらえればなんとなく伝わる気がします。
CoffeeにDOM埋め込むのほんと禍々しいからもうちょっとなんとかならないのか……
ちなみにアイコンの制作方法についてはこちらの記事で詳細を紹介しています。
実装
主な流れは次のような感じです。
- しょぼいカレンダー からチャンネル情報や番組情報を持ってくる
- ユーザ設定で登録されているチャンネルの番組だけをリスト表示
- 表示されている一番直近の番組の時間に
setTimeout
でタイマーを登録 - callback で
<audio>
タグをplay()
ポイントをいくつか。
今回は(何回もリクエストを投げるわけにもいかないので)チャンネル情報や番組情報などをキャッシュしています。
キャッシュはとても簡単で、
app = require 'app' app.getPath('cache')
でpathを返してくれるので後はfsでよしなにするだけでOKでした。
それから、設定画面の表示切り替えは単純にrenderer側でdisplay:none
とかでやっているのですが、
これをbrowser側のメニューから操作できるようにするためにipcを使っています。
main.jsで次のように送信する関数を、
var showSetting = function() { mainWindow.webContents.send('menu-clicked', ''); }
menuのclickイベントに登録します。
{label: 'Preferences...', accelerator: 'CmdOrCtrl+,', click: showSetting}
そしてそれをrenderer側で受け取ったら表示切り替えの処理を行います。
ipc = require('electron').ipcRenderer ipc.on 'menu-clicked', (msg) -> setting = document.getElementById 'setting' toggleElement setting
所感
簡単に色々できるので夢が広がりますね、Electron。
特にnode.jsとか色々やっている人はするっと開発をはじめられます。
アイデア一発でとりあえず動くものを(マルチプラットフォームに)提供可能なんて、ほんとうにすごいですよね……
参考にしたやつ
Qiitaでだいたいなんでもわかるよ!