iPhone用Webアプリ作るときのメモ
paiTouch作ってみて分かったこととか。
まぁググれば普通に出てくると思うんだけど一応まとめ。もしかしたら「iPhone用Webアプリ(ゲームとか)を作るため」って切り口はめずらしいかもしれない。
何はなくともviewport
JSとかでゲーム作ってて、勝手な倍率で画面を表示されてうれしいことはないので、HTMLのヘッダ部に以下のように書いておけばいいと思う。
<meta name="viewport" content="width=320, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
これで実寸で表示されて拡縮も止められる。
apple-touch-icon.png
Webサイトを「ホーム画面に追加」したときに使われる画像。まぁなくても自動的にサイトのスクリーンショットが使われるんだけど、せっかくだから用意しよう。
こんな感じの57x57pxの画像を用意して、apple-touch-icon.pngという名前でトップに置いておくとiPhoneが勝手にそれっぽい質感にしてくれて、
こうなる。
アドレスバーを消す
アドレスバーはwindow.scrollTo(0, 1)としてやれば消えるので、window.onLoadでそれを呼べば基本的にはOK。ただ、イベント発生直後に呼ぶと失敗することがあるのでsetTimeoutで少し待ってやるのがコツらしい。
Event.observe(window, 'load', function(e) { setTimeout(scrollTo, 500, 0, 1); });
onTouchXxx
タッチイベントはJavaScriptからはonTouch(Start|Move|End|Cancel)なんかで拾えて、タッチしている座標はevent.touches[index].xとかで取れるんだけど、まぁそれは適当にググっていただくとして、これ単純にonTouchXxxのリスナー登録するだけだとウィンドウのスクロールとかが生きててとてもうざい。
ということで通はこうする。
Event.observe(canvas, 'touchmove', function(event) { event.preventDefault(); // <- 重要 world.moveFingersTo(event.touches); }, false);
イベントオブジェクトのpreventDefaultメソッドを呼べばデフォルトの動作を抑えられる模様。これになかなか気づかなくてしばらくはまった。
onOrientationChange
本体の傾きの変更が90度単位で取れる。実際は逆さに向けたときは何もイベントを発生しないので0, +90, -90の3種類だけど。本体の向き自体はwidow.orientationで取れて、実例はこんな感じになる。
Event.observe(window, 'orientationchange', function(e) { window.scrollTo(0, 1); world.adjustGravity(); }, false);
adjustGravity: function() { switch (window.orientation) { case 0: this.engine.gravity = new Vector(0, 3); return; case 90: this.engine.gravity = new Vector(-4, 0); return; case -90: this.engine.gravity = new Vector(4, 0); return; } },
ローカルにデータを保存
iPhoneのSafariはSQLiteを内部に持っていてJSから利用できる。だからアプリの設定やハイスコアなんかは簡単に取っておけるし、それ以上に複雑な構造を持つものでもRDBに突っ込めるようなものなら大丈夫。
例はこう。
// DBファイル作って var db = openDatabase('paiTouch'); db.transaction(function(tx) { // テーブル作って tx.executeSql( 'CREATE TABLE settings (id INTEGER PRIMARY KEY, size REAL, pressure REAL, selected INTEGER)', [], function(tx, rs) {}, function(error) {alert('Database Creation Error: ' + error.message)} ); // 初期データ投入 tx.executeSql( 'INSERT INTO settings (size, pressure, selected) VALUES (?, ?, ?)', [90, 10, 1], function(tx, rs) {}, function(error) {alert('Insertion Default Value Error: ' + error.message)} ) });
要するにexecuteSql関数使えばなんでもできる。
ホームから[設定]->[Safari]->[Databases]をたどれば設定画面が開くのでデータベースの確認や削除はそこで。その他、細かいところはググりましょう。
おまけにmetaタグをもう2つ
Ajaxianに載ってた。
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
こんな感じにすればWebアプリを「ホーム画面に追加」して、アプリアイコンクリックで開始したときにブラウザのアドレスバーとか進む戻るボタンとかが表示されなくなって、ホントのアプリっぽくなる(左)。
ただ、バグなのか何なのかよくわからないけど、これやるとonOrientationChangeが発生しなくなるみたい。まぁ、寝転がってiPhone弄ってるときには逆に便利かも知れない。paiTouchは傾けたときに重力の向き変えてるのでちょっと残念。
とりあえず以上のような点を気にすればiPhone SDKとか使わなくてもHTMLとJSだけでそれなりにアプリっぽいものが作れる。興味ある人は試してみればいいと思う。