chokidarを使ってファイルの変更をwatchする
Riot.jsの話。
カスタムタグが増えるにつれ、Riot CLIによるコンパイル時間がバカにならなくなってきた。
特にwatchの立ち上げ時に時間がかかる。
コンパイルオプションとしてBabelとStylusを使用しているので、最初これらを疑ったが、buildのみだとさほどかからないので、Riotのwatchオプション内で何かまずい事が起きていると思われる。
そこで、私の上長がファイル変更の監視をchokidarで行う方法に書き直したところかなり改善された。
ソース全体のビルドはnpm run buildのみで行い、npm run watchでは初回ビルドを行わないようにした。
{
"scripts": {
"build": "riot --type babel src/tags lib/tags",
"watch": "SHELL=/bin/bash chokidar 'src/tags/**/*.tag' -c 'OUTPATH=`echo {path} | sed -e \"s/^src/lib/\" -e \"s/\\.tag$/.js/\"` && mkdir -p $(dirname $OUTPATH) && riot --type babel {path} $OUTPATH'"
}
}
こういう時、sedの正規表現が分からなくて、大体いつもここを見に行っている。
chokidar
chokidarは指定した対象の変更をフックして、任意の処理を実行する事ができるnpm package。
みんなつこてる。
It is used in brunch, gulp, karma, PM2, browserify, webpack, BrowserSync, socketstream, derby, and many others. It has proven itself in production environments.
使い方
-cまたは--commandに続けてフックさせたい処理を渡す。
$ chokidar '監視したい対象をglobで指定' -c '実行したいコマンドを渡す; この中では{event}で変更の種類、{path}で変更のあったファイルのパスが参照できる'
ライブカメラと時計のやつをElectronアプリにした
前の投稿で作ったデモをElectronで包んでアプリにしてみた。
Circle CIとGithub Releasesを連携させて、releaseブランチをプッシュするとリリースされるようになっている。
（超優秀な同僚が組んだ物を流用している）
アカベコマイリさんが作ったcross-conf-envというnpmパッケージの記事を読んで、npm-scripts内から環境変数を使えることを知ったので使ってみた。
リリースできるようにすることで一杯一杯で、アプリの内容としてはブラウザのデモをそのままぶちこんだだけの状態でリリースしている。
パッケージも今の所OSXだけ。
テストが通ったらリリースされるようにはなっているが、テストはまだない。
{
"script": {
"test:ci": "exit 0"
}
}
Spectron、Devtronも触ってみたかったがまだ触れていない。
少しづつ触っていきたい。
時計と世界各地のライブカメラの映像を組み合わせた何か
GWはこれを作ってました。
時計と世界各地のライブカメラの映像を組み合わせたものです。
YouTubeのiframe APIを使用しているので、モバイル環境だと自動再生が効かず映像が再生されません。
以下の操作が行えます。
- 時刻を表す文字のシルエットを
Shift+Kで太くShift+Jで細くする Shift+Cで周囲の色、Shift+Lで時刻の文字色を変更する
操作するには、一度この時計をクリックしたりしてフォーカスしてあげてください。
仕組み
Liveカメラの映像を一番下に置き、その上に重ねた<div></div>要素をCSSでアニメーションさせて、数字のシルエットを作っています。
以前、オリンピックのエンブレムを動かした時のコードを流用して、少しづついじっていたものがベースになっています。
オリンピックのエンブレムに特化していたコードを、もう少し汎用的に使えるようにして、3x3のパターン化された図形を扱いやすくするok-blocksというライブラリにしました。
今回はこのok-blocksを使用して、前々から作ってみたいと思っていたアイデアを試してみたものです。
倍率によっては<div></div>要素同士の隙間が線になってしまうことがあるのが残念ですが、概ねイメージどおり形にできたので良かったです。
時刻のフォーマットには前から気になっていたMoment.jsを使用してみました。
あと、数字の大きさがフィボナッチ数列になっています。
