こんにちは、dotstudioのちゃんとくです。HTML5Experts.jpでは、昨年に引き続き新春企画として「Webの未来を語ろう 2018」を開催することになりました！

ブラウザ編に続く第2弾の今回は、2017年初頭のHoloLens発売に始まり、ARKit/ARCoreとスマートフォン対応の拡充、各地にVR Zone誕生と話題を集め、一挙にホットトピック入りしたxR技術の現在と未来について。各領域のプロフェッショナルを招き、編集長の白石氏をMCに、さまざまな立場から意見交換を行っていただきました。

広がるxR領域の現状と課題、そして未来への期待について、なかなか聞けない学会話や開発事情など、たっぷりとお楽しみください！

ゲスト紹介

諸星 一行氏（いっこう氏）

Mercari, Inc. R4D
株式会社メルカリの研究開発組織”R4D”でVR/AR/MR領域を担当するリサーチエンジニア。 業務の傍らで”xR Tech Tokyo”や”例のハッカソン”といった勉強会やハッカソンなどのコミュニティ運営を行なっている。日本バーチャルリアリティ学会認定VR技術者。

前本 知志氏

株式会社ホロラボ / システムフレンド Co-founder（取締られ役 兼 取締役）
数年前よりモーションセンサーの面白さに取りつかれKINECTを趣味で触り始め、会社にXRや医療機器開発のチームができる。 センサー系飲み会コミュニティTMCNや、HoloLensに特化した株式会社ホロラボの立ち上げメンバー。 米国MicrosoftよりMixedReality分野のMVPとして認められている。

千葉 慎二氏

日本マイクロソフト株式会社
ハドソン中央研究所でゲームのベースシステム等を開発後、Microsoftに転職。ゲーム機向けWindows OSやXbox SDKの開発などを行う。 近年はKinect、HoloLensといった新技術を啓蒙し、研究者や学生向けの支援活動を担当。

2017年に印象に残ったxR領域のトピックは？

白石: 皆さま、本日はお集まりいただきありがとうございます！まずは簡単に自己紹介と、2017年のxR界隈で1番印象に残ったことを教えてください。

いっこう: こんにちは、メルカリのいっこうです。2017年のホットトピックは、MicrosoftがxR領域に本腰を入れてきたことですね。HoloLens、immersiveと、デバイスをいろいろと出してきたのが衝撃的でした。

前本: 株式会社システムフレンドや株式会社ホロラボで取り締まられ役をしている前本です。僕にとっても、HoloLensが発売されたことは大きな出来事でした。HoloLensが出たから、ホロラボという会社もHoloMagiciansというコミュニティもできましたし。HoloMagiciansでのHoloLens日本発売直後のイベントで、80人もの購入者が一同に集まってみんなで繋げたワクワク感はすごかったです。

白石: 80人×約30万……2400万円……。お金の話になるとすぐ計算しちゃう（笑）。

▲ 発売からわずか2週間後に80人が集ったHoloMagiciansミートアップ

千葉: Microsoftの千葉です。もともとはハドソンというゲーム会社でゲームの根底となる部分のシステム開発をしていて、Microsoftに転職してからは16年くらいずっとXboxチームにいました。HoloLensはKinectから派生してできたところがあって、Xboxチームでは一部Kinectの開発にも携わっていたので私がHoloLensのプロトタイプを見たのは実はかなり前のことなんですよね。その頃から開発を続けて、ようやく世に出てきたな、という感覚です。

▲ Xboxをローンチした人にだけ配られるというジャンパーを着た千葉氏

前本: 千葉さんのことはKinect時代から尊敬しているんですよ！僕は当時からKinectで遊んでいて、それがどんどん進化してHoloLensの形になるのを目の当たりにして、感動です。

千葉: お二人がHoloLensをトピックに挙げてくださったように、私にとっては多くの人にHoloLensを使っていただいているということが2017年最も印象深いことです。それとMicrosoftに勤めながら、東京女子医科大学で学生としてHoloLensを使った医療の研究をしています。業務でも研究でもHoloLensを使っています。

白石: えーっ、じゃあ千葉さんは女子大生？周りは女子ばっかりですか？

千葉: 私がいるのは大学院なので、おじさんばかりですよ（笑）。

白石: ちなみに私はHTML5Experts.jpの編集長と、TechFeedというエンジニア向けのキュレーションサイトを作っています。私自身はWeb領域の人間でxRについては素人なので、今日はバンバン質問させていただきます！

VR/AR/MRとは何か？デモで見る各領域の現在

現実と仮想が複合するMRの世界観

白石: 2017年のホットトピックはお三方とも「HoloLens」に関することで一致しましたね。まずはMRについて、現在の様子を伺っていきたいと思います。

千葉: まず伺ってみたいんですが、「Mixed Reality（MR）」という言葉について正しく理解している自信があるという方？

（会場、手が挙がらない）

千葉: なかなかいないですよね。それが一つ、現状の課題なんです。簡単に言うと、MRは現実の世界と仮想の世界が融合しているという形です。どう融合するかにも、現実世界の中に仮想世界を入れ込むとか、逆に仮想世界に現実世界を入れ込むとか、いろいろな考え方があります。MRは、テレビの中に入り込んで、仮想のつくられた世界を見渡すことができ、そこから現実の世界も覗くことができる、というような考え方です。

白石: 仮想と現実がMixする、という意味合いなんですね。HoloLensのデモでは、現実世界をキャラクターが動いたり、現実の壁を割っていたり、というのを見ますが、それはどちらなんですか？

前本: その捉え方は宗教論争に近いものがあるんですよ。

いっこう: Microsoftさんの提唱するMRと、もともと日本バーチャルリアリティ学会が学問として20年以上研究している考え方とで違う部分があるんです「VimかEmacsか」という話に近いです（笑）。

白石: あー、よくわかりました。それは大変だ（笑）。どういう部分でお互いに違うなと思っているんですか？

千葉: デバイスを主体で見るか、現実世界を主体で見るかなど……考え方の違いですね。揉めているわけではなく、「そういう考え方もあるよね」という感じなんですが。

白石: なるほど。話の抽象度が高まってきたので、HoloLensの現在がわかるデモがあるといいんですが。

▲ DNP「AR/VR/MRを活用した体感型デジタルショールーム」（動画リンク）

前本: これはHoroLensだけでなく他のデバイスや技術を組み合わせたデジタルコンテンツエキスポでの展示なんですが、シェアリングという技術を使って同じ空間を共有する仕組みです。

白石: これはHoloLensと、スマートフォン？

前本: そうです。HoloLensとGoogle Tangoの技術を使って、デバイス同士がお互いの位置を認識し、他の人が操作したことを他のデバイスでも検知できるようになっています。「いま隣の人がこの商品をいいねした」とか、「この商品を買った」とか、デバイスを介して共有できる仕組みです。

千葉: 複数の人が同じ世界をそれぞれ見ることができる、というのがシェアリングですね。

前本: 実はtoBの事例も増えてきて、製造業とかデザインの現場とかで活用が進んでいるんですよ。 ▲ ホロラボ「AR CAD Cloud」（動画リンク）

前本: AR CAD Cloudは、CADデータをHoloLensにダウンロードしてその場ですぐに見られるサービスです。モノを作る前に、作ったらどうなるかが確認できる時代になっています。

千葉: 日本で一番最初に業務にHoloLensを取り入れた事例は、日本航空さんですね。1つはパイロットの訓練向け、もう1つは整備士の訓練向けシミュレーションです。飛行機は飛ばしていないと利益効率があがらないので実機での練習は難しく、シミュレータも好きな時に使えるわけではなかった。新人の方なんかは、机の上に印刷した紙を広げて手を置いて、ということをしていたらしいです。

VRでもいいんじゃないかと思うかもしれないですが、訓練では自分の手が認識できることが重要だそうで、外の世界をシースルーで見ることができるHoloLensが向いていたようです。

白石: MRとVRは似たようなことができそうだけど、確実な違いがあるんですね。MRのいいところは「現実世界も見えている」というところですかね。

千葉: そうですね。VRにも現実世界を取り込むことはできるんですが、結局カメラであって目で見る現実とは違うものなんですよね。

白石: Windows MRというのがありますけど、どういうものなんですか？

千葉: 最初のデバイスとしてHoloLensが発売されたんですが、やはりコンシューマー向けとしては高額じゃないですか。裾野を広げたいという意図で、Windows MRと名前を変えて、HoloLensはその一つということになりました。

白石: HoloLensはハイエンドなWindows MR対応デバイスの一つ、というところでしょうか。

千葉: 開発者視点でいうと、HoloLensの開発ノウハウでWindows MRが開発でき、逆も然りと。デバイスも複数社から出ていて、4〜5万円程度とそれほど高額ではないので手軽さは広がったかと思います。

被るだけではないVRの領域

白石: 続いてVRについても伺っていきたいです。

いっこう: 実はVRの歴史は長く、日本バーチャルリアリティ学会は25年ほど、研究分野としてのVRは50年ほど前からあります。ちなみに学会的にはVRを「仮想現実」と訳すのは少しNGで、アカデミア的には「人工現実感」を推していきたいです。……細かいんですが、一応（笑）

白石: 訳にも違いが出るんですか。いまVRではどんなことが実現できるんですか？

いっこう: バーチャルというのは「仮想」ではなく、「姿形はそのままだけど実際にはないもの」なんです。VRというとヘッドマウントディスプレイのイメージですが、実際には被らなくてもそこにあるという捉え方です。例えばドームスクリーンとか、匂い系のデバイスとかもVRですし、舌に電気を流して味を感じるのもVRです。頭に電気を流して、幼女にビンタされる感覚を味わうというのもVRです（笑）。

白石: 世界はそんなところまで行っているんですか（笑）！？

いっこう: 開発者レベルなんですけどね。学術としてのVRとコミュニティのVRはやや溝があり、もう少しうまく繋がったらいいなと思っています。VRはMRに比べてデバイスが多いので、一般のガジェット好きが手軽に楽しめるのがいいところかなと思います。

白石: 先ほどMRはシースルーなところが利点という話がありましたけど、VRの利点はやはり没入するというところですかね？

いっこう: 被るタイプのものだと完全没入型というメリットは1つ大きいですね。あとは学会的な見方ですが、VRは「3C/3E」のための道具なんです。3CはCreation（創造）、Control（制御）、Communication（通信）。3Eは、Elucidation（解明）、Education（教育）、Entertainment（娯楽）です。

Control（制御）はいわゆるロボット制御だけでなく、例えば人が入れない原発などを遠隔で見る、というもVRの領域です。

Communication（通信）というと、最近だとVirtual YouTuber（VTuber）やVRChatが流行っていますよね。VTuberではキヅナアイちゃんがいて、去年くらいから他のVTuberがどんどん出てきてかなり盛り上がっています。アイちゃんを知っている人？

（会場、ほとんどが挙手）

白石: VTuber、VR Chat、初耳です……！流行っているんですね。

いっこう: アイちゃんに関しては既にかなり稼いでいて、スタイルとして確立しているかなと。加えて、最近は割と簡単にVTuberになれる仕組みが整ってきたと思います。ちょうど先日UnityとWindows MR（Lenovo Explorer）を使って、ほぼコードを書かずにVTuberになるという記事が上がっていました。

⇒ 参考: windowsMRでバーチャル生放送をするためのセットアップ

白石: これは、配信をする側がデバイスを被っているということなんですか？

いっこう: そうです。鏡を置いて、ボイスチェンジャーを使って。最近はあえて声はおっさんのままというVTuberが流行っていますが（笑）。

白石: うーん、すごいですね。VR Chatというのは？

いっこう: VR Chatはここ最近でグッとユーザが伸びているんですが、セカンドライフのようなイメージで、自分のアバターを使ってワールドワイドにコミュニケーションできるものです。まだ高いんですが、一般人でも自分の身体を3Dスキャンしてアバターに使う人も出てきました。

⇒ 参考: 3Dスキャンした実写アバターで「VRオフ会」する猛者が登場　これもうオフかオンかわかんねぇな……

白石: これはどうやって移動するんですか？実際に歩いて動く？

いっこう: 手に持ったコントローラが紐付いて手の動きを自然に見せてくれ、足の動きは補完されます。

白石: なるほど。3Eの方だとどのような具体例があるんでしょうか？

いっこう: Entertainment（娯楽）ではVR ZoneやVR PARK TOKYOなどが流行っていますし、開発者もエンタメ系の用途で使っている人が多いですよね。HoloLensでもエンタメはできるんですけど、広く受けているのは没入感の違いかなと思います。

千葉: 現実世界から離れたいこと、ありますもんね（笑）。

各OS対応で盛り上がるAR領域

白石: AR領域でいうと、ARKit、ARCoreがすごく盛り上がりましたよね。

千葉: GoogleのハイエンドなARプラットホームTangoは終了が決まってしまいましたね……。後続でマス向けのARCoreが発表されました。

いっこう: ARKitの方はアップデートで、これまで水平だけだったのが垂直も検出できるようになり、できることが増えましたね。

白石: スマートフォンの普及率からいうと、xRの中では一般普及するのはARが早いんでしょうか？

千葉: 手軽に使えるという意味ではそうでしょうね。

前本: VR、MRの課題は、手軽じゃないという部分がありますからね。買わないと、被らないといけない。最近のARはARKit/ARCoreの登場で、すごく現実感が出てきました。10cm動かすと10cm動くように精度が上がって、一つ上のステージに上がったなと思います。

▲ AR World Sharing Demo（動画リンク）

いっこう: Web技術の文脈では、WebVR、WebARが有用ですね。これまでアプリでしかARが実現できなかったのが、ブラウザがgetUserMediaに対応して、Webベースでカメラ情報を取得して実現できるようになったのが大きいです。MozillaさんがWebVRとWebARを統合したWebXRを推していて、W3CではWebVRは既にAPIが用意されていますが、次のバージョンアップではWebXRにしようということになっています。

⇒ 参考: WebXR Device API Specification

いっこう: 簡単にVRアプリケーションを開発できる、WebVRフレームワークのA-Frameもかなり盛り上がっていて、コミュニティが成熟してきていますね。

⇒ 参考: A-Frame

さらなる発展へ向けて技術的課題の解決が必要

白石: ここまではそれぞれの技術の現状を伺ってきましたが、さらなる進歩へのボトルネックや技術的な課題といった部分も聞いてみたいですね。

千葉: デバイスの制約は一つ大きな課題ですね。例えばデバイスを被らないといけないし、デバイスの処理能力がそれほど高くないし、バッテリーの持ちの問題もある。VRでもバッテリーとは逆にケーブル接続の制約があるかと思います。

白石: HoloLensって、実際には電池はどれくらい持つものですか？

千葉: 通常の使い方だと3〜4時間、積極的に使っていると2時間ほどです。技術の進歩で、将来的には解決されていく課題だとは思いますが。

白石: 逆に2012年頃に作っていたプロトタイプから考えるとどうですか？

千葉: 当時はいろいろ剥き出しで、サイズも大きくケーブルも多く、本当に最終製品になるんだろうか？と不安でした。でもやっぱり技術の進歩があって、5年経ってわずか579グラムです。今の課題も5年後、10年後と解決されていくはずですね。

前本: 2017年後半は開発環境の課題が多かったですね。HoloLensのアプリケーションはまずUnityで開発して、Visual Studioに書き出して、HoloLensにデプロイするという流れなんですが、それぞれのバージョンの違いで整合性が取れないようなことがあってかなりバッドノウハウが蓄積していました。

白石: 開発環境の問題があったんですね。

前本: いまはだいぶ落ち着いて、初めての人でも開発しやすくなりました。発売当初に初めてHoloLensを触ったときは、こんなことが生きている間にあるんだ！と思ったのに、すぐに視野が狭いとか腕が疲れるとか、思うところがでてきて、終わりがないです（笑）。

千葉: 本当ですよね。今から10年前を考えてみると、2017年にこんなデバイスがでていると想像できなかった。10年先は想像できないけど、たぶん10年後も満足していないと思います。人間の探究心って便利じゃないところを見つけてしまうので終わりはないけど、気がついたらみんな普通に使ってましたという感じになるんじゃないかと思っています。

xRで盛り上がるビジネス領域

白石: xRの技術的な側面をたくさん聞かせてもらいましたが、実際にはxR界隈ではどういうビジネスが生まれているんでしょうか？

いっこう: VRでいうと、アメリカのVR/AR専門ファンドのThe Venture Reality Fundが年に2回作成しているVRカオスマップが参考になります。

▲ The Venture Reality FundによるVRカオスマップ

いっこう: 機械、ソフト、ハードとだいぶプレイヤーが多くなっていると思います。その中で一部日本の企業も入っていて、健闘しているなあと思いますね。

白石: 大カテゴリが「Applications/Content」「Tools/Platform」「Infrastructure」。ホロラボさんはアプリケーション領域ですよね。どういうお仕事がメインですか？儲かっていますか（笑）？

前本: まあ、お陰様でぼちぼち……（笑）。受託で作る場合と、AR CAD Cloudのように自社パッケージとして作る場合とがあり、始めたばかりなのでなんでもアリ、という感じです。

いっこう: ゲームカテゴリだとバンダイナムコさんが入っていますね。もともとが大きい会社ですけど、VR Zoneもかなり盛り上がっていますし、VR領域では日本で一番じゃないかなと思います。

白石: Tools/Platformというと、去年Oculas Riftが値下げをしたじゃないですか。正直、売れてないのかな？と思ったのですが……。

いっこう: 逆に、値下げをしたことでめちゃめちゃ売れたと思います。Windows MRも手頃な値段なので、結構売れているのではと思っています。

千葉: そうですね、各社お互いの価格を意識しつつ値段をつけていると思います。

xRでどうやって「URL」にアクセスするか

白石: 会場からも質問を受け付けてみたいと思うんですが、どうでしょうか？

参加者: 現在のマウスとキーボードで扱うコンピュータのUIは、平面を前提にしているじゃないですか。xRのような3Dで見られるHPやメディアって、どういう形になっていくんでしょうか？例えばWebページにアクセスしたい時、URLの入力はどうするんだろうって想像がつかないんです。

前本: 一つあるのは、リアリティがあるからといって、リアルと同じようにしないといけないと疲れるんですよね。マウスやキーボードのように、操作性を上げる入力装置があったほうがいいだろうと思います。

いっこう: HoloLensってエアタップなど手を前に出して操作しますけど、結構腕が疲れるんですよね。VR空間の移動も、ワープ方式やコントローラを使う方式があるけど、あまりしっくり来ていなくてまだ確立していない。

千葉: これまでのUIが生きる部分と、人間の通常の行動がそのままUIになる部分とあると思います。URLでいうと声を発したら文字になって適用されるというのも いいかもしれない。

いっこう: いろいろな方法を試していかないとなあというところですよね。

2020年に向けた期待

白石: たっぷりと伺ったところで締めたいと思いますが、最後に2020年の少しだけ未来に、xRはどうなっているか想像や期待を伺わせてください。

いっこう: 2年後かあ……。VRはハード面では一体型が出てきて、画質も上がって、さらに進歩すると思うんですけど、一般普及するのは正直まだまだかなあと思っています。

白石: どうしたら一般普及するんでしょうね？キラーコンテンツの登場？

いっこう: Yahoo!BBがモデムを無料で配ってADSLが普及したように、国や機関が無料で配るくらいしないと普及しないんじゃないかと思います。

白石: 無料で！確かにそうですね。前本さんはどうでしょう？

前本: 現実的には通信が5Gになったり、視野が広がったりと、技術的な課題がクリアされていくと思います。期待でいうと、xRネイティブな世代が遊びとしてVRやARとAIを連携したりしていて、そういう遊びの中からすごいものが出てくるんじゃないかと密かに思っています。もしかしたら攻殻機動隊も実現するんじゃないかな。

千葉: 技術的な進歩はもちろんですけど、私が期待したいのは「xR盛り上がっているぞ」という一体感ですね。熱量のある人が増えて、ビジネスも増えて、私自身この領域の仕事にもっともっと関われたらいいなと期待しています。

白石: それぞれの熱いお気持ち、ありがとうございます。本日は大変勉強になりました！

月に一度、前の月にリリースされたブラウザに導入された機能を取り上げるこのシリーズも、先ほど振り返ったところ一年ちょっと続いていたのに気づきました。
2017年も地味に更新していこうと思います。よろしくお願いいたします。

Chrome 55リリース

12月1日に、Chrome 55がリリースされました。新機能は、ベータ版が出た際に公開されたエントリにまとめられています。

• Google Developers Japan: Chrome 55 ベータ版: 入力ハンドリングの改善と async / await 関数

ECMAScript 2017に導入されるAsync Functionsがサポートされました。導入された async, await というキーワードを使うと、Promiseが関わる非同期処理を同期処理に近いかたちで記述できます。

• Async functions – making promises friendly  |  Web  |  Google Developers

他のブラウザでもすでに開発版で実装されており、それぞれの開発者向けバージョンでテストできます。Promiseを多用するService Worker内のコードなどは、トランスパイラなしでも利用できますね。

Pointer Eventsも実装されました。Pointer EventsはMicrosoftがW3Cに提出し標準化された、タッチやマウス、ペンなどの入力方式を「ポインタ」としてまとめ扱うイベントです。タッチ＋マウスなアプリを作る際に、別々のイベントモデル用のコードを書く手間が省けるのが利点です。

• Pointing the Way Forward  |  Web  |  Google Developers

ほか、addEventListener() のオプションに once が加わりました。先月のFirefox 50リリースでも取り上げたもので、一度だけ呼び出されるイベントリスナを設定できます。

Windows 10 Creators UpdateのEdge

ことし2017年リリースのWindows 10 Creators Updateでは、Edgeももちろん更新予定です。あたらしくEdgeHTMLに搭載される機能が、Edgeのブログで少しずつ紹介されてきました。

• Microsoft Edgeでの Brotli 圧縮の導入 | Microsoft Edge Japan
• よりシンプルな Web の決済方法 : Payment Request API の紹介 | Microsoft Edge Japan

BrotliはWOFF 2.0で使われている圧縮アルゴリズムですが、HTTPでも利用できます。すでにFirefox, Chromeですでにサポートされていますが、ここにEdgeが加わります。

Payment Request APIは、Chrome 53から実装され始めたAPIで、決済情報入力の煩わしさを解消するAPIです。

• Payment Request API で簡単・高速な決済を実現する  |  Web  |  Google Developers

Chromeでは今のところAndroid版でしか有効になっていませんが、Edgeではモバイル・デスクトップ両方で有効になるようです。Firefoxも実装を表明しています。

ほか、EdgeHTML 15で導入されるかはわかりませんが、Platform Statusページで開発中・プレビュー版にある機能の一覧を見ると、Service Workerやその関連API、CSS Custom Properties (Variables)などが並んでいます。これらのアナウンスもあるとうれしいですね。

2017年はFlashの実行に許可が求められる

2017年は、多くのベンダーがFlashの自動実行をやめることを宣言しています。12月は、Chrome, EdgeでのFlashの扱いについて、現状や今後の計画が改めて発表されました。

• Google Developers Japan: HTML5 デフォルト化のリリース計画について
• Click-to-Runでの Flash のユーザーコントロールの拡張 | Microsoft Edge Japan

ChromeはChrome 56より、ページのFlashの実行には基本的に許可を求めるようになります。ただし、それまでアクセスしたページなど、関わり度合いの高いページについては、許可を求められる時期が遅れます。2017年10月からは、新規アクセスしたページのFlashコンテンツについては、許可を求められます。

Edgeについても、Creators Update以降は基本的に許可が必要になります。ただしChromeと似たようなかたちで、初期はFlashのリソース消費度合いを元に例外を設けるようです。あるていど後に、こちらも許可を求めるようになるそうです。

Firefoxも、2017年から許可を設けるとすでに発表しています。

• Firefox 内での Adobe Flash 使用量を削減します | Mozilla Japan ブログ

Safariについては、けっこう前のバージョンからFlash Playerが搭載されていません。なのでまずインストールが必要というところですでにある程度ブロックされていると思うのですが、Safari 10からはインストールされていたとしても実行にはユーザーの許可が必要になりました。

• Next Steps for Legacy Plug-ins | WebKit

Flashを使うコンテンツも少なくなってきましたが、デフォルトでブロックされるようになると、新規に作るサービスではさらに採用が減りそうですね。

IEの2つのオフィシャルサイト

IEのユーザ向けのWebサイト

こちらのWebサイトではIEを使う人=ユーザーを対象に新機能や使い方、サポート情報をお届けしています。ブラウザでタッチが楽しめるContre JourやWindows 95にプリインされていたゲームをWebGLでリメイクしたHoverなど、IE11を体感できるコンテンツにもここからアクセスできます。ちなみにIE11は日本語版を含め全36言語で提供しており、さらに言語パックで59言語に対応しています。

IEデベロッパーセンター

こちらはIEの「開発者向け」のWebサイトです。MSDNデベロッパーセンターと呼ばれています。MSDNとは、Microsoft Developers Networkの略称で、IEを含め、Windowsや.NET、Azureなど、マイクロソフトのすべての開発者向けの情報は、このMSDNに集約されています。

IEデベロッパーセンターでは、IEの開発に関するあらゆる情報が網羅されています。たとえば、「開発者向けガイド」では、IE11、IE10、Xbox版IEのHTML5やCSS3、JavaScript、DOMといった仕様、互換性、F12 開発者ツールといったカテゴリ別に技術解説をしています。「互換性クックブック」では、旧バージョンからの変更点を中心に解説。IE11の互換性の変更点を確認したいときにはこのクックブックがお勧めです。旧バージョンのIEの技術仕様については「情報インデックス」から辿ることができます。

Windows 8では、モダンUIと呼ぶタッチ操作に最適化された新しいUIとデスクトップと呼ぶマウス&キーボードの操作を前提に設計された、これまでのWindowsのUIを踏襲する2つのUIを切り替えられるようになっています。IEもそれぞれに最適化されたUIを備えていますが、機能上の相違点があります（レンダリングエンジンは共通なので、HTMLやCSS、JavaScriptの挙動は全く同じです）。共通点や相違点については「IEの2つの閲覧エクスペリエンスを理解する」で詳しく解説されています。

左がデスクトップIE、右がモダンIE。モダン版は全画面表示がデフォルト

その他、このIEデベロッパーセンターからは、ユーザ向けのWebサイトからアクセスできるプロモーションコンテンツの技術的な解説や標準仕様の検証結果をレポートするTesting Center、IE9から搭載された「ピン留め」の機能や実装方法、APIのリファレンスといった技術情報にもアクセスできます。

IEに関連する重要な4つのサイト

modern.IE

IEデベロッパーセンターのトップページからも直接飛べるこのサイトは、制作したWebページのWeb標準技術への対応や旧バージョンのIEとの互換性の問題点を自動的に検出してくれるサービスです。DOCTYPE宣言やjQueryのようなライブラリーのバージョン、CSSのベンダープリフィックスの付け忘れなどを指摘してくれます。

modern.IEのソースコードはGitHubで公開されているので、自社のシステムに組み込んでお使いいただく事もできるようになっています。さらにこのmodern.IEからは、Mac OS X、Linux、Windows 用の仮想マシンがダウンロードできるので、Mac OS XでWindows 7+IE10の検証環境を構築すると行ったことが可能になります。

modern.IEの詳細は同僚の物江が解説していますので、ご興味のある方は「OSの種別を問わず、無償でできる！modern.IE「4つ+1つ」のWebページ検証方法」をご覧ください。

仮想マシンのダウンロード

Internet Explorer Test Drive

HTML5と呼ばれる技術で実際にどのような表現が可能なのか？どのような機能を実装できるのか？マイクロソフトでは、それを実感頂くために様々なサンプルコンテンツをご提供しています。ブラウザのパフォーマンスを比較できるベンチマーク用のコンテンツも豊富に用意されてます。

HTML5 LABS

このHTML5 LABSは2012年の春に設立された「Microsoft Open Technologies」が運営しているサイトで、マイクロソフトが検証している最新のHTML5の仕様に関する見解やプロトタイプを公開しています。過去にはWebSocketsやIndexedDB、現在はWebRTCに力を入れています。

マイクロソフトが提案し、W3Cにワーキンググループが作られたPointer Events（タッチ、ペン、マウスをPointerとして抽象化し、Eventを定義する仕様）もここからWebKit向けのプロトタイプがダウンロードできるようになっています。

Internet Explorer 10 のアクセシビリティ

マイクロソフトのアクセシビリティチームが運営するアクセシビリティ サイトでは、WindowsやOffice、IEなどのアクセシビリティについてご紹介しています。

ブログとSNS

「IEBlog 日本語」はマイクロソフト本社のIE開発チームが発信しているブログで、英語で投稿されてから数週間で、日本語を含めた7言語に翻訳される仕組みになっています。最新の開発状況箱のブログをご覧ください。

「Internet Explorer ブログ (日本語版)」は、HTML5Experts.jpメンバーであり、日本マイクロソフトでIEのデベロッパーマーケティングを担当する春日井と物江が主に書いているブログです。日本のイベント情報は、このブログとこの後ご紹介するSNSでご案内しています。

「Japan IE Support Team Blog」は、日本のIEサポートチームが書いているブログです。ユーザや開発者のみなさまからサポートチームに寄せられる質問を中心に取り上げています。

マイクロソフト本社と日本マイクロソフトが運営しているTwitterとFacebookは次の通りです。各国のIEチームも独自のSNSを持っていますので、興味のある方は検索してみて下さい。マイクロソフト・シンガポールは、マイクロソフト・台湾が生んだSilverlightの公式キャラ藍澤 光（あいざわ ひかる）の従兄弟という設定で、藍澤 祈（あいざわ いのり）というIEのキャラクターをFacebookページで展開しています。

• Facebookページ　https://www.facebook.com/internetexplorer
• Twitterアカウント（ユーザ向け）　https://twitter.com/IE
• Twitterアカウント（開発者向け）　https://twitter.com/IEDevChat
• Twitterアカウント（日本マイクロソフト）　https://twitter.com/IE_Japan

最後に、html5jえんぷら部・部長の川田寛さんが、ものすごい勢いでご自身のブログ「ふろしき.js – 実用的なWeb技術を発信」で、IE11の、とくに業務システムでのIEについて情報発信をされています。SI目線でとても詳しく丁寧に解説されていますので、エンタープライズに関わる方にはお勧めです。

また、IE10とIE11で使えるHTML5仕様をざっと掴みたい場合は、HTML5Experts.jpエキスパートでもある羽田野太巳さんが書かれている「Internet Explorerで使えるHTML5の新機能」がお勧めです。

マイクロソフト春日井良隆氏のセッションテーマは「HTML5とIE11とWindows 8.1」。セッション冒頭、春日井氏は日常的に使用しているITデバイスを披露露。ソニー VAIO Tap 20のほか、iPadmini、Surface、Kindle Paperwhite、そしてiPhoneというデバイスを、用途別に使いこなしているという。

HTML5とJavaScriptという標準技術にWindowsは対応

「こういうデバイスの使い方は特別なことではなく、今後一般化する」と春日井氏は語り、今世の中で起こっていることを次のようにまとめた。

1. デバイスの多様化
2. タッチインターフェイス
3. ローカルからクラウドへ

そして「デバイスの多様化で期待されている技術がHTML5である」という。デバイスはPCとタブレット、スマートフォンと3つに大きく分かれるが、OSもPCはWindows 8やMac、Linux、タブレットはWindows 8とiOSやAndroid、スマートフォンはiOSやAndroid、WindowsPhoneのほか、Tizen、Firefox OSなどのリリースが予定されている。このような状況だからこそ「HTML5の存在感が出てきている。これは特に今日のセッションで強調したいこと」と春日井氏は力強く語った。

このような状況下で、WindowsとHTML5とどのように関係にあるか。HTML5の特徴の3本柱は「セマンティック」と「互換性」「Webアプリ」だが、第二の互換性においては、マイクロソフトは「IE9でSameMarkupというコンセプトを打ち出した。これはブラウザーによって、あるいは、ブラウザーのバージョンによって、異なるマークアップをする必要はないという今の我々の開発姿勢だ」と春日井氏は言う。

第三のWebアプリについても、Windows 8のアプリは、「HTML5とJavaScriptという標準技術で作れるようになっている」と春日井氏。当然、jQueryのようなJavaScriptライブラリーはそのまま使えるのだという。Objective-CとXCodeの知識が必要になるiOSアプリ、JavaとEclipseが必要になるAndoridアプリの開発と較べ、敷居はぐっと下がるだろう。

また最近ではTitaniumやPhoneGap、CreateJSなどのクロスプラットフォームフレームワークが非常に注目を集めている。これらのフレームワークで使う技術はいずれもHTMLとJavaScript。このようにWindowsアプリは特別な知識を身につける必要はないというわけだ。Windows 8では「WinJS.xhr」というというWebコンテンツを呼び出す関数が用意されており、これを使えば簡単にWeb上のコンテンツをダウンロードしてアプリから利用できるようになるという。

とはいえ、これまでJavaやC++などで開発してきた人にとって、JavaScriptと言う言語が持つゆるさが好きではないという人もいるだろう。そんな人にお勧めの技術があるとして春日井氏が紹介したのは、「aulJS」というJavaScriptを生成する中間言語だ。altJSにも複数あり、「TypeScriptはC♯を開発した人が開発した中間言語。同言語を紹介したサイト（http://www.typescriptlang.org/）に行くとJavaScriptとのコーディングの違いを体験でき、サンプルも手に入る」と言う。この際に試してみるものお勧めだ。

Web系開発ツールとしても有効な「Visual Studio」

次に春日井氏が取り上げたのが「Visual Studio」である。「Visual StudioはWindowsの開発ツールというイメージが強いが、Webアプリの開発する上で非常に効果的なツールになっている」と春日井氏。

それを証明するためデモを実施。例えば<video>というタグの後では次の設定内容はほぼ決まっている。Visual Studioではタブを2回押すことで、予想変換のように想定されたプログラム内容が勝手に表示されるようになっている。

CSSのカラー設定も「非常に効率的になる」と春日井氏はデモを実施。カラーパレットから指定することはもちろん、スポイトで直接色を抜き取り指定することができる。
「和文フォントが出ないという弱点はあるが、コーディングの作業を効率化する機能がかなり入っている。Visual Studio Expressというフリー版もあるので、ぜひ一度、試してほしい」（春日井氏）

IE11は「Touch」「WebGL」「MPEG-DASH」「Encripte Media Extension」サポート

最後に春日井氏が説明したのはIEについて。「IEではJavaScriptの処理のスピードの高速化を図っている。IE10と比べてもIE11では処理時間は高速化されている。他のブラウザと比較しても処理時間は短い」

最新のIE11では「Touch」「WebGL」「MPEG-DASH」「Encripte Media Extension」という4つのWeb標準をサポートしている。これからのデバイスはタッチも使えばマウスやペンも使うため、Pointerという概念でまとめてAPIをつくっている。「pointer events」を使って実装することで、マルチタッチが可能になる。「この仕様を検討するワーキンググループがW3Cに設立された」と春日井氏。

次の「WebGL」とは3Dの表現がブラウザの中でできるという技術だ。「3Dはエンタメのコンテンツだけに必要な技術ではない。例えばCADのデータをブラウザの中で表現することができるようになる。ビジネスの世界でも使える」 残りの2つの技術については、http://ie.microsoft.com/testdrive/HTML5/eme/で紹介されているので、こちらを見てほしい。

WebRTCなど注目技術への対応はどうなっているのかなども気になるところだ。しかし、それは「IEというブラウザが抱えるユーザー層が大きく影響している」という。というのもIEはエンタープライズのお客さまが多いのはもちろん、いわゆるブラウザというと青いeのマークという風に覚えているITにそれほど詳しくない一般ユーザーが多いこと。

そのため、安定している仕様、セキュリティ面で不安のない仕様を実装することに気を配っているというのである。IE9でWebSocketに対応しなかったのもそれが理由だったと春日井氏は明かす。とはいえ「当然、研究、検証はしており、その成果はHTML5LABSで発表している。ここでOKが出ればIEに実装していくことになる」とのこと。新しいHTML5への対応については、HTML5　LABS（http://html5labs.interoperabilitybridges.com/）をで紹介されているので、ぜひチェックしてほしい。

読み上げ機能や音声認識機能を標準で実装

そのほかにも最新のIEでは強化・改善された機能がある。第一にアクセスビリティの強化だ。読み上げ機能や音声認識機能を標準で実装。マイクを使えば音声だけで検索することもできるという。第二はF12開発者ツールも用意していること。F12キーを押すだけで日本語化された開発者ツールが起動する。「ここにいる開発者の方にぜひ使って欲しい」と春日井氏。

第三はIE11からドキュメントモードは非推奨となっており、Edgeモードという最新のレンダリングエンジンが優先されるようになったこと。条件付コメントはただのコメントとなる。「ブラウザのバージョンを指定したい場合は、メタタグを使って指定する」こととなると、その指定の仕方を紹介した。

自分の書いたコードに不安がある場合は、正しいかどうか、チェックするサイトをマイクロソフトでは用意しているという。それが「modarn.IE（http://loc.modern.ie/ja）」である。春日井氏は同サイトでも紹介されている「Brouser Stack」という有償のサービスについて説明した。「Brouser Stack」Web上で仮想環境をエミュレートするサービスで、例えばiOS6のSafari6でレンダリングするとどうなる、WindowsXPのIE10でレンダリングするとどうなる、という見え方がわかるというサービスだ。「互換性のチェックなどに使えるので便利。3カ月間は無料で使えるので、試してほしい」

セッションの終了の間際に春日井氏はキネクトのデモを実施。「体のジェスチャーで操作ができる時代ももうすぐ。Webは何かを見るためではなく何かをするためのプラットフォームになる」と春日井氏。デザインはもちろん、使い方も変わっていかざるを得ない。開発者も変わっていくときにきているのかもしれない。

【講演資料・セッション映像】

Windows 8のアップデート版である新しいOS Windows 8.1の配布が10月18日から開始されます。

この配布はWindows 8用のアプリ ストアであるWindowsストアを介してダウンロード提供され、Windows 8ユーザーであれば、誰しもが無償でアップグレードすることができます。

Windows 8.1には InternetExplorer(以降、IE) の最新バージョンであるInternetExplorer 11(以降、IE11)が搭載されています。(※1)(※2)

IE11は、よりWeb標準に準拠するとともに、SPDY、MPEG-DASH、WebGLなどの最新の機能もサポートしてします。また開発者ツールも大幅な機能追加がされており、より細かな調査とデバッグができるようになっています。

今回の記事では、このIE11に搭載されているF12開発者ツールの新機能について紹介します。

(※1) 正式リリースまで、IE11を使用するには、Windows 8.1 Preview をインストールする必要があります。
　 (※2)Windows 7用にもIE11が提供されます。現在は開発者の検証用としてDeveloper Preview版が公開されています。

F12開発者ツールとは?

IE11のF12開発者ツールの新機能について紹介する前に、F12開発者ツールについて簡単に紹介しておきましょう。

F12開発者ツールはInternetExplorerに付属の開発者ツールです。FirefoxのFirebugやChromeデベロッパーツールのようなもの、と言えばわかりやすいでしょう。

IE8からのすべてのIEに搭載されており、名前にあるとおりキーボードの[F12]キーを押下することで使用することができます。

以下に参考として IE9(※)のF12開発者ツールの使い方について書いた記事のリンクを掲載しますので、IE11以前のIEをお使いの方、これまでのF12開発者ツールの機能を確認したい方はぜひご覧ください。

使ってみよう! [F12]IE9開発者ツール
• HTMLとJavaScript のデバッグ編
• さまざまな情報の表示
• HTTP キャプチャ機能
• 検証機能

IE11 F12 開発者ツールの新機能

IE11のF12開発者ツールでは、新たな機能が追加されるとともにUIのデザインも大きく変更されています。

メニューとタブがなくなり、左側のツールバーのアイコンをクリックして機能を選択するようになっています。

(IE11 の F12 開発者ツールの画面)

(新しいF12開発者ツールのメニューアイコン)

ツールバーの各メニューアイコンに割り当てられた機能の内訳は以下のとおりです。

1. DOM エクスプローラー
2. コンソール
3. JavaScript のデバッグ
4. ネットワーク
5. UI の応答
6. プロファイラー
7. メモリ
8. エミュレーション

ここからはツールバーの各アイコンの内容ごとに、新しく追加された特徴的な機能について紹介していきます。

DOM 要素の検査

調査したいDOM要素の選択が、ページの表示画面から直接行えるようになりました。

この機能を使用するには、Webページが表示されている状態で、調査対象となる箇所でマウスの右ボタンをクリックし、表示されるコンテキストメニューから[要素の検査]を選択します。

(コンテキストメニューに表示される [要素の検査])

F12 開発者ツールが起動し、ツール内のDOMエクスプローラーで目的の要素が選択されて表示されるとともに、ページの表示画面でも、該当する要素(エレメント)の箇所が、選択をあらわすマスクがかかった状態で表示されます。

(要素が選択されたところ)

もちろん、従来どおりDOMエクスプローラーの[要素の選択]ボタンをクリックし、表示されているページをクリックするという方法でも指定可能です。

( [要素の選択] ボタン)

DOMエクスプローラーでは、読み込まれているドキュメントの要素やスタイルの操作が行えますが、IE11のF12開発者ツールでは、要素を操作するための機能がさらに追加されたのに加え、ドラッグ&ドロップによる要素の入れ替えや、属性入力の際の入力補助機能がサポートされています。

(要素を操作するためのメニュー)

(入力補助機能)

また現在選択されている要素のDOM階層は、パン屑メニューで表示され、クリックで選択を切り替えられるようになっています。

(選択するDOM階層を切り替えるためのパン屑メニュー)

コンソールの表示

JavaScriptを記述してテストするためのコンソールは、画面左のツールバーアイコンからだけでなく、各画面右上部にあるコンソールの表示アイコンからも呼び出すことができるようになりました。

 (コンソールの表示アイコン)

これにより、例えば、DOMエクスプローラーでページの要素を確認しながらJavaScriptを記述して試すということができるようになりました。

また、JavaScriptの入力支援機能がサポートされ、コードを効率よく記述することができるようになりました。

(JavaScript の入力支援機能)

JavaScriptのデバッグ

デバッガーでは、ブレークポイントのほかに、トレースポイントが設定できるようになりました。

(エディタ画面でのコンテキストメニュー)

トレースポイントとは

トレースポイントは、ブレークポイントとは違い、コードの実行が設定箇所に達しても実行が中断されることはなく(または中断された後に)、デバッガで指定したトレースポイント メッセージを取得することができます。この機能を使用することで、変数やオブジェクトの状態を追いかける(トレース)することができます。

(トレースメッセージの設定画面)

トレースメッセージを設定するには、トレースポイント設定時に表示されるダイアログボックスを使用するか、トレースポイント上でマウスの右ボタンをクリックして表示されるコンテキスメニューの [トレースメッセージ]メニューを選択して行います。

条件つきブレークポイント

ブレークポイントでは、条件付きブレークポイントが指定できるようになりました。この機能を使用すると、デバッグ中のプログラムの中断条件を指定することができます。

(ブレークポイントの条件設定画面)

ブレークポイントの条件を指定するには、ブレークポイントの上でマウスの右ボタンをクリックし、表示されたコンテキストメニューより [条件]メニューを選択して行います。

その他、デバッガーでは例外動作の変更や、Webワーカー使用の際のデバッガの振舞などを指定できるようになっています。

ネットワーク

ネットワークの機能を使用するとHTTPのキャプチャ、リクエストのアクション開始からレスポンスが返りコンテンツがロードされるまでの各タイミングの時間など、ネットワーク関連の情報を細かく分析することができます。

([ネットワーク]画面)

これらの機能は、従来のバージョンのものと大きく変わるところはありませんが、ブラウザーキャッシュの消去や、Cookie のクリア 機能が追加されています。

UI の応答

UI の応答 機能を使用すると、ページのロード、あるいは操作時の CPU 使用率とその内訳、視覚スループットや、イベントに関する細かな情報がグラフィカルに表示されます。

([UIの応答]画面)

UI応答の機能を使用してUI応答のプロファイリングを行うには、画面上部にある[プロファイリング セッションの開始]ボタンをクリックし、キーボードの [F5]キーを押下するなどしてページを再読み込みするか、分析対象のUI操作を行います。

([UIの応答]ツールバー)

ページの読み込み、あるいは操作が完了したら、[プロファイリング セッションの開始]ボタンの右隣りの[プロファイリング セッションの終了]ボタンをクリックし、プロファイリングを終了します。この機能はインタラクティブに動作するブラウザ アプリケーションのパフォーマンス分析などに効果を発揮します。

プロファイラー

プロファイラー機能を使用すると、コンテンツが読み込まれて描画されるまでに使用された各機能の呼び出し回数や経過時間、JSファイルの場合はそのURL、メソッドの行番号などが記録されます。

([プロファイル]画面)

処理に要した時間や呼び出し回数を見ることで、描画処理(正確には読み込みが完了されるまでの処理)のボトルネックを調査することができます。

ただし、ここで測られるのは Web ブラウザ内の処理時間のみなので、実際にページ読み込みのチューニングを行う際には、ネットワーク機能を使用して通信上のボトルネックがないかも合わせて調査を行う必要があります。

プロファイラー の機能を使用してプロファイリングを行うには、画面上部にある プロファイリングの開始ボタンをクリックし、キーボードの [F5] キーを押下するなどしてページを再読み込みし、読み込みが完了したらプロファイリングの終了ボタンをクリックします。

([プロファイラー]ツールボタン)

プロファイリングは複数回の結果を保持できる上、プロファイリングされたデータをファイルにエクスポートすることができます。

また、表示を 呼び出しツリーに切り替えることができます。

([プロファイラー]呼び出しツリー表示)

メモリのプロファイリング

メモリ 機能を使用すると、任意の時間でメモリ使用状況のスナップショットを取り、使用状況を観察し調査することができます。

([メモリ]画面)

各スナップショットには、ページを構成する各オブジェクトのメモリの使用状況が記録されます。

(スナップショットの内容表示画面)

メモリ機能を使用して使用メモリのプロファイリングを行うには、画面上部にあるプロファイリングセッションの開始ボタンをクリックし、メモリの使用状況について分析を行いたい操作、処理を行い、完了したら[ヒープ スナップショットを作成します]ボタンをクリックします。

([メモリ]ツールバー)

[ヒープ スナップショットを作成します[ボタンを満足のいく回数クリックし、満足のいく個数のスナップショットが取得できたら [プロファイリング セッションの終了]ボタンをクリックしプロファイリングを終了します。

この機能を使用すると、オブジェクトのメモリ使用量はもちろんのこと、複数のスナップショットを比較することでオブジェクトが正しく削除されたか、あるいは、オブジェクトが正しくメモリを解放したなどを調査することができます。

エミュレーション

エミュレーションを使用すると、ユーザーエージェントを他のWebブラウザ用のものに変えたり、ディスプレイの解像度や向きを変えたテストを行えます。

([エミュレーション]画面)

たとえば以下の図は、解像度 1280×720 の解像度でディスプレイの向きを縦に指定したものです。

(エミュレーション機能を実行したところ)

まとめ

今回の記事ではInternet Explorer 11に搭載されるF12開発者ツールに追加された特徴的な新機能について簡単に紹介しました。

F12に開発者ツールには、今回紹介した機能以外にも、Web コンテンツのデバッグに役立つ非常に多くの機能が搭載されていますので、IE をお使いの方はぜひキーボードの[F12]キーを押してみてください。

なお、Surface RTに代表されるARM ベースのWindows RT機の IEにもF12開発者ツールは搭載されていますので、こちらをお持ちの方も手軽なWebコンテンツのデバッグツールしてぜひご活用ください。

Windows 8.1に搭載されるIE11 F12開発者ツールについてのより詳しい情報につきましては、現状はまだ英語ですが、以下のドキュメントが公開されておりますので、ご覧ください。

Using the F12 developer tools
http://msdn.microsoft.com/library/ie/bg182326(v=vs.85)