【Web開発者必見！】Windows8タブレット向けWebサイトを構築する際に知っておくべき9つのポイント

#Windows

T君

2013.03.12

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

Windows8が出てしばらく経ちました。今後はWindows8のタブレットやハイブリッド型のノートPCが普及して、モダンUIのブラウザも開発対象になっていくと思います。弊社ではWindows8タブレット、モダンUIのInternet Explorer10を対象にしたWeb案件も始まっています。既存のサイトをモダンUIブラウザに対応することも増えるでしょう。そこでデスクトップのブラウザで開発する場合とどのような違いがあるのかをまとめてみました。あと誤解のないようにいっておくとタブレットでも一応、デスクトップのブラウザは使えます。ただタッチパネル用ではないのであまり使いやすくありません。ですのでタッチパネル向け＝モダンUIブラウザ向けという前提で話を進めます。

1. モダンUIブラウザの開きかた

Windows8にあまり触ったことのない方が最初につまずくポイントではないでしょうか。モダンUIのブラウザはスタートスクリーンから起動します。ですが、デスクトップ版とモダンUI版でアイコンが２つあるわけではありません。ではどうするのかというとモダンUIで開きたいブラウザを既定のプログラムにする必要があります。試しにやってみましょう。

私の環境ではGoogle Chromeが既定のブラウザになっています。これをInternet Explorerに変更します。

[コントロールパネル]-[プログラム]-[既定のプログラム]-[既定のプログラムを設定する]
を開きます。Internet Explorerの画面で、「すべての項目に対し、既定のプログラムとして設定する」を選択し、OKボタンをクリックします。

変更が完了したらスタートスクリーンを開いてください。アイコンが変わっていると思います。

2. ブラウザの種類

まず、モダンUI版のブラウザにはどのようなものがあるのかを見ていきましょう。

Internet Explorer 10

まずは最初からインストールされているInternet Explorer 10です。
アプリバーからタブの移動やページ内検索、お気に入りやよく見るページへの遷移などができます。
チャームから検索検索したり、設定画面を開くことが可能です。スワイプで前のページに戻ったりできるので便利です。

Google Chrome

次にGoogle Chromeを使ってみます。Chromeを既定のブラウザにしたらメニューから「Windows8モードでChromeを再起動」を選択してください。
タイトルバーが黒になって再起動されると思います。使用感はほぼデスクトップ版と変わりません。私は普段、Chromeを使っているので操作を覚えなくてもいいのはうれしいのですが、ボタンをもう少し大きくしてくれるとありがたいです。見た目が変わってないのにモダンUI版というのも変な感じがしますね。
※ChromeはWindowsRTでは使うことができません。

Mozilla Firefox

最後にFirefoxです。まだこちらは Nightly Build版しかありません。以下のサイトからダウンロードできます。
Firefox　Nightly Build

インストールできたら既定のブラウザに設定してスタートスクリーンから開きます。
IEのようにタブを隠すこともできますし、以下の画像のように表示しておくこともできます。

ブックマーク、履歴周りやタブが個人的には一番使いやすいと思いました。早く正式リリース版を使ってみたいです。

他にもあるかもしれませんが、以上の3種類のブラウザを対象に調査を進めていきたいと思います。

3. 開発者ツールは使えるのか

3つのモダンUIブラウザで開発者ツールが使えたのはChromeだけでした。Firefoxはダメ元でFirebug 1.12 alpha 3をインストールして試してましたモダンUI版では使えないようです。MicrosoftのサイトではモダンUIのIEからデスクトップ版のIEを開いて開発者ツールを使うといいよ、みたいな事が書いてありました。

Windows 8 での Internet Explorer 10 (Internet Explorer)

4. デスクトップ版なのかモダンUI版なのかを判別することはできるのか

場合によってはデスクトップ版なのかモダンUI版なのかで処理を分けたいこともあるかもしれないと思い、判別する方法があるかを調べました。
Internet Explorer、Chrome、Firefoxすべてのブラウザでユーザーエージェントを確認してみましたが、ユーザーエージェントを使ってデスクトップ版なのかモダンUI版なのかを判別することはできないようです。Internet Explorerに関しては以下のマイクロソフトのページにユーザーエージェントでは判別できない、とあります。
Windows 8 での Internet Explorer 10 (Internet Explorer)

デスクトップ版なのかモダンUI版なのかを判別することはできませんが、IEであればタッチパネルが使えるかどうかの判定は以下のJavascriptで取得できます。

if(navigator.msMaxTouchPoints && navigator.msMaxTouchPoints > 1) {
	// タッチパネル
} else {
	// タッチパネルではない
}

5. 端末の向きは取得できるのか

スマートフォンなどでは縦向き、横向きでレイアウトが変わるサイトもあると思います。同じようにモダンUIブラウザで向きを取得してレイアウトを変えることはできるのか調べました。window.orientationの内容をアラートに表示するサンプルを作って試してみましたが、Internet Explorer、Chrome、Firefoxすべてのブラウザでundefinedと表示されました。ですので当然、orientationchangeイベントもディスパッチされません。resizeイベントは使えるようなのでこれを使って縦横の長さを比較すればいいのではないかと思います。以下がテストに使ったHTMLです。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="width=device-width" />
		<title>orientationサンプル</title>
		<script>
			window.addEventListener("load", function(){
				document.getElementById("mybutton").addEventListener("click", function(){
					alert(window.orientation);
				}, true);
			}, true);
			
			window.addEventListener("orientationchange", function(){
				alert("orientationchange");
			}, true);
			
			window.addEventListener("resize", function(){
				alert("resize");
			}, true);
		</script>
	</head>
	
	<body>
		<input type="button" id="mybutton" value="orientationを表示"/>
	</body>
</html>

6. ブラウザのジェスチャー機能

iPhoneやAndroidのスマートフォンのブラウザではジェスチャーを使うことで実行できる機能があります。タッチパネルを使えるモダンUIのブラウザでも同じような機能があるのかを調べました。もしサイト内でジェスチャイベントを使っている場合は競合するのでブラウザの機能を後述する方法で無効にする必要があります。

Internet Explorer: ピンチイン、ピンチアウトで拡大縮小; ダブルタップで拡大; スワイプでページ移動

Chrome: 今のところIEのように使えるジェスチャーはありません。; ピンチイン、ピンチアウトを使った拡大縮小に関してはGoogleのサイトで既知の問題として挙げられていましたので、今後できるようになると思います。; Chrome を Windows 8 アプリとして起動する

Firefox: 今のところIEのように使えるジェスチャーはありません。; ※こちらはまだ初期段階リリースのため、今後増えると思われます。

7. HTML5のタッチイベント

iPhoneやAndroidのスマートフォンのブラウザではHTML5のタッチイベントなどを使うことできます。
タッチパネルを使えるモダンUIのブラウザでも使えるのかを調べました。

Internet Explorer: touchstart、touchmove、touchendなどのタッチイベントは使用できないようです。指でタッチしてもclickイベントになってしまいました。; タッチイベントに関しては独自のポインターイベントで対応可能なようです。以下のサイトに書いてありました。; ポインターイベントとジェスチャイベント (Windows)

Chrome: HTML5標準のtouchstart、touchmove、touchendなどのタッチイベントは使用可能です。; gesturestart、gesturechange、gestureendなどのジェスチャーイベントは使用不可です。; ※マウスを使ってクリックした場合はclickイベントがディスパッチされます。

Firefox: HTML5標準のtouchstart、touchmove、touchendなどのタッチイベントは使用可能です。; gesturestart、gesturechange、gestureendなどのジェスチャーイベントは使用不可です。; ※マウスを使ってクリックした場合はclickイベントがディスパッチされます。

以下の簡単なHTMLでテストしました。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width" />
        <title>Touch Eventサンプル</title>
        <script>
             
            window.document.addEventListener("click", function(event){
                document.getElementById("result").innerHTML += "click" + "<br/>";
            }, true);
             
            window.document.addEventListener("touchstart", function(event){
                event.preventDefault();
                document.getElementById("result").innerHTML += "touchstart" + "<br/>";
            }, true);
              
            window.document.addEventListener("touchmove", function(event){
                event.preventDefault();
                document.getElementById("result").innerHTML += "touchmove" + "<br/>";
            }, true);
              
            window.document.addEventListener("touchend", function(event){
                event.preventDefault();
                document.getElementById("result").innerHTML += "touchend" + "<br/>";
            }, true);
 
            window.document.addEventListener("gesturestart", function(event){
                event.preventDefault();
                document.getElementById("result").innerHTML += "gesturestart" + "<br/>";
            }, true);
             
            window.document.addEventListener("gesturechange", function(event){
                event.preventDefault();
                document.getElementById("result").innerHTML += "gesturechange" + "<br/>";
            }, true);
             
            window.document.addEventListener("gestureend", function(event){
                event.preventDefault();
                document.getElementById("result").innerHTML += "gestureend" + "<br/>";
            }, true);
        </script>
    </head>
    <body>
        <div id="result"></div>
    </body>
</html>

このHTMLで動きを見ている時に気付いたのですが、IEはmetaタグに指定したviewportが効いてませんでした。調査したところIEはcssでviewportを指定するようです。またブラウザのジェスチャ機能をキャンセルするためにイベントハンドラの中でpreventDefaultしているのですがキャンセルされていませんでした。こちらもcssで指定するようです。以下のように指定します。

<style>
	@-ms-viewport{
		width: device-width;
	}

	body{
		-ms-touch-action: none;
	}
</style>

@-ms-viewportに関しては以下のサイトに詳しく書かれています。
Device Adaptation (Windows)
-ms-touch-actionに指定できる値などは以下のサイトに詳しく書かれています。
[Windows8 モダンUI] IEでのスワイプ操作実装でヒストリー（戻る/進む）との競合を防ぐ方法
 タッチ操作向けサイト構築のガイドライン

8. Flashコンテンツは表示できるのか

Internet Explorer: Flashコンテンツを表示できるサイトとできないサイトがあったので調査したところ表示するにはCVリストへの登録申請が必要なようです。; Microsoftの以下のサイトに詳しく書いてありました。; Windows 8 の Adobe Flash Player 用のコンテンツを含む Web サイトに関する開発者向けガイダンス (Internet Explorer)

Chrome: Flashコンテンツを表示できました。

Firefox: Flash Playerをインストールしましたが表示できませんでした。

9. ローカルに構築したサーバに接続する

実際に開発する際はローカルにApacheなどのWebサーバを構築して開発すると思いますが、モダンUI版のIEはデフォルトでローカルに構築したWebサーバに接続できません。デスクトップ版のIEのインターネットオプションから信頼済みサイトとして追加する必要があります。

私の環境では端末のIPアドレスが192.168.1.2なので、http://192.168.1.2を追加しています。IPアドレスのかわりにlocalhostでも問題ありませんでした。
赤枠のチェックボックスにチェックが入っているとSSHを使ったサイトしか登録できなくなるので外しています。

まとめ

Internet Explorer、Chrome、Firefox 3種類のモダンUIをブラウザを使って、PCサイトやスマートフォンサイトのWeb開発との違いを調査しました。モダンUI版のブラウザはPCでも使うことができるので、タッチパネルのPCを対象としない案件でも事前に確認しておくのを忘れないようにしましょう。