「第36回　HTML5とか勉強会～2013年、Web開発の進化を探る」活動報告

2013年2月18日、第36回のHTML5とか勉強会はサイバーエージェントさんに会場をお借りして開催しました。

今回は「2013年、Web開発の進化を探る」をテーマに、Web標準の進化、「⁠オフライン・ファースト」というコンセプトによるアプリ開発の進化、HTML5の現状における使われ方とこれからの使い方について講演いただきました。

本稿では、HTML5とか勉強会スタッフの本間がその内容についてレポートします。

勧告候補になったHTML5.0の仕様についてと、HTML5.1の始まり

はじめにW3C（World Wide Web Consortium）のMichael Smithさんより、HTML5.1で追加されるAPIの中からNavigationControllerとtemplateを中心に講演いただきました。

appcache

オフラインWebアプリケーション用のAPIとしてHTML5.0ではappcacheが提供されています。これは、Webアプリケーションのリソースファイルをブラウザでキャッシュし、オフライン時にこのキャッシュを利用することでサービスへのアクセスを可能にするものです。

ただし現状のappcacheはユーザがオフラインの時だけではなく、オンラインのときもキャッシュからデータを取得するという仕様で、使いにくく問題も多いとのこと。これを解決するため、最近1年間で3回の会議が行われ、その結果NavigationControllerという新しいAPIが登場することが発表されました。このAPIにより、既存のappcacheの問題は解決されることが期待されます。

現状のappcacheではすべてのリクエストに対し、キャッシュされたリソースが用いられるという動作をします。一方、NavigationControllerを使うと、すべてのネットワークリクエストはコントローラを通して行われるため、オフライン時の動作を柔軟に制御できると指摘しました。これは、プロキシと考えると分かりやすいとのことです。

Navigation Controllerは、appcacheと比べて低レベルのAPIであり、使うに当たって必要なコードの量は増えるがパワフルであると言及しました。

さらに、Navigation Controllerはオフラインへの適用だけではなく、他の用途にも利用できるとし、例えば、デバイスのディスプレイに応じて適切なサイズの画像を表示するレスポンシブイメージの仕組みもNavigation Controllerで可能になるだろうとのことでした。

Navigation Controllerは現状ではまだアイデアですが、実装は迅速に進められると言います。講演前半の締めくくりとして、今年実装される最高のHTML5の仕組みとなるだろうとの見解を示しました。

Web Components

講演の後半はWeb Componentsの一つであるtemplateタグの紹介から始まりました。

Web ComponentsとはWebのUIをコンポーネント化するための仕組みです。時間の関係で講演の中では詳しい説明はありませんでしたが、白石さんの記事が参考になりますので、こちらを参照ください。

Web Componentsはとても強力な機構であり、Ajaxの登場がWebの概念を大きく変えたように、Webアプリケーションの概念を大きく変えるものになるであろうとの見解を示しました。ぜひ、W3Cが公開しているWeb Componentsの紹介資料を読んでほしいと述べていました。

最後に、W3CのGithubレポジトリを紹介し、「⁠誰でもHTMLの仕様やHTMLのテストケースの製作に関与することができる。特にテストケースは10～20万個ほど必要となるため、ぜひ協力してほしい」と講演を締めくくりました。

詳しい内容は動画と資料をご覧ください。

オフライン・ファーストの思想と実践

続いて、株式会社オープンウェブ・テクノロジーの白石俊平さんから「オフライン・ファーストの思想と実践」と題して、オフラインWebアプリケーションの作り方や、そのために必要な考え方について講演いただきました。

発表タイトルにもある「オフライン・ファースト」とは、Webアプリケーションを作るときにオフラインを最初に検討するという思想のことで、2012年11月26日のJoe Lambertさんの記事から有名になったそうです。

2010年5月15日に言葉が誕生し、約一年半後の2012年にブレイクした「レスポンシブデザイン」と対比して、2014年の半ばくらいに「オフラインWeb時代」がくるのでは、と指摘する白石さん。

オフラインWebアプリケーションは、データをあらかじめローカルにキャッシュし、まずはそこにアクセスを行うため、オフラインでも使用可能という恩恵だけでなく、アクセススピードも速くなり、ユーザビリティの向上が見込まれます。しかし、すべてのアプリケーションをオフラインに対応すべきというわけではなく、オフラインは「機能」であり、アプリケーションによって必要か否かを選択すべきものであると述べていました。

では、どのようなアプリケーションにオフラインという機能を入れるべきなのか。白石さんはその基準を「読む中心のWebサイト」か「編集中心のWebアプリ」かで判断すると良いと解説していました。

情報量が非常に多く、また最新性が重要であるニュースサイト等ではオフライン化するコストの方がメリットを上回ります。しかし、最近オフライン機能を追加したGoogle Slidesのように、ユーザの編集結果がいかなるときも保持されるべきアプリケーションの場合は、コストよりもメリットが大きくなります。その上で、オフラインの活路はモバイルアプリにある、と述べていました。

続いて、Joe Lambertさんの記事の内容をまとめて、オフライン・ファーストの勘所として、次の3つを挙げました。

アプリケーションとサーバを切り離す
ラッパーを通じてWeb APIを呼び出す
抽象化したオブジェクトを通じてデータを操作する

普通のWebアプリとオフラインWebアプリでは作り方が全く異なり、Web開発者にとってはパラダイムシフトが必要であるため、この中でも一つ目が一番重要であると述べられていました。

講演の後半では、オフラインでも動くメモ帳アプリのデモがありましたが、白石さんによると、データの同期処理の実装はとても難しいとのこと。同期処理中にオフラインになった場合どうするか、同期量を「必要最小限」に留めるにはどうしたらよいかなど、考慮すべきことが多いからだそうです。

しかし近い将来、このAPIを使用してデータを保存すれば自動で同期してくれる、というようなオフラインWeb対応のAPIが提供され、そのようなAPIの登場により2014年にはオフラインWebの時代が来るのではないか、と講演を締めくくりました。

講演動画と資料はこちらで公開されています。

It is not HTML5. but ... HTML5ではないサイトからHTML5を考える

最後にカカクコム株式会社のひらいさだあきさんより、昨年末に勧告候補となったHTML5を、Webサイトのどこからどのように使用していけば良いのかについて、既にWebサイトで使われているHTML5の例を元に、サンプルコードとさまざまなWeb解析ツールのデモを交えながら講演いただきました。

本レポートでは講演の中にあったHTML5使用例の中から、いくつかピックアップして紹介します。

まず、MicrodataやRDFaを使用しているサイトを取り上げました。MicrodataとRDFaはどちらもメタデータを付与するためのHTML5仕様です。ここではGoogleのウェブマスターツールの構造化データテストツールを使って、どのようなメタデータが付与されているかを調べるデモがありました。

サイト全体をHTML5に置き換えるのは非常に労力がかかるが、メタデータを付与していくだけなら手軽にHTML5を試せるのでは、と述べました。

続いてMedia Queriesについて説明がありました。Media Queriesは画面サイズなどによって、適用されるスタイルを振り分けるためのCSS3の機能です。

ひらいさんは実際にMedia Queriesを使ってみて、静的なサイトには良いが、食べログのようにPCとスマホで利用シーンや必要な機能が異なるWebアプリケーションでは、サイトを切り分けたりする方が良いのでは、と感じたそうです。また、実際にサイトをMedia Queriesを使用して制作すると、先に作った画面に意識が引きずられがちであると言います。

Media Queriesの利用有無にかかわらず、それぞれの利用シーンによって機能や情報の取捨選択が大事である、とまとめました。

講演の終盤では、ひらいさんが個人的にも興味があるというパフォーマンスの向上について話がありました。

性能評価にNavigation Timing APIを使用したり、性能の向上のためにlinkのプリフェッチ、script要素でのdeferやasync属性を使った方法、data URI Schemeを使って画像をHTMLに埋め込みリクエストを減らす方法などを紹介しました。また、Google画像検索を例に挙げ、SPDYを使えばリクエストを減らしつつ他のパフォーマンスも向上させることができるのではないか、と述べていました。

最後にひらいさんは、「⁠HTML5やその周辺の技術には仕様が安定しているものやそうではないもの様々あるが、自分のサイトの特性を考えて、メリットの大きいところから使えばよいのではないか。また、すぐには必要ないかもしれないが、それぞれの技術がどんなものかを知っておくことは大切である」と講演を締めくくりました。

この講演では各種解析ツールやサンプルコードの紹介が多く含まれていました。ぜひ動画と資料の方も合わせてご覧ください。

最後に

レポートに対する感想や、勉強会に対する希望・意見・取り上げて欲しいテーマなどがありましたら、twitter（@sakkuru）まで気軽につぶやいていただければと思います。

本勉強会は、毎月第3水曜日、または第3木曜日に開催していますので、興味を持たれた方はぜひ参加ください。ただし、会場や講演者スケジュールの都合などにより、開催日程が前後することがあります。

開催のアナウンスはhtml5j.orgのMLで行われますので、こちらをご確認ください。また、コミュニティサイトhtml5j.orgも公開していますので、ぜひこちらもご覧ください。