to topto bottom

モバイルファースト時代のマルチデバイス対応を確実・簡単に

WebサイトのWindowsRT/Windows8対応で最初にやるべき3つのこと

WindowsRT,Windows8

こんにちは。x-fitチーム・エバンジェリストの渡辺です。WindowsRT搭載の端末、Windows8搭載PCが発売されて、そろそろ3カ月が経過しようとしています。私の周囲でも少しずつWindows8ユーザが増え始めてきました。
 
Windows8・WindowsRTは、タッチパネルに本格的に対応したOSです。WebサイトをWindows8・WindowsRT対応させる場合には、OSそのものの特徴や、MS独自の実装形式に合わせて、注意すべき点があります。今回は、MetroUIモードのIEでWebサイトを見る場合について、少しまとめてみましょう。
 
まず、WindowsRT・Windows8は、タッチパネル端末という視点から見ると、以下のような特徴があります。
  • WindowsRTはARMチップ用のWindows。OS単体での発売はされず、タブレット端末の初期搭載OSとしてのみの販売。RT搭載端末はタッチパネル搭載とみてよい。
  • Windows8はOS単体でも購入可能ないわゆる今までの流れをくむWindows。デスクトップ、ノートPCにもインストール可能のため、Windows8搭載機すべてがタッチパネル対応とは限らない。
WindowsRTでは、MetroUIで起動したIEは、タッチ操作に対応していると言っていいですが、Windows8の場合は、MetroUIで起動されたIEでも、タッチ操作に対応しているとは限らないことに注意が必要です。
 

WebサイトをWindowsRT・Windows8にも対応するために注意すること

metaタグのviewportは利かないのでスタイルで指定する

WindowsRT・Windows8も、Androidと同様、さまざまなベンダーから、異なる解像度、画素密度をもつタブレットが発売されます。このような多様なスクリーン環境でもコンテンツ記述を容易にするための方法としてviewportがあります。viewport指定は、metaタグを使って指定しますが、WindowsRT・Windows8では、metaタグでviewportを指定することができません
WindowsRT・Windows8の場合は、スタイルで指定する必要があり、maximum-scale,minimum-scale,user-scalable等のプロパティは設定しても機能しません
 
@-ms-viewport{  width: device-width;}

タッチ系のイベントはMS独自のイベント名を使って拾う

タッチ系のイベントは、通常touchstart、touchmove、touchendを使用しますが、MetroUIのIE10では、以下のプロパティを使用する必要があります。
 
  • touchstart  > MSPointerDown
  • touchmove > MSPointerMove
  • touchend > MSPointerUp
従来も、Webサイトでタッチデバイスのアクセスかどうかを判別する必要はありましたが、iPadやAndroidタブレットに加えて、WindowsRT/Windows8をターゲットに含めたい場合、タッチデバイスであっても、MSPointer系のイベント、touch系のイベントのどちらに対応しているかをさらに判別する必要があります。また、Windows8の場合は、タッチデバイスではないPCにインストールされている可能性もあるため、Windows8のMetroUIだからMSPointer系にすればいいという単純なものでもありません。
 

MetroUIの横スワイプには意味があるので、競合しないよう注意する

IE10をMetroUIで起動しているとき、画面を左右にスワイプすると、ブラウザの「進む」「戻る」の動作をするようになります。そのため、カルーセルのような左右のスワイプで要素を移動させるような動きは、そのままでは実現できません。この「進む」「戻る」動作を無効化する場合は、以下のようなスタイル指定で実現できます。左右のスワイプで要素の移動を行いたい場合は、その要素に対してスタイルをあてるようにしましょう。
 
-ms-touch-action: none;
WindowsRT・Windows8のタッチ対応端末はまだそれほど多くはありませんが、今後ブラウザシェアとしてそれなりの地位を確立するでしょう。ここにあげた3つは、WindowsRT/Windows8対応のほんの1例にすぎません。今後もWindowsRT/Windows8タブレットでのTipsをご紹介していければと思います。
 
※本記事は、弊社開発チーム所有機での確認結果であり、全機種調査の結果ではありません。同一機種であっても、この現象が必ず発生することを保証するものではありません。これ以外や例外のある可能性がありますことをご了承ください。
 
タグ: 
このエントリーをはてなブックマークに追加