Experts.jp日本に、もっとエキスパートを。(38)毎年6月第2土曜日に開催される<htmlday>。日本のWebを盛り上げようというお祭りで、日本全国でWebに関する27ものイベントが開催され、イベント参加人数は総勢1233人にも及んだ。HTML5とか勉強会」が、<htmlday>の最後を締めくくるイベントとなった。2015」の最新技術情報をダイジェストでレポートする。2015の会場は非常にオープン最初に登壇したのはGoogleの鈴木拓生氏。I/OにGoogle社員として参加。I/Oはお客さま優先なので、社員は控え室で見ている。キーノートをパブリックビューイングするのだそう。「今年のI/Oは雰囲気が変わった」と鈴木氏。これまでは個別の部屋に入ってセッションを聞くスタイルだったのが、今年は半分オープン、半分クローズな場所でセッションが行われた。「このセッションは少し自分が聞きたかったものと違うかも」と思えば、すぐに出られる、面白そうだと思えばのぞけるようになっていたという。このようなオープンなコンセプトは会場全体を包んでいた。CodeLabsも「オープンなスーペースに設置した」と鈴木氏。することで「コードで詰まっている人を見かけると、僕たち社員がサポートする。これまでのような一方通行で聞いていただくという形式ではなく、フランクに深い話ができるような環境になっていた」と写真と会場の雰囲気を紹介した。I/Oで発表された話題の紹介へ。I/Oで発表された注目の話題とはまずはAndroidについて。Androidは世界で10億台以上売れており、毎日150万台以上の新しいアカウントができている。昨年1年間でGoogleプレイを通じて開発者の人たちにGoogleが支払った金額は70億ドルにも上る。「AndroidのOSはタブレットから始まり、ウェラブル、テレビなどへと広がっている」と鈴木氏。Mというデベロッパープレビューを公開。Link(検索のときに何かアプリがクエリーに反映する)などが追加された。wareも粛々と進化している。Faceが作れるようになったこともその一つ。Faceが作ることができ、自分好みのウェラブル端末を手にすることができるようになった。AndroidTVについてもI/O周りでアップデート情報が語られたという。I/Oでは「OSの話が多かったのでは思われたかもしれない。UIだ」と鈴木氏は語る。モバイルとPCでWebサイトを見たときにUIが違ったり、ネイティブアプリで見たUIとPCでみたUIが違ったりすることはよくある。independence:Mobile+Web、Portrai+Lndscape:複数のデバイスやポートレート、ランドスケープごとに適切なデザインにする」ということだ。今後ますますさまざまな人がさまざまなデバイスで情報にアクセスする世界になる。UIのセッションに時間を割いたのだそう。UIに重要な役割を果たすのがPolymer1.0である。I/OのサイトはモバイルWebで見てもPCで見ても同じになる。これはフルPolymerのデザインを適用しているからだ。Setの拡充も図っている。「Polymer1.0からはマテリアルデザインで使っているアイコンがすべてWebフォントで活用できるようになった。750個ぐらいが、オープンソースで利用可能」と鈴木氏は説明する。labはすべて公開しているので、ぜひこのURLにアクセスしてよう。「これを使うとモバイルWeb、デスクトップでいい感じのアニメーションやトランジション、エフェクト作れる。labのサイトもフルPolymerで実装されている。Polymer1.0で何が変わるのか次に登壇したのは、NTTコミュニケーションズの小松健作氏。登壇するまでにビール5本ぐらい飲んでしまったという小松氏。この日は昼にも同場所でセッションを行っていたため、そのおさらいから始まった。importなどのライブラリ、さらにクロスブラウザでも使えるようpolyfillというライブラリを提供している。Polymer1.0になり、どう変わったのか。ready(実用的になった)であるということ」と小松氏はいう。Codeが35パーセント削減されるという。DOMを見直したことである。Themingでテーマの変更が容易にできるようにもなったという。0.5と1.0の互換はない。「Angular.jsなどのフレームワークとPolymerの違いはどこかと聞かれることが多いが、Polymerはフレームワークとは違うポジションを取っている」と語る。それは次の図を見れば一目瞭然だ。jQueryやReact、Angularなどのフレームワークと、元々ブラウザが持っているネイティブAPIの間を埋めるような役割を果たしているということ。I/Oのセッションの中で、たびたび出てきた言葉がある」と小松氏。これは「こういうものが欲しいということがあればすべてエレメントとして提供する」という意味。そこではGoogleが提供しているサービスについても、Webコンポーネントとしてすでに提供。Polymerを使ってWebアプリケーションを作っていくためのテンプレートもスターターキットとして提供されている。I/Oのセッショントークについては、今のおさらいがすべて。これからは次に挙げるトピックを説明する」と語り、本セッションの本題へ。Catalogの使い方について。Componentsが提供されている。Elementsの「Paper-button」の適用方法について、デモを行った。Collection』をクリックします」と小松氏。次に右上に表示された「星型のボタン」をクリックし、ダウンロードボタンする。Command」に表示されたコードをコピーして、HTMLインポートという形で適用していくだけだ。Kitのページにアクセスし、zipファイルをダウンロードすれば使えるようになる。「どんなテンプレートがあるか」。小松氏がよく触りそうなモノとしてピックアップしたのが以下だ。これを使うと、非常に簡単にコードが書ける。DOMのPolyfillを実装でしたもの。DOMで独立したコンポーネントのDOMツリーを作るとなるとかなりつらく、モバイルでは遅いというのがネックだった。DOMの違いは次の通り。「ただし、注意点がある」と小松氏。DOMは普通のDOMとして展開されているので、Textnodeで以下のように書くと、中のDOMをすべて壊してしまうので動かなくなるので注意が必要だ。APIなので、使うのが難しいという問題がある、と小松氏は指摘する。オフラインキャッシュ。Cacheがあったが、特定用途じゃないと使えなかった。ブラウザを作っている人はC、C++がメイン。高レベルインタフェースに何が必要かは、Web開発者でないとわからないからだ。Workerを使って書くと次のように簡単に書ける。オフラインキャッシュがカジュアルに使えるようになるということ。APIとして知識のある企業が提供していく流れは続いていくだろう」と小松氏は語る。ComponentsやPolymerなのだ」なぜモバイルWebがダメダメと言われるのか3番目に登壇したのは、川田寛氏。I/Oではあまりモバイルの話が出てこなかったと言われているが、次世代のモバイルの開発がどういう風にしていくかという話をしていく」と語り、セッションをスタート。モバイルWebばっかりエンジニアの川田氏は、「モバイルWebがダメダメ過ぎて生きるのが辛い」と嘆きながらも、「モバイルWebで頑張りたい」と語る。モバイルWebがダメダメと言われるのか。その理由の第一はブックマークが役に立たないことだ。デスクトップPCの場合、個々のアプリの機能は大きく、1つで多くのユースケースをカバーしていた。ブラウザのブックマーク機能も仕組みは同じ。PC上のアプリの扱われ方と相性が良いため、違和感がなかったというわけだ。一方のモバイルはアプリがユースケースごとに分かれている。一つのアプリが一つのユースケースになるというわけだ。ブラウザのブック機能はモバイルのアプリの使われ方と合わないのである。第2の理由がブラウザは閉じられると何もできなくなるということ。デスクトップPCだと使うときだけ起動しており、ブラウザも同じタイミングで使われていた。PCとその上のアプリとはライフタイムがほぼ同じで、そこに乖離はなかった。モバイルは作業していない間も起動している。そのためアプリ側が新しい情報をユーザーに通知したいと思えばいつでも通知でき、その通知をきっかけにユーザーが作業を開始するという使われ方をする。ブラウザだとそうはいかない。「閉じられたら何もできない。モバイルの使われ方とは合わない」と川田氏は言う。第3の理由はパフォーマンスの悪さ。モバイルは省エネが求められ、制限が多い。Webのオーバーヘッドは時に邪魔になるのだ。I/O2015で見えたモバイルWebの可能性このように駄目な理由が多いWebだが、「自由な世界で人々にサービスを提供していきたい」と力強く語る。Googleもその答えを探っているという。Web」では、モバイルWebの可能性を示されたという。「そのセッションのトピックスを紹介する」と川田氏。次のような図を示した。モバイルに適したWebを作るために開発者が行うべきことは3つ(ステップ1~3)あるという。ステップ1は「モバイルに適したUIで扱おう」。それがMobileUIだ。homeScreen」と呼んでいたが、ホームスクリーンへランチャーアイコンを配置して、それをモバイル専用のUIで起動させるというもの。コードは次のようになる。このように書くことで次にタップして開始するhtmlの場所を変えることができる。Webサイトを見ていたときはWebサイトに特化したサイト、モバイルのときはモバイルに特化したサイトを呼び出すこともできる。ネイティブアプリっぽい見た目にするためにブラウザのUIをなくすこともできたり、ランドスケープを封印することもできる。これによりWebだがネイティブアプリケーションに近いサービスが実現する。Homescreen』というサイトを見てほしい」とのこと。ステップ2は「Webをモバイルに適したライフタイムで動かそう」というもの。「これからのプラットフォームは通知機能だ」という。通知機能はコンバージョンに影響を与える機能で、「Googleのチームは40パーセント影響があるといっているが、もっと影響があると思う」と川田氏は説明する。ブラウザが閉じられてもバックグラウンドで待機させて、何か起きたときにユーザーへそれを通知する。Workers:バックグラウンドでイベントを受け付けて何かしらの処理を実行できるWeb標準。API:プッシュサービスからプッシュイベントを受け付けてメッセージを読み込めるWeb標準。APIの仕様が固まるとWeb標準になるだろう。Step3はモバイルパフォーマンスの話。「十分なパフォーマンスとはユーザーがそれを意識しないことである」とドン・ドレイバーの有名な言葉がある。それをどうやって実現するため、ChromeのチームではモバイルWebを速くしようと戦っている。開発者が実践すべきことは何か。それはRAILと言うキーワードで表すことができる。RAILは以下の4つの略。この4つのパフォーマンスを改善すれば、ユーザーはストレスフリーになれるという。R:Reaction(一昔前はResponseと呼ばれていた)A:AnimationI:IdleL:LoadReactionはタップやスクロールしたときに10ミリ秒未満で終わらせようという考え方。Animationは16.67ミリ秒(60fps)未満で動かしてくださいということ。AnimationsをGPUで使うと「幸せになれる」と川田氏。Idleは50ミリ秒未満で応答しようというもの。中には「100ミリ秒と言う人という人もいる」。Load(読み込み)は100ミリ秒未満で。これは「無理ではないか」と思っているとのこと。「もっと詳しいことを知りたい人は、gihyo.jpの連載をぜひ読んでほしい。モバイルWebの未来はダメダメじゃない。コンテンツ系はネイティブしなくてもよいのでは」こう会場の参加者に呼びかけ、セッションを終了した。最後に登壇したのは、日本マイクロソフトの物江修氏。10のあたらしいWebブラウザについて』。セッションは「de:code」の紹介から始まった。米Microsoftでは開発者のためのイベント「build」が開催されている。Windows8のリリースから開催され、今年で3回目。チケット代は2045ドルで20万円超える値段だったが、発売と同時に45分で売り切れてしまうほどの人気イベントだ。一方の「de:code」は去年から始まった日本マイクロソフトのイベントである。去年は完全に開発者向けイベントとして開催したが、今年は開発者とIT技術者というかたちで集客した」と物江氏は説明する。「ブレークアウトセッションはまだ昨年のモノしか見られないが、Webで公開しているので見てほしい。来年は会場でお会いしましょう」と語り、「de:code」の紹介は終了。Windows10が搭載する2つのブラウザIE11とEdge続いて、本セッションのテーマであるWindows10の新しいWebブラウザの紹介へ。Preview時点での情報。仕様は固まっていないが、ほぼほぼこの形で出てくると思う」と物江氏は前置きし、紹介を続けた。Windows10はWebブラウザが2つ搭載される。Explorer11(IE11)、もう一つはEdge。IE11は、旧バージョンのIE向けに作られた企業内のWebシステムなどに、後方互換性を提供する目的で搭載される。APIなどの機能が若干だが追加されている。ActiveXを使う場合もIE11となる。一方のEdgeは新規に開発されたWebブラウザ。「IEとはまったく違うブラウザとなった」と物江氏は語る。EdgeはIE固有の機能をすべて取り除いているという。Web標準に準拠しており、「他のブラウザとの相互互換性に注力した」と語り、会場の笑いを誘う場面も。Platformで作られているので、PC版と同じものがスマホでも動く」と物江氏。Webkit、Blinkに準ずるように多大な投資を行った。そのためWebサーバーが、IEや、その他の想定外のブラウザ向けのコンテンツを返されると都合が悪い。それの問題を解消するため、EdgeのuserAgentは以下のようになっている。Edge/12.0つまり「Edge対応どうしましょう?と言われたら、Chromeで動くようにすればOK」と物江氏はにっこり。EdgeとIE11の違いはレンダリングエンジンが異なる。Edgeのレンダリングエンジンは、EdgeHTML.dllに対して、IE11はMSHTML.dll。Transitionsなどは一切動かない。FlashやAcrobat(PDF)などはプラグインで動く。「Edge自身、アドビと一部一緒に開発を行っている。従って、AcrobatのアップデートはWindowsアップデートで行うようになる。Edge自体がFlashプレイヤーであり、Acrobatリーダーになるというわけだ。Chrome、Firefoxのプラグインが動くようになる予定だという。「相互運用性への意気込みは強い」と物江氏は強調する。相互運用性を遵守するので、正しく動かないのであれば仕様を変えるので連絡してほしいという。話題はEdgeの新しい機能について。Edgeにはお絵かき機能や注釈機能が付く。画面をリーディングリストという形でローカルに保存できる。次に呼び出したとき、メモなどの内容は、オフラインでも見ることができる。共有を選ぶと、Facebookやメールで送ったりもできる。リーディングビューをクリックすると、タブレットで読みやすいように成型してくれる。画面ショットを取りたい場合は、切り取りボタンを選んで取りたい場面を囲みクリックすれば取れる。MAGAZINEトップページの画面ショットを使ってお絵かき機能や注釈機能をデモ新しいブラウザをいち早く使う方法についても物江氏は説明する。Previewをダウンロードする。それができない場合はRemoteIEを利用するという方法だ。後者の場合はリモートデスクトップのエージェントさえあれば使用できるので、Mac、iOS、Androidからも使用可能だ。「iPhoneからも接続して試せる」と物江氏。IE11の新しくサポートされる機能については、status.modern.ieで実装状況を公開している。Edgeでサポートされている機能については、dev.modern.ie/platform/status/で確認できる。これらの機能はプレビュー版ではそのままでは使えない。URLにabout:flagsと入力すると隠しメニューが出てくるので、無効になっているところをチェックして有効にすれば使えるようになる。最後にEdgeの注意点について。Edgeではローカルホストでデバッグができないため、コマンドプロントにてコマンドを実行するという。-n=Microsoft.Windows.Spartan_cw5n1h2txyewyこれで接続できるようになる。将来的にはメニューで設定できるようになると書いてあるのだそうだ。そのほかにも「この機能を正式に採用してほしい」という場合は、リクエスト(Vote)機能を有効に使ってほしいという。Deveroperから投票ができるようになっている。Coneectでは現状のIEについてのフィードバックを受け付けている。「日本からのフィードバックが少ないとか言われているので、ぜひ皆さん、フィードバックやリクエスト送ってください」と呼びかけ、物江氏のセッションは終了した。Google、マイクロソフトともに、よりモバイル(マルチデバイス)に対応すべく、Webテクノロジーの開発が進められている。今後の動向も引き続きレポートしていく予定なのでご期待ください。