Internet Explorer MVP による IE Test Drive 技術解説 : Pointer イベント

Internet Explorer ブログ (日本語版) では、これから数回にわたり Internet Explorer Test Drive に掲載されているサンプルについて、Internet Explorer の MVP の方々からご寄稿いただいた技術解説をお送りします。 第2回目は、第一回目に引き続き、HTML5.JP の管理人としてもおなじみの羽田野 太巳さんによるGesture イベントの解説です。 Pointer イベント 近年、デバイスの多様化に伴い、入力メカニズムも多様化してきました。スマートフォンの普及によって、タッチに対応したデバイスが数多く出回っています。そのため、ウェブサイトやウェブアプリケーション作りにおいては、マウスだけでなくタッチにも対応しなければいけません。 JavaScriptでは、マウスイベントを扱うことで、マウス操作に対応してきました。そして、タッチデバイスにはタッチイベントを規定したTouch Eventsと呼ばれる仕様に基づいたAPIを使うことが多いでしょう。   W3C Touch Events http://www.w3.org/TR/touch-events/   近年では、おおむね、どのウェブサイトやアプリケーションでも、Touch Eventsを駆使してタッチ操作を実現しています。もしタッチデバイスに特化したウェブサイトやアプリケーションなら、特にこれで問題ないでしょう。実際にこれまでは、タッチデバイスと言えばスマートフォンやタブレットを指していました。パソコン向けにはマウス操作を、タッチデバイス向けにはタッチ操作を組み込んだページやアプリを別々に作ることが多かったと言えます。 ところが、Windows 8のようなOSが登場したことにより、パソコンですら、タッチパネルを装備するようになってきました。つまり、パソコン向けであろうが、マウスとタッチの両方を同時にサポートする必要が出てきたのです。加えて、ペン入力も今後は重要になってくるでしょう。ここで言うペンとは、単にタッチパネルを指で操作する代わり使うスタイラスペンではなく、ペン圧やペンの傾きなども検知できる入力メカニズムのことです。マウス、タッチ、ペンそれぞれが独自のイベントを持っていたとしたら、それらを同時にサポートするのは非常に面倒です。 タッチデバイスやペンデバイスにおいても、ある程度はマウスイベントで対応することができます。しかし、マウスイベントからは、入力デバイスの種類を判定することはできません。また、タッチデバイスにおいては、複数の指で同時にタッチする操作も存在します。このような操作に関しては、マウスイベントだけでは扱うことができません。 このような問題を解決するためにMicrosoft社はPointer Eventsと呼ばれるAPIをInternet Explorer 10に実装しました。そして、Microsoft社は、このAPIをウェブ標準とすべく、W3Cに提案しています。   W3C Pointer Events http://dvcs.w3.org/hg/pointerevents/raw-file/tip/pointerEvents.html   本記事では、Internet Explorer 10に実装されているPointer Eventsの使い方について詳しく見ていきます。Pointer Eventsを確かめるには、Internet Explorer Test Driveに公開されているTouch Effectsというデモを試すのが良いでしょう。   Internet…


Internet Explorer MVP による IE Test Drive 技術解説 : Gesture イベント

Internet Explorer ブログ (日本語版) では、これから数回にわたり Internet Explorer Test Drive に掲載されているサンプルについて、Internet Explorer の MVP の方々からご寄稿いただいた技術解説をお送りします。 第一回目は、HTML5.JP の管理人としてもおなじみの羽田野 太巳さんによるGesture イベントの解説です。 Gestureイベント 近年、タッチデバイスの普及により、ウェブアプリケーションの操作方法が大きく変わってきました。マウスでは、クリック、ドラッグといった操作が中心でしたが、タッチデバイスでは、ジェスチャーと呼ばれるタッチ操作が求められるようになってきました。 ジェスチャーとは、一本の指でタッチパネルを触る操作だけでなく、二本以上の指を使った操作も加わります。これまでは、W3C DOM Level 3 Events 仕様に規定されたMouseEvent に基づいて、スクリプトを書いてきました。指一本でタップするなどの簡単な操作であれば、MouseEvent で代用できます。しかし、複数の指を使った操作をMouseEvent で処理するのは無理があります。 このような状況の中、Internet Explorer 10 では、ジェスチャーを扱うAPIが新たに実装されました。それを確かめるには、Internet Explorer Test Drive に公開されているBrowser Surface というデモを試すのが良いでしょう。   Internet Explorer Test Drive – Browser Surface http://ie.microsoft.com/testdrive/Browser/BrowserSurface/   Browser Surface images/gesture_ie_tset_drive_browser_surface.png このデモでは、タッチデバイスであれば、指を使って、画面右下に重ねて表示された写真を自由に移動、回転、拡大、縮小することができます。そして、その写真を指で長押しすることで、画面に固定することができます。もちろん、マウスによる操作も可能ですが、マウスでできるのは移動と固定だけです。 残念ながら、ジェスチャーに関する API…


Internet Explorer 10 移行セミナーのご案内

3 月 1 日に Windows 8 Consumer Preview が公開されてからすでに 2 ヶ月が経ち、先日の Windows Developer Days (以下 “WDD”) において、次のマイルストーンである Windows 8 Release Preview が公開されることが発表されました。 すでに多くのお客様に、Windows 8 Consumer Preview に実装されている Internet Explorer 10 (以下 “IE10”) を使って、Web サイト、サービスの検証、および対応を行っていただいておりますが、WDD ではカバーできなかった内容、また WDD 以降公開された情報を皆様にご案内し、ご検証やご対応に役立てているためのセミナーを品川で実施する予定です。 枠は非常に限られておりますが、参加費は無料ですので、Web サイトやサービスを統括されている Web ディレクター、実際に現場でコードを書かれている、Web デベロッパー、デザイナーの皆様は是非ご参加下さい。 Internet Explorer 10 移行セミナー、ご登録はこちらから!https://msevents.microsoft.com/CUI/EventDetail.aspx?EventID=1032513687&Culture=ja-JP

0

Internet Explorer の自動アップグレードが始まりました

(3 月 28 日 13:00 更新) Internet Explorer の自動アップグレードが始まりました 先日ご案内させていただいた Internet Explorer (以下 “IE”) の自動アップグレードが、昨日 3 月 27 日より日本でも始まりました。対象のお客様に対しては、順次自動アップグレードによる配信が行われますが、一方で、現在 IE6、7 などをお使いのお客様には、自動アップグレードによる配信を待たず、この機会に お使いの Windows で利用可能な最新の IE をダウンロード、導入いただくことを、あらためておすすめします。 1 月のオーストラリアとブラジルを皮切りに、全世界で自動アップグレードが既に始まっており、順調に IE6/7 が IE8 (Windows XP) /IE9 (Windows Vista/7) に置き換わっています。 昨年より Internet Explorer 6 Countdown というサイトを通じて、全世界の IE6 のシェアを公表してまいりました。北米やヨーロッパでは IE6 のシェアが 1% 台、もしくは 1% 未満になっている国が殆どなのに対し、減少傾向にはあるものの、アジアは中国を筆頭に IE6 の利用率が軒並み高く、日本も 2 月を終えた時点でまだ 6.1% となっております。 ユーザーに最新の…

0

BlobBuilder を使ってファイルを作成する

本記事は、マイクロソフト本社の IE チームのブログ から記事を抜粋し、翻訳したものです。  【元記事】Creating Files through BlobBuilder January 28, 2012 11:38 PM Web サイトから Web アプリケーションへの移行が進むにつれて、ファイルを効果的に扱うことがますます重要になってきています。Platform Preview 2 以降、IE10 ではクライアント上でファイルの読み取りや切り出しを行えるようにするための File API (英語) がサポートされています。さらに Platform Preview 4 では、新しいファイルを作成するためのツールである BlobBuilder (英語) のサポートが追加されました。また、IE10 にはユーザーがコンピューターに BLOB データを保存できるようにするための新しいメソッドも 2 つ用意されており、これらを使って、クライアント常駐のデータを扱う場合に、優れたエンド ツー エンドのエクスペリエンスを実現できます。 IE Test Drive (英語) では、BlobBuilder と File API の機能を確認できるピアノ デモ (英語) をお楽しみいただけます。ピアノの鍵盤をクリックすると、mp3 形式の音楽ファイルと SVG 形式の楽譜ファイルの 2…


IndexedDB アプリケーションをデバッグする

本記事は、マイクロソフト本社の IE チームのブログ から記事を抜粋し、翻訳したものです。  【元記事】Debugging IndexedDB Applications January 27, 2012 2:51 AM IndexedDB (英語) は、インターネットに接続されていない場合でもユーザーのローカル クライアント上でデータを保存、検索、取得できる JavaScript の開発を可能にする W3C 草案 (英語) です。今回のブログ記事では、私たちが IndexedDB アプリケーションをデバッグするために内部的に使用している IDBExplorer というツールについてお話ししたいと思います。IDBExplorer を使って、データベース スキーマ、オブジェクト ストアのコンテンツ、インデックスの詳細を確認することができます。 IndexedDB のサンプル アプリを使用してツールを検証する このツールをご紹介するにあたって、新年の抱負をトラッキングする New Year’s Resolution (英語) というアプリケーションを IndexedDB を使用して作成してみました。このアプリケーションでは、抱負をデータとして (Web ページを閲覧しているシステム上で) ローカルに保存してアクセスします。ユーザーは自由に抱負を追加、編集でき、[Done That!] ボタンをクリックすると、選択した抱負がリストから削除され、その抱負の内部表現もデータベースから削除されます。 IndexedDB では、データベースを情報のコンテナーとして定義します。各データベースには JavaScript オブジェクトのリポジトリであるオブジェクト ストアが格納されます。各オブジェクトには API を使って照会できる属性が格納されます。リレーショナル データベースになじみのある方は、オブジェクト ストアはテーブルと同じものと考えてください。オブジェクト ストア内の各…


プライバシーに関する今週のイベント

本記事は、マイクロソフト本社の IE チームのブログ から記事を抜粋し、翻訳したものです。  【元記事】This Week in Privacy January 25, 2012 8:53 AM 編注: この記事の英語版 (原文) は 2012 年 1 月 24 日に公開されました。 過去 10 年の間 (英語)、Microsoft はユーザーのプライバシー保護に対して真剣に取り組んできました。セキュリティと同じように、プライバシーについてはすべての Microsoft 製品で十分に考慮されています。Microsoft が提出したユーザーのプライバシー保護を目的としたインターネット標準に関する提案 (英語) が、長期にわたって Web を進化させるためのオープン スタンダードを開発する国際的なコミュニティである World Wide Web コンソーシアム (W3C) (英語) によって受理、公開 (英語) されてから、ほぼ 1 年になります。W3C が Tracking Protection ワーキング グループ (英語) の発足を発表 (英語)…


内部のしくみ: Test Drive デモ Let It Snow…

本記事は、マイクロソフト本社の IE チームのブログ から記事を抜粋し、翻訳したものです。  【元記事】Under the Covers: Let It Snow… January 19, 2012 7:27 PM 今日、ここシアトルではめったに見られない吹雪が吹いています。これにあやかり、2011 年のホリデー シーズンに公開した Test Drive デモ “Let It Snow” についての解説を投稿したいと思います。 — 編集担当 ブラウザーが基盤のハードウェアを有効に活用できると、可能性は無限に広がります。ホリデー シーズンにリリースしたデモでは、Internet Explorer 10 で実現される、ハードウェア アクセラレーションをフル活用した、タッチ主導のブラウジング エクスペリエンスの優れている点をご覧いただけます。この記事では、その Let It Snow (英語) デモがどのように作成されたかを詳しく説明します。このデモで使われているパターンは、現在の Web と初期の Metro スタイル アプリ (英語) で広く見られる、典型的な HTML5 エクスペリエンスです。今回は、視覚的な観点ではなく、機能面から解説します。 性能の低いモバイル デバイスとタッチ主導のユーザー エクスペリエンスが主流になったことで、ユーザーがブラウザーのパフォーマンスについて期待することは急激に増えています。現在では、ブラウザーのパフォーマンスは、指を使って Web サイトをスムーズに動かせるか、Web サイトがタッチ操作にすぐに反応するか、ブラウザーの電力消費は効率的か (英語) という観点でも評価されます。Internet…


新年も安全にオンラインを利用する

本記事は、マイクロソフト本社の IE チームのブログ から記事を抜粋し、翻訳したものです。  【元記事】Staying Safe Online in the New Year January 18, 2012 8:21 PM 攻撃者がホリデー シーズンに休暇を取ることはありませんでした。12 月の半ばからお正月にかけて、平均して毎日約 2 百万件のマルウェアのダウンロードが Internet Explorer の SmartScreen サービスによってブロックされました。12 月 25 日には、マルウェアのブロック件数は 30% も急上昇しました。ユーザーが攻撃者の策略にはまって望まない "プレゼント" を PC にダウンロードする事態を防ぐことができ、嬉しく思います。 オンラインのセキュリティ強化を決心するには、1 月は格好のタイミングです。マイクロソフトは、1 年中、昼夜を問わずオンラインのセキュリティ強化に取り組んでいます。Web で安全にコンピューターを利用するには、自動更新機能や Internet Explorer の SmartScreen フィルターを有効にするなど、いくつかの簡単なベスト プラクティスを実行すると効果的です。 Windows 7 は Windows XP と比べて、マルウェアの感染率が 1/5 (英語) であるという実績は、最近のモデルの PC…


CSS user-select を使用して選択を制御する

本記事は、マイクロソフト本社の IE チームのブログ から記事を抜粋し、翻訳したものです。  【元記事】Controlling Selection with CSS user-selectJanuary 12, 2012 7:18 PM IE10 Platform Preview 4 リリースには、新しい CSS プロパティである -ms-user-select (英語) のサポートが組み込まれています。Web 開発者は、このプロパティを使うと、比較的簡単に Web サイトで選択できるテキストを正確に制御できます。私には、コンピューターで文章を読むときに、テキストを選択する癖があります。このような読み方をするのは、私だけ (英語) ではありません (英語)。インターネット上のテキストを選択することが重要な場面は、他にも多くあります。 例として、典型的なニュース Web サイトを考えてみましょう。ほとんどのページにはニュースの記事が含まれています。ユーザーがテキストを選択しながら読む場合や、内容を共有したいと思う場合があるので、記事の内容は選択できる必要があります。また、ニュース Web ページには、メニューやサイトの他の部分へのリンクもあります。このような項目をユーザーが選択しなければならないケースは、あまりないでしょう。そこで -ms-user-select を使用すると、ニュース記事ではテキストを選択できようにして、メニューではテキストを選択できないようにすることができます。 IE Test Drive サイト (英語) に、このような指定を行うサンプルがあります。 ページ全体に -ms-user-select:none を設定してから、ブログ記事を含む要素に -ms-user-select:element を設定することで、ブログ記事の内容のみを選択できるようにしています。-ms-user-select:element は、IE によって初めて導入された新しいプロパティで、多くの場面で役立つのではないかと思います。要素に -ms-user-select:element を設定すると、その要素のテキストをユーザーは選択できますが、選択できるのは、この要素の範囲内に制限されます。ユーザーがニュース記事のコンテンツを選択する場合に、記事のすぐ下にあるフッター要素まで選択したいと思うことはないでしょう。要素に -ms-user-select:element を設定すると、マウスで選択範囲を正確に指定できているかどうかを気にせずに、記事の内容だけを簡単に選択できるようになります。 -ms-user-select に設定できる値は、次の…