iPhoneアプリをMobile Safariで作る - 甘味志向＠はてな

こんにちは！ JavaScript Advent Calendar、12日目のid:Molokheiyaです！
ちょっとターゲットが絞られてしまうのですが、私はiOSに搭載されているSafariのWebkitを使ってJavaScriptでiPhoneアプリを開発するHow-Toを書いてみたいと思います。

ちなみにAdvent Calenderとはプログラマ有志が12/1から12/25までの間、毎日ブログ記事を書いていくという企画で師走の風物詩みたいなものです！
今年の各言語のカレンダー一覧はこちらにまとめられているので要チェック！
本日12月1日より，プログラマ有志による技術系Advent Calendarが各所ではじまる：インフォメーション｜gihyo.jp … 技術評論社

さて、まずiOSアプリの開発は何よりも敷居が高いのが特徴です。技術的な意味ではなく。

iOS SDKはMac OSでしか動かないためMacを購入しないといけません。
以前はAppleの最凶規約により開発ツールどころか開発言語まで縛られていました。

これは、今年の9月に規約が緩和されサードパーティ製の開発ツールでも開発が可能になっています。
例えばAdobe Flash Professional CS5のPackager for iPhoneやMonoTouchなどですね。

ただ、ここまで頑張ってアプリを開発しても、iOS Developer Programに年間99ドルも払って登録しないと無料配布すら出来ません。なんてこったい！

本気で俺はiPhoneアプリを作りたいんだよ！って感じじゃないとき。
パッとコード書いて実機で動いて適当に動いてくれるアプリが書きたい、そんなときはSafariのWebkitを使いましょう！

とりあえず面倒な機能を切る

headに以下のView Portメタタグを挿入することで抑制します。

<meta content="minimum-scale=1.0, width=device-width, maximum-scale=0.6667, user-scalable=no" name="viewport"
<meta name="format-detection" content="telephone=no">

Viewportは仮想的なウィンドウサイズの指定で、最初にページを開いたときの拡大縮小率を指定できます。
この"width=480, maximum-scale=0.6667"という指定は"Holy Grail"と呼ばれており、iPhone画面を回転させても文字サイズが変わらない指定方法です。
もちろん自分の作成するアプリケーションによって変更してかまいません。

ユーザーに拡大縮小を許可するかどうかは"user-scalable"で指定します。
"format-detection"は、数字が勝手に電話番号として認識されてしまってリンクを貼られたりする機能を抑制します。

Safariっぽさを消す

Webアプリってあれでしょ、上下にアドレスバーとかツールバー出てるんでしょ。ダサーイ（笑）というのを避けるためにSafariっぽさを消します。
といってもコレには条件があって、一度Safariでページを開いたあとにツールバーからiPhoneのホーム画面にアイコンを登録して、そこから開いたときのみです。
最初にページを開いたとき、ユーザーに登録を促すように誘導しないといけません。（もちろん見栄えだけの問題なので登録しなくても問題はないのですが）

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-icon" href="images/icon.png">
<link rel="apple-touch-startup-image" href="images/nowloading.jpg">

"apple-mobile-web-app-capable"をyesにすると、ページを全画面で表示します。
これでアドレスバーなどが表示されなくなります。

"apple-mobile-web-app-status-bar-style"は、ステータスバーの色を指定できます。
"default"（デフォルト） "black"（黒） "black-translucent"（黒半透明）です。

"apple-touch-icon"で、ホーム画面に表示するアプリのアイコンを指定します。
iPhoneアプリのアイコンはガラスがきらっと反射した感じになってますが、ここで指定した画像に自動的にオーバーレイで効果が掛かるので気にしなくて大丈夫。

"apple-touch-startup-image"を使えば、アプリをロードしている時間のスタートアップ画像を指定できます。

これをやると、見た目はほとんどネイティブアプリと変わらないところまで行きます。

やっとJavaScriptです

さて、ここからは中身です。
せっかくのiOSアプリなのでインターフェースもそれっぽくしたいですし、
何より自分でつくっていくのは面倒なのでライブラリを使わせていただきましょう。

いまぼちぼち使われているライブラリは

iUi - Google Code Archive - Long-term storage for Google Code Project Hosting.

iWebKit - http://iwebkit.net/

jQTouch - jQT (formerly jQTouch) — Zepto/jQuery plugin for mobile web development

jQuery Mobile - jQuery Mobile

あたりでしょうか。
iUiやiWebKit等はiOS SDKのUIに似せたデザインで、jQTouchやjQuery Mobile等は独自にUIをデザインしている感じです。
この辺りは好みで。ただ、個人的には初心者はUIが統一されてるほうが分かりやすいんじゃないかなと思います。

私が以前アプリを作成したときはiUiを利用しました。

iOS Webkitでの開発

まず「設定 → Safari → デベロッパ → デバッグコンソール」で開発ツールをオンにしときましょう。
これでエラーの詳細が実機上で見られるようになります。

またiOSのWebkitではJavaScriptに独自イベントがたくさんあります。
せっかくタッチ出来る画面なんだから、addEventListenerでリッスンしておくとタッチ情報がバンバン飛び込んでくる感じになりますのでやりましょう。

document.body.addEventListener("touchstart",touchHandler,false);

function touchHandler(event) {
	num=event.touches[0];
	x=touch.pageX;
}

独自のイベントや属性等はあちこちに書いてあるので割愛しますが、タッチしている指の本数や座標・端末が回転したときなど、さまざまな情報が取得可能です。

Safari HTML Reference: Introduction

ダイアログが表示されますが、GPSとGeolocation APIで現在位置も取れます（navigator.geolocation.getCurrentPosition）まあダイアログが出るのはネイティブアプリでも同じですね。

さらにiOS4.2から加速度センサーの値まで取れるようになったので、canvasやCSS3と組み合わせれば普通にゲーム作れると思います。すごいですね。

jQueryを使って開発する場合の注意点

jQuery使ってるし、せっかくだから俺は「$("body").bind("touchstart",touchHandler);」を選ぶぜ！という方。
touchHandlerは
	function touchHandler(event) {
	alert(event.touches[0]);
	}
と書きたくなるところですが、このままだと取れません。
	function touchHandler(event) {
	alert(event.originalEvent.touches[0]);
	}
これならOK！

とまあ、iOSのWebKitはかなり強力です。
ちょちょっと独自属性を追加してやるだけでユーザビリティが簡単に確保出来ますし、簡単なアプリならネイティブで開発するより楽チンだと思います。

また最近、JavaScriptでiOS/Androidアプリが開発出来るTitaniumも話題になっていますので、そちらの動向も目が離せません！

Home - Appcelerator | The Mobile First Platform

それでは、良い12月を！