PhoneGap×Sencha Touchことはじめ

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

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

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

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

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

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

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

Pocket

Posted in iPhone.

コメントを残す

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">