もともとjqmobiでつくっていたmusicTubeですが、sencha touchに変えました。
理由は・・・
・タップイベントがどうも内部でループしてるっぽい。
・あたらしいappmobiのcdnが文字化けして使えない。(古い方のcdnが生き残っていますがいつ消されるかわからないし。)
ということでsenchaに手をだしてみました。
で、できたのがこちら
今回このアプリを作る上でつかったものですが・・・
・senchaコマンドの利用
・sassの変更によるcssのコンパイル
・sencha-SlideNavigationの利用
・Historyサポートの利用
・Ext.dataview.ListをやめてExt.dataview.DataViewを利用
・audioタグnativeのコントロールをとりやめ、senchaで書き直し
・setHtmlによるtext書き直しをやめてinput textによる書き直しに変更
このあたりつかってます。
まずsenchaコマンドの利用です。
sencha touchでは、動作を便利にするコマンドプログラムを公開されてます。
どうやら中身はjavaで書かれてるっぽいですね。利用するとhtmlやjavascript、cssの最適化等を実行してファイルサイズを小さくしてくれたり、httpのアクセス回数を軽減してくれたりと、いろいろとやってくれます。
またプロジェクトのテンプレートを自動で生成してくれるので、作業効率が若干あがるかもしれません。
よく使うコマンドは
$ sencha generate app (アプリ名) (設置パス)
$ sencha app build production
$ sencha generate controller (コントローラー名)
このあたりです。
上から順に
・アプリのテンプレート作成
→こちらは生成用のコマンドがバージョンによってかわるみたいです。
わかりにくいので、senchaつかっている人に尋ねるのが一番手っ取り早いかも。
・deploy用のデータ生成
→こちらは頻繁にお世話になるコマンド、できたプログラムをコンパクトにしてくれます。
10Mくらいあるのが1M程度まで縮んだりしますね。
便利なんですが、生成DOMの構成とかまで変わってしまうので、変わったことをしている場合は要注意です。
・コントローラー自動生成
viewもいくつかつくっているのですが、こちらはコマンドではなく、手書きでつくっています。
続いてsassの利用
cssなのに変数とか条件分岐とか関数とかがつかえるアレです。
利用するのに、compassのインストールが必要です。
で、使うコマンドは$ compass compile
とりあえず３点だけ手を加えています。
１つ目はpictosアイコンの追加です。
必要なアイコンだけ利用できるので、便利ですね。ただ、始めはやり方がわからなくて、アイコン画像はあるのに使えないじゃないか、って思ってしまいました。
２つ目はsassファイルを自作しました。
理由はExt.dataview.Listの動作が気に入らなかったのでExt.dataview.DataViewを利用することにしたのですが、選択状態のいい感じのcss定義がなかったので、それを記述するのに使いました。
３つ目はplayerをsencha化するときにsliderを利用しているのですが、大きさが気に入らなかったのでサイズの変更を実施してあります。
次につかったのがsencha slideNavigationです。
facebookアプリにあったという横にスライドさせるとメニューがでるやつです。
簡単に利用できるんですが、タイトルバーのflicによる遷移を追加しようとしたり、historyサポートと連携させようとしたときに、ちょっと動作の解析する必要になったのが面倒でした。
最近senchaがどうやっているのかわかってきたので、この部分も自作しちゃおうかなとおもったりしています。というのも左右のスライド動作がちょっと動きが良くないんですよね。もっとうまい動作つくれると思うんで、いじろうかな・・・と。
Historyサポート。
httpのhashの部分を変更することで、ブラウザの戻るを実行したときに、アプリケーションのパネルを入れ替えることができるようになるという。
あと、historyに検索キーワードをいれることで、検索履歴も残るといういい点もあります。
動作をつくるのはコントローラーに細工すればいいだけなので、簡単だったんですが、結果をslideNavigationに適応するのが面倒でした。
Ext.dataview.ListをやめてExt.dataview.DataViewを利用した件。
Ext.dataview.Listをつかって大量の曲を並べた場合、動作が引っかかる現象が発生しました。
chromeの要素解析で確認したところ、Listの要素ごとにcssアニメーションが動いていたみたいです。計算項目が増えて動作が悪くなるということになっていた模様です。
で、Listはさくっとあきらめて、一つ上のDataViewを直接いじりました。
現状ではほぼ同じ動作(アイテムの区切りが微妙になかったりしますが)ですが、cssアニメーション的には１枚の板が移動している感じになっています。
list系のコンポーネントは内部のデータの位置計算を大量に実行するとパフォーマンスがわるくなるみたいですね。
Audioタグをやめた件。
もともとplayerの部分はaudioタグのnative controlをつかって表示させていたのですが、これもsenchaとの相性があまり良くないみたいです。パネルのスライド移動を取り入れたところ、スライド移動中に全く関係ないところに一瞬ワープしたり、pickerコンポーネントを出しているときに、pickerではなくaudioコントロールが動いたりしましたので、修正しました。
ボタンとスライダーと時間表示の３つだけの簡単なものですが、まぁ上出来な動作になっているかと思います。
setHtmlによるデータの書き直しをやめた件。
再生時間を表示させるために、panelのhtml要素としてデータを書き出していたのですが、これが他の要素(特にlistのところ)に悪影響を与えていたみたいです。
setHtmlでデータを書き直すと、変更するたびにコンポーネントの要素計算がはいるみたいで、動作に悪影響を与えてしまうという・・・
仕方ないので表示部をinputのtextに変更し、書き直しさせるようにしました。(input要素なら変更したときにhtmlの要素計算がはいらないみたいです。)
と、こんなことを駆使しつつ、音楽を簡単に持ち歩けるようなwebアプリを作りました。
やってみてわかったことは要素の表示変更はなるべくさけつつ、動作するように調整した方がパフォーマンスがあがるということですね。要はjavascriptよりcss使えと・・・
あーslideNavigation改良したいなぁ・・・やっちゃおうかなぁ・・・
