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

Debuginfo

思考とアウトプット

Phonegap(cordova)で始めるMobileアプリ開発 (topcoat+backbone.js編)

Christophe Coenraets氏のブログが秀逸なので彼のエントリを写経しつつ自分のプロジェクトに取り込んでいきたいと思います。 本当にどこからやっていけば良いかわからないほど良いブログだと思います。

今回はSample Mobile / PhoneGap Application with Backbone.js and Topcoatを読み解きます。Demoは彼のページの中で見れます。

では、git cloneして、階層構造を見てみます。

    $ git clone https://github.com/ccoenraets/directory-backbone-topcoat
    $ tree -d directory-backbone-topcoat/
    ├── css
    │   └── images
    ├── js
    │   ├── adapters
    │   ├── models
    │   ├── routers
    │   ├── utils
    │   └── views
    ├── lib
    ├── pics
    ├── topcoat
    │   ├── css
    │   ├── font
    │   └── img
    └── tpl

css,js,pics,tplに自分で作ったファイルを入れます。topcoatはcss frameworkで直下に入れてます。libにjquery等のライブラリを入れてます。js以下はbackbone.jsで使うMV*を各機能ごとにファイルを作って格納。tplはTemplateファイルを入れています。明確でわかりやすいですね。早速自分の階層もこのようにしました。

ちなみにphonegapではcordova.jsのみが必要なようです。(ref. http://stackoverflow.com/questions/12986645/phonegap-startup-do-we-need-all-those-files)

色々コピーします。

$ rm -rf $MYPROJ/spec  # remove the things that have been created by default, which I don't need
$ cp -r lib/*  $MYPROJ/lib # copy his libaray to my project
$ cp -r css/* $MYPROJ/css 
$ cp -r tpl $MYPROJ
$ cp -r js/* $MYPROJ/js/
$ cp index.html 

それではindex.htmlの中身を見てみましょう。

私みたいな素人が驚くのはそのシンプルさです。bodyにはscript以外htmlタグが書かれていません。Phonegapではindex.htmlだけを読み込みます。各ページはbackbone.jsのrouteを使ってページ遷移を行います。このエントリではbackbone.jsとtopcoatがメインなようでCordova.jsは入ってませんね。ではコピーしましょう。Line#9のleaflet.jsは地図jsっぽくて、私のアプリには必要ありません。Line#7,17のpageslider.jsはChristophe氏自身のライブラリです。彼のブログエントリで説明されてますが、彼はJQuery Mobileは推奨せず、このようなマイクロライブラリを使って必要な機能のみを実装していくべきだと言っています。もちろん、その理由はJQueryMobileのパフォーマンスです。

次に見るのはjs/app.js。

まず、最初でappを初期化。名前空間はappを使っていますね。javascriptでは名前空間を決めることは重要ですからね。(because every thing is gonna be global variable) Line#10の必要性はちょっとわかりません。コメントアウトしても動いています。。(偉い人教えて)。Line#11からはテンプレートを読み込んでからRouteを定義してRoute.historyでpushを起動してます。

次はapp.utils.templates.load([tpl1,,,], callback)を見ていきます。

関数内でオブジェクトを作って返しています。Modularパターンですね。この辺も綺麗です。やっていることはtpl/*.htmlを一つずつ読み込んで全部読み込んだときにcallbackを呼ぶとうことをdefferedを使ってやってます。つまり、読み込みが終わった後にRouterを発火してるわけですね。

次はapp.routers.AppRouterを見てみましょう。

この中で各ページのViewを作ってるわけです。initialize関数でライブラリの一つのpagesliderを初期化してます。(cordova.jsもここで初期化すればいいのかな?) Line#22のdelegateEventsを読み込むところも二度インスタンス化しないための工夫ですね。Christophe氏のプレゼンでも言及してるようにメモリリークが起こる可能性はあるのでその辺も防いでいるのだと思います。

次はapp.views.HomeView。Htmlのコンテンツを作るところです。

initializeでCollectionを初期化, render()で描写。気になるのはLine#9のthis.template()でしょうか?どこで読み込んだっけ?と読み返すと、template.jsのLine#10でapp.views[view].prototype.templateに入れてますね。views[view] == HomeViewというロジックです。すごい^^;

最後にEmployeeModel.jsのModelsを見ましょう。

app.models.*にどんどん追加してます。Employee関係のModelを入れてます。おもしろいのはデータの内容毎によってjsを作っているところだと思います。(つまり、各Modelごとにファイルは作ってない。将来employee以外のModelを作るときに新しくファイルを作るのでしょう) Line#10,#24などadapterを使っています。これも彼のブログのエントリで言及してますが、最初はin-meomoryアダプタを使ってデータはMockしてけ(サーバサイドのエンジニアを待つ必要はない)という開発方針です。



以上このような感じでbackbone.jsを利用しています。彼も言及しているように、"It’s still very early development."ですが、学ぶところは沢山ありました。

え、topcoatは? 読み込むだけです^^;; これがすばらしいところなのです。http://topcoat.ioからダウンロードして、doc以下のstyleguideマニュアルを読みつつ、template内にタグを作っていくだけ。すばらしい。

まだまだ紹介したい記事が沢山ありますが、次の機会にでも。