レポート

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

この記事を読むのに必要な時間:およそ 3 分

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も公開していますので,ぜひこちらもご覧ください。

著者プロフィール

本間咲来(ほんまさき)

NTTコミュニケーションズ 先端IPアーキテクチャセンタ所属。

html5jスタッフ。

twitter:@sakkuru

コメント

コメントの記入