HTML5でスマホっぽく→Android、iPhoneアプリへ：Sencha&Phone Gap

このブログでは、

HTML5のサイト作成プラットフォームSencha Touchを入れてみる


で、Android,IPhoneのブラウザで、HTML5を使って、スマホっぽく表示するプラットフォーム
Sencha Touchを紹介し、


iPhone、Android、アプリを共通に動かせるPhone Gap


で、ＨＴＭＬ５でかかれたものを、Android、iPhoneアプリにするPhone Gapを紹介

してきた。

ということは、２つあわせると・・・


HTML5を使って、スマホっぽく表示したものを
Android、iPhoneアプリにできる

ということになる。

つまり、

スマホっぽいボタンとか、ウィンドウ構成をして、
さらに、ハイブリッドアプリとして、スマホのＡＰＩを呼び出す
ＨＴＭＬ５のファイルを、
Android、iPhoneアプリにできる

ってことになる。まさに、ワンソースマルチユース！！

ってのを、紹介してみる。

---

・・・といっても、ただ、この２つを組み合わせるだけ（＾＾；）

１．まず、

HTML5のサイト作成プラットフォームSencha Touchを入れてみる

でやった、サンプルソースを用意しよう。

２．

iPhone、Android、アプリを共通に動かせるPhone Gap

でやった、ＨｅｌｌｏＷｏｒｌｄを用意し、そのindex.htmlを削除する
（そのまえに、以下の１行をどこかにコピー）
＜script type="text/javascript" charset="utf-8" src="phonegap.js"＞＜/script＞
（＜　＞は、本当は半角）


３．上記２で作ったeclipseのプロジェクトのassets/wwwを右クリックして

　インポートを選択

　ファイル・システムを選択

　上記１で作成したsencha touchのindex.htmlと、そのレベルにあるフォルダすべてをインポート


４．インポートしたindex.htmlを開き、

＜script type="text/javascript" charset="utf-8" src="phonegap.js"＞＜/script＞
を、
＜script type="text/javascript" src="app/app.js"＞＜/script＞
の前にいれ、あと

＜style＞
を
＜style type="text/css"＞
にする。


５．実行する。

なかんじででてくる（ボタンをクリックすると）
・・・Ｍｅｎｕを押してから、ちょっとかかってボタンが表示される。

---

なかんじかな・・・