node-webkitでNHK Newsを連続自動再生するアプリ作った

あまりにも世情にうといので作った。

NHKのRSSを定期的にチェックして、新着ニュースの動画を連続自動再生する。

とてもテレビっぽい。おかげで4日後にオリンピックが開催されるという事を知れた。

ソースコード
https://github.com/shokai/nhk-news-app

zipでダウンロード
https://github.com/shokai/nhk-news-app/releases

node-webkit

node-webkitはネイティブアプリ作成のためにwebkitが改造されたwebブラウザで、HTML/JavaScript/CSSが実行できるだけでなくnode.jsのAPIもそのまま呼び出せる。
つまりjQueryでDOM操作すると同時にnodeのライブラリを使うような処理が、同じプログラムファイルにまとめて書ける。変にブリッジを書く事なくいつものnodeのように require(‘モジュール名’) するだけなのでとても簡単。
今回は配布するアプリとして実装したけど、デジタルサイネージなどの端末にインストールして置いておく系アプリの実装にも便利だと思う。

アプリを作るのも、HTMLとJSとpackage.jsonを1つのzipにかためてnode-webkit.app/Contents/Resources/app.nwにリネームして配置するだけなので簡単だった。

node-webkit.app自体はhttps://github.com/rogerwang/node-webkitのdownloadsから安定版をダウンロードするといい（Macのrc版は開発パネルを開くまでjsが止まるバグがあった）

npmを使う場合も、node_modulesディレクトリ以下もzipにまとめてしまえば普通に読み込める。

くわしい解説は
node-webkitを触ってみた – 終わる世界とコンテンツ
と
https://github.com/rogerwang/node-webkitのquick startを見るとわかりやすい。

nhk-news.appの実装

色々工夫してる。ネイティブアプリで作らないと実装できなかったと思う。
最初ただスクレイピングしてmp4持ってきてローカルで再生させようと思って、NHKのニュースのHTMLを見ていたんだけど、どうしてもmp4のURLがわかりそうでわからなかったのでブラウザ拡張を作ろうと思った。
それで久しぶりにGreasemonkey使おうかと思ったけどせっかくだからnode-webkit使ってみた。

表示

新着ニュースをiframeに読み込む（jqueryで）
ふつうiframeの中が別ドメインだと操作できないけど、node-webkitだとsame-originポリシーが無いのか操作できた。
NHKニュースは動画のサムネイルをクリックするとFlashを読み込んで再生開始してくれる。iframeがロードされたらサムネイルにクリックイベントを送るようにした。
また動画の表示サイズを大きくしている。

動画の終了を判定

動画はFlashなので、再生状況を外部から取得できない。
定期的にWindow.capturePageする事で比較できた。DATA URLでjpeg/png画像が取れる。

nodeのライブラリ

ふつうnodeではnpm installするとnode_moduelsというディレクトリが作られて、その中にライブラリがインストールされる。node-webkitで使うにはnode_modulesディレクトリもまとめてzipに固めてしまえばいい。
cheerio – DOMのparser
request – HTTPリクエストする
async – 複数の非同期処理をまとめて扱える
feedparser – RSS/Atom Feedのパーサー
lodash – underscoreの速いやつ
eventemitter2 – eventemitterの速いやつ
を使った。npm installするだけでこれらをjQueryと一緒に使えるので楽で良い。

ビルド

Rakefileを書いた。rake debugでcoffeeのソースマップ付きjsを吐いてアプリに固めたりとか。
rake releaseで開発パネルが無効化されたアプリを書き出す。

橋本商会