iPhone – ページ 3 – ぼくのセーブポイント

PhoneGapプロジェクトでSencha Touchを導入するには？という内容です。

PhoneGapについての説明はありません。

Sencha Touchとは？

iPhoneおよびAndroidのようなタッチ端末で利用できるWebアプリ、それもネイティブアプリのような操作性を持つWebアプリを開発するための世界初のHTML5対応JavaScriptフレームワーク。
(公式ページから引用)

Sencha Touchライブラリをダウンロードする
ダウンロードページからライブラリをダウンロードします。
商用版とオープンソース版があるので用途によって適宜選択します。
今回はバージョン1.1のオープンソース版をダウンロードしました。

PhoneGapプロジェクトに追加する

ダウンロードしたファイルからsencha-touch-1.1.0ディレクトリを取り出して、プロジェクトのwwwディレクトリ以下に置きます。

index.htmlにsenchaライブラリを読み込むようにします。
head要素に以下を追加します。

    <!-- Sencha Touch Files Start -->
        
    <!-- Sencha TouchのデフォルトCSS -->
    <link rel="stylesheet" href="sencha-touch-1.1.0/resources/css/sencha-touch.css" type="text/css">
            
    <!-- Sencha Touchライブラリ -->
    <script type="text/javascript" src="sencha-touch-1.1.0/sencha-touch-debug.js"></script>
    <!-- <script type="text/javascript" src="sencha-touch-1.1.0/sencha-touch.js"></script> -->
    
    <!-- 自作のアプリ用CSS -->
    <link rel="stylesheet" href="sencha-touch-1.1.0//examples/guide/css/guide.css" type="text/css">
        
    <!-- 自作のアプリ用JS -->
    <script type="text/javascript" src="index.js"></script>
            
    <!-- Sencha Touch Files End -->

Sencha Touchライブラリは、テストやデバッグ環境で動かすときは sencha-touch-debug.js を使い、リリース時には sencha-touch.js を使うようです。

あと、 body 要素無いの記述を消しておきます。

  <body onload="onBodyLoad()"></body>

1	<body onload="onBodyLoad()"></body>

アプリケーションをつくる

wwwディレクトリ以下に index.js を作ります。
index.js に次のコードを書きます。

Ext.setup({
    icon: 'icon.png',       // アイコンファイル
    glossOnIcon: false,     // アイコンの光沢有り無し
    onReady: function() {   // 実行する関数
        /**
         * タイムラインの表示
         */
        var timeline = new Ext.Component({
            title: 'タイムライン',  // タイトル
            cls: 'timeline',     // CSSクラス
            scroll: 'vertical',  // 縦方向にスクロール
            tpl: [               // HTML
                '<tpl for=".">',
                    '<div class="tweet">',
                        '<div class="avatar"><img src="{profile_image_url}" /></div>',
                        '<div class="tweet-content">',
                            '<h2>{from_user}</div></h2>',
                            '<p>{text}</p>',
                        '</div>',
                    '</div>',
                '</tpl>'
            ]
        });
        /**
         * タイムラインを取得
         */
        var refresh = function() {
            Ext.util.JSONP.request({
                url: 'http://search.twitter.com/search.json',    // リクエストを送るURL
                callbackKey: 'callback',    // リクエストが帰ったときに実行する関数
                params: {
                    q: 'ポケモン',
                    rpp: 30,
                },
                callback: function(data) {
                    data = data.results;
                    timeline.update(data);
                }
            });
        };
        /**
         * タブ
         */
        var panel = new Ext.TabPanel({
            fullscreen: true,
            cardAnimation: 'slide', 　 // タブ切り換え時のアニメーション
            items: [timeline]         // 格納するコンポーネント
        });
        /**
         * タイムライン読み込みボタン
         */
        var tabBar = panel.getTabBar();
        tabBar.addDocked({
            xtype: 'button',     // Ext.Buttonクラスのインスタンスを生成することを指定
            ui: 'light',         // 外観の設定、他には"plain"、"dark"なども指定可能
            text: 'refresh',     // ボタンのinnerHTMLに使われる文字列
            iconCls: 'refresh',  // ボタンの背景画像設定に使われるCSSクラス
            dock: 'right',       // ボタンをTabBarの右側に配置
            stretch: false,      // ボタンがTabBarの高さ一杯に広がるのをキャンセル
            align: 'center',     // ボタンをTabBarの縦方向の中心に配置
            handler: refresh     // ユーザーがボタンをタップした際の処理
        });
    }
});

Ext.setup({

icon: 'icon.png', // アイコンファイル

glossOnIcon: false, // アイコンの光沢有り無し

onReady: function() { // 実行する関数

/**

* タイムラインの表示

var timeline = new Ext.Component({

title: 'タイムライン', // タイトル

cls: 'timeline', // CSSクラス

scroll: 'vertical', // 縦方向にスクロール

tpl: [ // HTML

'<tpl for=".">',

'<div class="tweet">',

'<div class="avatar"><img src="{profile_image_url}" /></div>',

'<div class="tweet-content">',

'<h2>{from_user}</div></h2>',

'<p>{text}</p>',

'</div>',

'</tpl>'

]

});

/**

* タイムラインを取得

var refresh = function() {

Ext.util.JSONP.request({

url: 'http://search.twitter.com/search.json', // リクエストを送るURL

callbackKey: 'callback', // リクエストが帰ったときに実行する関数

params: {

q: 'ポケモン',

rpp: 30,

callback: function(data) {

data = data.results;

timeline.update(data);

}

});

};

/**

* タブ

var panel = new Ext.TabPanel({

fullscreen: true,

cardAnimation: 'slide', 　 // タブ切り換え時のアニメーション

items: [timeline] // 格納するコンポーネント

});

/**

* タイムライン読み込みボタン

var tabBar = panel.getTabBar();

tabBar.addDocked({

xtype: 'button', // Ext.Buttonクラスのインスタンスを生成することを指定

ui: 'light', // 外観の設定、他には"plain"、"dark"なども指定可能

text: 'refresh', // ボタンのinnerHTMLに使われる文字列

iconCls: 'refresh', // ボタンの背景画像設定に使われるCSSクラス

dock: 'right', // ボタンをTabBarの右側に配置

stretch: false, // ボタンがTabBarの高さ一杯に広がるのをキャンセル

align: 'center', // ボタンをTabBarの縦方向の中心に配置

handler: refresh // ユーザーがボタンをタップした際の処理

});

}

});

Twitter で「ポケモン」という単語が入っているツイートを取得して、表示するだけのコードです。
コードの詳細はこちらを参考にしてください。

コードが書き終わったらビルドして実行しましょう。

こんな感じでツイートが表示されれば成功です。

ぼくのセーブポイント

Category Archives: iPhone

PhoneGap×Sencha Touchことはじめ

Sencha Touchとは？

PhoneGapプロジェクトに追加する

アプリケーションをつくる