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"＞
にする。
５．実行する。
なかんじででてくる（ボタンをクリックすると）
・・・Ｍｅｎｕを押してから、ちょっとかかってボタンが表示される。
なかんじかな・・・
