レポート

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

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

「Canvas implementation using CoffeeScript」

最後のセッションとして,Michael Fellingerさんより,CoffeeScriptについて講演いただきました。

Javascriptは,時として冗長なコーディングスタイルを開発者に要求します。その一例が,ヒアドキュメントでしょう。一般的なスクリプト言語の場合(以下はrubyの例⁠⁠,

out = <<EOF
このドキュメントは
ヒアドキュメントで書かれています
EOF
puts out

といったシンプルな記述ができるのに対し,Javascriptでは

var out = "このドキュメントは";
out += "文字列の連結で書かれています";
alert(out);

といった面倒な記法となります。CoffeeScriptは,pythonやrubyのようなスタイルのスクリプト言語で,シンプルに記述可能な言語となっており,Deploy時にはJavascriptに変換することで,Webアプリの開発効率をあげようというものです。講演の中では,行末にセミコロンが不要であったり,オブジェクト定義をYAMLのようにシンプルに記述可能であることなどを,Javascriptとの対比を含め丁寧に紹介されました。

また,CoffeeScriptのサイトでは,CoffeeScriptからJavascriptへのリアルタイム変換も可能となっており,こちらのデモも併せて紹介されました。

「HTML5で作るスマートフォンのネイティブアプリ開発?JSWAFFLEの紹介」

勉強会終了後,同会場内で懇親会を開催し,その中でLTを3本行いました。最初はクジラ飛行机さんよりJSWAFFLEについてのLTをいただきました。

HTML+CSS+JSからiPhone/Androidのネイティブアプリを開発するフレームワークとしてPhoneGapが有名ですが,特にAndroidではデバイス(例えばカメラなど)にアクセスする機能に乏しいのが現状です。このため,Androidに特化したフレームワークとして自身が開発されたのがJSWAFFLEです。

JSWAFFLEのポイントは,インストールの容易性とプロジェクト作成の容易性,そしてGPS, 傾きセンサー, カメラなどの各種デバイス固有のAPIを利用可能であるとのことでした。

なお,プレゼン資料はこちらで公開されています。

「HTML5 presentaion w/ Android」

2本目のLTでは,筆者より,Androidを組み合わせたHTML5プレゼンテーションを紹介しました。

今回の各講演でも,多くの方がHTML5+CSS3を用い,ブラウザでのプレゼンテーション(PowerPointなどではなく)を行っていましたが,このスタイルの最大のメリットは,アプリケーションを切り替えることなく,デモンストレーションを行える点です。HTML5関連のデモを行いたい場合,それをページ内のJavascriptや,IFRAMEとして埋め込めば良く,非常にスムーズにデモを絡めたプレゼンテーションを行うことができます。そこで,せっかくWebアプリとしてプレゼンを行うのであれば,さらにアプリとしての機能を追加したいという思いより筆者が開発したツールを紹介しました。

本アプリでは,WebSocketを組み合わせることで,ハッシュタグでフィルターをかけたTweeetをTwitter Streaming APIを利用しプレゼン内にリアルタイムに表示したり,Androidのタッチジェスチャーに応じて,プレゼンスライドを切り替えたり,ズームインやポジション移動が可能であることを紹介しました。なお,AndroidでWebSocketを用いるためにFlashを利用したこちらのライブラリを利用しました。

「jQuery Mobile」

最後のLTでは,勉強会スタッフの吉川さんより,jQuery Mobileについて講演いただきました。

jQuery Mobileは,jQueryプロジェクトが開発を進めているモバイルWebアプリ開発フレームワークです。10月にAlpha版がリリースされ,一般に利用可能となったことから,そのコーディング方法について紹介いただきました。

WebKitに限らず,Cross-Platformに対応していることや,デバイスの特性に応じ最適なUXを提供するProgressive Enhancementをサポートしているなどの全体的な特徴に始まり,個々のページ要素(ヘッダー,フッターやフォームなど)のコーディング方法にいたるまで,豊富なサンプルを交え紹介されました。jQuery Mobileは,来年1月に正式版がリリースされるとのことで,AdobeのDreamWeaverでもサポートを検討しているとのことです。

なお,講演資料はこちらで公開されていますが,資料自体がjQuery Mobileで作られており,優れたコーディングチュートリアルとなっています。是非ご確認ください。

最後に

今回は,英語のプレゼンがメインであったこともあり,事前準備等大変ではあったのですが,⁠いくらかトラブルはあったものの)講演者,Googleの方々,そして参加者の協力のもと大変盛況な会を行うことができました。全関係者のみなさまに改めて感謝申し上げます。

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

本勉強会は,毎月第3水曜日もしくは第3木曜日に開催していますので,興味を持たれた方は是非参加ください。

開催のアナウンスはhtml5-developers-jpで行われますので,こちらをチェック願います。来月も開催予定です。お楽しみに。

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

著者プロフィール

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

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

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