f:id:amagitakayosi:20141123172027p:plain:w400

Lolipopという音楽プレイヤーを作った。
初めて使うツール多かったので、メモ。

Vue

Vue.js人気だけど個人的にはあんまり良くわかってなくて、良さを理解するために触ってみようとなった。

Vue.js、サーバ側で生成したHTMLに対し、JSっぽい動きを与えるVMとして使うのに向いてる。オレオレComponentを量産して組み合わせて使うのはあんまり得意じゃなさそう。

というのも、この前React+fluxでオモチャ作ったんだけど、その時と比べるとComponentの扱いに結構苦労したからだ。頭のこんがらがり具合はAngularのディレクティブと大して変わらない気がする。

結果としてReact(+flux)の良さを認識することになった。 React、コンポーネントの正体がJSのクラスだし、データのやり取りはEventEmitter使って一方向でやるの推奨なので、「この関数では$elがDOMで$vmが……？？」とか「ここのディレクティブで子VMから上がって来た値がここで別の子VMに渡されて……？？？？」とかって悩む事がなくなる。

atom-shell

atom/atom-shell · GitHub

今回、プレイリストを保存するために、ローカルの音楽ファイルの場所を得る必要があった。 File APIはローカルファイルのパスを得ることは出来ない。
ちょっと調べた所、atom-shellではFile APIを拡張してファイルのパスを取得できるらしかったので、今回はatom-shellを使うことにした。

これ、後でもう一度調べたらどうやら勘違いだったらしく、node-webkitでもFile API拡張されててファイルのパス取得できたっぽい……
ただ、今日ちょっとnode-webkit弄った感じ、Web Audio APIうまく扱えなくて難しそうだったので、atom-shell選択してよかったかもしれない。

atom-shell、node-webkitと比べて圧倒的に情報少ないし、触ってる人も少なそうでこの先生きのこるには、という気分になる。
ただ、browser-sideとclient-sideの違い(node-webkitでいうnode-contextとwebkit-context)を意識するの、個人的にはatom-shellのほうが楽だと思った。
atom-shellのほうがSPAを作る感覚に近いと思う。