はじめまして、HTML5とか勉強会スタッフの中島と申します。2012年1月18日、今年最初の「HTML5とか勉強会」はSONY さんに会場をお借りして開催しました。第25回目のテーマは「Webと家電」 。HTML5は今やパソコンやスマートフォンだけに留まることなく、多様なデバイスに広がりはじめています。その中でも特に、生活に密着したデバイスへの広がりが今後ますます注目されます。
本稿では、今回のイベントについてレポートします。
ゲーム、家電、自動車、新聞などへの影響
最初にご登壇いただいたのは、KDDI総研の小林雅一さん。HTML5が各産業界へどのような影響を与えているかについて講演いただきました。
現状でHTML5の普及が一番進んでいるのはゲーム産業です。Flashのサポート関係やモバイルプラットフォームの重要度の増加から普及が進んでいます。また、WebGLなどのゲーム開発に利用できる技術の登場も影響があるとのことです。現状ではいくつか問題もあるとし、デバイスやOS、ブラウザ間の互換性が不完全でそれらに対応する必要があり、ブラウザからデバイスのカメラやセンサーの操作ができないとのことです。これらの問題はWebアプリからネイティブアプリへと変換することで一時的に解決することができます。変換にはPhoneGap 、Titanium Mobile 、Enchant.js などが使われているとのことです。
家電産業では、3Dテレビの需要が増えなかったことや、従来型テレビの値崩れから付加価値の高い次世代機を開発したいという狙いがあると述べました。
家電メーカーが関心を移しつつあるものとして、インターネットTVがあります。しかしインターネットTVが実用化されるためには大きく2つの課題があります。
1つはWeb上の動画コンテンツについてです。テレビの放送局は自社のコンテンツをWeb上に公開することを躊躇っています。一方でWeb上にあるYouTubeなどの動画コンテンツは一般的に解像度が低いため、テレビの大画面で視聴する画質として十分ではありません。最近ではYouTubeの画質は改善しつつあり、コンテンツの自主制作に着手するといった動きもでてきているとのことです。
もう一つはUI（ユーザ・インターフェース）についてです。インターネットTVとしてGoogle TVが昨年市場に出ていますが、操作方法と入力デバイスが使いづらかったことが、普及が進まなかった原因の1つではないかとのことです。
現在は各メーカーによってUIの改善が進められています。音声での文字入力、ポインティングデバイス、タッチパッドなどによって操作性の改善が図られていると紹介しました。
HTML5ではWebRTC（Web Realtime Communication）という、リアルタイムコミュニケーションを行うための仕様が策定中です。WebRTCによってブラウザがデバイスのハードウェアを操作できるようになります。テレビにカメラなどの機器を付けることで、テレビはビデオ会議などを行える多目的な情報処理端末へと、HTML5によって進化するだろうと述べました。
現時点でWebRTCはChromeの開発版で利用することができます。各ブラウザへの実装が進めば、Webの進化はますます加速していくと思われます。
講演では小林さんが取材されたCES2012での展示から、HTML5やWebを利用したシステムがいくつか紹介されました。詳しくは講演動画や講演資料 からご覧ください。小林さんが書かれたCES2012の動画付きの記事がこちら にありますので、興味がある方はあわせてご覧ください。
家電にもブラウザがあるさ
続いてご登壇いただいたのは、Opera Software のダニエル さん。Webと家電について講演いただきました。
はじめに、Webが家電の拡張をする例として、テレビのブラウザ向けWebアプリケーションプラットフォームであるOpera TV Store を紹介しました。ここではテレビ向けのWebアプリを開発する際の注意点について説明がありました。
テレビなどのハードウェアはソフトウェアと比較して開発期間が長くかかるため、市場に出る頃には搭載されているCPUの性能が相対的に低くなります。そのためアニメーションなどの重い処理を用いるかどうかを、慎重に判断する必要があります。
一般的にテレビの買い換えは頻繁に行われることではないため、ユーザのテレビは常に古いハードウェアであると考えたほうが良いとのことです。
次に、家電がWebを拡張するパターンについて説明がありました。台所の棚にタブレットを埋め込む、お風呂の中でタブレットを使う、といった使用方法を動画を見せながら紹介しました。紹介された動画はユーザが新しい使い方を発信している良い例です。ユーザが発信した使い方に他のユーザが共感すれば、それが製品化に繋がりユーザは今より便利にWebを利用できるようになるだろうとのことです。
家電でWebを拡張する場合、Web開発者にとっては問題点があります。それはユーザの利用しているデバイスや環境の判断が難しいということです。インプットデバイスの種類は多く、タッチ操作なのかリモコンなのか、ブラウザはどのインプットデバイスで使われるかを判断できないのです。ハードウェアの性能についてもブラウザは判断できないため、ユーザにとってより良いエクスペリエンスを提供するためには、この問題を解決する必要があると述べました。
次に、Webから家電を操作することについて説明がありました。ブラウザとハードウェアの連携は徐々に進んでいて、ブラウザからカメラやGPSを利用できるようになってきています。また、サーバを介さずに他のデバイスと連携できるようになってきています。ですが他のデバイスを発見するための手段が乏しく、接続するのが難しいとのことです。
デバイス間で連携するプロトコルとしてDLNA（Digital Living Network Alliance） を紹介しました。DLNAに対応したデバイスはネットワークを介して、それぞれのデバイスが持っているコンテンツや機能にアクセスすることができます。DLNAはデバイスディスカバリにUPnPを使用します。UPnPによってネットワーク上のデバイスを、手間なく相互認識することができます。DLNAに参加している企業はとても多く、今後ほとんどのデバイスがDLNAをサポートするかもしれないとのことです。
おわりに、Webを利用した家電の普及に必要なことを言及しました。Webと家電はいろいろな可能性があるが、普及のために必要なのはそのデバイスでなければできない、といったキラーアプリやユースケースの登場であるとのことです。
Webと家電、色々な利用方法ができるようになれば、ますます生活が便利なるのではと期待しています。講演の詳しい内容や流れは動画と講演資料 をご覧ください。
Web Intents入門
続いてご登壇いただいたのは本勉強会を主催している白石 さん。Webアプリ間の連携を可能にするWeb Intentsについて講演いただきました。
今回講演いただいた内容は3WC Editor's Draft 04 January 2012 を元に解説しました。策定作業中のため、今後も仕様が変更される可能性が高いとのことです。
Web Intentsとは、異なるWebアプリ間の自由な連携を可能にするAPIです。Googleによって立ち上げられたプロジェクトで、現在はW3Cによって標準化の作業が行われています。Web Intentsを簡単に説明するとAndroidにおけるインテントをWebアプリ向けにしたものとのことです。
今回は入門編ということで、Web Intentsの基本的な仕組みと処理について説明がありました。
Web Intentsにおける役割は次の3種類あります。
クライアント
Intentの呼び出し元となるWebアプリ
UA
Web Intentsを管理するプラットフォーム（通常はWebブラウザ）
サービス
Intentを処理するWebアプリ
UAであるブラウザはWebアプリをサービスとして登録します。クライアントがブラウザに対してIntentの処理を要求すると、ブラウザはIntentを処理できるサービスの一覧を表示します。ユーザがサービスを選択すると、ブラウザはそのサービスにIntentを渡し、サービスがIntentの処理を行い結果をブラウザに返します。クライアントがブラウザから結果を受け取ることで一連の処理が終了します。
サービスの登録は非常に簡単にできます。登録したいWebアプリのhead要素内にintent要素を記述するだけです。intent要素は次のような形で複数指定することが可能とのことです。
<intent
action="インテントのアクション（URL形式）"
type="処理可能なコンテントタイプ"
href="アプリのURI"
title="アプリのタイトル"
disposition="アプリの開き方(window | inline)"
/>
Web Intentsを試してみたい方はwebintents.org で配布されているJavaScript shimを使うことで動作させることができます。詳しい使い方やドキュメントは講演資料 をご覧ください。
Web IntentsはシンプルなWebアプリ連携を実現することから、この連携によってWebサイトに不足している機能を、他サービスの利用で補えるようになるとのことです。
Web IntentsはWebをどう変えるか、Web Intentsのユースケースについて予想と期待を含みつつ、次の例を挙げました。
ソーシャルボタンが一つになる
Web上のファイルを任意のサービスで開けるようになる
表示と処理を分けるなど、個々のWebアプリの単機能化が推進される
一度でもアクセスしたWebアプリは忘れられることが減るかもしれない
ブラウザに登録したアプリの一覧に残ることで忘れ難くなる
認証の部分だけWeb Intentsにまかせて楽をする
課金処理に使う
ローカルとクラウドの境界を超える
ホームネットワークに応用する
スマートフォンで遭遇したYoutube動画をUAに登録されたTVで視聴・操作する
HDDレコーダ内の動画をタブレットで視聴する
Web Intentsは将来的にはWebアプリ間の連携を実現するだけではなく、Webアプリとネイティブアプリの境界、デバイスの境界をまたいだ連携を実現するとのことです。また、ホームネットワークでも存在感を発揮し、Webサービスのあり方を大きく変える可能性があるとのことです。
Web Intents、これから要注目です。
講演資料内にはWeb Intentsの使い方、紹介しきれなかった内容、参考になるページが乗っています。詳しくは講演資料 をご覧ください。
アクオスのインターネットボタンを押してみた
3つのメインセッション終了後、2つのショートセッションを講演いただきました。
はじめに、株式会社コネクティの若狭 さん。実家にあったという大型テレビのインターネットブラウザを取り上げました。
Webサイトの中にはテレビ用のレイアウトを用意しているところがあり、中でもヤフーは特に力を入れていて、アクオス専用のレイアウトが用意されていたとのことです。
使ってみて残念だと感じたことも紹介されました。Webサイトに接続する度に「接続中です」と表示されたり、画像が数枚あるサイトを開いてしまうとメモリ不足に陥りブラウザがクラッシュしてしまうそうです。
最後にブラウザのHTML5への対応度をベンチマークしたスコアを紹介しました。結果は1点だったそうです。
講演資料はこちら になります。
HTML5で画像編集アプリ！
最後に講演いただいたのはGENOVAの山崎大助 さん。HTML5で作成した画像編集アプリについて紹介しました。
作成されたアプリはvideo要素を利用していて、動画を一時停止してその静止画を取り込んで画像の編集が行えるとのことです。画像の加工にはpixastic.js というライブラリを使用しています。色々なフィルタなどを利用できる便利なライブラリですが、一度加工してしまうと元に戻すことができないとのことです。それでは不便だと思いHTML5のlocalStrageに、状態の履歴を保存することで処理の取消しを実現したことを説明しました。
講演では触れられなかったライブラリの紹介などが講演資料 に載っています。興味のある方は是非ご覧ください。
最後に
レポートに対する感想や、勉強会に対する希望・意見・取り上げて欲しいテーマなどがありましたら、twitter（@nakajmg） まで気軽につぶやいていただければと思います。
本勉強会は、毎月第3水曜日、または第3木曜日に開催していますので、興味を持たれた方は是非参加ください。ただし、会場や講演者スケジュールの都合などにより、開催日程が前後することがあります。開催のアナウンスはhtml5j.orgのML で行われますので、こちらをご確認ください。また、コミュニティサイトhtml5j.org も公開していますので、是非こちらもご確認ください。
