Web標準なサイトを作るための5つのティップス

Edgeはスクラッチから開発したWebブラウザ

春日井良隆氏（以下、春日井）：このEdgeなんですが、繰り返しになりますけども、とにかくまったく新しいスクラッチから開発をしたWebブラウザになります。Windows10が搭載されてるPC、タブレット、スマートフォンで動作をいたします。

ちなみにWindows Insider Programというのを通じて、正式版が出る前のビルドをいち早くお試しいただくことができるんですが。

それを使うとWindows Phoneのデバイスを持ってらっしゃる方は、これWindows Insider Program で、普通の皆さんとまったく同じ条件です。

社員だから何かちょっと早いビルドが入ってるとかそういうことではなくて、そこからダウンロードしてきたWindows 10 Mobileが入ってる感じなんですが、Edgeも当然この中に入っていますので、先ほどのデロンギさんのサイトですけど、まったく同じようにレンダリングされてご覧いただくような感じになっておりまして。

このEdgeとPCでご覧いただいてるEdgeというのはコア部分というのは共通のものを当然使っております。

後ほどデモでご覧いただきますが、Webページに直接書き込んだりするような機能とかメモ書いたりというような機能がございます。

当初、EdgeをSpartan時代からご説明するときに、ChromeとFirefoxのエクステンションをサポートしますというお話と、そのエクステンションはオリジナルでJavaScriptで開発ができますよというお話をしておりましたが。

今のバージョンには残念ながらまだ搭載されておりません。Coming Soonということでいずれ搭載されますので、エクステンションのサポートをお待ちの方はもうちょっとだけお待ちいただければと思います。

Webページに直接メモを書き、ツイートも

では早速なんですが、実際のデモをご覧いただきましょう。もう一度うちのサイトに行きましょうか。

まず機能的なところはこの右上のところに全て集約をしています。ここにWebノートというアイコンがありまして、それをクリックするとバ―が紫色になったのがおわかりいただけるかと思いますが。

この中で例えばマーカーの色を決めて赤で。当然タッチに対応していれば指でも書けます。ペンがあればペンでも書けます。

ですとか、あるいはマーカーを使ってハイライトをするとか、「キーボードを黒いのに変更」こんなような感じのコメントを入れて。

入れたものは保存もできますけども、共有ができます。メールに載せてこれをこのまま、例えばWebのレビューをしてる制作会社さんにレビューを送るというのも結構ですし、Twitterでつぶやく。

いきなりこんなこと私がつぶやくと、フォロワーの人、何だろうと思うかもしれませんけど、ちなみにTwitterは@ykasugaiです。

今見ていただくと多分私がつぶやいたのがご覧いただけると思いますけども、こんな感じで共有することもできるようになっています。

ページの広告を非表示にできる「読み取りビュー」

もう1つおもしろいのは、こういう形でコピーをしたいところを範囲選択ができます。これがいいなと思って選択が終わると、この時点でクリップボードにデータが送られますので、例えばExcelを開いてペーストしてあげれば、今コピーしたところがぺこっと貼るような形のスクリーンショットが簡単に取れますよ的な機能も搭載されました。

もう1つがWebのコンテンツを見るときに、これちょっとCodeIQさんに勉強会イベント、最近、Angular JSとかのイベントがあったらしく、うちのBingの確か「りんな」の説明で今回も登壇してるMVPの方がうちのTシャツを着てますが。

例えばこの記事を読みたいとします。広告業界の方には申しわけないですが、広告ちょっとうっとうしいなみたいなケースも結構あるんじゃないかと思います。

そういう場合に、右上に本が開いてるようなアイコンがありますが、これが読み取りビューといいまして、そこのコンテンツを読むことに集中してレイアウトを変えてくれますよモードです。

ですので、このコンテンツに関係する写真と文字だけが自動的にレイアウトされまして、当然レスポンシブなのでこういう形でちょっと縦長な感じですね。

このデータはキャッシュすることもできますので、例えば会社でおもしろい記事が目に入ったけど、これちょっと今仕事中に読むわけにいかない。

で、リーディングリストにキャッシュをしておいて、それを別のデバイス、8インチのタブレットで帰りに山手線の中で吊革につかまりながら見るみたいな感じの使い方も、このリーディングリストの場合はできるように設計をされています。

といったところが大きな機能なんですが。特にエンジニアの方にご覧いただきたいのは、こちらのEdgeのデベロッパーセンターです。

実は今、日本語翻訳真っ最中でして。こういうときにいい例としてお見せしましょう。

生々しいデータをお見せしますが。翻訳しろ、翻訳しろというふうに騒いでおりましたら、Excelで日本語と英語の表がガーッとやってきまして。

私、日本語にうるさいので、こんな感じで日本語の翻訳を今、リアルにせっせとやってますんで、私が早く済ませば済ますほどさっきのサイトが日本語になりますけども。なるべく早く頑張って、しかも何かへんちくりんな日本語にならないように頑張りたいと思ってます。（後日談：ひとまず日本語になりました　https://dev.modern.ie/　）

ゲームコントローラーをブラウザで使えるAPI

ここの中で、例えばExplorerデモというのがあります。こういう形でいろんなデモコンテンツがいっぱい並んでるんですが。

例えばこのデモ。ブラウザの中でご覧いただいてます。この飛行機、実はここに今Xboxのコントローラーを持っていまして、こいつでコントロールをしてるんですが。

実はGamePad APIというマニアックなAPIがありまして、ゲームコントローラーをWebでコントロールできるAPIがありますので、そのゲームコントローラーを、GamePad APIというのを使ってWebのコンテンツを制御することが実はできます。

もう1つは今のナレーターみたいな音が出てましたが、あれはただ単にタイムラインに音が乗ったるだけではなくて、タイミングに合わせて音が出るような制御がされてるんですが、これはWeb Audio APIというWebで音声を扱うためのAPIを使っています。

それとこれクラッシュの状態でおもしろくないのでトライアゲインしますが、さっきの飛行機が飛んでるのは、3Dでデータがリアルタイムでレンダリングされています。

モデルデータが本当に3Dのリアルな3Dでレンダリングされていまして、これはWebGLというグラフィックライブラリを使って表現してるんですが。

もうWebブラウザの中でもこれぐらいの3D表現ができるというのが今の時代になっていまして、そういったおもしろいコンテンツ、あるいはちょっとエンタープライズ的なコンテンツなどをこの中でお試しいただけるような形になっていますので、ぜひご覧いただければと思います。

開発者は要注目の「デベロッパーセンター」

ここのデベロッパーセンターは、とにかくデベロッパーの方に向けた情報を集約させています。Platform statusというところに行きますと、HTMLとかCSS、あるいはAPIの今、実装状況がどうなってるのかということで。

例えばカテゴリーでネットワークとか行きましょうか。ネットワーク系のAPIが今どうなってるかというのを一覧でご覧いただけるようになってるんですが、例えばHTTP/2みたいなものに関してはIEでは今対応していませんけども、EdgeではSupported、つまり対応済みであるというのがご確認いただけるようになっています。

実際、APIとか要素がそれぞれのブラウザでどういう対応状況になっているのかっていうのが興味のある方は、ぜひこの辺りをこのPlatform statusをご覧いただければと思います。

あるいは検証する場合に、例えばうちはMacしかないんだけどもIEの検証しなければいけないというようなケースに、バーチャルマシン、仮想環境をダウンロードしていただくようなサービスもあります。

MacでWindows10、Windows8上のIE11という環境をParallelsに作るというのでダウンロードしていただくと、その環境をダウンロードできますので、これで例えば検証なんかもしていただくことができるようになっています。

Webサイトの相互運用性をチェックするツールを提供

Site scanというところをお使いいただきますと、いつもMicrosoftのWebサイトを使うので、ここは会場になってるプリンスホテルさん、ちょっと犠牲になっていただきます。

URLをコピーしまして、Enter a URLに入れてスキャンをかけます。スキャンをかけますと、実際にprincehotels.co.jp/Tokyo/というサイトがどういうつくりになってるかというのをこのサービスがスキャンをしてくれまして。

レ点が、緑が点いているのがちゃんとやっていますねっていうところで、びっくりマークが点いてるほうがここ直したほうがいいですよというような内容になっています。

このModern web interoperabilityっていうところがいわゆる相互運用性から見たところ。Cross-browser experienceというところが他のブラウザと相互運用をさせたときの見た目の部分に関わるところ。

最後がWindows Features、Windowsの機能を使ってるかどうかっていう点なんですが。このWindows Featuresはどうでもいいので、こちらのModern web interoperabilityというとこをよくご覧いただいて、

例えばプラグインはどうやら使っていないみたいなのでOKですねとか、フレームワークライブラリというところは、このサイトだとjQuery UIというJavaScriptのライブラリを使ってるみたいなんですが、

今使ってるのは1.8.18なんですけど、1.8.24を使うといいですよというようなレコメンドがされていたりですとか。

あるいはCSSのベンダープリフィックスも今もうほとんどのブラウザでは使わなくてもよい状況になっていますので、このmozとかmsとかそういったものはベンダープリフィックス取った方がよいんじゃないでしょうかというようなことがこの中では書かれております。

ぜひ皆さんの運営してるサイト、作ってるサイト等あったら、どんな感じでここの評価がされるのかっていうのも合わせてご覧いただければと思います。

Edgeが削ったソースコード22万行分の機能

実際、EdgeというブラウザはIE固有の機能を22万行削ったというふうにありますが、その22万行に含まれるのがこちらになります。

IE固有の機能、Windowsと固有の機能というのはEdgeではサポートされません。おそらく皆さまが気になるのがActiveXだと思いますが、ActiveXはEdgeではサポートされませんので、この点に関してはご注意いただければと思います。

ActiveXがサポートされないということは、イコール、サードパーティーのプラグインもサポートされません。

Microsoft Silverlightも例外ではなく、Edgeではサポート、動作はいたしませんので、プラグインを使ってるようなサイトの場合も、この辺はご注意いただければと思います。

注意はいいけど、じゃどうすんの？　っていう問題が当然あると思います。1つは引き続き、皆さまのWebサービスとかシステムをWebで提供する場合というのは、Web標準の技術に置き換えていただくということを将来的な部分としてご検討いただきたいと思います。

実際には対応するようなAPIがどんなものがあるのかっていうのをちょっと書き出してみたんですが。

通信でしたら、今WebSocketsとかRTCものとかもございますし、音声合成をさっきご覧いただきましたけども、Web Audio APIというものもございます。

こういったところを踏まえて、いわゆる標準的なWebサイトに書き直していただくか、あるいはそれでもWindowsで御社のサービスを提供していただけるような場合は、Windowsのアプリケーション、

.NET FrameworkやWin32に、最近であればWindowsユニバーサルアプリケーションというのがございますが、そういったWindowsのアプリケーションとして社内に配布いただくというような方向というのを検討いただければと思います。

Edgeへの対応=Web標準への対応

Edgeに対応するというのは、Edgeのために特別な作業をするということではありません。特にデベロッパーというか開発の方はIE6のときのCSSハック的な思い出を持つ方がこの中には多数いらっしゃると思いますが、そういうことをしてほしいということではありません。

そうではなくて、いわゆるWeb標準なマークアップをしていただければ、それはイコールEdge対応という位置づけで、我々のほうでは取り組んでおりますので、ぜひ、ともにモダンなWeb、新しいWebというのを目指さしていただければと思っています。

最後になりますが、じゃあ何をもってWeb標準なWebサイトという、ティップスを5つご紹介します。

1つは最初にご説明したドキュメントモードですね。Edgeも含めたIE以外のブラウザはドキュメントモードという考え方がございませんので、ドキュメントモードというのはもう基本的にはお使いにならない方向性というのを検討いただきたいというのが1点ございます。

2つ目はライブラリなんですが、Webサイトを運営される方にありがちなんですが、1回作ったら安心してそのままっていうケースが結構あると思います。

ライブラリもどんどん、どんどん進化してアップデートされますので、特にライブラリとかそういったものをお使いの場合というのは、そのライブラリをちゃんと更新をしてるかどうかというところは注意をいただければと思います。

プラグインはもうもはや、IE以外では動作をいたしません。ちょっと語弊がありますね。スマートフォンでプラグインって動作しないですね。

いわゆるプラグインを使ったコンテンツ、サイトというのは広告の世界でも、ビデオ、ゲームの世界でも、あるいはイントラネットの世界でも避けられる方向にございますので、プラグインはなるべく使わないということをイメージしていただきたいと思います。

4つ目はさっきのお話どおり、CSSのベンダープリフィックス、もうほとんど必要ございませんので、使わない方向でご検討ください。

最後のブラウザ検出なんですが。これだけいっぱいブラウザがあります。しかもChromeとかFirefoxって、3か月に1回アップデートがありますし、

Edgeもおそらくそれに近いスピードでこれから細かいアップデートが入っていきます。

そういう場合にブラウザ検出を行って、例えば条件付きコメントみたいなものをして、ブラウザを分けて、このブラウザはこのユーザーが使っているから、じゃあこの機能が使えるみたいなことをやってると、特にスマートフォンとか見た場合というのは全然追いつくことができませんので。

もしその機能の差違をサイトから切り分けるようなことが必要な場合は、ブラウザ検出ではなくて、機能検出でご対応下さい。

最近ではそういったJavaScriptのライブラリ、https://modernizr.com/　のようなライブラリなんかもありますので、そういったものの利用もぜひご検討ください。

愛されるブラウザに育てていきたい

ということで、これから皆さまに愛されるブラウザに育てていきたいと真剣に考えておりますので、Edgeに関して何かご質問とかご意見があれば、フィードバックツールというのがありますので、フィードバックを送っていただいてももちろん結構です。

このフィードバック送信というところで、ここに問題があるということをご説明、ご報告いただいても結構ですし、本日は展示会場の右側にAsk the Speakerというところがございまして、私、終わったあとそちらに移動しますので、ご質問があれば私まで直接いただければと思います。

あと、展示会場にEdgeコーナーがあります。スタッフ全員これを着てますんで、Edge、もしくはIEに関してご質問がある方はこのTシャツを着てるスタッフにお声がけいただければと思います。

「We love Edge」と言っていただけるようなブラウザに今後していきたいと思っていますので、今後ぜひご期待いただければと思います。どうもありがとうございました。

FEST2015の公式イベントレポートはこちら