ライブカメラと時計のやつを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を使用してみました。
あと、数字の大きさがフィボナッチ数列になっています。
decafjsを使ってappend-cssをアップデートしました
npmにappend-css
というパッケージを公開していたのですが、公開して以来ずっと触っていませんでした。
たまたまこのライブラリを使えそうな場面があったので、久しぶりにrequire('append-css')
してみたら、自分が作ったと思っていたものと随分設計が違くてびっくりしてしまった。
しかもcoffeeだし。
良い機会なので、今使いたいと思っている(自分がかつてそのように作ったと勘違いしていた)設計に書き直した。
decafjs
ライブラリ本体はものすごく小さいのでES2015でまるっと書き直せばよかったけど、テストコードは流用できそうな部分が多かったので、coffee -> ES2015の変換にdecafjsを使ってみた。
使い方は変換したいcoffeeのソースがあるフォルダを指定するだけ。
$ npm install decafjs -g $ decaf coffee-folder
変換後のコードは基本的に手直しが必要だけど、単純な変換作業は全てお任せできる感じでした。
append-css
HTMLのhead内に<style></style>
要素を追加して、新しくCSSルールを定義することができます。
<style></style>
要素に対する操作をラップしてくれます。
const AppendCss = require('append-css'); // CSSルールの追加 let appendedRules = new AppendCss(` body { background: black; } `); // ルールの無効化 appendedRules.disable(); // ルールの変更 appendedRules.textContent = ` body { width: 100%; } `; // ルールの有効化 appendedRules.enable(); // ルールの無効化と<style></style>要素の破棄 appendedRules.dispose();
prepend
<style></style>
をhead要素の先頭に追加する、prependオプションもあります。
let prependedRules = new AppendChild('body { width: 100%; }', { prepend: true });
insert-css
browserify
で有名なsubstack製のinsert-css
というライブラリがある。
npmのページを見る限り、append-css
は少ないながらもちょびちょびダウンロードされているらしかった。
もしかしたらというか多分ほぼ確実に上述のinsert-css
と間違えてる人がいるだろう。
以前append-css
を始めて公開した時はまだこのinsert-css
の存在を知らず、公開した直後に知った。
だから本当に誓って最初から間違いを狙って作ったわけではない、という言い訳をしてこのエントリーを終わりたいと思います。