Sencha TouchでTizenのアプリを作成する

こんにちは、ゼノフィnakamuraです。

この記事は、US Sencha社ブログ Building a Tizen App With Sencha Touch を翻訳したものです。

はじめに

Sencha Touch 2.3.1に開発者がHTML5テクノロジーを利用してアプリケーションを作成できる「WebベースのOS」であるTizenプラットフォームのサポートを追加しました。TizenにバンドルされているWebブラウザは、現在のモバイルWebブラウザの中でも、特に標準規格に準拠しているWebブラウザです。この記事でSencha Touchを利用し、Tizenアプリケーションの構築について説明します。

シンプルなTizenアプリケーション：TizenTunes

iTunesのRSSフィードを利用して、シンプルな音楽プレイヤーアプリケーション（TizenTunes）を作成してみましょう。まずはアプリケーションのビルドとデプロイのためにSencha Touch 2.3.1フレームワーク、Sencha Cmd 4.x、標準のコードエディタが必要になります。Lee Boonstraさんが書いた三つのパートに分割されているチュートリアル「天気予報アプリケーションの作成」にまず従いました。

私のアプリケーションでは、三つのシンプルなビューが必要でした：メインビュー（アプリケーションの題名とナビゲーションバーが含まれているコンテナ）、一覧表（iTunes RSSからトップ100の音楽アルバムを表示するため）、詳細パネル（曲のプレビューイメージと選択された曲を再生するため）。その他に必要になるものは：iTunes RSSフィードのモデル、フィードプロキシ付きのデータのストア、一覧表から曲を選択して詳細パネル内で再生するコントローラーとなります。

次はTizenプラットフォーム用にこのアプリケーションにテーマを設定する必要があります。Sencha Touch 2.3.1にはTizenテーマが既に含まれています。適切なテーマリソースを構成するようにapp.jsonファイルを変更しリビルドするだけでした。

app.jsonファイルのデフォルトでのSencha Touchテーマ構成は次の通りになっています：

"css": [{
        "path": "resources/css/sencha-touch.css",
        "platform": [ "phone", "tablet", "desktop" ],
        "theme": "Default",
        "update": "delta"
}]

これは次のように変更します：

"css": [{
        "path": "resources/css/tizen.css",
        "platform": [ "tizen" ],
        "theme": "Tizen",
        "update": "delta"
}]

新しい構成でアプリケーションを再構築した結果は次の通りです：

次に、Sencha TouchがTizenのdarkテーマとlightテーマを提供しているので、アプリケーションをlightテーマに切り替えたかった。lightテーマに変更するには、単にapp.jsファイルにもう一つの構成を追加・変更するだけです：

Ext.application({
    views: [
        'MainView', 'DetailPanel', 'SongList'
    ],
    controllers: [
        'Songs'
    ],
    name: 'TizenTunes',
    themeVariation: 'light',
    launch: function() {
        Ext.create('TizenTunes.view.MainView', {fullscreen: true});
    }
});

この変更は次のコードを起動関数内で使用する事でも可能になることから、これがプログラム上でテーマを切り替える方法になります（もし動的に制御する必要があった場合）。

1	TizenTunes.app.setThemeVariation ('light');

エミュレータでTizenアプリケーションを実行する

アプリケーションをテストするには、Webサイト Tizen Developers より、使用可能なTizen SDKが付属しているWebエミュレータを利用しましょう。 Mac OSXでInstall Managerを利用してTizen IDEを設置するのは少し難しかったです。詳しくは、この YouTube ビデオと、Tizen開発者フォーラムのこのスレッドで行われている会話を利用することがオススメです。

Tizen IDEを動作させるという、最初の困難を乗り越えられましたら、TizenWebシミュレーターにアクセスして、TizenTunesアプリケーションのテストを開始するように指示するだけです。

Tizenアプリケーションを作成するために、この記事が役に立てば幸いです。自分で試して、Senchaフォーラムで自分のフィードバックを聞かせて下さい。

Sencha Blog