作成: 2012.06.15 更新: 2021.03.05

この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。

はじめまして、2012年新卒として入社致しました、だーますと申します。どうぞよろしくお願い致します。

今回はスマートフォンアプリのような操作性を持つWebアプリ開発フレームワークである”Sencha Touch 2.0″について解説させていただきます。

■ Sencha Touchって何？

Sencha Touchとは、米国のSencha社が開発した、HTML5ベースのWebアプリ開発フレームワークです。

具体的な特徴

・スマートフォンやタブレットのWebブラウザで動く、ネイティブアプリのようなアプリを作れる！・iOS、Androidのどちらでも動作する！・HTML5って書いてはあるけど、JavaScriptさえわかれば開発できる！・AjaxやJSONPリクエストもバッチリ送れる！・無料で利用でき、しかも商用もOK！

対応OS

・iOS 4.0以上 (iPhone、iPod touch、iPad)

・Android 2.2以上

・BlackBerry

・テスト用：WebKitブラウザ (Chrome、Safari)

Windows Phoneや、WebKitでないブラウザ（IEやFirefox、Opera等）では使えません。

どんなアプリが作れるの？

Sencha社公式のデモアプリ集や採用例集をご覧になると良いかと思います。（注：WebKitブラウザで見てください）

ここにあるアプリ、全部JavaScriptで書かれています。すごいですよね！

■ Sencha Touch 2.0を入手する

それでは早速、Sencha Touch 2.0のライブラリを入手してみましょう。

Sencha Touch 2.0のダウンロードページに飛びます
Open Source Version（GPLv3ライセンス）かFree Commercial Version（商用版・独自ライセンス）のどちらかを選び、ダウンロードします。本稿執筆時点でのバージョンは2.0.1.1です。
落ちてきたZIPファイルを展開します

これでOKです。

開発環境はどうするの？

エディタ

JavaScriptが書ければなんでもOKです。私はMacでEclipseにAptana Studioを入れて使っています。

ブラウザ

PC上で動作確認をするならば、WebKitブラウザーを用意してください。

デベロッパーツールを画面横分割して使えるChromeがおすすめです。

少し前まではSafariの方がSencha Touchの動作がなめらかでしたが、最近はChromeも追いついて来ました。

Webサーバー

スマートフォンやタブレットから動作確認するなら、PC上にWebサーバーを立てておくと楽でしょう。

Mac OS Xで、有線でネットワークに接続しているなら、Web共有とAirMacでのインターネット共有を併用すれば簡単にできます。

[2012/11/13追記]

OS Xの最新版Mountain Lionでは、システム環境設定からWeb共有の設定ができなくなっています。

しかし、機能が消滅したわけではなく、以下のサイト等を参考に手動で設定可能です。

うまでしか Blog: Mountain LionにおけるWeb共有の消滅と403 Forbiddenの解決策

■ とりあえず触ってみよう！

ライブラリーを入手したら、早速ソースコードを書いてみましょう。

適当なところにフォルダを作って、そこに先ほど展開したSencha Touchのフォルダごと入れてください（本稿ではsencha-touch-2.0.1.1 とします）。

index.html

作ったフォルダにindex.htmlというファイルを作り、次のように記述してください:

<!DOCTYPE html>
<html>
    <head>
        
        <title>Sencha Touch App</title>
        <link rel="stylesheet" type="text/css" href="sencha-touch-2.0.1.1/resources/css/sencha-touch.css" />
        <script type="text/javascript" src="sencha-touch-2.0.1.1/sencha-touch-all-debug.js"></script>
        <script type="text/javascript" src="app.js"></script>
    </head>
    <body></body>
</html>

“sencha-touch.css”は、UIのデザインを指定したスタイルシートです。”sencha-touch-all-debug.js”が、Sencha Touchのライブラリです。そして”app.js”が我々が作ろうとしているアプリの本体で、これから記述します。

bodyタグの中身は、何も書かないでください。bodyの中身は、ライブラリによってすべて動的に生成されます。

app.js

同じフォルダにapp.jsというファイルを作り、次のようにしてみましょう:

Ext.application({   
    launch: function() {
        Ext.Viewport.add({
            xtype: 'panel',
            items: [
            {
                xtype: 'label',
                html: 'Hello,world!'
            }]
        });
    }
});

これをPCのブラウザで確認してみましょう。以下のようなページができるはずです。

上にいくつかメソッド・関数が出てきていますが、

Ext.application(): アプリの大元締め
launch: function(): アプリが実行されて一番最初に呼び出される関数
Ext.Viewport.add(): 画面にUIを追加するメソッド

であると思っておいてください。

Sencha TouchのUIはオブジェクトの形式で記述する

上記のExt.Viewport.addの中身を見てみてください:

{
    xtype: 'panel',
     items: [
    {
        xtype: 'label',
        html: 'Hello,world!'
    }]
}

となっていますね。この部分でUIを定義しています。まるでJSON形式みたいな記法ですね。Sencha Touchではこの記述方法をたくさん扱いますが、Sencha Touchを修得する上で覚えられると思います。カンマやコロンを忘れたりするとちゃんと動きませんので、忘れないように。

具体的に見てみましょう。xtype: ‘panel’ となっているのは、panel形式のUIコンポーネントを配置する、という意味です。そしてこの panel コンポーネントには、次の items に記述することでサブコンポーネントを追加できます。

items の中には xtype: ‘label’ が入っており、その次の行の html: ‘Hello, world!’ がラベルとして表示する中身です。（html なのでタグによる記述も可能です）

サブコンポーネントをちょっと増やして遊んでみましょう。app.jsを以下のように書き換えてみてください:

Ext.application({
    launch: function() {
        Ext.Viewport.add({
            xtype: 'panel',
            items: [
            {
                xtype: 'label',
                html: 'Hello,world!'
            },{
                xtype: 'button',
                text: 'ボタンです'
            },{
                xtype: 'textfield',
                placeHolder: 'テキストボックスです'
            }]
        });
    }
});

実行結果です:

キャプチャプラグインの都合上ボタンの右端が切れてしまいましたが、ちゃんと表示はされるはずです。他にも様々なコンポーネントがあります。これらについては、次回以降説明することにします。

■ ナビゲーション (Navigation View)

もうちょっとiOSライクなUIを見てみたいですね。app.jsを次のようにしましょう。階層が増え始めましたが、Sencha Touchではよくあることなので、慣れてください:

Ext.application({
    launch: function() {
        Ext.Viewport.add({
            xtype: 'navigationview',
            items: [{
                xtype: 'panel',
                title: 'First View',    // ナビゲーションバーに表示する文字列
                items : [
                {
                    xtype: 'label',
                    html: 'This is First View'
                },{
                    xtype: 'button',
                    text: 'Push Next View',
                   
                    // ボタンにイベントを設定
                    handler: function() {

                        // このコンポーネントの2つ上の navigationview で定義されたメソッド
                        this.parent.parent.push({
                            xtype: 'panel',
                            title: 'Second View',
                            items: [{
                                xtype: 'label',
                                html: 'This is Second View' // 画面遷移後にナビゲーションバーに表示する文字列
                            }]
                        });
                    }
                }]
            }]
        });
    }
});

これを実行すると次の画面になります:

ここにある、”Push Next View”というボタンを押すと…？！

アニメーションして上のような画面が現れます！もちろん、”Back”をタップすると、前の画面に戻れます。

これがiOSアプリでよく見られる、ナビゲーションビューというものです！

上記のソースコードではまず、一番上のコンポーネントに xtype: ‘navigationview’ を設定しています。そこで最初に表示するコンポーネント xtype: ‘panel’ を items に記述しています。その panel の中には、ナビゲーションビューがそのコンポーネントを表示している際に画面上部のバーに表示する文字列を表す title と、さらにそのサブコンポーネントとして items 内に xtype: ‘label’ と xtype: ‘button’を記述しています。

この button に注目してください。handler: function() というのがあります。ここで、そのボタンが押された時に実行する処理を記述しています。これでボタンがただの飾りから、ちゃんと動作するコンポーネントに進化しました。

さらにその handler の処理ですが、this.parent.parent.push というメソッドがあります。これは、このボタンの二つ上のコンポーネントである navigationview に定義されている push というメソッドを指しています。これはナビゲーションビューで新しい画面を呼び出すメソッドです。今回はこの中に直接新しく xtype: ‘panel’ を記述しています。”Back”ボタンは自動で生成されるので、こちらで特に記述する必要はありません。

このように、JavaScript を記述するだけで、iOSライクなインターフェースを実現することができるのです！すばらしいですね！

これらのコンポーネントは、動的に生成して表示することも可能です。これは、今後説明させていただいます。

今回はごく簡単な説明のみさせていただきましたが、様々なUIコンポーネントを組み合わせることにより、リッチなUIを持ったスマートフォン向けWebアプリケーションを作ることができるようになるのです。とても素晴らしいですね！

■ 次回は

様々なUIコンポーネント、そしてそれらをクラスとして定義する方法について説明する予定です。どうぞお楽しみに！

記事を共有