Jaa

IE11: 現在そして将来の Web に対応するタッチ ブラウジング

  • Artikkeli

Windows 8.1 Preview の Internet Explorer 11 では、新しいタッチ機能、既存のタッチ機能の強化、新しい開発者 API を通して、Windows 8 で導入された革新的なタッチ サポートをさらに充実させています。このブログ記事では、Windows 8.1 の IE11 におけるタッチ サポートの進化について、その一部を紹介します。

ホバー メニューに対するタッチ操作の信頼性向上

現在の Web の大部分はマウスを前提に設計されています。特に、マウス ホバーだけでしか起動しないメニューは、非常に多くのサイトに見られます。しかし Web はタッチだけでも操作できる必要があります。このため IE11 では、タッチによる擬似ホバーのサポートを実装しました。ページ要素のタップがホバーなのかクリックなのかという決定は、多くのシナリオであいまいになっています。この問題を解決するため、Internet Explorer 11 ではこれら 2 つの対話操作を異なるジェスチャで実行できるようにしました。

  • タップ – クリック
  • 長押し – ホバー

さまざまなサイトのホバー メニューに対するタッチ操作を紹介するビデオ

タッチによるホバーのサポートに加えて、リンクを長押しするとコンテキスト メニューのコマンド バーが画面下部に表示されるようになりました。つまり、サイトによるホバー メニューの表示を邪魔せずにコマンド バーが表示されます。また、コマンド バーのボタンから新しいタブやウィンドウを簡単に開くことができます。

リンクの強調表示の改善

Windows 8.1 の Internet Explorer 11 では強調表示の機能が新たに改善され、タッチ操作にすばやい表示で応答するようになりました。これは、ページ上でタッチした要素を確認できるようにしてタッチ操作の信頼感を高める、フィードバックに基づき追加された機能です。

このエクスペリエンス自体は Windows Phone 8 でのエクスペリエンスに似ていますが、CSS 変換が設定されたリンクなど、いくつかのシナリオに対応する機能強化が追加されています。この機能強化によって (リンク付き画像を含む) より多くのリンクが強調表示されるようになり、ページの CSS スタイルが強調表示の影響を受けることもなくなりました。開発者の皆様は、デスクトップと携帯電話で共通の以下のマークアップで強調表示をオプトアウトできます。

<meta name="msapplication-tap-highlight" content="no">

以下の図は、IE11、iPad、Android のそれぞれで、CSS 変換が適用されたページのリンクが強調表示されている例です。対象のリンクを強調表示が囲んでいるのは IE11 だけです。

以下の図は、IE11、iPad、Android のそれぞれで、CSS 変換が適用されたページのリンクが強調表示されている例です。対象のリンクを強調表示が囲んでいるのは IE11 だけです。 以下の図は、IE11、iPad、Android のそれぞれで、CSS 変換が適用されたページのリンクが強調表示されている例です。対象のリンクを強調表示が囲んでいるのは IE11 だけです。 以下の図は、IE11、iPad、Android のそれぞれで、CSS 変換が適用されたページのリンクが強調表示されている例です。対象のリンクを強調表示が囲んでいるのは IE11 だけです。
IE11 iPad Android

CSS 変換が適用されている場合のリンクの強調表示

<a href="#" style="transform:rotate(45deg)">CSS 変換が適用されたリンク</a>

スワイプ ジェスチャを使ったページ前後へのナビゲーション

前のページに戻るナビゲーションは、あらゆるナビゲーション操作の約 1/3 を占める、ユーザーが最も多用する操作です。前のページに戻り、また進むナビゲーション機能は、Internet Explorer 10 ではページ上のスワイプによって実装されていました。Internet Explorer 11 では、メモリ効率とバッテリ寿命を維持しながら、このエクスペリエンスのスピードと滑らかさがあらゆるデバイスで向上されています。

この改善を実現するために、Internet Explorer 11 ではページ間のナビゲーション発生時に、前のページを一時停止してメモリにキャッシュします。スワイプして前のページに戻るとページがメモリから再開され、結果として、スワイプして戻る操作とほぼ同時にページが読み込まれます。新規ページをキャッシュする方法や、HTML5 の API を使用してこのエクスペリエンスに対してサイトを最適化する方法は、今後のブログ記事で紹介する予定です。

一時停止できないページがある場合、IE11 はプリレンダリング テクノロジを使用してスワイプの直後に前のページをレンダリングすることで、高速で安定したページの読み込みを実現しています。

IE11 における、スワイプを使ったページ前後へのナビゲーション

IE11 では戻るボタン/進むボタンのエクスペリエンスも改善されています。これらのボタンを押すと、ページ読み込み中にはページのスクリーンショットが表示されます。これによって目的のページかどうかを簡単に確認しながら戻っていくことができます。

タッチによる HTML5 ドラッグ アンド ドロップ

タッチ入力は、Web で最優先されるべきエクスペリエンスです。Internet Explorer 11 は、タッチ操作による HTML 5 ドラッグ アンド ドロップ (英語) を既定でサポートする初めてのブラウザーとなりました。タッチによるドラッグ アンド ドロップは長押しするだけで簡単に開始されます。マウス操作用に HTML 5 ドラッグ アンド ドロップを使用しているサイトでは、そのまま IE11 のタッチを使うことができます。タッチ専用のコードは必要ありません。Test Drive のデモ Magnetic Poetry を試してみてください。IE10 でのマウスによる HTML5 ドラッグ アンド ドロップを紹介するためのデモですが、そのままの状態で IE11 のタッチが機能します。

Test Drive のデモ Magnetic Poetry を試してみてください。IE10 でのマウスによる HTML5 ドラッグ アンド ドロップを紹介するためのデモですが、そのままの状態で IE11 のタッチが機能します。

Magnetic Poetry Test Drive (英語) ページのタッチによるドラッグ アンド ドロップ

マウス、キーボード、タッチパッド、タッチの直接操作

Internet Explorer 10 では、ハードウェア アクセラレーションを活用した直接操作による、業界最先端のパンおよびズーム機能が実現されました。ページのドラッグやピンチしてズームなどを、指の動きに合わせて実行できます。これはページが複雑なスクリプトの実行中でも関係なく、操作もアニメーションも常にスムーズに処理されます。開発者の皆様は、豊富な API を使用して、これまでできなかったようなパンやズームのエクスペリエンスを構築できます。スナップ位置が活用された MSN のホーム ページでは、ユーザーが見出しをスワイプで行き来させることができます。

msn.com ではタッチで見出しを行き来させることが可能

msn.com ではタッチで見出しを行き来させることが可能

Windows 8.1 の Internet Explorer 11 では、このハードウェア アクセラレーションを活用したパンとズームのテクノロジが、タッチに加えてマウス、キーボード、タッチパッドにも提供されます。これによって、入力形態にかかわらずサイトのパンとズームをスムーズに利用できるようになります。さらに新しい msZoomTo() (英語) API を使用すると、サイトのパンとズームをプログラムによって起動することができます。

ポインター イベントに関するタッチ API の強化

Microsoft は W3C およびその他のブラウザー ベンダーと連携して、Internet Explorer 10 で導入されたベンダー プレフィックス付き API に基づくポインター イベント (英語) の標準策定に取り組んでいます。ポインター イベントは、マウス、ペン、マルチタッチなど複数のポインティング デバイスに対応した Web サイトを構築するための仕様です。Internet Explorer 11 Preview で更新された MSPointer API には、このポインター イベントの最新の勧告候補仕様が反映されています。Internet Explorer 11 の最終バージョンではプレフィックスなしのポインター イベントがサポートされる予定です。

現在そして将来の Web における快適なタッチ操作の実現

Microsoft は、Windows 8 によって世界最高レベルのタッチ エクスペリエンスを確立しました。現在の Web は必ずしもタッチ操作に合わせた設計ではありませんが、こうした中でも Internet Explorer 11 はタッチに最適化された高速で滑らかな最先端のエクスペリエンスを基盤に開発されています。ハードウェア アクセラレーションを活用した直接操作では、ページを指から離さずにパンまたはズームできる、スムーズで自然なエクスペリエンスが実現されます。また、ブラウザーの UI はページとの対話操作を邪魔しないため、サイトのアクティブな状態が常に維持されます。最先端の業界標準となった IE の API を活用した魅力的なタッチ エクスペリエンスの開発例は、GlacierWorks (英語)、Atari (英語)、Contre Jour (英語) などの各サイト、さらに Touch Effects (英語) や Browser Surface (英語) などの IE Test Drive (英語) のサンプルでご確認いただけます。

Internet Explorer 11 は、新しいタッチ機能の実装や既存機能の改良を通して、これからも最良のタッチ エクスペリエンスを提供し、イノベーションをさらに進めてまいります。Windows 8.1 Preview をぜひダウンロードして、タッチに最も適した Internet Explorer 11 の動作をご確認ください。

Michael Patten
Internet Explorer 担当リード プログラム管理者

Comments

  • Anonymous
    August 06, 2013
    The comment has been removed