ウェブサイトをiPhoneネイティブアプリのように、アドレスバーやツールバーを非表示にする方法をまとめました。これによってObjective-CやSwiftを覚えずとも簡単なウェブアプリを発信する事ができるようになります。
まずはこの技術を使っているサイトをご紹介します。
iPhoneでサイトアクセスの後に、フッターからホーム画面に追加を選択すると、アプリとしてウェブサイトが起動します。
参考サイト
■ 四季電車
http://nulldesign.jp/shikidensha/
こちら手前味噌ですが、こちら、先日行われた東京メトロオープンデータコンテストで入賞させていただきました!
■ Forecast
http://forecast.io/
非常にグラフィカルで美しい天気情報サイトです。
メリットとデメリット（気をつけるべき点）
何事にもメリットとデメリットが存在します。この方法も例外ではありません。
メリット
- HTML系の言語を知っていれば比較的用意にコンテンツを立ち上げる事ができる
- 安定したウェブ制作技術がそのまま転用できる
- ストア申請の必要がない
デメリット（気をつけるべき点）
- iPhoneの仕様が変わると使えなくなるリスクがある
- ホーム画面にショートカットを追加する方法があまり認知されていない
- 非同期通信(Ajax)が使えない。（同期通信は今のところ大丈夫のようです）
実際の設定
HTML
アプリモードで立ち上げるための設定
|
1 |
<meta name="apple-mobile-web-app-capable" content="[yes/no]"> |
ステータスバーの設定
|
1 |
<meta name="apple-mobile-web-app-status-bar-style" content="[default/black/black-translucent]" /> |
- default:不透明（デフォルト色）で表示
- black:不透明（黒）で表示
- black-translucent:半透明で表示
ウェブクリップアイコン
|
1 |
<link rel="[apple-touch-icon/apple-touch-icon-precomposed]" href="shared/img/webclip.png"> |
- apple-touch-icon: 光沢あり
- apple-touch-icon-precomposed: 光沢無し
アプリアイコン時の表示名
|
1 |
<meta name="apple-mobile-web-app-title" content="[app title]"> |
アプリ起動画面
|
1 |
<link rel="apple-touch-startup-image" href="shared/img/impression480h.png" sizes="320x480" media="(device-height: 480px)"><br /><link rel="apple-touch-startup-image" href="shared/img/impression480h2X.png" sizes="640x920" media="(device-height: 480px) and (-webkit-device-pixel-ratio: 2)"><br /><link rel="apple-touch-startup-image" href="shared/img/impression640x1096.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)"><br /><link rel="apple-touch-startup-image" href="shared/img/impression750×1294.png" media="(device-width: 375px) and (device-height: 667px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)"><br /><link rel="apple-touch-startup-image" href="shared/img/impression1242×2148.png" media="(device-width: 414px) and (device-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3)"> |
基本的には画面の高さ-20px（バーの高さを引いた数字）が軌道画面のサイズとなります。
JavaScript
サイトアクセス時と、ホームから立ち上げたときの振り分け
|
1 2 3 4 5 6 |
if( window.navigator.standalone ) { // ホームから立ち上げました } else { // ブラウザからアクセスしました } |
対応例
|
1 2 3 4 5 6 7 8 9 10 11 12 |
if( window.navigator.standalone ) { // ホームから立ち上げました // アプリとしての挙動を記述 } else { // ブラウザからアクセスしました // PC用のコンテンツを読み込みます $("body").load("pc.html body", function(){ // 読み込み後の処理を記述 hogehoge(); }); } |
CSS
アプリ時に設定したおいた方がいいCSS
- アニメーションは基本的にCSS3で行う
- グラフィックを使ったUI要素は極力背景に設定する
以前よりスマホの処理能力は上がっているとはいえPCと比べればまだ非力な事は否めません。
CSS3のアニメーション処理などを用いることで、快適な操作性が担保されますし、バッテリーの消費も抑えられます。積極的にパフォーマンス向上に取り組んでいきましょう！
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
/* タップ時のハイライトカラーの設定 */ /* 意図しない画像やテキスト選択の可能性もあるので、ハイライトカラーを透明に設定 */ a{ -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-touch-callout:none; } *{ -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; -webkit-text-size-adjust: none; box-sizing: border-box; font-size: 1.0rem; } *:not{ -webkit-user-select: none; } /* 滑らかにスクロールしたい要素に対して */ selector{ height: 100%; overflow: scroll; -webkit-overflow-scrolling: touch; } |
最後に
上記手法を使う事で、ネイティブアプリ以外でもアプリのような挙動を持ったコンテンツを作る事ができます。ただ、この方法ではiPhoneの機能を完全に使う事はできません。（iBeaconやプッシュ通知など。。。）
制作物に求められる機能によって、作り方を変えたり、さくっとHTMLでデモコンテンツだけ作る・・・といった使い方ができるのもいいですね。
