ノウハウをいつでも。ウェブマーケティングのポータルサイト

MovableType.net Tips

MovableType.netをタブレット端末やスマートフォンの専用アプリに見えるようにカスタマイズしよう

このエントリーをはてなブックマークに追加
      
follow us in feedly
友だち追加数
本記事は、MovableType.net 活用ブログ に投稿した記事に加筆を加えて転載したものです。オリジナル記事は「iPadなどのタブレット端末やスマートフォンでスタンドアローンのアプリのように見せるための方法」 です。

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

今回の記事では、MovableType.netで作成したサイトを、あたかもiPadやAndroidなどのスタンドアローンアプリケーションのようにみせる方法をご紹介します。また、実際のサンプルテーマも掲載します。

ipad.jpg

この設定を行うと、MovableType.netをデジタルサイネージのソフトのように使うことができます。展示会場でタブレットを使って説明する場合に、ブラウザのステータスバーなど余計な部分を表示しないで、完結したアプリのように見せられる、といったことも可能となります。

iOSでもAndroidでも基本的な部分は同じで、ページを開いた状態でホーム画面にこのサイトを登録する、といった操作を行ってもらい、ホーム画面にアイコンを表示されるようにして、そのアイコンから起動します。

head内に必要なmeta情報を記述

まず、下準備としてhead内に以下の情報を記述します。

※MovableType.netでテンプレートで記述できるようにMTタグを利用しています。

iOSの場合

&lt;!-- Add to homescreen for Safari on iOS --&gt;<br />&lt;meta name="apple-mobile-web-app-capable" content="yes"&gt;<br /> &lt;meta name="apple-mobile-web-app-status-bar-style" content="black"&gt;<br /> &lt;meta name="apple-mobile-web-app-title" content="&lt;$mt:BlogName encode_html="1"$&gt;"&gt;<br /> &lt;link rel="apple-touch-icon-precomposed" href="&lt;$mt:BlogURL encode_html="1"$&gt;images/apple-touch-icon-precomposed.png"&gt;

apple-mobile-web-app-capable がポイントです。これをyesと指定することで、ブラウザを使わず、スタンドアロンアプリのように立ち上がります。
最後のapple-touch-icon-precomposed.pngは、ホーム画面に表示される画像になります。180px✕180px程度で用意してください。

詳しくは以下のappleのサイトをご参照ください。

Androidの場合

&lt;!-- Add to homescreen for Chrome on Android --&gt;<br /> &lt;meta name="mobile-web-app-capable" content="yes"&gt;<br /> &lt;link rel="icon" sizes="192x192" href="&lt;$mt:BlogURL encode_html="1"$&gt;images/chrome-touch-icon-192x192.png"&gt;

こちらもmobile-web-app-capableがyesとなっているがポイントですね。
chrome-touch-icon-192×192.pngはホーム画面に表示される画像になるので192px✕192pxで用意してください。

詳しくは以下のGoogleのサイトをご参照ください。

jQueryによるURLの置き換え

1点重要なポイントがあるのですが、上記のmeta情報だけだとiOSでアクセスした場合に最初のアクセスはアプリのように立ち上がりますが、URLとなっているaタグをクリックした場合にSafariが別に立ち上がってしまいます。

そこで、ちょっとした工夫が必要となります。
jQueryを利用してaタグの機能をJavaScriptで実現するように書き換えます。
実際に後述するデモサイトで記述しているコードは以下となります。
※今回のデモ用テーマではプルダウンメニューがあるので .tablet-pullmenu を書き換えから除外してます。aタグの書き換えは色々な影響がありますので、ご自身のコンテンツによって調整してください。

$(function() {<br /> $('a:not(.tablet-pullmenu)').click(function(ev) {<br /> ev.preventDefault();<br /> location.href = $(this).attr('href');<br /> });<br />});

上記方法は以下のサイトを参考にさせていただいています。

デモサイトとインポート可能なテーマ

実際に上記タグを設定したサンプルデモサイトは以下になります。
サイトにアクセスし、ホーム画面に登録してアイコンからアクセスしてみてください。

参考として上記のサンプルサイトのデザインテーマをインポートできるようにファイルにしましたので、以下のファイルをダウンロードしてお試しください!
なおサンプルサイトはShopテーマをベースにしてカスタマイズしています。

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

© MAKEPO

 
このエントリーをはてなブックマークに追加
   
follow us in feedly
友だち追加数

著者情報

ノビタ

のび太

Web制作会社「NOBITA」の社長をやっております、のび太と申します。大学卒業後、お金を貯めカナダに留学。バンクーバーのビジネス学校で好きな人に出会ってしまったため、日本に帰らず現地企業に就職。未経験ながらWeb制作、メディア運営、ライター業などの仕事に奮闘する。帰国後、フリーランスのWebデザイナーとして独立し、2014年5月、自身の会社を設立。「伸びていくWebサイトをお届けする!」がモットー。 ブログ:がんばれ!のび太!

他の参加者を見る

のび太

関連記事

マーケティングノウハウ足りてますか?

MAKEPOのメルマガ…購読してみませんか?
直近のピックアップ記事のほか、セミナー・ツール活用情報など不定期でお伝えしています。「サイトにアクセスするのは面倒だ!」「電車の中でざっくり読みたい」という方は是非ご登録ください。 リアルタイムで情報取得をしたい方は、RSSまたは公式Twitterをフォローしてご覧ください!

通勤中の情報収集に!

メルマガ登録

いますぐ新着情報を知るなら

LINE@で友だちに追加!