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タグをもう２つ

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だけでそれなりにアプリっぽいものが作れる。興味ある人は試してみればいいと思う。