通常 MovableType.net で作成したサイトをiPadなどのタブレットや、iPhone などのスマートフォンで見ようとすると必ず Safari などブラウザで見ることになります。
今回は作成したウェブサイトをあたかもスタンドアローンのアプリケーションのようにみせる方法をご紹介します。また、実際のサンプルテーマも掲載します。
利用例としては、このアプリだけ起動するような制限をかければデジタルサイネージの代わりになりますし、展示会場でタブレットを使って説明する場合にブラウザのステータスバーなど余計な部分を表示しないで完結したアプリのように見せられる、といったことがあります。
iOS でも Android でも基本的な部分は同じで、ページを開いて状態でホーム画面にこのサイトを登録する、といった操作をするとホーム画面にアイコンが表示されるので、それを起動する操作になります。
head内に必要な meta情報 を記述
まず、そのための下準備としてhead内に次のコードを記述します。
※MovableType.net でテンプレートで記述できるように MTタグ を利用しています。
iOS の場合
<!-- Add to homescreen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="<$mt:BlogName encode_html="1"$>">
<link rel="apple-touch-icon-precomposed" href="<$mt:BlogURL encode_html="1"$>images/apple-touch-icon-precomposed.png">
apple-mobile-web-app-capable がポイントでこれが yes になっていることで、Safari でなくアプリのように立ち上がります。
最後の apple-touch-icon-precomposed.png は、ホーム画面に表示される画像になります。180px✕180px程度で用意してください。
詳しくは Apple のサイトをご参照ください。
Android の場合
<!-- Add to homescreen for Chrome on Android -->
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" sizes="192x192" href="<$mt:BlogURL encode_html="1"$>images/chrome-touch-icon-192x192.png">
こちらも mobile-web-app-capable が yes となっているがポイントですね。
chrome-touch-icon-192x192.png はホーム画面に表示される画像になるので192px✕192pxで用意してください。
詳しくは Google のサイトをご参照ください。
jQueryによるURLの置き換え
1点重要なポイントがあるのですが、meta情報 だけだと iOS でアクセスした場合に最初のアクセスはアプリのように立ち上がりますが、URL となっているaタグをクリックした場合に Safari が別に立ち上がってしまいます。
そこで、ちょっとした工夫が必要となります。
具体的には jQuery を利用して aタグ の機能を JavaScript で実現するように書き換えます。
実際に後述するデモサイトで記述しているコードはこちらです。
※今回のデモ用テーマではプルダウンメニューがあるので .tablet-pullmenu を書き換えから除外してます。aタグ の書き換えは色々な影響がありますので、ご自身のコンテンツによって調整してください。
$(function() {
$('a:not(.tablet-pullmenu)').click(function(ev) {
ev.preventDefault();
location.href = $(this).attr('href');
});
});
この方法は次のサイトを参考にしています。
デモサイトとインポート可能なテーマ
実際にタグを設定したサンプルデモサイトはこちらです。
サイトにアクセスし、ホーム画面に登録してアイコンからアクセスしてみてください。
また、このサンプルサイトのデザインテーマをインポートできるようにしましたので、是非ファイルをダウンロードしてお試しいただければと思います！
なおサンプルサイトは Shopテーマ をベースにしてカスタマイズしています。
このように、ちょっと工夫をするだけでスタンドアローンのタブレット・スマートフォンアプリケーションのように見せることができます。
是非一度お試しください！
