【HTML5とか勉強会 Webと家電】 家電のUIになるブラウザ:D89クリップ(38)
未来の家電はインターネットに接続でき、ブラウザが内蔵されてくる。家電にブラウザが載ったらどうなるか? 未来のホームネットワークを想像しよう
家電とWebとHTML5
2011年12月26日、ソニーシティ大崎で「第25回 HTML5とか勉強会」が開催されました。HTML5とか勉強会は、HTML5に関心のあるエンジニアやコーダー、デザイナ向けの勉強会です。今回は、会場がソニーということもあり、テーマが「Webと家電」でした。
最近の家電製品はインターネットに接続でき、ブラウザが内蔵されている機種があります。勉強会では、現在の家電とHTML5の関係と、今後の関わり方についての説明があり、とても興味深い内容でした。
ゲーム、家電、自動車、新聞などへの影響
最初はKDDI総研でリサーチフェローをされている小林雅一さん(@mkoba1000)の「ゲーム、家電、自動車、新聞などへの影響」というセッションでした。セッション資料、セッション動画は公開されています。
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
小林さんはHTML5の利用が積極的に行われている業界として、ゲーム業界を挙げました。
3Dグラフィックスを実現するWebGLなど、ゲーム開発に必要な技術が次々にサポートされているためだそうです。
機種、OS、ブラウザによって、サポートされているセンサなどの規格の互換性の問題を指摘し、場合によっては、デバイスの操作ができないケースがあると説明しました。
HTML5は大作ソフトより、カジュアルゲームや、ソーシャルゲームの開発に向いていて、売り切り型よりもサブスクリプション型の、継続的なビジネスモデルが適しているそうです。
テレビに対する家電メーカーの対応として、3Dテレビがあまり大きな需要とならなかったため、インターネットテレビに関心が移っているそうです。
インターネットテレビの課題として、自社番組をWebに公開することへの抵抗、動画コンテンツの解像度の低さ、そしてユーザーインターフェイスの問題があると付け加えました。
現在のテレビの主なユーザーインターフェイスはリモコンですが、既存のテレビリモコンでWebの操作をするのは、たしかに難しいです。
先日開催されたCES 2012では、テレビのユーザーインターフェイスとして、音声での操作、ポインターでコンテンツを選択するUI、裏にキーボードのあるリモコンなどが発表されていたそうですが、決定的なものではなかったようです。CES 2012で紹介されていた内容については、小林さんが執筆されたこちらの記事が参考になります。
インターネットに接続する製品は拡大し、テレビ以降では自動車が有力です。CES 2012では、自動車からブラウザで渋滞状況を確認したり、HTML5やJavaでできたアプリケーションを搭載した自動車が紹介されていたそうです。
家電にもブラウザがあるさ
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入門
html5j.orgの管理人で、オープンウェブ・テクノロジー 白石俊平さん(@Shumpei)の「Web Intents入門」というセッションでした。セッション資料、セッション動画は公開されています。
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
セッションの内容は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 IntentsのJavaScript 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
- Yamaguchi Mini Maker Faireに西日本のMakerが集結!
- 「Makeすることで世界は変わる」〜「Make」編集長が語るMakerムーブメント
- みんな笑顔のお祭り〜Maker Faire: Taipei 2013
- 生物学からMakerムーブメントまで、ニコニコ学会βの範囲がさらに広がる!
- 人とコンピュータの未来 インタラクション2013レポート
- 開発者のスタ誕「CROSS VS」が開催、おばかアプリ選手権賞は…
- 誰もが研究者の時代? ニコニコ学会βレポート
- メリーおばか! 聖夜にふさわしいおばかアプリ、お台場に集結
- 世界に誇る日本の学生のバーチャルリアリティ力
- 「アドテック東京」で「アホテック東京」を作った話
- 手軽に家電が作れる時代に小さな会社だからできること
- 五輪より熱い!? ベスト8が頂点競う おばかアプリ選手権
- 『FabLife』のインターネット黎明期のようなワクワク感
- JSエンジニアがアドビに聞く “iPhoneでFlashが動いたらアドビはFlashの開発を続けたか”
- 何食わぬ顔で、その荒野の真ん中に躍り出よ
- jQuery MobileなどUIフレームワークの基礎を学ぼう
- Retina ディスプレイを搭載し、薄型化した
- 超エンジニアミーティングに集ったテクノロジ
- 僕らはみんな何かの作り手だ!
- Kinectで巨乳になれるワールドカップ2012レポート
- おばかの“合コン”「ばかコン」、Ruby使いの女子大生モデル・池澤あやかさんも参加
- 【第29回 HTML5とか勉強会レポート】 次のモバイルアプリはどのフレームワークで作る?
- 【第27回 HTML5とか勉強会レポート】 LESSやTwitter Bootstrapで簡単デザイン
- 女子大生が異彩を放った「おばかアプリブレスト大会」
- 【おばかアプリ公開ブレスト ザリガニワークス徹底分解】 分解して振り切って、余白でコミュニケーションを
- 【HTML5とか勉強会レポート Webと電子書籍】 なぜWebではなく電子書籍なのか?
- 【HTML5とか勉強会 Webと家電】 家電のUIになるブラウザ
- 【Qtカンファレンスインタビュー】 Qt5で10億人ユーザーへ、OSSコミュニティ化でますます健在に
- 【第24回 HTML5とか勉強会レポート】 108もあるぞ! HTML5の要素数
- 【@ITスマートフォンアプリ選手権レポート】 学生からプロまで入り乱れてのアプリ合戦頂上対決!
- 【「iPhone・iPadアプリ大賞2011」レポート】 グランプリは生徒と先生が作った役に立つARアプリ
- 【第23回 HTML5とか勉強会レポート】 HTML5のデバイス&位置情報系APIを使いこなせ!
- 作りたい欲求を刺激するMake:07@東工大レポート
- 500作品が競った「Mashup Awards 7」表彰式
- 【第22回 HTML5とか勉強会レポート】 Processing.js、SVG、WebGL。HTML5周辺のグラフィック関連技術
- 【Google Developer Day 2011 Japanレポート】 HTML5で今までにないサイトを作る
- 【第21回 HTML5とか勉強会】 ゲーム開発はHTML5+スマホベースが新潮流
- 【東京ゲームショウ2011】 ゲームは、スマートフォン、拡張現実、そしてナチュラルインターフェイスに
- 第5回おばかアプリ選手権レポート 見よ! コレジャナーイアプリの数々を!
- Adobeが作ったHTML作成ツール、Edgeの本気度
- 【Chrome+HTML5 Conferenceレポート 】HTML5づくしの1日
- 【おばかアプリブレスト会議レポート 】おばかな人知が集結したブレスト会議
- 【15分で体験するApple WWDC 2011 Keynote】「iCloud」が示す「こちら側」を中心とした世界観とは?
- jQuery Mobile+PhoneGap連携でDreamweaverはスマホアプリ開発ツールに?
- 歌あり笑いあり過去最大規模となった技術者の祭典
- 「無料モデルに興味はない」「プログラマは創造的だ」〜セオドア・グレイ氏インタビュー
- Windows 7でも「おばかアプリ選手権」は大爆笑でした
- 4回目を迎えたおばかアプリ選手権、その見所とは
- おばかアプリ作成のための超まじめな勉強会レポート
- Flash CS5のiPhoneアプリ変換機能は無駄にならない
- デザイナだからこそ作れるUXに企業が注目している
- マッシュアップを超えたマッシュアップを−Mashup Awards 5表彰式レポート
- 3回目にして完成形を迎えた「おばかアプリ選手権」
- Web標準に準拠し独自技術Silverlightで補完する
- 3回目はあるのか? おばかアプリ選手権レポート
- クリエイターであるためにFlash待ち受けを出し続ける
- ユーザーエクスペリエンスのadaptive path訪問記
- 第1回おばかアプリ選手権はこうして行われた
- Adobe MAXレポート:Webにおけるグラフィック表現手段としてのFlash
- ケータイ版AIRでFlash Liteの成功パターンを踏襲
- ペパボ社長・家入氏が語る、バカとまじめの振り子の関係
- 植物の「緑さん」がブロガーになるまで
- Chumby開発者が語る 誕生秘話とビジネスモデル
- Mashup Awards授賞式レポート マッシュアップ+ひとひねり=MA4の受賞作
Copyright © ITmedia, Inc. All Rights Reserved.