SESEBLO

Unity, Clip Studio, etc.

アニメの開始時間を通知してくれるアプリケーションをElectron + React + gulpで作った

f:id:umeru:20160210145204p:plain

github.com

こちらの上の方にあるreleaseからダウンロードできます。Win/Mac版がありますがWinでは動作確認してないので問題があったら教えてください。

使い方や機能などはREADMEに書いているのでこちらでは実装の話をしようかと。

概要

タイトル通り、Electron + React + gulpで作ってます。
Reactについては学習のために使ったみたいなところもあって適しているかは微妙。
だいたいCoffeeScriptでやってます。詳しい構成はpackage.jsonやgulpfileあたりを見てもらえればなんとなく伝わる気がします。 CoffeeにDOM埋め込むのほんと禍々しいからもうちょっとなんとかならないのか……

ちなみにアイコンの制作方法についてはこちらの記事で詳細を紹介しています。

umeru.hatenablog.com

実装

主な流れは次のような感じです。

  • しょぼいカレンダー からチャンネル情報や番組情報を持ってくる
  • ユーザ設定で登録されているチャンネルの番組だけをリスト表示
  • 表示されている一番直近の番組の時間に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でだいたいなんでもわかるよ!

Electronでアプリケーションを作ってみよう - Qiita

Electronでipcを使ってプロセス間通信を行う - Qiita