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をチェックすれば、判別出来ます。フルスクリーン状態でのみ実行させたい場合などは、これでチェックして登録を促すメッセージなどを表示すれば良いと思います。

閲覧数: 1254 / はてなブックマークusers

blog comments powered by Disqus

関連日記

アマゾン広告

この日記ページは閲覧数などの条件に応じて、閲覧制限を行っています。他からリンクしていただいても、そのリンクから辿った閲覧者が当ページの内容をご覧頂けない場合があります。ご了承下さい。

▼日記検索

Mac

Shade

3D

Flash

ゲーム

ウェブ

音楽

映画

デジカメ

Windows

Linux

携帯電話

テレビ

広島

電子工作

iOS

▼ 最近のトラックバック

▼ランキング

▼関連サイト