Sencha Blog

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フィードのモデル、フィードプロキシ付きのデータのストア、一覧表から曲を選択して詳細パネル内で再生するコントローラーとなります。

tizentunes

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

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

1
2
3
4
5
6
"css": [{
        "path": "resources/css/sencha-touch.css",
        "platform": [ "phone", "tablet", "desktop" ],
        "theme": "Default",
        "update": "delta"
}]

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

1
2
3
4
5
6
"css": [{
        "path": "resources/css/tizen.css",
        "platform": [ "tizen" ],
        "theme": "Tizen",
        "update": "delta"
}]

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

tizentunes

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

1
2
3
4
5
6
7
8
9
10
11
12
13
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');
tizentunes

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

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

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

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

PAGE TOP

Copyright © 2006-2014 Xenophy.CO.,LTD All rights Reserved.