「Chrome+HTML5 Conference~第20回記念HTML5とか勉強会スペシャル~」レポート

プログラマートラックレポート(前編)

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

北村英志さん「Debugging on Chrome Developer Tools!」

今回のカンファレンスのマネージャーを務めた,Googleの北村英志さんより,Chromeのデバッギングツールである,Chrome Developer Toolsについて講演いただきました。

画像

Chrome Developer Toolsは,Chromeに標準で備わっているデバッギングツールで,これを用いることでWeb開発を効率的に行うことができます。講演では,北村さんが開発されたメトロノームのWebアプリを使い,Developer Toolsの様々な機能を説明しました。

「Webアプリを構成するリソースを簡単に確認できる」⁠CSSのプロパティをレンダリング結果を確認しながら,直接変更できる」⁠ブレークポイントを用いたデバッギングができる」⁠CSSと同様に,Javascriptについても,直接編集や保存を行うことが可能となっており,IDEとしての側面も持つ」といった特徴をデモを交えながら示しました。

Developer ToolsはHTML5で作られているWebアプリで,それ自身をさらにDeveloper Toolsでデバッグ可能というユニークな一面も紹介しました。また,開発陣がユーザーから要望される機能を積極的に実装しており,昨年のGoogle Developer Day2010の講演で会場からあがった要望も反映されているとのことでした。

小松健作さん「WebSocketでリアルタイム通信」

午後最初のセッションは筆者,小松健作より,WebSocketについて講演させていただきました。なお,講演資料はこちらで公開しております。

画像

WebSocketは,一般的に難解な印象を聴講者に与える傾向があります。理由の一つは,Web開発者には馴染みの薄いプロトコル(通信方式)に関する解説を中心に進められる講演が多いこと。このため,今回はプロトコルについての解説は排除しました。 ⁠WebSocketが何者か?を知る」ことを目的とし,⁠何ができる?」⁠何が違う?」⁠どうやって使う?」という3点にターゲットをしぼり解説しました。

WebSocketはチャットのようなリアルタイムサービスを実現するもの。APIも大変シンプルで,利用するのは非常に簡単です。しかしながら,チャットは WebSocketを使わずとも,現行のWebでもサービス提供されています。このため,これらの違いについて話しました。

現行のWeb技術(HTTP)で,リアルタイムサービスを行うテクニックは,一般的に"Comet"と呼ばれています。このCometは,テレビ番組でコメントを視聴者が送るのに,メールなどの放送波とは別の手段を用いるように,下り(受信)と上り(送信)とで,それぞれ異なるHTTPセッションを用います。ここで,コメントを送信するユーザーが増えると,テレビ番組では多数のオペレータが必要となり,どんどん大変になるように,Cometでも頻繁なデータの送信が行われると,サーバーなどの負荷が上昇してしまいます。一方WebSocketは電話のモデルに近く,頻繁にデータが送信されても,サーバーの負荷がそれほど上がらないのがそのメリットです。

また,チャットのようなコミュニケーションサービスだけでなく,スマートフォンからPCを操作するリモコン利用のユースケースや,Webの高速化にも利用できることをデモも交えつつ,解説しました。

著者プロフィール

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

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

Blog:http://blog.livedoor.jp/kotesaki/

Twitter:@komasshu