(1/3)「2013年、Web開発の進化を探る」勉強会レポート。});はじめに先日2月18日に渋谷マークシティのサイバーエージェントで行われた第36回HTML5とか勉強会に参加してきました。「2013年、Web開発の進化を探る」と題して、「現場でHTML5はどこまで活用されているのか、またこれからどうなっていくのか」が話し合われました。Smith)@sideshowbarker最初のセッションでは、去年の12月18日に仕様策定を完了し、勧告候補となったHTML5の仕様や、HTML5.1で追加される仕組みとW3Cの活動について紹介されました。紹介のあった仕組みはこの6つ。APIとは、宣言した(マニフェスト)ファイルをローカルにキャッシュさせるための仕組みです。Cacheはマニフェストファイルにキャッシュするリソースを記述し、HTMLドキュメントに指定します。APIはオフラインアプリケーションを作るために必須の仕組みです。紹介されたデモ実際に動作しているデモをDevToolsでチェックしてみます。Cacheをチェックしてみましょう。いくつかのファイル名があります。続いてネットワークタブを開いてもう一度ページを読み込んで、読み込まれているリソースのサイズを見てみましょう。cache」となっていて、キャッシュから読み込まれているのが分かります。現在のAPIは高レベルなAPIで、容易に利用できる代わりに、機能が限定されるため、このような問題を抱えています。headerのような一時的なキャッシュと違い、簡単には消えてくれません。それらを解決するためのAPIが今週中にFixする予定のNavitgationContollerというAPIです。Cacheとアプリケーション間でプロキシのように振る舞います。Cacheを見にいきます。NavitgationContollerを使った場合、その間にNavitgationContollerが入り状況に応じて、確認する宛て先を制御できるそうです。Cacheが使いやすくなります。残念ながらソースコードが公開されていないので、解説のみの紹介になりますが、Ustreamで一部をチェックできます。Componentsの1つ<template>について紹介がありました。Componentsはその名の通り、UIをコンポーネント化するための仕様群であり、どんどん複雑になるWebアプリケーションの構造をシンプルにするための新しい仕組みです。Flexなどコンポーネントを備えた環境はすでに多くありますが、HTMLにはまだその仕組みがなく、デザイナやエンジニアが1から作るケースも多いです。メンテナンス性や再利用性などを考えると非常に効率が悪く、複雑化していくHTMLをベースとしたWebアプリケーションにはうれしい仕組みです。Componentsに含まれる要素は以下です。内部構造を隠ぺいしたシンプルなDOMに見せかける現在でも、JavaScriptを利用したテンプレートの仕組みは、いくつかありますが、Templatesを利用した場合のポイントは以下です。通常通りHTMLを記述できるbodyタグ内に定義ドキュメントロードを利用しないレンダリングされないテンプレートをJavaScriptで利用するためにDOM走査が行われる使い回しができる実際にはこのように定義し、JavaScriptでプロパティを足したり変えたりしながら利用します。Chromeで一部実装が進んでいるので、そのうち筆者も試してみます。Componentsが実際に利用できるようになると、Webアプリケーションの作りが大きく変わるでしょう。Componentsについては白石氏のこちらのスライドが分かりやすく興味深いので、一読をおすすめします。read)1.3.レスポンスイメージを実現するsrcset属性とpicture要素3つ目に紹介されたのが、HTMLでレスポンスイメージを実現する提案です。現在「srcset属性」と「picture要素」の2つの提案があり、picture要素は実装が難しいそうです。どちらになるか分かりませんが、好みの分かれる記述方法になるでしょう。Intentsとは、Androidにあるアプリケーション間のやりとりをWebアプリ同士で実現しようという仕組みです。Intentsの策定はいくつかの問題があり、中止となりました。Intentsを実装していたChromeも昨年の12月で使えなくなりました。Activitiesが台頭していますが、いまのところ、どうなるかは分からないそうです。Intentsと似ていますが、Webアプリケーションを前提として実装されている点が違います。OSのシミュレータで試すことができます。Activitiesについてはこちらに日本語訳された紹介があります。Intents入門でチェックできます。1.5.main要素についてmain要素はメインコンテンツの開始位置と終了位置を示します。main要素を利用することで、アクセシビリティの観点から、素早くコンテンツにアクセスできるメリットがあります。WAI-ARIAでも似たような仕組みとして、role属性による役割の指定がありますが、実装が進むまでは併記が必要です。main要素はChromeとFirefoxの開発版かNightlyで利用できるそうです。GitHub最後にW3Cの紹介もありました。W3CがGitHub上にリポジトリを用意し、多くのテストケースを募集しています。筆者は、まずHTML5の仕様書から読んで、協力したいと思います。W3CのGitHubアカウントはこちら。本セッションは英語によるスピーチです。そのため、この記事で解説する内容は和訳ツイート(togetterまとめ)と参考文献で補足しています。5.1についてはW3Cのページをどうぞ。メールマガジンをご購読ください。申し込みページへITmediaはアイティメディア株式会社の登録商標です。