情報処理学会 インタラクション 2014
IPSJ Interaction 2014

A4-8
2014/2/27

LEISURE STYLIST: マルチデバイス連携 web フレーム
ワークを用いたドライブサポートアプリケーション
槙 優一1,a)

藤村 滋1

船越 要1

宮原 伸二1

山田 智広1

概要：我々は，HTML5 に対応したマルチデバイス対応 web アプリケーションフレームワークを提案している．本フレームワークにより，通常は一つの web ブラウザ上で実行される web アプリケーションの各機能を，web サーバ-クライアント間で動作する中間サーバで分割し，複数のデバイスにまたがって連携動作させることができる．本稿では，本フレームワークの概要について述べた上で，上記フレームワークを用いて構築したドライブサポート web アプリケーションを紹介する．本アプリケーションは，ドライブの計画時から外出時に撮影した写真の共有まで，ユーザの移動に伴ってシーンが変わっても，各デバイスから操作した状態や設定を引き継ぎながら，ユーザのドライブをサポートするアプリケーションである．

LEISURE STYLIST: Comfortable Drive Supporting Application
Using Multiple Device Cooperative Web Framework
Yuichi Maki1,a)Shigeru Fujimura1 Kaname Funakoshi1
Tomohiro Yamada1

Shinji Miyahara1

Abstract: We propose a web application framework creating multi-device web application supported byHTML5 technologies. This frameworks enables to divide each web application functions, which are ordinary performed on a web browser, by using the middle server performing between a web server and a client
browsers, and to allocate them among some devices with keeping their synchronization. In this paper, after
describing the detail of our proposed framework, we introduce the driving support application with using
our framework. This application enables the users to support their own drives by taking over each sequenceof functions leading from planing to sharing their photos taken during their drives, even though the users’
devices are changed depending on their situations.

1. はじめにディスプレイを有する様々なデバイスが身の回りに存在し，それらを連携させて利用できるサービスやアプリケー発する必要があったり 2) ユーザの各種設定情報やアプリケーションの状態を記録して端末間で連携するためのデータベースの構築が必要であったり，といったデバイス間連携のための開発コストがかかってしまう．

ションも広がりを見せている．これらは，利用する各端末

課題 1) に対する解決先として，HTML5[2] を活用してに専用のアプリケーションをそれぞれインストールさせ構築される web アプリケーションが注目を集めている．

たり，あるいは Bluetooth R や MiracastTM [1] などの無線W3C での HTML5 の仕様の策定に伴い，web ブラウザが通信を利用して設定や画面を同期させる，といったもの対応する関連 API の種類も増え，AndroidTM や iOS 上でが一般的である．しかし，これらは 1) ユーザが利用する動作するアプリケーションと遜色ない，多機能な web アプ

スマートフォンの各 OS に対応したアプリケーションを開リケーションがブラウザ上で実現されつつある．HTML51a)

日本電信電話株式会社 NTT サービスエボリューション研究所
NTT Service Evolution Lab., NTT Corp.,
Kanagawa, 239–0847, Japan
maki.yuuichi@lab.ntt.co.jp© 2014 Information Processing Society of Japanに対応しているブラウザさえ搭載していれば，異なるハードウェアや OS 上でも同じアプリケーションを動作させる

296

(a) レジャースポットの検索時(b) カーナビ操作時
図 1(c) ドライブ後の写真共有
地図データ: c NTT 空間情報株式会社

アプリケーションの動作画面Fig. 1 Screenshots of the application.

とこができるため*1 ，上記のようなマルチデバイスアプリ

プリケーション上で検索したスポットを，対応するカーケーションを開発する際のコスト削減に期待できる．

ナビに転送して目的地に設定することができる．ユーザ

我々は，HTML5 を用いて構築される web アプリケー

は NaviCon 対応のカーナビを購入し，スマートフォンにションを対象に，1 つのブラウザで動作する web アプリ

NaviCon をインストールすることで，初めてそのサービスケーションをその各機能や表示毎に分割し，複数のデバイを利用することができるようになる．しかし，もし別の事スにまたがって連携動作させることができる中間サーバを業者から，それとは別の新たなサービスが提供されると，活用した，web アプリケーションフレームワークを提案しユーザはそのサービスを利用するために新しくカーナビをている [3], [4]．このフレームワークを用いて構築される

購入し直し，新たなアプリケーションをインストールしてweb アプリケーションであれば，デバイスにブラウザさえ利用しなければならなくなる．その結果，ユーザの新たな搭載されていれば，デバイス間の連携を制御するプログラ

サービス利用機会の損失を招き，特定の事業者からのサームや各種設定や状態を管理するデータベースを構築せずに，ビスしか利用できなくなってしまう．また，サービス提供マルチデバイスサービスを容易に構築することができる．

者はユーザが利用するスマートフォンの各 OS に対応した

本稿では，上記フレームワークを用いて構築した，複数人アプリケーションを開発して配信し，各ユーザの設定したでのドライブをサポートするアプリケーション “LEISURE

目的地や個別の設定を管理するデータベースを構築する必STYLIST” を紹介する．これは，ドライブに出かける前の要がある．新たなサービスを提供したければ，サービス毎プランニングから，移動中の目的地設定や計画変更，楽しにデータベースとその処理を改めて構築し直す必要があいドライブの後の写真共有など，マルチデバイスにまたがり，開発・運用でのコストがかかる．

るアプリケーションを，一つのクライアントサイドの web

一方で，HTML5 で製作する web アプリケーションへのアプリケーションを構築するだけで実現している．図 1 に，期待が高まりつつある．HTML5 を用いた web アプリケー

本アプリケーションの幾つかの利用中の画面を示す．本稿

ションとして構築することで，デバイスや OS に依存せずでは，はじめに想定しているユースケースと，マルチデバイ同一の動作を実現することができるため，各 OS や機器毎スでの web アプリケーションを構築する際の課題についてに異なるアプリケーションの開発を行う必要が無く，開発整理する．そして，我々の提案しているフレームワークのコストを抑えることができると期待されている．しかし，概要について第 3 節で述べた上で，上記フレームワークをweb アプリケーションでスクリーンデバイス間にまたがる活用して実現したマルチデバイス連携 web アプリケーショ

アプリケーションを開発する際，複数のスクリーンデバイ

ン “LEISURE STYLIST” について述べる．最後に，本アス間を連携させるための通信処理が必要となる．web アプ

プリケーションの動作検証と今後の課題について述べる．

リケーションで複数端末を連携させる場合，Peer to Peer

2. 対象とするユースケースとweb アプリケーションの課題型あるいはクライアント–サーバ型のシステム構成をとるのが一般的である．このような構成をとる場合，デバイス間の連携や同期に関する通信制御プログラムを，ブラウザユースケースの一つに，事前に PC やスマートフォンで側/サーバ側の両方に実装する必要がある．デバイス間の設定したり検索したりした情報を，外出先の別のスクリー連携を行うための新たなスキルの獲得や別途開発工数を見ンデバイスで利用するシーンがある．例えば，デンソー株積もるため，開発コストがかかる要因の一つとなる．

式会社が提供する NaviCon[5] では，スマートフォンのア*12013 年 11 月現在は OS やブラウザのバージョン毎によって動作が異なる場合がある© 2014 Information Processing Society of Japan

3. フレームワークの概要
前述の課題に対して，従来の web アプリケーション開発

297

JavaScript の処理は，中間サーバ上で行われる．各デバイス上でのユーザによる操作はその都度中間サーバに送信され，対応する処理が中間サーバ上で行われ，その変更を各デバイスのブラウザ上に反映する．
上記のような構成をとることで，1 つの web アプリケーションを分割し，その間の処理の同期を中間サーバで管理し，マルチデバイス上で連携動作する web アプリケーションを容易に構築することができる．アプリケーションの制
作者は，あらかじめ DOM ツリーのどの部分で分割しどのデバイスに表示させたいかのみを決めておけば，分割した各要素間の処理の連携を意識することなくアプリケーションの開発ができる．また，DOM ツリーの各要素の複製も行うことができるため，同じ挙動をもつ各要素を複数人のデバイスに同時に割り当てる，といったことも容易に実現できる．
図 2 フレームワークの概要．

Fig. 2 Basic idea of our framework.

4. LEISURE STYLIST“LEISURE STYLIST” は，ドライブに行く前の計画時者がクライアントサイドのみ開発を行えば，端末間の通信からドライブ後の写真の共有までをトータルにサポートで制御を行い，各機能間の同期を保ちながらマルチデバイスきるアプリケーションである．本アプリケーションでは，アプリケーションを簡単に構築できる web アプリケーショ

以下の 4 つの機能によってそれを実現する．

ンフレームワークを我々は開発してきた [3], [4]．

( 1 ) レジャースポットコンテンツの検索とマルチデバイス

一般に web アプリケーションは，各構成要素の構造を記

シェアリング

述する HTML ファイル，各要素に対してイベントの付与( 2 ) 地図表示とカーナビ連動や表示の切替等の処理を記述する JavaScript ファイル，各( 3 ) ローカルイベントの検索と目的地への設定要素の見た目やレイアウトを記述する CSS ファイルから( 4 ) 写真の共有と閲覧構成されている．これらの各ファイルは web サーバ上に配

以下，各機能の詳細について説明する．

置され，ブラウザから指定の URL でアクセスすることで取得できる．web アプリケーションは，ブラウザ内のイン

4.1 レジャースポット検索とマルチデバイスへのシェアタプリタで JavaScript の処理が実行され，HTML 中の記

図 1 の図 (a) はレジャースポット検索時の各アプリケー

述に基づき CSS でレイアウトされた各要素に対して，イベションの動作画面を示している．ユーザは初期画面中の “ントが付与されたり表示が切り替えられたりすることで実レジャースポット検索” を選択し，レジャースポット検索現されている．従来では，その処理と表示のすべてを 1 つ機能をスマートフォンに呼び出す．一般的なコンテンツ検のブラウザ上で行うため，1 つのブラウザ上で 1 つの web

索アプリと同様，検索窓にキーワードを入力し，そのキーアプリケーションを実行していた．

ワードに関連したレジャースポットのコンテンツが検索で一方で，本フレームワークは，この web サーバとクライきるようになっている．リスト状のコンテンツから一つをアントサイドのブラウザの間に配置される中間サーバを用選択すると，そのレジャースポットの詳細を確認できる．

いる．図 3 に，我々が提案する web アプリケーションフ

また，図 1 の図 (a) のように，タブレット PC 上でも画面レームワークの概略図を示す．本フレームワークでは，ま左側でレジャースポットの検索と，右側でコンテンツの詳ず中間サーバが web サーバより web アプリケーションの細の閲覧が可能となっている．

各ファイルを取得する．中間サーバ上で web アプリケー

ここで，例えばリビングにいる家族やタブレット PC のションのツリー状の構造 (DOM ツリー) を HTML ファイ

ユーザにレジャースポットの一つをシェアする場合，TVルから構築する．そして，各デバイスのブラウザは，中間やタブレット PC の画面右側にその詳細を表示し，各デバサーバの URL を指定してアクセスする．中間サーバはアイスの表示を同期させてシェアすることが出来る．最終的クセスしてきた各デバイスを管理し，web アプリケーショに気に入ったレジャースポットは，そのレジャースポットンのコンテンツ内にあらかじめ指定された ID とデバイスを “お気に入り” として登録する．このようにして，事前の対応通りに，先の DOM ツリーの部分木単位で必要なにいくつかの目的地候補を複数人で探しておくことがで要素を各デバイスへ再配信する．web アプリケーションのきる．

© 2014 Information Processing Society of Japan

298

4.2 地図表示とカーナビ連動

能として搭載されている商品も市場に出ているほど，想定前節で “お気に入り” に設定した各レジャースポットは，しやすいユースケースである．本アプリケーションは上記車載のカーナビ端末から呼び出して経路検索の目的地に設のようなユースケースを，ユーザが所有する各デバイスの定することができる．図 1 の図 (b) がその動作画面である．

web ブラウザのみで実現できる所が既存のアプリケーショ

スマートフォンとカーナビ端末の初期画面から “地図” をンと異なる点である．また，本フレームワークを活用すれ選択すると，各画面には地図が表示され，計画時に “お気ば，上記マルチデバイスアプリケーションを，1 つのクラに入り” に登録した各レジャースポットが地図上にポップ

イアントサイドの web アプリケーションのみ構築するだけアップで表示される．カーナビ，スマートフォン両方からで実現できる．

その中の一つを選択することで，カーナビの目的地として現状 web ブラウジングができるカーナビシステムはごく設定することができる．例えば，運転手ではない人が目的一部しか存在しないが，カーナビシステム内の地図の表示地の変更や，その場で検索したレジャースポットを目的地やその他 UI は組み込みブラウザで表示されているものもに設定するといったことが可能となる．

多く，カーナビシステムが HTML5 をサポートするブラウザを搭載し，カーナビシステム上で web アプリケーション4.3 ローカルイベントの検索と目的地への設定を実行する環境は十分想定できると考えている．

ドライブ中に，あらかじめ計画していたレジャースポッ

また，マルチデバイスアプリケーション全体の課題としトが臨時休業等で訪問できないということがある．その際て，本アプリケーションで実現したような，ユーザがそのは，現在地周辺で開催されるローカルイベントを時系列検時その場で利用出来るデバイスが変化していく時の，デバ索する機能が利用できる．本アプリケーションでは，webイスのログイン方法や，より直感的なデバイスの操作 UI上のブログの中から，マスメディアでは取り上げないようについての検討が今後必要となると考えている．

なローカルイベントの名称・開催地・開催日時を自動で抽出する技術 [6] を用いてインデクシングされたイベント情6. おわりに報を，外部 web サーバから取得している．スマートフォン

本稿では，我々の開発したフレームワークを活用して構の初期画面から “イベント検索” を選択すると，上記ロー築した，マルチデバイスを活用する複数人でのドライブサカルイベントを検索する機能がスマートフォンで利用でき

ポートアプリケーション “LEISURE STYLIST” を紹介しる．レジャースポットの検索時と同様，取得したローカルた．本アプリケーションは，HTML5 を活用して構築されイベントのリストから一つを選択してタップすると，そのる web アプリケーションを対象に，1 つの web ブラウザ

イベントの詳細のブログ記事が閲覧できる．先ほどと同様で動作する web アプリケーションを，その各機能や表示毎“お気に入り” に登録することで，カーナビにもその登録がに分割し，マルチデバイスにまたがって連携動作させるこ

瞬時に反映され，その場でローカルイベントの開催地を目とができる中間サーバを活用した web アプリケーションフ的地に設定することもできる．

レームワークで実現されている．
今後，第 5 節で述べたような課題について検討し，本ア

4.4 写真の共有と閲覧外出先でスマートフォンを使って写真を撮影する行為

プリケーションフレームワークの実用化とさらなる機能拡張を目指す．

は一般的になりつつある．本アプリケーションでは，複数ユーザのスマートフォンで撮影された画像を中間サーバに参考文献アップロードすることで，複数の端末から写真コンテンツ[1]の一元管理を行うことができる．また，選択した写真コンテンツをリビングの TV に表示させ，マルチデバイスで写真コンテンツを楽しむことができる．

[2]
[3]

5. 考察
本フレームワークを用いることで，クライアントサイド[4]の各機能のみを構築するだけで，上記のようなマルチデバイスにまたがるアプリケーションを構築できることが確認できた．
レジャースポットを検索してお気に入りに登録し，カーナビからその情報を引き出して目的地に設定する，といった利用の仕方は，NaviCon を初め，カーナビシステムの機© 2014 Information Processing Society of Japan

[5]
[6]

Wi-Fi Alliance, MiracastTM , http://www.wi-fi.org/
wi-fi-certified-miracast%E2%84%A2, Nov.–2013.
W3C, HTML5, http://www.w3.org/TR/html5/, Nov.2013.
中茂睦裕, 宮崎泰彦, 渡邊大喜, 槙 優一, 徳永徹郎, 井元麻衣子, “中間ブラウザ mothre による操作代行の提案”, 電子
情報通信学会技術研究報告, Vol. 113, No. 73, pp. 69–74,
2013.
徳永 徹郎, 宮崎 泰彦, 井元 麻衣子, 中茂 睦裕, 市井 亮美,
加藤 晃市, “Web アプリケーションへのマルチデバイス連携フレームワークの適用と評価”, 情報科学技術フォーラ
ム講演論文集, Vol. 12, No. M-030, 2013.
株式会社デンソー, NaviCon, http://navicon.denso.
co.jp/user/support/index.php, Nov.–2013.
数原 良彦, 鈴木 潤, 鷲崎 誠司, “構造学習を用いたテキス
トからの地域イベント情報抽出”, 第 27 回人工知能学会全国大会論文集, Vol. 27, No. 1F3-1in, 2013.

299