2013年5月30日

iOSでウェブサイトをフルスクリーン表示させる

iOSでウェブサイトをフルスクリーン表示させる方法をメモしておきます。言葉で説明するより、画面を見てもらうのが早いと思います。

iPhoneのSafariで、ウェブサイトを閲覧すると、通常は、上図左のような画面になりますが、上図右のような画面表示にするための方法です。Safariのアドレスバーや、ナビゲーションバーが表示されませんので、使える場面は限られますが、以下のような使い方ができるのではないでしょうか。

Google Maps等のFull JavaScriptのWebアプリを広いスクリーンで表示する
いわゆるハイブリッドアプリ（ネイティブアプリ中身がHTML）を作る過程での簡易確認
制御ボタンもHTMLで作って、Webアプリだけど、ネイティブアプリっぽく見せる

1. と 3. は、ほぼ同義ですね。既に存在しているWebアプリを広い画面で使うか、自分で作るかの違いです。
Google Mapsをフルスクリーン表示させるのは、iPhone5が発売されて、Google Mapsのアプリが削除されたときに流行ったりしました。現在は、Google Mapsのネイティブアプリが存在していますが、当時はなかったので、重宝した方もいらっしゃるのではないでしょうか。
リンク：iOS6でGoogleMapsをフルスクリーン表示にしてみました – W&R : Jazzと読書の日々

そんな少し古いネタを今更取り上げるのは、2. 3. あたりを、最近、頻繁に作っていたからです。

iOSでウェブサイトをフルスクリーン表示させる

では、早速見ていきましょう。
iOSでウェブサイトをフルスクリーン表示させるには、以下の手順が必要です。

フルスクリーン表示用のHTMLファイルを作成、サーバに設置
そのファイルに、Safariでアクセスした上で、「ホーム画面に追加」を行う
ホームに追加されたアイコンをタップすると、フルスクリーンモードで指定ページが表示される

フルスクリーン表示用のHTML

以下は、フルスクリーン表示用のHTMLファイルのサンプルです。

<!DOCTYPE html>
<html >
<head>
	<meta charset="UTF-8">
	<title>mawatari.jp</title>
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="viewport" content="initial-scale=1.0">
	<link rel="apple-touch-icon" href="home.png">
	<script>
	if (window.navigator.standalone) {
		location.href="https://mawatari.jp/";
	} else {
		document.write("このページをホームに追加してください");
	}
	</script>
</head>

<body>
</body>
</html>

<!DOCTYPE html>

<html >

<head>

<title>mawatari.jp</title>

if (window.navigator.standalone) {

location.href="https://mawatari.jp/";

} else {

document.write("このページをホームに追加してください");

}

</script>

</head>

<body>

</body>

</html>

フルスクリーンモードの指定とステータスバーの設定

6行目 apple-mobile-web-app-capableを yesにすることで、フルスクリーン表示となります。7行目の apple-mobile-web-app-status-bar-styleを指定することで、ステータスバーの色を制御することができます。 blackと nativeは不透過黒、 black-translucentは透過黒になります。
この辺りのメタタグについては、以下のサイトに詳しいです。
リンク：iPhone向けSafari、HTML拡張属性を使いこなす – 株式会社シンメトリック公式ブログ

上図左: <meta name="apple-mobile-web-app-status-bar-style" content="black">

上図右: <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

ご覧の通り、 black-translucentを指定すると、ステータスバーが透過黒になるだけでなく、ステータスバーとWeb領域が別のレイヤーになります。Web領域の高さ（height）が、ステータスバーの20px分だけ広くなります。スクロールすると、以下のような感じです。

指定ページをフルスクリーンモードで表示

続いて、10行目〜16行目。 window.navigator.standaloneオブジェクトで、iPhoneのスクリーンモードを調べて、フルスクリーンであった場合は、指定したページへリダイレクトさせます。そう出なかった場合は、ホーム画面への追加を指示するメッセージを表示します。

必須ではないが、指定しておくと良いこと

地味だけど重要なのが、8行目。
このメタタグ viewportはなくてもよいですが、記述しておくと、iPhoneにあったサイズになるので、メッセージが読みやすくなりますね。で、やってはならないのが、 viewportに width=device-widthを記述してしまうこと。これを付けてしまうと、下図のように、フルスクリーンモードが、iPhone4sまでのサイズになってしまいます。

9行目のメタタグ apple-touch-iconも、なくても良いですが、記述しておくことで、ホーム画面に追加される際の画像を指定することができます。以下のようなイメージです。

メタタグを apple-touch-icon-precomposedに変更すると、光沢処理が施されていないアイコンを表示することができます。以下の通りです。

アイコンが表示されることによって、ネイティブアプリっぽさが表現できますね。

Bookmarkletを使う

必ずしもHTMLファイルを作る必要がある訳ではありません。以下のブックマークレットを用意しておけば、任意のページをフルスクリーン表示させることができます。リダイレクト先のURLと、ホームアイコンの指定は、適宜編集してください。

data:text/html;charset=UTF-8,<title>Full Screen View</title><meta name=apple-mobile-web-app-capable content=yes><meta name=apple-mobile-web-app-status-bar-style content=black><link rel=apple-touch-icon-precomposed href="https://mawatari.jp/home.png"><script>if(window.navigator.standalone){location.href="https://mawatari.jp/";}else{document.write("このページをホームに追加してください")}</script>

data:text/html;charset=UTF-8,<title>Full Screen View</title><meta name=apple-mobile-web-app-capable content=yes><meta name=apple-mobile-web-app-status-bar-style content=black><link rel=apple-touch-icon-precomposed href="https://mawatari.jp/home.png"><script>if(window.navigator.standalone){location.href="https://mawatari.jp/";}else{document.write("このページをホームに追加してください")}</script>

デメリット、注意点等

広いスクリーンで閲覧することができるようになりましたが、意外な落とし穴があります。一般的なウェブサイトをそのままフルスクリーン表示すると、アンカータグを押したタイミングでSafariが起動し、画面が切り替わってしまうのです。
これでは、せっかくフルスクリーン表示にしても、意味がなくなってしまいます。ただし、JavaScriptでの画面遷移は、有効ですので、一括で書き換えてしまいましょう。HTMLに手を加えずにやるのであれば、以下のようなやり方が良いのではないでしょうか。
リンク：Webアプリモードで意外と書かれていない落とし穴 – Kaleidoscope

<script type="text/javascript" src="assets/lib/jquery-2.0.0.min.js"></script>
<script type="text/javascript">
	$(function(){
		$('a').click(function(){
			location.href = $(this).attr('href');
			return false;
		});
	});
</script>

$(function(){

$('a').click(function(){

location.href = $(this).attr('href');

return false;

});

</script>

あと、分かりきったことですが、ナビゲーションバーがありませんので、「戻る」「進む」「更新」等が、できません。導線が確保されていれば問題ありませんが、ご留意ください。

HTMLの知識だけで、ネイティブアプリっぽい何かを作る

僕は職業柄、モックアップを作っては壊し、作っては壊しを行うことが多いです。最終的にハイブリッドアプリを作る企画であった場合等、ワイヤーフレームを書くような感覚で、HTMLでモックアップを作って、お客さんの反応を貰いながら、レスポンシブに変更していくというスタイルを取っています。これには、いくつかのメリットがあって、例えば、以下のようなものです。

遠隔地にいるお客さんにも手軽に届けることができること
Ad Hocをインストールしてもらう必要がないこと
何ならPCでの確認でも問題ないこと

これは、Webアプリならではのことだと思います。

全国に散らばる複数の方に見ていただかないといけないような業務なので、色々模索した結果、今は、このスタイルに落ち着きました。HTML + CSS + JS であれば、僕一人で作業が完結できるので、コストもスピードも良いです。もちろん、（予算次第で）最終的にはデザイナーを起用して作り直しますよ。

例えば、以下のようなイメージです。最上部20pxのステータスバーは、ネイティブのものですが、それ以外は全てHTMLです。ウェブフォントを使って、アイコンを表示させる等して、極力、コストを下げるようにしています。色の修正等が発生しても簡単に変更できますからね。

コンテンツや制御ボタンのイベントは無い状態なので、1日前後で追加する感じです。
デモやソースコードは、以下のリンクからどうぞ。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>Like native apps demo</title>
	<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
	<link rel="stylesheet" href="assets/lib/cssreset-min.css"/>
	<link rel="stylesheet" href="assets/lib/font-awesome/css/font-awesome.min.css">
	<style type="text/css">
		html {
			height: 548px;
			width: 320px;
		}
		body {
			height: 100%;
			font-family: Verdana, Arial, sans-serif;
			font-size: 12px;
			color: #ebebeb;
		}

		#global_header {
			height: 30px;
			line-height: 30px;
			padding: 0 10px;
			background-color: #1E1E1E;
		}

		#global_footer {
			height: 44px;
		}
		#global_footer ul li {
			float: left;
			height: 44px;
			line-height: 44px;
			font-size: 18px;
			text-align: center;
			width: 20%;
			background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #666666), color-stop(1, #000000));
			background-color: #1E1E1E;
		}
		#global_footer ul li i.big {
			font-size: 28px;
			height: 44px;
			line-height: 44px;
		}

		#content {
			width: 320px;
			height: 474px;
			overflow: hidden;
			overflow-y: scroll;
			-webkit-overflow-scrolling: touch;
		}
		#content #content-sample {
			width: 320px;
			height: 1000px;
			line-height: 50px;
			padding-top: 300px;
			color: #333333;
		}
	</style>
</head>
<body>

<div id="global_header">mawatari.jp</div>

<div id="content">
	<div id="content-sample">
		<h1>content</h1>
		<ul>
			<li><a href="index.html">index</a></li>
			<li><a href="foo.html">foo</a></li>
			<li><a href="bar.html">bar</a></li>
			<li><a href="baz.html">baz</a></li>
		</ul>
	</div>
</div>

<div id="global_footer">
	<ul>
		<li><i class="icon-caret-left big"></i></li>
		<li><i class="icon-caret-right big"></i></li>
		<li><i class="icon-repeat"></i></li>
		<li><i class="icon-external-link"></i></li>
		<li><i class="icon-cog"></i></li>
	</ul>
</div>
<script type="text/javascript" src="assets/lib/jquery-2.0.0.min.js"></script>
<script type="text/javascript">
	$(function(){
		$('a').click(function(){
			location.href = $(this).attr('href');
			return false;
		});
	});
</script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Like native apps demo</title>

html {

height: 548px;

width: 320px;

}

body {

height: 100%;

font-family: Verdana, Arial, sans-serif;

font-size: 12px;

color: #ebebeb;

}

#global_header {

height: 30px;

line-height: 30px;

padding: 0 10px;

background-color: #1E1E1E;

}

#global_footer {

height: 44px;

}

#global_footer ul li {

float: left;

height: 44px;

line-height: 44px;

font-size: 18px;

text-align: center;

width: 20%;

background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #666666), color-stop(1, #000000));

background-color: #1E1E1E;

}

#global_footer ul li i.big {

font-size: 28px;

height: 44px;

line-height: 44px;

}

#content {

width: 320px;

height: 474px;

overflow: hidden;

overflow-y: scroll;

-webkit-overflow-scrolling: touch;

}

#content #content-sample {

width: 320px;

height: 1000px;

line-height: 50px;

padding-top: 300px;

color: #333333;

}

</style>

</head>

<body>

<div id="global_header">mawatari.jp</div>

<h1>content</h1>

<ul>

<li><a href="index.html">index</a></li>

</ul>

</div>

<ul>

</ul>

</div>

$(function(){

$('a').click(function(){

location.href = $(this).attr('href');

return false;

});

</script>

</body>

</html>

2 Comments

iOS向けWebアプリ開発に役立つ情報超絶まとめ
2013年7月19日 @ 2:04 AM
[…] mobile safariのmetaタグのサポートをまとめてみた iOSでウェブサイトをフルスクリーン表示させる Memo, [iOS][mobile […]
Mar
2020年3月2日 @ 9:54 AM
とても参考にさせて頂いています。
iOS13.3.1の環境ですが、現在ウェブアプリモードでウェブサイトを製作すると、safariで開かないものの、リンク先に移動した際、画面左上に「完了」の文字が表示されてしまいます。
こちら、「デモ – フルスクリーンモード起動用HTML」で試してみると、「完了」が表示されていないため、「完了」を消すにはどうすれば良いのかもしお尋ねできればと思いました。
もしお分かりになる様でしたらご教示頂けますと幸いです。
よろしくお願いいたします。

iOSでウェブサイトをフルスクリーン表示させる

iOSでウェブサイトをフルスクリーン表示させる

フルスクリーン表示用のHTML

フルスクリーンモードの指定とステータスバーの設定

指定ページをフルスクリーンモードで表示

必須ではないが、指定しておくと良いこと

Bookmarkletを使う

デメリット、注意点等

HTMLの知識だけで、ネイティブアプリっぽい何かを作る

関連性の高い記事

2 Comments

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル