レポート

「第14回 HTML5とか勉強会」活動報告

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

「Cross Origin Resource Sharing」

LTのトップバッターは,クロスオリジンでのAjax(XML Http Request Level2)などに利用されるセキュリティモデルである「Cross Origin Resource Sharing」について,筆者の小松より紹介させていただきました。

CORS ⁠Cross Origin Resource Sharing)は,ブラウザーサーバ間でやりとりされるHTTPヘッダのメッセージングにより,クロスオリジンでのリソースアクセスに関するルールを規 定するものです。最新のAjax仕様であるXML Http Request level2やWebFontでのクロスオリジン通信では,このモデルが用いられており,HTTPメソッド(GET, POST, PUT, DELETE)やクッキー利用の有無により使い方が異なってくる点や,現状クロスオリジンで良く用いられているハック(JSONP)との違いについて紹介させていただきました。

「WebStorage」

LT2本目は,ブラウザで KVS(Key Value Store)を利用可能とするAPIの "Web Storage" について,スタッフの吉川さんより講演いただきました。

WebStorageのAPIの使い方や注意点,さらに実際に使われている例などが紹介されました。Web StorageはKVSとなっており,キーに対するバリューの格納と検索が可能なAPIで,単純ながら非常に簡単に使えるのが特徴です。講演では,値の格納や取得方法などAPIの詳細が紹介され,さらにクッキーとの相違点や,オリジンベースに由来するセキュリティ上の注意点と容量制限などが詳細に説明されました。また,twitterなどでの利用事例も紹介されました。

講演の中で紹介されているとおり,WebStorageはIE8から利用可能であり,また使い方も非常に簡単です。是非,活用してみてください。講演資料は,こちらで公開されています。

「Finder風オンラインリポジトリ」

最後に,HTML5とその関連仕様を活用することで,自身で開発された「Finder風オンラインリポジトリ」について,東京工科大学の大学院生である井原さんさんより講演いただきました。公の場でプレゼンされるのは初めてとのことでしたが,非常に分かりやすいプレゼンで,また内容も素晴らしいものでした。

開発されたのは,MacのFinderに似たユーザインタフェースで動作するオンラインリポジトリ。HTML5の技術を使うことで,ブラウザのみで利用可能としています。非常にスムーズに,リポジトリ内のディレクトリ操作が可能となっており,画像や映像などもワンクリックでプレビュー可能という優れたアプリケーションに仕上がっていました(この際,会場からは感嘆の声があがりました⁠⁠。

使っているHTML5関連の機能は,Drag & Drop APIとXHR2それにCSS3。プレビュー機能には,open social gadgetを利用されているそうです。サーバサイドでは独自実装のリポジトリData StoreとApache shindigを連携して動作されているとのこと。実際に学内でも利用されているそうです。Open Sourceでの公開も予定されているそうです。楽しみですね。

最後に

HTML5関連の話題は収まることをしらず,様々な興味深いトピックが目白押しです。本勉強会では,これからも最新の旬の話題をみなさんと共有できるよう,盛り上げていきたいと思っています。今年一年もまた,よろしくお願い致します。

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

本勉強会は,毎月第3水曜日もしくは第3木曜日に開催していますので,興味を持たれた方は是非ご参加ください。開催のアナウンスはhtml5-developers-jpで行われますので,こちらをチェックください。来月も開催予定です。お楽しみに。

なお,筆者が管理しています,こちらのサイトEvents in HTML5-jpで開催状況や,過去のアーカイブなども公開しておりますので,是非ご活用いただければと思います。

また,私事になりますが,この度Google公認のAPI Expert(HTML5)に就任することとなりました。勉強会主催の白石さんや羽田野さん,それにChrome Extensions Expertの太田さんと共に頑張っていきたいと思います。よろしくお願いします。

著者プロフィール

小松健作(こまつけんさく)

NTTコミュニケーションズ 先端IPアーキテクチャセンタリサーチエンジニア。元々はネットワークエンジニアだったが,Ajaxの登場以来,今後のサービスはWeb(Javascript)を中心に回ると確信。その魅力にとりつかれる。WebSocketに衝撃を受け,リアルタイムWebの到来を信じ,html5の世界に足を踏み出した。Google公認API Expert(HTML5)。好きな言語は,JavascriptとRuby。

Blog:http://blog.livedoor.jp/kotesaki/
Twitter:@komasshu