ウェブサイトサンプル

記事

デザイン

iPadなどのタブレット端末やスマートフォンでスタンドアローンのアプリのように見せるための方法

通常MovableType.netで作成したサイトをiPadなどのタブレットや、iPhoneなどのスマートフォンで見ようとすると必ずSafariなどブラウザで見ることになります。

今回は作成したウェブサイトをあたかもスタンドアローンのアプリケーションのようにみせる方法をご紹介します。また、実際のサンプルテーマも掲載します。

ipad.jpg

利用例としては、このアプリだけ起動するような制限をかければデジタルサイネージの代わりになりますし、展示会場でタブレットを使って説明する場合にブラウザのステータスバーなど余計な部分を表示しないで完結したアプリのように見せられる、といったことがあります。

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テーマをベースにしてカスタマイズしています。

このように、ちょっと工夫をするだけでスタンドアローンのタブレット・スマートフォンアプリケーションのように見せることができます。
是非一度お試しください！

top