iPhoneのSafariで動くWebアプリを作ったときのメモ
iPhoneではSafari上で動くWebアプリをいかにもネイティブのiPhoneアプリであるかのように見せかけて作ることができます。これだとApp Storeの審査などを通さずにリリースできるので、リリースやフィードバックのサイクルが速く、手軽に作れます。今回、ある画像ビューワーをWebアプリとして作って、そのときにいろいろ調べたのでそのメモを以下に書きます。
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
これはiPhone用ページとしては基本のviewport。今回は拡大できないようにしました。
<meta name="apple-mobile-web-app-capable" content="yes" />
これが今回の肝。これを記述することでSafariの上のアドレスバーと下のボタン類を非表示にすることができます。こうなるとブラウザで見ているという感覚はなくなり、あっという間にネイティブアプリっぽくなります。ただしそのように表示されるのは、そのページを「ホーム画面に追加」してアイコンからアクセスした場合のみです。普通にSafariで開いただけじゃダメなんですね。ホームに追加して本物のアプリっぽくした上で、そこから開かないと本物のアプリっぽく見せられないわけです。
<link rel="apple-touch-icon-precomposed" href="/images/icon.png" />
これはホーム画面に追加したときのアイコンの画像を指定します。画像は正方形で用意。
$(document).bind('touchstart', function(event) {event.preventDefault();});
$(document).bind('touchmove', function(event) {event.preventDefault();});
$(document).bind('touchend', function(event) {event.preventDefault();});次はこれです。Safariでブラウジングしてて指で画面をなぞると画面がビヨ〜ンとなりますよね。思いっきりやると画面じゃないグレーのところも見えたりしますよね。例えばGoogleの検索結果ページでは、横方向はビヨ〜ンとならずに縦方向だけビヨ〜ンとなります。このビヨ〜ンを無くすのが上の3行です。jQuery使ってますが、3つのタッチ系イベントに対してデフォルトのイベント処理を無効にしています。
<html manifest="index.appcache">
CACHE MANIFEST # version 0.5 NETWORK: index.html CACHE: javascripts/underscore-min.js javascripts/jquery-1.7.2.min.js images/icon.png images/nishiogi/01.jpg images/nishiogi/02.jpg images/nishiogi/03.jpg 以下略
続いてですが、アプリたるものやはり電波がなくても動かしたい場合もあるわけです。そんなときのためにキャッシュです。キャッシュしたいページのHTMLでキャッシュマニフェストを指定し、そのキャッシュマニフェストにキャッシュしたファイルを記述します。詳しくは以下のリンク先。
http://www.html5rocks.com/ja/tutorials/appcache/beginner/
そんな感じで作ったアプリがこちらです。Safariで開いて「ホーム画面に追加」してから見てください。コードはGitHubに置いてあります。
http://echobyecho.appspot.com/
https://github.com/yuribossa/echobyecho
