HTMLでiOSアプリっぽいモノを作る < iOS

2014年07月10日

HTMLでiOSアプリっぽいモノを作る @ iOS

iOSアプリは基本的にAppleの審査を経てApp storeで公開になりみんなに使って貰う事が出来るのですが、そこまでする必要が無い場合にHTMLで作ると手もあります。普通にMobile Safariで表示しても良いのですが、それだとウェブページなのがバレバレなので、apple-mobile-web-app-capableを使ってブラウザっぽさを無くします。

[iOS 6][iOS 7] mobile SafariのStandalone modeでフルスクリーンにするviewport設定 « イナヅマTVログ
>>関連リンク

これだけだとリンク先が通常のブラウザ表示(Mobile Safari)に飛んでしまったりするので、Javascriptで対応。

スマホサイト：Webアプリモードで意外と書かれていない落とし穴 - Kaleidoscope
>>関連リンク

ただ、これだとイメージマップでリンクを設定していたりすると具合悪いので、
var aTags = $('a,area'); の様に変更。イメージマップを使って無い場合は必要ないです。

あとは、アイコンを用意しておいてあげるとホーム画面に登録(WebClip)した時にアプリっぽくなります。色々と解像度毎にアイコン画像を用意しても良いですが、ファイル名apple-touch-icon.pngとして、152pxのサイズを用意するだけでも十分です。

それから、画面のスクロールをさせたく無い場合は、ontouchmove="event.preventDefault()"をbodyに追加すればOK。画面サイズぴったりに作った場合は、スクロールする必要も無いと思うので、コレを設定します。ただ、iPhone 5以降とiPhone 4s以前で画面サイズが違うので、画面を固定する場合は、要注意。

最後にもう一つ。Standalone modeだけで動作する状況にする場合は、Javascriptでwindow.navigator.standaloneをチェックすれば、判別出来ます。フルスクリーン状態でのみ実行させたい場合などは、これでチェックして登録を促すメッセージなどを表示すれば良いと思います。