2012年5月21日月曜日

Sencha Touch 2 の始め方 ウォーミングアップ編


はじめに

「Sencha Touch 2 の始め方」ということで、Sencha Touch 2 入門のようなエントリーを書いてみます。(以前に書いたものを最新のバージョンに合わせ一新した内容です)

Sencha Touch 2 は公式のドキュメントが非常に充実しているのですが、内容に重複があったり、充実しているが故に何処から手をつけていいのか分からなかったり、そもそも英語だったりと、数々の障害が立ちふさがり、入門者の気持ちを萎えさせがちです。

そこで、読むべき順番で最適なドキュメントを示した上で、最低限把握しておきたい内容と、ささやかな解説を提示するという手法で、これらの障害を軽減できないかと考えこのエントリーを書きました。

全部で4エントリーになりました。基本的にものを書くのは得意じゃないので文章が無茶苦茶だったりしますが、興味ある人の助けになれば幸いです。

では、さっそく公式ドキュメントの"Getting Started with Sencha Touch 2" を読みますが、ここでは以下の2点に絞って読み進めます。他は読み飛ばします。

  • 環境構築
  • app.js について

環境構築

まずはHTTPサーバーが必要なので事前にお好きなものを選んで導入しておく必要があります。次に Sencha の開発環境を作ります。

やることは以下の2点です。

  • SDK と SDK Tools をダウンロードして自分の環境を作る
  • sencha コマンドでスケルトンを生成して自分の環境で動かしてみる

    SDKのダウンロード

    以下の ダウンロードページから SDK をダウンロードします。SDK は商用版でもオープンソース版でも違いはないのでお好きな方をダウンロードして解凍します。

    SDK Tools のダウンロード

    先ほどのダウンロードページにある SDK Tools もダウンロードします。こちらは解凍後インストールする必要があります。インストールすると sencha コマンドが使えるようになります。
    2012/11/25 追記: Sencha Touch 2.1 からは SDK Tools ではなく、Sencha Cmd V3 を使うとのこと。(参照:SDK Tools 2.0.0 b3 not working with Sencha Touch 2.1 ?)

    スケルトン生成

    SDK を解凍したディレクトリに入って

    sencha app create MyApp ~/htdocs/myapp
    

    2012/11/25 追記: Sencha Cmd V3 の場合は以下
    sencha generate app MyApp ~/htdocs/myapp
    

    とやると、~/htdocs/myapp にスケルトンアプリが生成されます。~/htdocs/myapp のところは各自環境に応じて変えて頂きたいのですが、この一連のエントリーではこのディレクトリのことをアプリのルートディレクトリと呼ぶことにします。

    ブラウザで確認

    ブラウザからスケルトンアプリを作ったディレクトリにアクセスして、こんな画面が表示されれば環境構築完了です。


    app.js について

    次は、アプリの起点となる app.js を見ていきます。app.js はアプリのルートディレクトリ直下にあります。

    先ほど sencha コマンドで作られたスケルトンを基に不要なものを削った以下のような app.js を用意しました。これについて説明していきます。

    Ext.application({
        name: 'MyApp',
        views: ['Main'],
        launch: function() {
            Ext.Viewport.add(Ext.create('MyApp.view.Main'));
        },
    });
    

    この Ext.application 関数でアプリケーションが生成されます。ここでアプリケーションを構成する Model、Controller、Store、Profile、View のセットを定義することで、Sencha がこれらのコードを自動的に読み込んで依存関係の解決などを行ってくれます。しかしここではずっとハードルを下げて Ext.application 関数に与えている以下の項目について解説します。

    • name config について
    • views config について
    • launch function について

    ところで新しいオブジェクトを生成する際に引数を渡して、"設定済みオブジェクト" の生成を行うケースが多々ありますが、そこで渡される引数を config option や ○○ config と呼んでいきます。

    name config について

    アプリケーションの namespace を指定しています。アプリケーションのクラス名は常にこの namespace から始まることになります。今回は、MyApp という名前を namespace にしているので、これから作られるクラスは、MyApp.view.Main、MyApp.controller.Main などになります。

    sencha app create コマンドでスケルトンを作った場合は、create に続く3番目の引数で指定したものがこの値になります。

    views config について

    このアプリで使用する View クラスを指定します。この例の場合、Sencha は自動的に app/view/Main.js を読み込みます。ここに

    views: ['MyView']
    
    と書けば、app/view/MyView.js が読み込まれます。

    この views config と同じように Controller を読み込むための controllers config や Model を 読み込むための、models config などもあります。

    controllers: ['Main']
    
    とかけば、app/controller/Main.js が読み込まれ、

    models: ['Main']
    
    と書けば app/model/Main.js が読み込まれます。

    launch function について

    これは launch config と言うべきかもしれないのですが、Getting Started に倣って launch function と言うことにします。この launch function はアプリの起動時に一度だけ呼び出されます。ここでは

    Ext.Viewport.add(Ext.create('MyApp.view.Main'));
    に注目して下さい。この1行に以下の3つの新しい内容が含まれていますので解説していきます。

    • Ext.Viewport
    • Ext.create
    • MyApp.view.Main

    Ext.Viewport について

    Ext.Viewport というのは View 編でも出てきますが、ここではアプリの画面という理解で問題ないです。Viewport に add されることで View は可視化されます。

    Ext.create について

    こちらも、この後の Class システムのところでも出てきますが、クラスをインスタンス化するためのメソッドです。

    MyApp.view.Main について

    これは、これは先ほど views config を使って自動的に読み込んだ app/view/Main.js に定義されているクラスです。

    ここでクラス名と、そのクラスが書かれているファイルのパスの関係について書いておきます。これらは規則的に決まります。

    例えば、app/view/MyView.js というファイルがあった場合、そこで定義されるクラス名は MyApp.view.MyView です。逆に MyApp.view.MyView という名前のクラスがあった場合、そのクラスは app/view/MyView.js に書かれていることを意味します。

    では、話題を launch function で実行される以下のコードに戻します。この1行でやっていることをまとめると

    app/view/Main.js に書かれている MyApp.view.Main クラスを Ext.create でインスタンス化して Ext.Viewport に add して可視化しているということが分かると思います。

    Ext.Viewport.add(Ext.create('MyApp.view.Main'));

    Classシステムについて

    このタイミングで Sencha Touch のクラスシステムを把握しておくと後々理解がスムーズになると思いますので、 "How to use classes in Sencha Touch 2" を読んでおくことをおすすめします。先ほど出てきた Ext.create もここで理解が深まります。ここでは特に

    • Ext.define でクラス定義を行う
    • Ext.create でインスタンス生成を行う
    • extend 構文でクラスの継承を行う
    • config 構文を使うと getter、setter が自動生成される(magical function)

    の4点を把握します。applier function や updater funciton といった重要なことも書いてあるのですが、ここは割り切って読み飛ばしまてもいいと思います。



    0 件のコメント :

    コメントを投稿