公衆機器に近づくだけでスマホが操作画面に早変わりする非接触 UI 技術
カメレオン
代表研究者

小林 透

長崎大学 情報データ科学部 教授

1 はじめに新型コロナウイルス感染症の拡大により、銀行 ATM や飲料自販機、公共交通機関の乗車券売機など、不特定多数の人が利用する公衆機器を直接触れずに利用できることが望まれている。そこで、本研究では、最新の Web アプリケーション開発技術により特定のネイティブアプリをインストールすることなく、公衆機器に近づくだけで個人のスマホ画面がその公衆機器の操作画面に自動で切り替わる非接触 UI 技術カメレオンを確立する[1]。
カメレオン技術では、多種多様な公衆端末を対象としている。そのため、一つの Web アプリケーションですべての公衆端末の UI を保持することは現実的ではない。そこで、本研究では、まず NFC タグにより目の前の公衆機器を識別し（A.コンタクトフェーズ）、その後、UI Server から、その公衆端末固有の操作 UI を取得し操作可能とする（B.操作フェーズ）2 フェーズからなるプロトタイプシステムの実装を試みた[2][3]。
具体的には、A.コンタクトフェーズとして、公衆機器に添付された NFC タグを元に、UI Server から PIN Type
Smart Lock と学内道案内のための Digital Signage System の操作 UI を取得し、表示させる Chameleon Webアプリを開発した。また、B.操作フェーズとして、スマートロック開錠のためのテンキー情報や学内の行先情報をスマートロックやデジタルサイネージシステムに、Bluetooth により転送可能な Chameleon Web アプ
リを開発した（図１）。

図 1．プロトタイプシステムの構成実装したプロトタイプの PIN Type Smart Lock のユースケースと、Digital Signage System のユースケースを図 2、3 に示す。また、PIN Type Smart Lock と Digital Signage System に適用したプロトタイプシ
ステムの操作イメージを図 4 に、プロトタイプシステムのシーケンスチャートを図 5 に示す。

1
公益財団法人電気通信普及財団
研究調査助成報告書 第37号 2022年度

図 2．PIN Type Smart Lock ユースケース

図 3．Digital Signage System ユースケース

図 4.Chameleon Web アプリの操作イメージ（左が PIN Type Smart Lock、右が Digital Signage System）

2
公益財団法人電気通信普及財団
研究調査助成報告書 第37号 2022年度

図 5．プロトタイプシステムのシーケンスチャート

2 カメレオン技術の実装
2-1 証明書発行装置への Chameleon Web アプリの適用
長崎大学の各キャンパスにグローリー社製の証明書発行装置が導入されている。グローリー社は、証明書発行装置から撤退しており、既存装置にカメレオン UI を追加実装することは、メーカーの協力が得られなかった。また、本学のグローリー社製の証明書発行装置は耐用年数を超えていたことから、カメレオン UI を適用した新たな証明書発行装置を内製することとした。
内製した証明書発行装置のユースケースを図 6 に示す。
学生は、自己が所有するスマートフォンを使って、完全非接触で、各種証明書の印刷が可能である。QR コー
ドリーダやプリンタは、すべて市販のもので構成されており、グローリー社の証明書発行装置に比較して、導入費用、年間の保守費用を大きく抑えることができる。2022 年 3 月上旬から、全キャンパスで 7 台のカメ
レオン UI 対応証明書発行装置が稼働している（図 7）。なお、実運用機の開発や設置、導入に当たっては、文科省からの新型コロナ感染症拡大防止関連補助金を活用した。

3
公益財団法人電気通信普及財団
研究調査助成報告書 第37号 2022年度

図 6.

証明書発行装置への Chameleon 技術の適用

図 7. カメレオン UI 対応証明書発行実運用装置
2-2 Digital Signage System への Chameleon Web アプリの適用
情報データ科学部と工学部の玄関にそれぞれ、カメレオン UI に対応した教員の居室検索用のサイネージシステムを設置した（図 8）。これにより、来訪者は、自己が所有するスマートフォンを使って、完全非接触で、来訪先の教員の居室の場所をサイネージに表示させることができる（図 9）。

4公益財団法人電気通信普及財団
研究調査助成報告書 第37号 2022年度

図 8.

図 9.

工学部の玄関に設置したカメレオン UI 対応サイネージシステム

Digital Signage System への Chameleon Web アプリの適用ユースケース

2-3 Web アプリ実装方式
今回対象としたデジタルサイネージシステムは、長崎大学に設置されるキャンパス内の道案内を行うタッチパネル式システムを想定している。本システムは、ユーザーが操作するスマート端末上の Web アプリと、

5
公益財団法人電気通信普及財団
研究調査助成報告書 第37号 2022年度

Web サーバー、及びサイネージ端末からなっている（図 10）。本システムは、Web Bluetooth 方式と Web Socket方式により、スマート端末とサイネージ端末間の通信を確立している。Web Bluetooth 方式は Android スマートフォンを対象にしたもの、Web Socket 方式は iOS スマートフォンを対象にしたものである。以下で、本システムの構成を説明する。
・ユーザーは QR コードから URL を取得する。
・URL を用いてサイネージ端末の操作画面へアクセスする。
・Index.html の中で、User-Agent の情報を用い、ユーザーのスマート端末が Android か iOS かを判断し、それぞれに対応する HTML ページに移動させる。
Android の場合：・ユーザーはサイネージ端末に Bluetooth 接続をする。
・サイネージ端末で画面の呼び出しをする。
・ユーザーは目的地 ID を送信し、サイネージ端末でマップが表示される。
iOS の場合：・ユーザーは Web Socket サーバーに接続する。
・サイネージ端末で画面の呼び出しをする。
・ユーザーは目的地 ID を Web Socket サーバーに送信する。
・Web Socket サーバーは受信した目的地 ID をサイネージ端末に送信し、サイネージ端末でマップが表れる。
Android スマートフォンと iOS スマートフォンで、異なる方式としたのは、iOS では、ブラウザで稼働するWeb アプリ（Java Script）で、Web Bluetooth の利用ができないためである。

図 10

Web アプリ実装方式のシステム構成

6
公益財団法人電気通信普及財団
研究調査助成報告書 第37号 2022年度

（１）Web Bluetooth 方式
Web Bluetooth 方式において、Android のユーザー操作 Web アプリからサイネージ端末を操作する基本的な流れを説明する（図 11）。
・ ユーザーは操作画面からサイネージ端末に対して、Bluetooth のペアリングを行う。
・ ペアリングが成功すれば、目的地の選択メニューが有効になる。
・ 選んだ目的地をサイネージ端末に送信すると、目的地までのマップがサイネージ端末に表示される。

図 11

Web Bluetooth 方式のシーケンスチャート（２）Web Socket 方式
Web Socket 方式においては、ユーザーのスマート端末とサイネージ端末の間に、Web Socket サーバーが存在する。Bluetooth の代わりに、インターネットを通して、ユーザー操作 Web アプリからデータ通信を実現する。以下で、Web Socket 方式を用いた iOS のユーザー操作 Web アプリからサイネージ端末にデータ通信する基本的な流れを説明する（図 12）。
・ 予めサイネージ端末から Web Socket サーバーへの接続を行う。
・ ユーザーは操作画面から Web Socket サーバーに接続する。
・ Web Socket サーバーでそれぞれの接続に対して検証を行う。
・ 接続が成功すると、ユーザーの操作画面では目的地の選択メニューが有効になる。
・ 選んだ目的地を送信すると、Web Socket サーバーの中で、目的地の情報がサイネージ端末にリダイレクトされる。
・ 目的地までのマップがサイネージ端末に表示される。

7
公益財団法人電気通信普及財団
研究調査助成報告書 第37号 2022年度

図 12

Web Socket 方式のシーケンスチャート（３）ネイティブアプリ実装方式
操作対象となる公衆機器は、必ずしもインターネットに接続されているとは限らない。従って、Web
Socket 方式しか利用できない iOS スマートフォンを Web アプリにより利用することはできない。この問題を解決し、iOS スマートフォンでも Bluetooth 通信を可能とするためには、Web アプリではなく、ネイティブアプリとする必要がある。
そこで、ネイティブアプリの Web View を使用して、ネイティブの Bluetooth 機能を使用する方式の実装を試みた（図 13）。この方式では、Google 社が開発した Flutter というフレームワークを使用している。
Flutter はモバイルアプリを作成するフレームワークであり、Dart（ダート）という１つのプログラミング言語を使用することで、iOS と Android のアプリを同時に開発することができる。実装に当たっては、2 章で示した Web アプリをそのまま表示するために、Flutter の WebView を使用した。まず、Web アプリの URL に接続に必要な情報をパラメータとして定義する。これにより、WebView で Web アプリをロードした際に、ネイティブアプリでパラメータから接続情報を取得できるため、Web アプリとネイティブアプリ間のやり取りが可能である。そこで、その接続情報を用い、接続する公衆機器にネイティブの Bluetooth で接続すれば、2章で説明したの Web Bluetooth 方式と同様に、周辺機器とのデータ通信が可能になることを確認した。

図 13ネイティブアプリ実装方式

8
公益財団法人電気通信普及財団
研究調査助成報告書 第37号 2022年度

3 おわりに非接触操 UI 技術カメレオンを開発し、学内の証明書発行装置、教員検索サイネージシステムに適用することで、社会実装を果たした。今後は、一つのアプリケーションで、Web ブラウザの機能と公衆機器の非接触操作を可能とする、カメレオンブラウザの実現を目指す。これにより、One Application for All を実現する。

【参考文献】[1] Hirokazu Kumamoto, Takashi Muronosono, Shinji Ohta, Tetsuo Imai, Kenichi Arai, Toru
Kobayashi，”Research on Contactless Operation Method for Public Equipment Using Personal
Smartphone, ”2021 IEEE 3rd Global Conference on Life Sciences andTechnologies(Lifetech2021)[2] Toru Kobayashi, Takashi Muronosono, Fukuyoshi Kimura, Kazuki Fukae, Tetsuo Imai, Kenichi
Arai ， ” Chameleon: Contactless Operation Method for Public Devices, ” IEEE 10th Global
Conference on Consumer Electronics (GCCE 2021)[3] Jon Wye Tan, Haruka Hata ， Takashi Muronosono ， Kazuki Fukae ， Toru Kobayashi, ”
Chameleon: Contactless Operation Application on Campus,” ICCE-Berlin 2021，2021，15-18，
November〈発題名Chameleon:
Contactless
Application on Campus

表資料〉

掲載誌・学会名等
Operation

Chameleon: Contactless Operation
Method for Public Devices
公衆機器操作ブラウザ『Chameleon（カメレオン）』の開発に成功 ～with コロナ時代の新しい非接触操作方法の提案～

発表年月

11thIEEEInternationalConferenceonConsumer
Technology (ICCE-Berlin 2021)
IEEE 10th Global Conference on
Consumer Electronics (GCCE2021)
長崎大学、PRESS RELEASE

2021.112021.102021.129
公益財団法人電気通信普及財団
研究調査助成報告書 第37号 2022年度