時計と世界各地のライブカメラの映像を組み合わせた何か
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の存在を知らず、公開した直後に知った。
だから本当に誓って最初から間違いを狙って作ったわけではない、という言い訳をしてこのエントリーを終わりたいと思います。
