Sencha Touch を始めよう

このドキュメントではSencha Touchの始め方について解説していきます。 最初にタッチ型端末向けのWebアプリケーションを開発するための基本的なステップについての説明、 次に、Sencha Touchパッケージにも同梱されているデモアプリGeoTweetsの作り方についての詳細な説明 をしていきます。

このドキュメントはSencha Touchを使ってタッチ型端末向けのWebアプリケーションの開発をしたい Web開発者に向けたものです。前提条件としては、Sencha Touchライブラリをダウンロードしていること、 Webサーバー環境が用意されていること、そしてJavaScript・HTML・CSSなどのWebアプリケーション開発 に必要な技術や考え方について理解していること、があげられます。

このドキュメントは以下のセクションで構成されています：

Sencha Touch について

Sencha Touchはタッチ型端末向けWebアプリケーションを開発するためのJavaScriptライブラリです。 Sencha Touchを使えば、エレガントかつ一貫したユーザー体験を、今持っているスキルと最小限 の努力 だけで作り出す事ができます。Sencha TouchではHTMLやCSSといった技術だけを使って（プラグイン無しに） ネイティブアプリケーション並のユーザー体験を生み出します。

Sencha Touch を使う: 主なステップ

  1. 環境設定
  2. HTMLファイルの作成
  3. アプリを記述したJavaScriptファイルを作成
  4. アプリをテスト
  5. リリース用にアプリを修正
  6. アプリをリリース

Sencha Touchを使ったタッチ型端末向けJavaScriptアプリの開発は以下のステップに分けられます：

  1. 環境設定

  2. HTMLファイルの作成

    3. 開発用のエディタを使ってアプリケーション用のHTMLファイルを作成します。 作成するHTMLファイルの例としては、詳細ステップ：HTMLファイルを作成を参照してください。

    アプリケーション用HTMLファイルの中で以下のリンクを指定します：

    作成したHTMLファイルを適当な名前、myapp.htmlなどで保存してください。 アプリケーションコードが完成してテスト用サーバーにアップした後、Webブラウザでこのファイルを開き、 アプリケーションの稼働、テストを行います。

  3. アプリを記述したJavaScriptファイルを作成

  4. アプリをテスト

    5. アプリをテストするには：

    1. Webサーバーの所定のディレクトリにSencha Touchのライブラリファイルをアップロード
    2. アプリケーションファイル（html、js、css）および参照されている全てのファイルをWebサーバーにアップロード
    3. ブラウザでWebサーバー上のファイルを開く - 例：http://localhost:8080/myapp.html
      4. ここでは：

  5. リリース用にアプリを修正

    6. アプリケーションのテストが終わったら、アプリケーションのHTMLファイルがSencha Touchライブラリの 本番用バージョンにリンクするように修正します。そのためには：

    1. HTMLファイルをエディタで開く
    2. 以下のようなSencha Touchライブラリへのリンクを見つけて
      3. 	<!-- Ext Touch JS -- >
	<script type="text/javascript" src="../../ext-touch-debug.js" > </script >
    3. ext-touch-debug.jsをext-touch.jsに変更。ext-touch.js は本番用に最適化されています。本番用バージョンは圧縮がかけられていて、コメントも全て削除されています。
    4. HTMLファイルを保存

  6. アプリをリリース

    7. アプリケーションのリリース準備が完了したら、アプリケーションのファイルと関連する全てのファイルを本番用の Webサーバーにアップロードするだけです。

Sencha Touch を使う: 詳しいステップ - サンプルアプリGeoTweets を作りながら

このセクションでは前のセクションで説明した各ステップをステップバイステップで詳しく説明していきます。 このセクションで利用するデモアプリ、GeoTweetsのソースコードはSencha Touchパッケージの/examples/guide の中に格納されています。

GeoTweetsは、Sencha Touchを使えば簡単にパワフルなアプリケーションが作れることがよく分かるデモアプリです。 このアプリでは：

以下のセクションではアプリケーション用のHTMLとJavaScriptファイルを細かいステップに分けて説明していきます。

HTMLファイルの作成

Sencha Touchアプリケーション開発の最初のステップは、Sencha TouchとアプリのCSSファイル、 Sencha TouchとアプリのJavaScriptファイルへのリンクを記述したHTMLファイルの作成です。

GeoTweetsのHTMLファイル名はindex.html、その中身は以下の通りです：

 <!DOCTYPE html>
 <html>
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <title>GeoTweets</title >

	 <!-- Ext Touch CSS -- >
	 <link rel="stylesheet" href="../../resources/css/ext-touch.css" type="text/css">

	 <!-- カスタムCSS -- >
	 <link rel="stylesheet" href="css/guide.css" type="text/css">

	 <!-- Google Maps JS Touch JS -- >
	 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"> </script>

	 <!-- Ext Touch JS -- >
	 <script type="text/javascript" src="../../ext-touch-debug.js"> </script>

	 <!-- アプリケーション JS -- >
	 <script type="text/javascript" src="src/index.js"> </script>


 </head>
 <body> </body>
 </html>

GeoTweetsのHTMLファイルは4つのファイルにリンクします：

注意： <body>タグに中身がないことに注意してください。これはSencha TouchがJavaScriptを介して自動的にページの中身を生成することになるからです。

アプリを記述したJavaScriptファイルを作成

HTMLファイルを作成したら、次にJavaScriptファイルを作成します。このセクションではアプリケーションの JavaScriptファイル中身を各ステップに分けて説明していきます。

GetTweetアプリケーションのJavaScriptファイルはindex.jsという名前にになります。 ソースコードは以下の通り：

Ext.setup({
    icon: 'icon.png',
    glossOnIcon: false,
    onReady: function() {
        var timeline = new Ext.Component({
            title: 'Timeline',
            cls: 'timeline',
            scroll: 'vertical',
            tpl: [
                '<tpl for=".">',
                    '<div class="tweet">',
                            '<div class="avatar"><img src="{profile_image_url}" /></div>',
                            '<div class="tweet-content">',
                                '<h2>{from_user}</h2>',
                                '<p>{text}</p>',
                            '</div>',
                    '</div>',
                '</tpl>'
            ]
        });

        var map = new Ext.Map({
            title: 'Map',
            getLocation: true,
            mapOptions: {
                zoom: 12
            }
        });

        var panel = new Ext.TabPanel({
            fullscreen: true,
            animation: 'slide',
            items: [map, timeline]
        });

        var refresh = function() {
            var coords = map.geo.coords;

            Ext.util.JSONP.request({
                url: 'http://search.twitter.com/search.json',
                callbackKey: 'callback',
                params: {
                    geocode: coords.latitude + ',' + coords.longitude + ',' + '5mi',
                    rpp: 30
                },
                callback: function(data) {
                    data = data.results;

                    // タイムラインのツイートを更新
                    timeline.update(data);

                    // 地図にマーカーを追加
                    for (var i = 0, ln = data.length; i < ln; i++) {
                        var tweet = data[i];

                        // If the tweet is geo-tagged, use that to display marker
                        if (tweet.geo && tweet.geo.coordinates) {
                            var position = new google.maps.LatLng(tweet.geo.coordinates[0], tweet.geo.coordinates[1]);
                            addMarker(tweet, position);
                        }
                    }
                }
            });
        };

        // 以下は全てGoogle MapsのAPI
        var addMarker = function(tweet, position) {
            var marker = new google.maps.Marker({
                map: map.map,
                position: position
            });
        };

        map.geo.on('update', refresh);

        var tabBar = panel.getTabBar();
        tabBar.addDocked({
            xtype: 'button',
            ui: 'mask',
            iconCls: 'refresh',
            dock: 'right',
            stretch: false,
            align: 'center',
            handler: refresh
        });

    }
});

GeoTweetsアプリのJavaScriptコードは以下のことを定義します：