連載
» 2012年02月03日 00時00分 UPDATE

D89クリップ(38):【HTML5とか勉強会 Webと家電】 家電のUIになるブラウザ

未来の家電はインターネットに接続でき、ブラウザが内蔵されてくる。家電にブラウザが載ったらどうなるか? 未来のホームネットワークを想像しよう

[ひらいさだあき,@IT]

家電とWebとHTML5

 2011年12月26日、ソニーシティ大崎で「第25回 HTML5とか勉強会」が開催されました。HTML5とか勉強会は、HTML5に関心のあるエンジニアやコーダー、デザイナ向けの勉強会です。今回は、会場がソニーということもあり、テーマが「Webと家電」でした。

 最近の家電製品はインターネットに接続でき、ブラウザが内蔵されている機種があります。勉強会では、現在の家電とHTML5の関係と、今後の関わり方についての説明があり、とても興味深い内容でした。

ゲーム、家電、自動車、新聞などへの影響

ゲーム、家電、自動車、新聞などへの影響

 最初はKDDI総研でリサーチフェローをされている小林雅一さん(@mkoba1000)の「ゲーム、家電、自動車、新聞などへの影響」というセッションでした。セッション資料、セッション動画は公開されています。

View more presentations from html5j

 小林さんはHTML5の利用が積極的に行われている業界として、ゲーム業界を挙げました。

3Dグラフィックスを実現するWebGLなど、ゲーム開発に必要な技術が次々にサポートされているためだそうです。

 機種、OS、ブラウザによって、サポートされているセンサなどの規格の互換性の問題を指摘し、場合によっては、デバイスの操作ができないケースがあると説明しました。

 HTML5は大作ソフトより、カジュアルゲームや、ソーシャルゲームの開発に向いていて、売り切り型よりもサブスクリプション型の、継続的なビジネスモデルが適しているそうです。

 テレビに対する家電メーカーの対応として、3Dテレビがあまり大きな需要とならなかったため、インターネットテレビに関心が移っているそうです。

インターネットテレビの課題として、自社番組をWebに公開することへの抵抗、動画コンテンツの解像度の低さ、そしてユーザーインターフェイスの問題があると付け加えました。

 現在のテレビの主なユーザーインターフェイスはリモコンですが、既存のテレビリモコンでWebの操作をするのは、たしかに難しいです。

 先日開催されたCES 2012では、テレビのユーザーインターフェイスとして、音声での操作、ポインターでコンテンツを選択するUI、裏にキーボードのあるリモコンなどが発表されていたそうですが、決定的なものではなかったようです。CES 2012で紹介されていた内容については、小林さんが執筆されたこちらの記事が参考になります。

 インターネットに接続する製品は拡大し、テレビ以降では自動車が有力です。CES 2012では、自動車からブラウザで渋滞状況を確認したり、HTML5やJavaでできたアプリケーションを搭載した自動車が紹介されていたそうです。

家電にもブラウザがあるさ

はじめての Web Audio API

 2番手は、Opera Software ダニエル・デイビスさん(@ourmaninjapan)の「家電にもブラウザがあるさ」というセッションでした。セッション資料、セッション動画は公開されています。

Webが家電の拡張

 ダニエルさんは、Webが家電の拡張となるケースとして、「Web on TV(インターネットテレビ)」、「Web on プリンタ」、「Web on 台所」と「Web on お風呂」を挙げました。

 インターネットテレビには、テレビ向けのWebアプリケーション開発として、さまざまな問題があると指摘しました。ただし、解像度が主に2種類(720dpiか1080dpi)しかなく、できることが限られているため、逆に作りやすいといったこともあるそうです。

 Opera TV Storeの例を挙げ、CES 2012でのデモ動画(Hands-on with Operas browser & TV Store - YouTube)を示しました。

 Opera TV Storeは比較的簡単に実現できたということです。Opera TV Storeはブラウザ上で動作し、アプリケーションをインストールしてもファイルは保存されず、ブックマークに近いものになります。

 テレビのハードウェアは貧弱で、CSS3のアニメーションや装飾は非常に重い処理となるため、使わない方がよいとのことです。またテレビのライフサイクルは携帯電話などよりもずっと長いため、古いハードウェアを利用している人たちのことを、十分に考慮する必要があるそうです。

 「Web on プリンタ」として複合機型プリンタのタッチパネルでブラウザを動作させるものを紹介し、「Web on 台所」としては、IHクッキングヒーターのタッチパネルにブラウザを載せて、レシピの検索や調理器具の操作を行うといったアイデアを披露しました。

 ダニエルさんは、こういった「Webが家電ネットワークを拡張させていく」ことの利点として、すでに使い方を知っている家電に、ブラウザを載せることで、使いやすさはそのままで、実現できる操作が増えると話しました。問題点は、キラーアプリがまだ存在しないことだそうです。

家電がWebの拡張

 家電がWebを拡張していくと、いつでもどこでもWebを利用できるようになります。セッションではキッチンでiPadを利用する動画と、お風呂でiPadを利用する動画が紹介されました。

 このようになると、PCや携帯電話なしにWebを利用でき、その利用場所も限定されなくなっていきます。その代わりに、アプリケーション開発者がユーザーの状況や環境を把握することが非常に難しくなります。また画面サイズや、どのようなインプットデバイスが利用されているのか、どのようなスペックなのか分かりません。そのため利用者は便利になりますが、ターゲットを絞り込んだアプリケーション開発は難しくなるだろうと述べました。

Webで家電のコミュニケーション

 ダニエルさんは、家庭内の家電を連携させるプロトコルとしてDLNAを紹介しました。現在では多くのメーカーがDLNAをサポートし、WebとDNLAを併せて使えれば、UIを統一したり、1つのデバイスで他のデバイスをコントロールしたりできます。このようにDNLAは便利な仕組みですが、一方で、HTTPとDLNAを一緒に扱うのが難しいという問題もあるそうです。

 ダニエルさんは、以下のように話し、プレゼンをしめくくりしました。「WebSocketなどを使うことで、ある程度デバイス同士での通信ができるようになりました。また、ハードウェアとの連携では、カメラやGPSの位置情報などが、取得できるようになってきました。ただし、デバイスのファインダビリティ(見付けやすさ)や、コピーライトの保護については、まだ問題も多くあります」。Webと家電がうまく連携し拡張し合うための、いくつかの問題を解決するには、キラーアプリの登場や、Webを利用したデバイスのコミュニケーションの実現が待たれます。

Web Intents入門

Web Intents入門

 html5j.orgの管理人で、オープンウェブ・テクノロジー 白石俊平さん(@Shumpei)の「Web Intents入門」というセッションでした。セッション資料、セッション動画は公開されています。


 セッションの内容は2012年1月4日時点のエディターズドラフトの内容を基にしており、今後も仕様は変更される可能性が高いということです。

 Web Intentsとは、Androidのインテントという仕組みを、Webアプリケーション同士で実現する仕組みです。2011年6月にGoogleが発表し、現在はW3Cで標準化作業中だそうです。

 白石さんは、インテントの仕組みには「クライアント」「UA」「サービス」といった役割があると解説されました。「クライアント」はインテントの呼び出し基となるアプリケーション、「UA(User Agent)」はWeb Intentsを管理するブラウザで、「サービス」はインテントを処理するWebアプリになると説明しました。

 SNSサイトの「いいね」「チェック」「シェア」といったソーシャルボタンをWeb Intentsの仕組みで例えると、クライアントはボタンを配置しているサイト、UAはブラウザ、サービスは「いいね」などの投稿先サービスになるということです。

 現在は、サイト側で多くのボタンを配置していますが、Web Intentsが使えるようになると、サイトでは1つのボタンを用意しておき、ユーザーは自分のブラウザに登録されているサービスを連携先として選択できます。そしてサービスを選択するときに、クライアントから渡される情報のことをインテントと呼ぶそうです。

 インテントを処理する実装はまだありませんが、動作を確認できるサイトとして、Web IntentsJavaScript Shimが紹介しました。

 白石さんは、次のように説明しました。実際にインテントを使う場合、サービスのWebアプリケーションにintent要素を記述するそうです。UAはintent要素があるとサービスとして登録する仕組みになっていて、インテント処理の呼び出しには、JavaScriptからIntentオブジェクトを生成し、インテント処理を呼び出すそうです。インテントからデータを取り出すときも、Intentオブジェクトからデータを取得するということです。

 Web Intentsが使えるようになると、Webサービスの連携がスムーズになり、画像処理サービスであれば、さまざまなフォトストレージサービスから画像を取得できるようになるとデモを交えて紹介しました。ソーシャルボタン以外のユースケースとして、認証/課金を挙げました。

 ホームネックワークとWeb Intentsの連携では、UAにデバイスをどう登録するか、Webアプリケーションとデバイス間の通信処理をどう実現するかといったことが検討課題となってくるそうです。

 Web IntentsはWebアプリケーション同士の連携だけではなく、ネイティブアプリケーションやデバイスとの連携を実現させる可能性があります。Web Intentsによって、Webアプリケーションの在り方が大きく変わるかもしれません。

 Google Developer Day 2011でもWeb Intentsは紹介されていました。こちらの記事やセッション資料も併せて確認すると、より理解が深まります。「Bleeding Edge HTML5」については、Google Chromeでの閲覧を推奨します。

ライトニングトーク

 今回の勉強会では、通常のセッションの後に5分間のライトニングトークが2本ありました。

アクオスのインターネットボタンを押してみた

アクオスのインターネットボタンを押してみた

 最初のライトニングトークはコネクティの若狭正生さん(@wks)の「アクオスのインターネットボタンを押してみた」というセッションでした。セッション資料は公開されています。

 アクオスにUSB型の無線LANアダプタを接続することで、インターネット接続ができます。一般的なWebサイトも閲覧できますが、Yahoo! はTV専用のUIになっていました。

 TVでの操作画面を見ると、やはりリモコンでブラウザを操作するのは難しそうでした。またメモリ不足でエラーが表示されることも多かったということです。TVでのインターネット利用には、まだまだ課題があります。

HTML5で画像編集アプリ!

 最後はGENOVA 山崎大助さん(@_AIR_NOTE)の「HTML5で画像編集アプリ!」というセッションでした。セッション資料は公開されています。セッション資料は最近話題になっていたimpress.jsが利用されています。

 Pixasticという画像編集ライブラリを利用したアプリケーションが紹介されました。

 Pixasticを利用すると、画像に対してフィルターやエフェクトを簡単に掛けられます。

ただし一度画像を加工すると元に戻せなくなるため、アプリケーションでは画像の処理を行うごとにlocalStorageへデータを保存し、編集履歴を管理して対応したそうです。

まとめ

 「Webと家電」にはまだ課題が多いと感じましたが、その分、今後が楽しみです。「Webと家電」が連携することで、さまざまなメリットが生まれることが理解できたのではないでしょうか。HTML5の関連技術を利用することで、Webアプリケーションは徐々にデバイスやハードウェアと連携できるようになってきました。この流れが進むことで「Webと家電」の未来も開けていくのではないでしょうか。

 HTML5とか勉強会は定期的に開催されています。勉強会の告知はGoogleグループのメーリングリストで行われます。勉強会に興味があれば「html5j.org - Google グループ」からグループに参加してみてください。

筆者紹介

ひらいさだあき

HTML5とか勉強会スタッフ

仕事ではSIerでJavaの開発やトラブルシューティングを行っています。

最近ではブラウザやHTML5に興味を持っています。

twitter : http://twitter.com/sada_h

blog : techlog



「D89クリップ」バックナンバー

Copyright© 2017 ITmedia, Inc. All Rights Reserved.

@IT Special

- PR -

TechTargetジャパン

この記事に関連するホワイトペーパー

Focus

- PR -

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。