4月21日、先月は1回お休みだったため2ヶ月ぶりの開催となる「第16回 HTML5とか勉強会」が開催されました。本稿では、勉強会スタッフの筆者より、今回の勉強会の模様をレポートさせていただきます。

今回はNTTコミュニケーションズのオフィスをお借りして開催しました。また、会場では食事や飲み物をご提供いただき、リラックスした雰囲気の中で勉強会を行うことができました。この場を借りて厚くお礼申し上げます。

今回の勉強会では「誰もが使えるWebサービスを開発するためには、どのようなことを考えるべきか」をテーマに、勉強会スタッフの小松さんがコーディネーターを努めました。ソーシャルメディア・Webサービスがクローズアップされる中で、デジタルデバイドの問題、高齢者や障害者の方々へのアクセシビリティへの配慮など、「⁠誰でも使えるWeb」をいかに提供していくかという観点からセッションを決定しました。また、勉強会自体のアクセシビリティを考慮し、セカンドスクリーンで講演の内容をテキストで伝えるなどの実験的な試みも行いました。

気になる内容ですが、最近注目を集めている開発アプローチであるProgressive Enhancementを取り上げた「Progressive Enhancement ～ すべての人に確実に情報を届けるために ～」と、WebのアクセシビリティやWebと様々な機器との連携のためのW3Cの取り組みなどをご紹介いただいた「誰のためのWeb? － My Web, Your Web and the One Web」の2つのセッションが講演されました。また、先日行われた第0回 HTML5プログラミング&クリエイティブ・コンテストの受賞者らを含め、5つのLTが発表されました。

「Progressive Enhancement ～ すべての人に確実に情報を届けるために ～」

最初のセッションは、Progressive Enhancementについての講演です。スタッフでもある有限会社futomiの 羽田野（はたの） 太巳（ふとみ） さんより講演いただきました。

Progressive Enhancementとは、あらゆる対象に確実に情報を伝えるための開発アプローチのひとつです。従来の開発アプローチであるRegressive EnhancementやGraceful Degradationとの違いを交えつつ丁寧に説明されました。

Webの本来の目的とは、「⁠あらゆる対象に情報を伝える」ことであるということから、「⁠非メディア依存」「⁠リフローが前提」「⁠マルチデバイス」であることがWebの大きな特徴であると述べられました。そのため、従来のクロスブラウザ対策である「あらゆる対象に同じユーザーエクスペリエンスを提供する」ではなく、「⁠あらゆる対象に確実に情報を伝える」ということが重要であると示されました。

その中でProgressive Enhancementとは「違いを受け入れること」であるとし、例えばCSSやJavaScriptに対応していないデバイスを使っていた場合にユーザーエクスペリエンスが多少落ちたとしても必要な情報が欠落しないようにするものであると述べられました。そのために、Progressive Enhancementではまず初めにマークアップを中心に開発し、その後にCSSやJavaScriptを使って見やすさや使い勝手を高めていくということを具体例で示されました。比較として挙げられたRegressive Enhancementとは、ユーザーエクスペリエンスを落とさずに同等の機能を提供するために、あらゆる手段を使って気合いでエミュレートする手法であること。Graceful Degradationとは、最低限の機能を提供するためにユーザーエクスペリエンスや機能を縮小して提供することなど、具体例を用いて説明されました。

これらの3つの開発アプローチは三者択一ではなく、「⁠すべての対象に必要な情報を確実に提供する」という目的のために対象ユーザーやコストとの兼ね合いから、組み合わせて考えていくことが必要であるとのことです。講演資料は、こちらで公開されていますので是非ご覧ください。

「誰のためのWeb? － My Web, Your Web and the One Web」

続いて、「⁠誰のためのWeb? － My Web, Your Web and the One Web」について、W3C/慶應義塾大学の芦村和幸さんより講演いただきました。

PCやスマートフォン、あるいは家電のリモコンなど、いろいろなガジェットを普段当たり前のように使っていますが、改めてその技術は誰のためのものなのか、誰でも使うことができるのかを考えてみたとのことです。例えば、相互運用可能かどうか、多国語に対応しているかどうか、多様な入出力方法に対応しているかどうか、誰でも使うことができるかなどが挙げられました。

Webにおけるアクセシビリティを考えると、HTML5はより表現力豊かなWebアプリケーションのためのプラットフォームとして、様々な機器およびモダリティへの応用、開発環境やライブラリのフリーソフト化がなされており、いろいろなことが簡単に実現可能になっているとのことです。例えばひとつの可能性として、GUIだけでなく音声やジェスチャ等の様々な入出力方法（モーダル）を利用するマルチモーダルWebとその仕組みについてデモを交えて詳細に紹介されました。

今後、より重要となるアクセシビリティを考える上で、「⁠私にとって当たり前なことは、他の人にとっては疑問かもしれない」ということを意識する必要があるとのことです。

また、講演ではW3Cの具体的な活動内容や参加方法などが紹介されました。W3Cは、Web技術標準化のための国際的産業コンソーシアムです。Webの相互運用性確保のための、各種標準仕様および指針を策定しています。その中の取り組みのひとつとして、W3C Web and TV Interest Groupが紹介されました。Web and TV Interest Groupでは、Web／放送／機器連携に関する技術的議論の場を提供し、WebがTVとよりよく整合する方法論を検討しているそうです。

講演資料は、こちらで公開されています。興味を持たれた方は、是非ご覧ください。

注：

本セッションの録画は、1つ前のセッション「Progressive Enhancement ～ すべての人に確実に情報を届けるために ～」の後半に収録されています。

「Developing for TV: その1」

ここからはLTになります。LTのトップバッターはOpera Softwareのダニエル・デイビスさんです。「⁠Developing for TV: その１」について発表していただきました。

Google TVなどのインターネットテレビでは、普通のWebサイトに比べて、文字入力やナビゲーションが楽ではないこと、テキストが読みづらいこと、ページロードが遅いことなどの問題があることが挙げられました。これらの問題の解決策として、理想ではTV用のWebサイトを用意することですが、現時点では代替案としてスマートフォン用のWebサイトにMedia Queriesを使うことを提案されました。テキストを読みやすく大きくするためにズームやCSSのtransformではなく、直接フォントサイズを変えるなどいくつかのTipsが紹介されました。

興味深い内容で、「⁠その2」の発表が待たれます。発表資料はこちらで公開されています。

「Canvasでなぞる」

LTの2番手は株式会社コネクティの若狭正生さんです。第0回HTML5コンテストのアスキーアート部門の優秀作品賞を受賞された「LineTwitter」について発表していただきました。

LineTwitterは、ツイッターなどのテキストを白地の画面にマウスでなぞることで、様々なエフェクトをかけながら描くことのできるアプリです。実際に使われているcanvasのtransformメソッドなどによる文字の回転方法やiPhoneへの対応の際の注意点などが説明されました。その他にもツイッターのつぶやきをスポーツ新聞の見出し風にするアプリなどや次回応募予定作品（!?）などが紹介されました。

「生まれ落ちる世界」

LTの3番手はシーサー株式会社のあんどうやすしさんです。第0回HTML5コンテストのアスキーアート部門の優秀作品賞を受賞された「砂のアスキーアート」とChrome WebApp／Extension部門で優秀作品賞を受賞された「physicSketch」について発表していただきました。ダブル受賞おめでとうございます。

砂のアスキーアートは、アスキーアートが砂となって落ちてくるところにマウスで引いた線に沿って流れたり、止めたりすることができるアプリです。canvasを使っていることやアルゴリズムなどが説明されました。physicSketchは、画面にマウスで描いたオブジェクトがそのまま画面の中で動かすことのできるアプリです。canvasを使っていることに加えてlocalStorageを使って保存が可能になっていることなどが解説されました。

「ATND Draft」

LTの4番手は株式会社co-meetingの木村篤彦さんです。第0回HTML5コンテストのChrome WebApp／Extension部門の最優秀作品賞を受賞された「ATND Draft」について発表していただきました。

ATND Draftは、イベント開催支援ツールATNDに下書き保存とプレビュー機能を追加するChrome Extensionです。チーム櫃まぶしとして、共同開発者である@nakajimanさんや@yoichi_uさんと一緒に開発された経緯やチーム名の由来などが紹介されました。技術解説では、イベント作成ページに新たなボタンを追加する点やイベント一覧ページに下書き一覧を表示する点などが説明されました。また、localStorageを使った下書きデータの保存やChrome Extensionでの仕組みと注意した点が解説されました。

ATNDを使ってイベントを開催している方々は、インストールしてみてはいかがでしょうか。発表資料はこちらで公開されています。

「ローカルへのデータ保存」

最後のLTは株式会社リマージュアーツの一好俊也さんです。第0回HTML5コンテストのChrome WebApp／Extension部門の優秀作品賞を受賞された「Isometry（翻訳支援ツール⁠）⁠」について発表していただきました。

Isometryは、翻訳メモリと呼ばれる過去の翻訳データと類似文検索をするChrome Extensionです。オンラインでもオフラインでも同様に動作するオフラインアプリケーションを目指して開発されたそうです。サーバーにはGoogle App Engine、フロントエンドにはGoogle Web Toolkitを利用し、ローカルデータの保存にはWeb SQL Databaseを使っているとのことです。また、Office（2007以降）のファイルをFile APIを使ってXMLデータを読み込むことやZIPの圧縮・解凍を行うことなどが解説されました。他にもGoogle Web Toolkitでは、JavaのオープンソースをJavaScriptに変換して利用できることなどが紹介されました。発表資料はこちらで公開されています。

最後に

本勉強会では、誰もが使えるWebを目指して最新の情報や旬な情報を伝えていきたいと思いますので、今後ともよろしくお願いいたします。

また、「⁠第0回 HTML5プログラミング&クリエイティブ・コンテスト」にて受賞された方々に改めてお祝い申し上げるとともに、応募されたすべての皆様にお礼申し上げます。

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

本勉強会は、毎月第3水曜日もしくは第3木曜日に開催しています（スケジュール調整の関係でずれることがあります⁠）⁠。興味を持たれた方は是非ご参加ください。開催のアナウンスはhtml5-developers-jpのメーリングリストで行われますので、こちらをチェック願います。html5-developers-jpでは他にも開催状況や、過去のアーカイブなども公開しておりますので、是非ご活用ください。次回もお楽しみに。