月 の 上

Vue.js + atom-shellでアプリ作ったメモ

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

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

Vue

vue.js

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を作る感覚に近いと思う。

PouchDB

PouchDB, the JavaScript Database that Syncs!

IndexedDBとかでやりたい
→PouchDBだとMongoっぽく使える?

ということで、プレイリストや再生速度の保存にはPouchDBを使った。 今調べたらIndexedDB普通に使ってもそんな大変じゃ無さそうだし今度普通に使ってみたい。

PouchDB、Firebaseみたいなノリ?で、オフラインで更新出来て、オンラインになった時に自動で整合性をとってくれるIndexedDBのラッパー。 どっかにサーバ立てて、そこにデータを保存するって時に便利。

twemoji

twitter/twemoji · GitHub

何も考えずに使えて便利
なんかフラットな見た目で、馴染めない人も多いかもしれないけど、Macとかの絵文字も最初「えっキモっ……」って感じてたはずなので、初心を忘れずに使っていきたい