Getting Started with Sencha Touch 2

Sencha Touch 2.0 のRCが公開されています。 そのドキュメントのガイドにある Getting Started with Sencha Touch 2 を翻訳しました。

Sencha Touch 2 をはじめよう

Sencha Touch とは?

Sencha Touch を使うと素早く簡単に、AndroidやiOS、Blackberryで動作する HTML5ベースのモバイルアプリケーションを作成でき、 ネイティブアプリケーションのような操作性をブラウザーのナックで実現できます。

必要なもの

最初に必要なものは次のとおりです。

  • フリーのSencha Touch 2.0 SDK
  • ローカルで動作するWebサーバー
  • モダンWebブラウザー。ChromeまたはSafariを推奨します。

SDKの最新バージョンをダウンロードして解凍します。 解凍したフォルダーをWebサーバーのドキュメントルートに配置します。 もしローカルにWebサーバーがインストールされていないのでしたら、 WAMP や MAMP のようなワンクリックでインストールできるものを推奨します。

正しい場所にフォルダーを配置したら、Webブラウザーを開いて、 http://localhost/sencha-touch-folder (Webサーバー公開するように設定された場所) を開くと、Sencha Touch のウェルカムページが表示されます。

これで、最初のアプリケーションを作成する準備ができました。

アプリケーションを作り始める

Sencha Touch のアプリケーションは次のような簡単なアプリケーション構造ガイドラインに従うとうまく動きます。 これは簡単に保守しやすいアプリケーションを書くための規約とクラスのセットで、特にチームの一員として仕事をするときに役に立ちます。

最初のステップはアプリケーションを格納する簡単なフォルダー構造をセットアップすることです。 最初に必要なのは2つのファイルとSencha Touchのコピーです。 規約では次のようになります。

  • index.html – Sencha Touch とアプリケーションのファイルをインクルードする簡単なHTMLファイル。
  • app.js – アプリケーション名、ホームスクリーンアイコン、起動時に実行することを定義するファイル。
  • touch – ダウンロードしたSencha Touchフォルダー。

index.htmlファイルから始めましょう。次のようになります。

[html] <!DOCTYPE html> <html> <head> <title>Getting Started</title> <link rel="stylesheet" href="touch/resources/css/sencha-touch.css" type="text/css"> <script type="text/javascript" src="touch/builds/sencha-touch-all-debug.js"></script> <script type="text/javascript" src="app.js"></script> </head> <body></body> </html> [/html]

おそらくこれまで書いた中で最も簡単なHTMLファイルじゃないでしょうか。 やっていることは、Sencha Touch(Javascriptファイルとスタイルシート)とapp.jsファイルをインクルードしているだけです。 ボディが空っぽですね。Sencha Touchに描画させましょう。

次は、app.jsファイルの中身を見てみましょう。 ここでは簡単に、動作を確認するために ‘alart’ をコールしているだけです。

[js] Ext.application({ name: ‘Sencha’, launch: function() { alert(‘launched’); } }); [/js]

以上で終わりです。 では、SafariかChromeを起動してちゃんと動作するか確認してみましょう。 動かしてみると、アラートメッセージが表示されます。 (本家のガイドでは Live Preview をクリックすると実行できるようになっています) 別にどうってことはありませんが、アラートメッセージがポップアップしたと言うことはSencha Touchがちゃんと動作して起動したと言うことです。

最後に伝統的なHello Worldを表示するPanelを作ってみます。

これも非常に簡単。次のようにlaunch関数をExt.createを使うように変更するだけです。

[js] Ext.application({ name: ‘Sencha’, launch: function() { Ext.create(‘Ext.Panel’, { fullscreen: true, html: ‘Hello World’ }); } }); [/js]

次のステップ

これで簡単なページとHello Worldを作成できました。次は最初の簡単なアプリケーションを作ります。 次のステップは First Application guide 翻訳はこちら になります。 ここでは、簡単ですがパワフルなアプリケーションを15分ほどで作り上げます。

次のステップに進むかフレームワークの他の側面について詳細を知りたい場合は次のガイドやリソースをチェックすることをお勧めします。

ガイド

アプリケーションサンプル

コンポーネントサンプル