読者です 読者をやめる 読者になる 読者になる

PhoneGap(Cordova) + jQuery Mobile でアプリを構築しようとして調べた雑多なこと

雑多です

結果的に雑多に調べてしまったので雑多にまとめる

jQuery Mobile のマークアップについて

jQuery を利用した HTML5 ライクにかけるマークアップフレームワークと呼びたい。自分はそうとらえた。jQuery がよしなにするというよりは、HTML のマークアップに意味を持たせて強力にそれっぽいスマホサイトを構築できるフレームワークみたいなもの。なので、jQuery でよしなにしてつくるとか、CSS でどうこうするってよりは、ひたすら data 属性を生やしてマークアップすることで jQuery Mobile がよしなにはからってくれているという印象。
スライド::SwapSkillsFree|jQueryMobile [基礎編]
スライド::jQuery Mobile
スライド::jQuery Mobile入門
スライド::jQuery Mobile 最新情報 & Tips
スライド::jQuery Mobileバレしないモバイルサイトの作り方

jQuery Mobile の書籍や資料

何冊か発行されているけど、内容は古くなるしリファレンスなら公式ドキュメントを読んだほうが早いという結論に達しそうだ。ただ、どういったかきかたがベストプラクティスなのかってのはあんまりわからなくて、そういうのを探したほうがいい気がする。

ヘッダーやフッターを共通化してつかいたいけどうまくいかない話

サーバーサイドでテンプレートエンジンを使えるのならば Jinja2 なりなんなり include とか extends で継承してつくれるけど、それを今回みたいな HTML + CSS + JS でつくろうとするときどうすればいいんだろう?とずっと探していた。いろいろ探した候補の結論としては以下

  • JS で動的に生成して読み込む
  • 諦めて静的にすべてベタ書き
  • SSI というサーバーが提供してくれる機能をつかう

画面数がそれほど多くない(と見込まれる)ので諦めて静的にすべてベタ書きして、なにかをかくときは一括置換という方法がさいあく使える。けど、それは嫌だなぁと思っていろいろ調べてた。テンプレートエンジンは JS 単体でもなんかしらあって、Twitter社のやつとか Google 社のやつとか、まああとはお馴染み jQuery-tmpl とかある。いろいろ考えた結果としては、jQuery-tmpl を使うのがなにかと楽そうだなという感じになりつつある。
SSI という技術については2001年からあるむしろ古い枯れた技術で、ゆとりなおれはむしろ気づかなかった。サーバーで #include file="hogemoge.html" みたいにつかえる。これはいいじゃん!と思ったけど、どうやら Android では問題があるらしい。以下の StackOverFlow の質問がジャストヒットした
jQuery and PhoneGap - Include a HTML file clientside with HTML or JS? - Stack Overflow
まあ jQuery + jQuery Mobile + jQuery-tmpl にのっかるか、ベタがきかなぁ、という感じ。

PhoneGap で各種 SNSソーシャルグラフまわりの API をたたきたい話(プラグインを作成する話)

まあまずは公式の github を見ましょうというということでひと通りみておいた
phonegap/phonegap-plugins · GitHub
主に取り扱いのは iOS と Android だからそれだけカバーされてればいいなーと思って探してみたんだけど、 iOS はわりと充実しているけど Android にはなかったりとか、まあばらつきはある。たとえば Twitter というまさにそういうモジュールなんかは iOS にあって Android にはなかったりする。まあ仕方ない。もっと言えば mixi に対応しようとすれば当然ここにはない感じだから結局自作するしかない。
とはいってもプラグインの自作自体はそれほど難しい話ではなさそう。まあ公式ドキュメント嫁って話だ。
Apache Cordova API Documentation
PhoneGap がネイティブのプラグインを呼ぶ exec 関数があるので JSがコール→ネイティブコード(Obj-C, Java)を叩くというフローでつくれるようだ。で、もちろん Obj-C や Java になればそれなりに補助ライブラリは揃っているし、まあそもそも OAuth さえたたければどうにかなりそうなので最悪そっちで実装すればどうにかなるんじゃないかなという感覚。まあおれ、Obj-C も Java も書けないんだけど(なんとなく読めるけど、それはなんとなくだ)。
まあ問題は iOS 開発者は専門の人がいるからどうにかなりそうだけど、 Android に詳しい人はそんなにいないんだよね……*1。まあそれほどデバイスにアクセスするネイティブに凝ったことをする話ではないから、そこまでハマりどころはなさそうだけど。

iOS と Android 両対応について

Android 関係開発者に聞ける機会があったので伺った。要約するとこんな感じ

WebViewだし凝ったことをしなければそれほどハマらないのでは
デバイスをつかうデバッグは当然実機が必要(今回では必要なさそう)
向き固定する必要あるならするべき(要件的に縦固定かな)
JSまわりというかWebViewまわりは2.3と4系で動きが違うことがままあるので、動作確認は必須
Cordova のバージョンが激しいところはハマりどころになり得る
Cordovaはバージョンアップがはげしいし、プラグインも追いついていない可能性があるが、自分で改修してなんとかできるっぽい
特に mixi はプラグインがないと思われるけど、自作できるのでは

なんていうか

自分はこうベストプラクティスであるとかの方法をどうも模索して近道ばかり探してしまうなぁと自戒しつつも、まあいまやることは先行調査なのでまあいいかということでお茶を濁すことにする。
まああとはどこまでサーバーサイドにデータをもたせてどこまでクライアントでやりとりするのかがちょっと見えない感じが不安ですね。たぶん Django なりで JSON レスポンスをかえすサーバーをつくってそこに MySQL あたりで保存って感じだろうか。そんなに規模としては大きくないはずだけど、どうなるんだろう。
あと Android っていろいろ鬼門というかいろいろ不安。WebView が 2.x 系で不安ってのもあるけど、機種依存とかバリバリあるってことでガラケー並みにバッドな世界が待ち受けているらしいし。そこを jQuery + jQuery Mobile でゴリゴリ押し倒せれば楽なんだけど、不安だなぁ。あと iOS 端末はふんだんにあるけど Android 実機があんまりない印象……。

*1:Java に詳しい人という意味ではいるから安心なんだけど