sencha touchでポチってもうたーモバイル版を作ってもうたー所感
まだ途中なんですが、ポチってもうたーのモバイル版を作ってみたので感想など。
以前に、Sencha Touch ちょっと触ってみた所感 でもちょっと書いたんですが、sencha touchというフレームワークを使ってやってみました。
動作面としては、iPhone80点、Android60点ぐらいかなーという感想でした。iPhoneだと、かなりサクサク動いていて、ほぼほぼ不満はないけど、気になった点が2,3点ほど。
まず、タップに対する反応が、ちょっと遅れることがあるという点。これはもうブラウザ上で動いている以上しょうがないんですけど、ネイティブだとボタン押したらすすーっと動くという場面でも、あら、今オレ押したよね？と思って1秒ぐらい待つと動いたりとか。具体的には、「みんなのポチり→詳細に移動→Backボタンで戻る」とかそういう時の動作。まぁこのへんはもうwebアプリなんだという割り切りも必要かも…もしくは表示するコンテンツをこまめに消したりなんなりしてチューンナップを頑張るか - それで解決するかは分からないけど - となってしまいそうな感じも。
次に、cssアニメーションがずれてしまうという点。これは実装方法で解決できるかもしれないんですけど、さっきの「みんなのポチり→詳細に移動→Backボタンで戻る」で、二枚のパネル（みんなのポチり と 詳細）が同時に移動するんだけど、これが完全に同期せず、詳細パネルが先に動いたりすることがある。これはモバイルに限らずPCでもCSSアニメーションを使うときに起こりうる問題なんですけど、この辺も、追求します？うーん…追求してもちょっと直るかはわからないですねーという感じ。いつも起こるわけではないので目をつぶれる範囲ではありますが。
次に、フォーム周りが微妙という点。これはまず、senchaを使わず、素のHTMLでやっても微妙な点は多々あるのですが、senchaを使ってもまぁなんともなしに微妙です。素のHTMLでやっても、なんかフォーカスがあっち入ったと思ったらちゃんとなったりなんなり、頑張ればなんとかなると思いきや、まぁ質素にシンプルに行きましょうかというのが安全策だと思うんですけど、scrollview（overflow:scrollみたいな仕組み）の中でやると、もう勘弁してくれ、scrollviewやめる！と思わざるをえないほど絶望的に大変になります。senchaは、これを、うまく自動で位置調節してくれる仕組みを備えており、こいつがうまくやってくれることはくれるのですが、その代わりにテキストが選択できなかったり、一度フォーカスを外さないとカーソル位置を移動できなかったりと、ちょっと特殊な感じになります。素のHTML問題は色々と解消されて入るものの、やはりクセはかなりある感じです。そして、それを解決したりするのはかなり無理に近い所業。
次に、Android。
まず、素のHTMLとjQueryなり素のJSなりなんなりでこういったことをやるのは、iPhone以上に絶望的というか、常人には大変過ぎでサジを投げるレベルです。それをやってのけるsencha touchにしびれる憧れるゥーというのはあるっちゃあるんですが、それでも超快適ですね！というのにはちょっと言えないかなという感じでした。
色々あって、もろもろ解決できるものもあるとは思うんですが、できなさげなものも混ざっていたり、さらに突っ込んで調べてみないといけないことが出てきました。まだちょっと触っただけなんですが、ちょっと書くと、
- URLバーがなんかの拍子で出てきたりしてフルスクリーンが外れるのでwindow.scrollTo(0,0)的なのをところどころに挟む必要あり？
- フォームのテキストフィールドなどに文字を入力した状態で、パネルが左右に移動したりすると、フォームが残ったままになる謎
- Xperia Arcだとなぜか二重に文字が入力されてさっぱり使えなかった謎
- 遅くは無いが速くもない。このへんは端末のスペックの問題か。
みたいな、iPhoneで起こっていた問題に＋して色々と出てきそうな感じです。これでなんかやるなら、基本はiPhone版を、できるところまでやりましょう。結構動くんですよ。Android版は、対応できる範囲でなんとか使えるレベルにしましょうという感じかなぁと思いました。もしくは対応を最新機種に絞ったりとか。
次、スクリプトの書き方についてですけど、これは結構、知恵熱が出るレベルで大変でした（出てないですけど）。たぶん、JavaScriptをちょっとはできますという人には到底不可能な気がします…。本業でプログラマな人の方が馴染みやすいかと思います。
基本的に、sencha touchは、あらゆるコンポーネントを、sencha touchが用意したクラスをガシガシ new してインスタンスを山のように作り、これをうまいこと階層化したりなんなりし、カスタムイベントで連携させて、すべてを作ります。なので、大げさに言えば、htmlやcssを全く書かなくても、できることはできます。だがしかし、これを使いこなすには、結構突っ込んでsencha touchの思想なり考え方を身につけないといけないです。これが結構大変で、ググってもそんなに情報が出てくるわけでもないので、とりあえず、チュートリアルのスクリーンキャストを全部見たほうがいいです。僕は、何とか読み解こうとAPIのドキュメントやソースを行ったり来たりしていましたが、最初にこれを全部見ておくべきでした。
jQueryで何かするっていう場合、まぁ中心はHTML+CSSなので、そいつにちょろっとうまい仕組みを考えて、イベントを上手いこと組み合わせれば、オレjQuery使えます！って思えそうですけど、sencha touchを使うぶんには、イベントをちょっと使えばできるという感じではないです。テンプレートエンジンのXTemplate、DOM周りの操作の仕方、ExtのMVCの考え方、Model, Store, ProxyとViewを結びつける方法、Ajax周りの使い方に加え、各コンポーネントの使い方などなど、覚えることがめちゃくちゃ多いです。その分色々できるってことではあるんですけど。
このコンポーネントっていうのは、かなりしっかりしたドキュメントがあります。そがこれなんですけど
すごい詳しく書いてあるねって思うんですけど、なんか僕はこれ見ただけでは把握できない部分が多々ありました。そもそもコンポーネント自体がめちゃくちゃ多いです。もう、山のようにイベントなりメソッドなりが用意されているんですけど、それをどう使うのかは、具体的によく分からなかったりします。そういう時はどうしたかというと、sencha touchのソースを読み、これはどう使うのかというのを逐一調べていました。どうもそれが一番早くメソッドやイベントの使い方を覚えられる方法なんではないかと思います。
そもそも、これやりたいと思っても、それができるかどうか自体分からないので、一つ何かするのにかなりの時間がかかります。パネルを階層化してどうのするというのに一日二日かけて色々と調べ… ちょっとしたフォームを作り、Ajaxで連携して動かすのに一日二日かけて調べ… リストビューを作ってどのするのにまた… と、まぁ覚えた後は、コツをつかめたようにできるものではあるにはありますが、なんともまぁ、日進月歩な感じです。できないことはHTMLを突っ込んでDOMで頑張ります。
これからのタスクとしても、ページングをどうするかとか、もっと突っ込んでフォームを調べたりとか、色々やることがあったりしますし、そーいうのを１つずつやるのに時間が結構かかる感じです。DOMを直接いじるあたり、リクエストを投げてどうのするというAjax周り、ツイートをメモリ上で管理するあたりは、デスクトップ版のソースをそのまま使っていたりして、ポチってもうたーモバイルは、sencha touch + jQueryなんですが、こういったこともsencha touchでうまいことやる仕組みが、MVCでオブジェクト指向でガッチリ用意されてます。それはたしかにすごいんですが、学習コストはかなりかかってしまうなーと思いました。
これからsencha touchやりたいぜって思う人におすすめなのは、上に挙げたスクリーンキャストのチュートリアルをしっかり見ることと、単純なサンプルを色々と見て真似してみること、わからない部分があったら、公式のデモ、kitchen sinkを見て、その使い方を突っ込んで調べること（スクリーンキャストをみなす、ソースを読む）かなーと思いました。
仕事でガッツリsenchaを使う機会はあるんだろうか謎ですがそういう相談も何かあれば歓迎ですｗ
blog comments powered by Disqus