公立はこだて未来大学 2016 年度 システム情報科学実習
グループ報告書
Future University Hakodate 2016 System Information Science PracticeGroup Report

プロジェクト名
もえもえデジタルサイネージ 2045
〜人を動かすためのデザイン×認知心理×コミュニケーション〜

Project Name
MOEMOEDigitalSignage2045〜Cogntion, DesignandCommunication〜

グループ名
グループ B

Group NameGroupB
プロジェクト番号/Project No.

9

プロジェクトリーダ/Project Leader
1014234

類家怜央

Reo Ruike

グループリーダ/Group Leader
1014093

斉藤隆司

Ryuji Saito

グループメンバ/Group Member
1014093

斉藤隆司

Ryuji Saito

1014090

柏木敏朗

Toshiro Kasiwagi

1014058

藤倉稜

1014045

出水利治

Ryo Hujikura
Toshiharu Izumi

指導教員
平田圭二

竹川佳成

田柳恵美子

寺井あすか

AdvisorKeiji Hirata

Yoshinari Takegawa

Emiko Tayanagi

提出日2017 年 01 月 18 日

Date of Submission
January 18, 2017

Asuka Terai

概要
もえもえデジタルサイネージ 2045〜人を動かすためのデザイン×認知心理×コミュニケーション〜は, 人の行動を変えるデジタルサイネージを制作するプロジェクトである. デジタ
ルサイネージとは広告や宣伝を表示する情報表示機器のことである. また, 「もえもえ」とは「もっとエモーショナル, もっとエンターテイメント」の略語であり, 我々は, 人の心に訴え人を楽しませるデジタルサイネージを開発する事を目的として活動した. 我々は, 前期で学んだ
デジタルサイネージの効果に関する知識・経験を活かし, Kinect を用いた情報取得システムを有したデジタルサイネージの開発を行った. まず, どんなサイネージを制作したいかをメン
バ全員で話し合い, コンセプトを決定した. システム開発は, Kinect 実装班と Android 班に分かれて行った. Kinect 実装班は, Kinect を用いて鑑賞者のジェスチャーを認識し取得する事を目標に開発を進めた. また, Kinect 関連の開発が終わり次第, Unity を用いて画面上のエフェクトや動きをデジタルサイネージに付与し, 外観を制作した. Android 班は, まずデジタ
ルサイネージに接続した PC と鑑賞者が携帯している端末のペアリングを可能にした. また,

Android 端末用アプリケーションを開発し, Bluetooth 接続により情報をデジタルサイネージ
から一方的に送信できるようにした. ペアリングする上では, Android 端末用アプリケーションを開発し, システム完成後は, メンバでシステムの展望についてまとめた. これらのシステムを実用化し, 人が現在よりデジタルサイネージに興味を持ち, 簡単に情報を取得できる事を目
指す.
キーワード

デジタルサイネージ, 鑑賞者, Kinect, Unity, Android（※文責: 藤倉稜）-i-Abstract
moemoe digital signage 2045 〜Design for moving people × Cognitive psychology ×
Communication〜 is a project to produce digital signage that changes human behavior.
Digital signage is an information display device that displays advertisement and publicity. And moemoe is an abbreviation for ”more emotional, more entertainment”.
Our aim is to develop digital signage that appeals to people’s hearts. Utilizing ourknowledge and experience on the eﬀects of digital signage learned in the previous term,
we developed digital signage with information acquisition system using Kinect. First,
all the members discussed what kind of signage they would like to produce and decided
the concept. System development was divided into Kinect Implementation Team andAndroid Team. The Kinect Implementation Team proceeded with development withthe goal of recognizing and acquiring the gesture of the viewer using Kinect. After that,
we applied eﬀects and motions on the screen to digital signage and produced the appearance using Unity. Android team enabled pairing between a PC connected to digital
signage and a terminal carried by the viewer. We developed an application for Android
terminal, and information can be sent unilaterally from digital signage by Bluetoothconnection. To pair, we developed an application for Android terminal. After completion of the system, the members summarized the prospects of the system. We aim to
make these systems practical, to make people more interested in digital signage thanever, and to get information easily.
Keyword

Digital signage, viewer, Kinect, Unity, Android（※文責: 出水利治）- ii -

目次
第1章

はじめに

1

1.1

背景 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

1

1.2

目的 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

1

到達目標

2

課題の設定 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

2

2.1.1

情報取得 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

2

2.1.2

目を惹くサイネージ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

2

課題の割り当て . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

3

課題解決のプロセス

4

3.1

月毎の作業過程 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

4

3.2

各人のコンテンツ制作における担当分課題 . . . . . . . . . . . . . . . . . . . . .

4

3.2.1

斉藤隆司 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

4

3.2.2

柏木敏朗 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

5

3.2.3

藤倉稜 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

6

3.2.4

出水利治 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

6

第2章

2.1

2.2
第3章

第4章

4.1

成果物

8

概要 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

8

4.1.1

Android アプリ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

9

4.1.2

Unity . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

9

4.1.3

Kinect . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

10

4.1.4

コンテンツ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

11

第5章

展示

13

第6章

反省と展望

14

6.1

反省 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

14

6.2

展望 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

14- iii -

MOEMOEDigitalSignage2045〜Cogntion, DesignandCommunication〜

第1章
1.1

はじめに

背景

現在, ポスターまたは新聞などの絵や文字を用いた様々な広告媒体が存在する. その中でも新しい広告媒体としてデジタルサイネージという広告用ディスプレイがある. そのデジタルサイネージ
では画像や文字の他に動画や音も一度に表示させることができる. つまり, デジタルサイネージには人の目を惹く工夫がされている. 本学ではライブラリ前や 3 階の正面玄関前に実際にデジタルサ
イネージが設置されており, 人々にとって身近な存在となっている.

図 1.1 デジタルサイネージの例

しかし, 現在普及しているサイネージは鑑賞者が一方的に見て終わる, 受動的なものとして設置されている. より鑑賞者がサイネージに注目するようになる, そのサイネージに興味を持っても鑑賞者が自ら検索して調べなければ詳細な情報を取得できず, 一時的な情報として終わってしまう.
また, サイネージには鑑賞者への外界的刺激が視覚以外にないため, 鑑賞者の目を惹きつけにくく,記憶に残りづらい. 以上の課題が現在のサイネージにある.
本プロジェクトの前期ではデジタルサイネージの習作を製作した. その習作を通してインタラク
ティブ要素が必要だと考えた. サイネージが一方的に鑑賞者に見てもらうだけでは鑑賞者は興味を持ちづらく, デジタルサイネージの特徴を最大限に活かせない. また, インタラクティブ要素があると, もっとエモーショナル, もっとエンターテイメントが達成できると考えた. そのため後期ではインタラクティブ要素を含んだデジタルサイネージを製作することに決定した.
（※文責: 斉藤隆司）

1.2

目的

背景で挙げられた課題を解決するために様々な手段が考えられる. 鑑賞者が一方的に見て終わる,
受動的なサイネージを改善するために, 双方向にやり取りができるインタラクティブなサイネージを開発する. また, 鑑賞者がサイネージのコンテンツに興味を持った時, そのコンテンツを自分でWeb で検索せずに情報を受け取ることができるシステムを実装する. さらにサイネージに鑑賞者をひきつけるような仕掛けがないため, 受動的なサイネージになってしまっている. それを改善するために音で鑑賞者に気づかせたり, 鑑賞者がサイネージに近づくとサイネージが動き出したり,
サイネージのコンテンツを目立つものにするなどの仕掛けを実装する.
（※文責: 斉藤隆司）

Group Report of 2016 SISP

-1-Group Number 9

MOEMOEDigitalSignage2045〜Cogntion, DesignandCommunication〜

第 2 章 到達目標
2.1

課題の設定

2.1.1

情報取得

我々はサイネージからより詳細な情報を鑑賞者に与える仕組みを無線通信規格を用いて考案した. 無線通信規格は複数あり, Bluetooth と NFC が挙げられたが, 比較した場合に, 通信可能距離と通信速度が Bluetooth の方が優れていたため Bluetooth に決定した. また, 鑑賞者がサイネー
ジから情報を受け取る際, 自身の端末を操作することな受け取りたいと考えた. 理由として, 鑑賞
者が端末を操作すると, 現在普及している QR コードなどの情報取得技術を変わらないと考えたからである. 我々は近未来的なデジタルサイネージを目指して開発を行っているため新しいサイネージの形として Bluetooth を用いて鑑賞者が自身の端末を操作することなく情報を受け取れることを提案した. また, Bluetooth でファイル受信をする際にダイアログが出て受信を許可しなけ
ればならない. よって端末を出して許可をする必要がある. そのため端末を操作しないために SPP（SerialPortProfile）でデータの送受信をすることに決定した.
（※文責: 斉藤隆司）

2.1.2

目を惹くサイネージ

本システムはジェスチャーによる情報取得のできるシステムであることから, クーポンやプロ
モーション, ルート案内などに利用されることが本システムの利点を最大限に発揮できると考えた.
そのため人通りの多い駅構内やショッピングモールなどの場所に設置されることを想定して制作した. 人通りが多いということで, ただ広告を流すだけでは, 多くの人が通り過ぎてしまう. またジェスチャーによる情報取得できることに気づかない. さらに現在デジタルサイネージ側が人を認識しているのか, ジェスチャーが成功したのかがわからない. なので人の動きによって現象や音などのシステムによるレスポンスがあることとした. 多くの人に立ち止まってもらうために, 画面動作を行っている人を見ることで利用したくなるエンターテイメント性のあるシステムにした. それを制作するにあたり, 行動心理学の分野で, ある製品や事柄に対し, 大勢の人がそれを支持していると,その製品や事柄への支持がよりいっそう高くなるといった現象のバンドワゴン効果を参考にした.
そこで操作を行いたくなる画面設計, 動作を行っているユーザをほかのユーザが見るだけで操作を覚えることができる単純な操作性, 現在どのような操作が行われているかがすぐにわかる画面変化
や音の出力, これら 3 点が必要であると考えた. コンテンツ実装について考えると, 得られる情報をユーザ自身の操作で選択できるようにするのか, もしくは一定時間で得られる情報を切り替えていくのかを考える必要がある. また本システムでは受信する携帯端末による操作やそれを手に持っている状態を想定していないので, どのようにデータが送信されたことをデジタルサイネージ側で伝えるかを考える必要がある. これらの課題解決を行うためにまず, どのような開発環境にするかを考えた. 操作は, 操作の単純さや複数人での操作, 情報取得のためにデジタルサイネージに近づくことが不必要にすることを想定して Kinect を用いたジェスチャによる遠距離操作にした. これにGroup Report of 2016 SISP

-2-Group Number 9

MOEMOEDigitalSignage2045〜Cogntion, DesignandCommunication〜
より周りの人が操作をしている人に注目する機会が増え, よりバンドワゴン効果を誘発すると考えた. それに伴い Bluetooth によるデータ送信と Kinect による人体認識の統合を行うために開発言語を C#に統一した. また, C#による開発環境があり Kinect の操作も可能である, Unity を用いることにした. Unity を用いることで, 3D 空間による開発を行うことができるようになった. そのため, エンターテイメント制のある, インタラクティブな画面設計がしやすくなった. 開発を行っていく上で Kinect による誤動作や, 複数人での操作を想定した際ジェスチャした人の送信先の携帯端末を特定できない, プライバシー問題などの理由から, 本システムの仕様変更することにした. 計
画段階では複数人の利用も想定していたが, デジタルサイネージから最も近いユーザに限り操作できることに変更した. また Kinect の誤動作を修正するために, データの受信を行う操作 1 つとした. 3D 空間によるインタラクティブな画面設計, 1 つのジェスチャだけで完結するシステム, 見ていてストレスにならない画面遷移, Unity 内の動きと Kinect によるジェスチャ認識のプログラム
構築, これら 4 点を実装することで人の目を惹くデジタルサイネージが実現できると考えた.
（※文責: 柏木敏郎）

2.2

課題の割り当て我々のグループを Kinect 班と Bluetooth 班の二つに分けた. Kinect 班の担当は柏木, 藤倉,

Bluetooth 班の担当が斉藤, 出水である. Kinect 班は Kinect での人の認識, モーションの認識を行い, Unity で Kinect と連携した動的なサイネージの画面の開発を進めていた. Bluetooth 班はクライアント側のサイネージからのデータ送信 C#で書き, Android での受信をアプリケーションを作成することによって実装を進めていた.
（※文責: 斉藤隆司）

Group Report of 2016 SISP

-3-Group Number 9

MOEMOEDigitalSignage2045〜Cogntion, DesignandCommunication〜

第 3 章 課題解決のプロセス
3.1

月毎の作業過程

前期は, 別グループでの活動だった為ここでは後期の作業工程を記す.

9 月に新たなグループでの活動が始まってから, まず何を制作したいかについてメンバ全員で案出しを行った. 案出しの際, 決められた条件からサイネージを考えるのではなく思いつく要素を出る限り抽出してそこから絞ってゆく方式をとった.

10 月にある程度の内容が固まると, SWOT 分析を用いて制作するサイネージを見つめ直し, 詳
細まで確定させた. また, グループ内で役割分担を決め, 藤倉, 柏木が Kinect 実装班, 斉藤, 出水が Android 班として活動する事とした. 21 日に高校生がプロジェクト学習を見学しに来る事が決まっていた為, それに向けてデモをできる段階まで開発を進めた. Kinect 実装班は Kinectv2 を用いて人間の骨格を認識するプログラムを実装する為に, まず開発環境を整えた. その後, 実際に特定のジェスチャーを Kinect の前で行うと, その動きを取得する機能を開発した. Android 班は,Bluetooth を用いた通信機能を実装する前に, まずは実装が比較的容易であるメールを用いたデー
タ送信機能の開発をした. 両班の機能を組み合わせ, Kinect の前で特定のジェスチャーを行うと,メールが送信されるという機能を完成させ, 高校生の前でデモを行った.

11 月に Kinect 実装班はジェスチャーを認識する際に発生するプログラムのバグ修正を行った.
具体的には, Kinect が複数人を認識している際にジェスチャーを認識できなくなるという内容だった. また, このバグ修正と同時進行で Unity の知識があった柏木はサイネージに実際に映すアニ
メーションやエフェクトの制作をした. Android 班は, PC と Android 端末の自動ペアリングを可能にした. また, PC からデータを受信する為に必要な PortConnect という Android 端末用アプ
リケーションを制作した. これらにより, PC からあらかじめ指定された URL を Android 端末が通知として受信するという機能が完成した.

12 月は成果発表会に向けて, タスクの見直しをした. 柏木は引き続きサイネージに映す部分のコーディングを行った. 藤倉は, サイネージに実際に使うコンテンツをインターネットで探し, 編集した. 斉藤は, Android 端末がアプリケーションを開いている状態ではなく, バックグラウンドで動いているだけでも, URL を受信する事ができるように改善した. 出水は, 一足先に成果発表会に向けてポスター制作に着手し始めた. それぞれの仕事が終わり次第, メンバ全員でポスターを改善し, 完成させた.
（※文責: 藤倉稜）

3.2

各人のコンテンツ制作における担当分課題

3.2.1

斉藤隆司

9 月から 10 月にかけて開発するサイネージのアイディア出しを行った. メンバー全員でアイディアを考えてきてそれを吟味し, 10 月に決定した. 決定してからは私は Bluetooth 班の一員として開発に着手した. 10 月中は高校生がプロジェクト学習を見学に来るので, その際にデモを行える

Group Report of 2016 SISP

-4-Group Number 9

MOEMOEDigitalSignage2045〜Cogntion, DesignandCommunication〜
ことを目標に開発を行った. 最初はサイネージからのデータの受信をメールで行った. そのため,

Kinect 班が開発を C#で行っていたので, メールを送信する機能を C#でコーディングを行った.
そして, 他班とのバージョン管理, 統合を GitHub で行った. 高校生向けのデモでは Gmail を送信することでサイネージから情報を受け取ることを実装したが, 今後メールは衰退していくと考え,
より新しい Bluetooth を用いたデータの送受信を考案した.
その後, Bluetooth 班の中で, 私は Android のアプリ開発を担当し, AndroidStudio を利用した.
しかし, 今までアプリ開発をした経験がなかったのでライブラリーなどから参考書を借りて学習を行った. 参考書から Android のアプリは java ファイルでアプリの動作を制御し, xml ファイル
でアプリの外観を制御することを学んだ. また, アプリ内で Bluetooth を利用するための API を,

web で検索しながら学習した. そして本格的にアプリの開発に着手したのは 11 月からであり, 当初
は Bluetooth でのファイルの送受信を行おうと考えていた. しかし, 開発を行っていく中でダイアログなしのファイルの送受信が不可能だと判断し, SPP でデータの送受信を行うことに方針を変更した. そして 11 月下旬にはアプリの大まかなシステムは完成した. 最終発表までの間にアプリのアイコンを設定したり, アプリの通知音やバイブレーションなどの微調整を行った.
（※文責: 斉藤隆司）

3.2.2

柏木敏朗

後期から新たに 3 つの班に分かれて, Kinect などを用いたインタラクティブなデジタルサイネー
ジのシステムを開発する班に配属された. そのため 9 月はデジタルサイネージアワードの入賞作品
や実際に設置されているデジタルサイネージを, ネットなどを用いて調べて, インタラクティブとは何なのか, デジタルサイネージを設置するメリットとは何なのかを考えた. その後, 開発するデジ
タルサイネージのシステムについて企画をメンバー同士で発案した. そこで私はデジタルサイネー
ジからのデータの送信システムを発案した.

10 月にかけて, 企画が決定し, Unity と Kinect を用いることになったので, それらについて,
ネットなどを用いて学んだ. Unity に関しては学部 1 年のから独学で学んでいたので特にこれと言って勉強は行わなかった. Kinect に関して言うと初めて使うデバイスであったのでネットや書籍から Kinect はどんな動作環境でどんなことをできるかを調べた. また Kinect の SDK の中にあるサンプルをいくつか動作を行い, どのくらいの認識力があり, 実際にどのように動作するか体験した. Kinect の動作をプログラムで制御するにあたり, 自分の知識と最終発表までの時間を考えた
ところ, 1 からプログラムを書くことを到底時間が足りないことからサンプルを改良して構築することにした. そのためどのサンプルが本システムにおいて有用なのかを選別した. そして, ネット
を用いてそのサンプルがどのようにプログラムされているかを理解した. その後, 右手を前に出すと 1 を返すメソットを制作した. 次に右の手首と肘との深度の関係変化で 1 を返すメソットを制作した. これらを組み合わせて右手を引き寄せるジェスチャを認識するメソットを制作した. だがこのままでは誤作動が多かったため, ネットなどに挙がっているスクリプトを参考に体のほかの部位の位置などを用いて条件式を増やして誤作動を最小限まで抑えることにした. また複数人ではなく特定の一人だけを認識するようにプログラムを書き換えた.

11 月から 12 月にかけて Unity による画面に映る部分の制作を行った. 成果物に独自性を持たせるために AssetStore を使わず, 素材を自ら制作した. 主にテクスチャの制作を行った. 制作にはIllustrator を用いたが使ったことがなかったので, ネットで調べるや, 有識者の友人にアドバイスをもらいながら制作を行った. またどのような世界観のコンテンツにするかをネットで映画などのGroup Report of 2016 SISP

-5-Group Number 9

MOEMOEDigitalSignage2045〜Cogntion, DesignandCommunication〜
参考になるもの調べてデザインした. 12 月は Kinect による誤作動の改良や, コンテンツの動作に音をつけるなどの微調整を行った.
（※文責: 柏木敏朗）

3.2.3

藤倉稜

9 月に新しいグループになってから, 何を作りたいかの案出しを行った. 私は鑑賞者が惹きつけられるサイネージを制作したかったので, そこを強く主張した. メンバ一人一人こだわりたい部分があったので, ブレインストーミング方式で, 盛り込みたい要素を書き出した. そこから, 様々な角度から内容を見つめなおし 10 月に詳細な内容を決定し, 開発に着手した. Kinect を用いて, 鑑
賞者のジェスチャーに反応してサイネージから情報を取得するというシステムを制作することになった為, 開発するうえで, 2 つの班に分かれて活動した. 私はジェスチャーを取得するというプログラムに興味を感じた為, Kinect 実装班の一員となり, Kinect を用いて人の特定のジェスチャー
を認識するプログラムのコーディングを行った. それにあたり, まず Kinect の知識が無かった為,
インターネットを用いて Kinect を動かすプログラムなどを調べた. 今回は人間の骨格や関節を認識する事が最優先だった為, それらに絞り調べていった. 調べるうちに, Kinect を動かすには必要な環境がある事を知り, 環境を自分の PC に整えた. また, Kinect のドライバをインストールした際に, サンプルプログラムが同梱されていると知った. 班員の柏木が新しくジェスチャーを取得するプログラムを書くより, このサンプルプログラムを改変した方が効率的であると進言してくれた
為, サンプルプログラムを改変し, 特定のジェスチャーを取得するプログラムを実装した. この機能と Android 班のメール送信機能を組み合わせ, Kinect の前で特定のジェスチャーを行うとメールが送信される, という機能を制作した. これを高校生の前でデモとして披露し, 説明した. 11 月は,Kinect に複数人が映っていた場合に, ジェスチャーを取得できないというバグの改善にあたった.
初めはインターネットや書籍などで同種のプログラムを探して改善にあたろうとしていたが, 長らく発見出来なかった為, 自分たちで考案する事にした. 話し合いの結果, 複数人のジェスチャーを取得出来なくとも, 今回は一人のジェスチャーを取得出来れば良かった為, Kinect から距離が最も近い人間のみを Kinect は認識するというプログラムに書き換えた. その結果, バグが修正された. 12
月は成果発表会でのデモに向けて開発を行った. Kinect に関する開発は終了していた為, 柏木と共にサイネージの外観の開発に着手した. 私は Unity の技術に関して疎かったので, 実際に例として使用するコンテンツを収集, 編集をした. それが終わり次第, ポスターの制作に携わり, 全体の見た目から, 言い回し, 文章表現, 図などの制作に関わった.
（※文責: 藤倉稜）

3.2.4

出水利治

後期初め Kinect を用いたデジタルサイネージ班に配属された. そこでどのようなサイネージを作るのかインターネットや経験したことなどから様々ブレインストーミングを行い, たくさんの意
見を出し合った. その後, 個人でインタラクティブなシステム考えてき, グループメンバーで話し合いを行なった. 話し合う上で私は, どのようなシュチュエーションでそのサイネージを作るのかということを中心に考えた. 10 月に入ると実際に使う技術などが固まり始め, 私はサイネージからデバイスへ情報を送信するシステムを担当した. PC からデバイスを自動で接続し, PC 側からデータ

Group Report of 2016 SISP

-6-Group Number 9

MOEMOEDigitalSignage2045〜Cogntion, DesignandCommunication〜
を Bluetooth を用いて送信するというシステムを作り始めていた. その際, Bluetooth でのデータ通信の方法は何種かあることに気づき, FTP（FileTransportProfile）という通信方法を使い Javaで開発を進めた. FTP を用いることで PC からデバイスにデータを送信することは可能になった
しかし, その後開発を進めていくと, 問題にぶち当たってしまった. その問題とは, FTP を用いた通信を行うと, Android 側でデータを受信した際, データを受け取るかどうかの許可ダイアログが出てしまうことである. 私たちのビジョンではサイネージにジェスチャーを行うことでデバイスの中に自動でデータを受信することであった. そのため FTP を用いた開発が止まってしまった. そんな中, 並行して斉藤が別の通信方法での開発も行っていた. 彼は SPP(SerialPortProfile) という方法で開発を行なっていた. この方法がうまく進んでいったため私の接続方法は諦める方向となった. データ通信の開発を斉藤に完全委託したため私は最終発表のポスター制作, Unity 内の文字のデザイン, コンテンツ制作に着手した. Unity 内の文字のデザインについては新しくフォントをイ
ンターネット上で探してきて, Illustrator を用いて光や影を使い, Unity で必要になる文字をデザインした. Unity 内でのコンテンツでは例として,
ム） ,

蔦屋書店

,

鈴木このみ

MacBookPro ,ポケモンコマスター（ゲーの４つの広告制作を行なった. 具体的には Unity のマテリア

ルに広告とその広告の詳細情報を表示するものである. MacBookPro ではその CM 動画, 蔦屋書店では実際に行われるイベント情報などを動画にした. 動画の素材作りには Illustrator を用いし,動画の編集には iMovie を用い, 編集を行なった. ポスター制作においては Illustrator をメインに制作した. Illustrator を使うのが慣れていなかったため, 素材作りなどはパワーポイントを用い, 素材を作った. Illustrator を使っていく中で操作方法などを理解し, 整列の方法や画像処理の方法も知ることができた. 大まかなポスターを作った後, グループメンバー内でポスターについて様々な意見や指摘を受け, その後先生方に指摘を受け直す部分がかなり多くある状態になった. ポスターを深く描いていく中で私たちの背景・目的などが個々でニュアンスが違っていたりしたことが分かり, もう１度初心に帰りグループメンバーで背景・目的そしてサイネージを作った後の効果などをメンバーで考え直した. そのため発表直後までポスターの修正に取り掛かる形となってしまった.
発表当日, 実際にシステムを使いながら発表を行なった. システムを実際に身体で使うのはなかな
か難しく, うまくいかないこともあったが発表を乗り切ることができた.
（※文責: 出水利治）

Group Report of 2016 SISP

-7-Group Number 9

MOEMOEDigitalSignage2045〜Cogntion, DesignandCommunication〜

第 4 章 成果物
4.1

概要

本プロジェクトにおいて我々は, ジェスチャを用いた新たな情報取得システムの発案, 実装を行った. このシステムを操作するには Android スマホが必要となる. また操作の前段階の準備として, そのスマホに PortConnect と呼ばれる本システムのために制作された Android アプリをインストールし, 起動しておく.
常時画面には広告が一定時間ごとに切り替わり映されている. また, Unity を用いる事で画面はデジタル空間を模した外見としているため, 通りすがった鑑賞者の目を惹きつけ易くなっている.
操作を始める場合, デジタルサイネージの前に立ち, Kinect にユーザの人体を認識させる. 人体が認識されるとアニメーションが再生され, 図 4. 1 のように複数のオブジェクトが現れる. これによって認識されているかを確認することができる. 認識の成功を確認できたら, 腕を前に出すと現在映し出されている広告の詳細動画が流れる. その状態から腕を引き寄せるとその広告の情報がジェスチャを行った人のスマホに送信される. その情報とは具体的に, 広告の製品のホームページ
や, 広告の施設の地図や案内ルート, 広告のアーティストのプロモーションビデオがある動画サイトなどその広告に見合った情報が得られる URL がスマホに送られる. もし複数ほしい広告情報があれば続けて引き寄せるジェスチャを行うことで情報を複数得ることができる. 人体が Kinect の認識できる範囲外に行くとアニメーションが逆再生され, 図 4. 2 のように認識される前の画面に
戻る.

図 4.1

図 4.2

Kinect が人を認識していない時の画面

Kinect が人を認識した時の画面

本システムは初期複数人での操作を想定していたが, ジェスチャした人とその人のスマホを結びつけることができないため, デジタルサイネージから一番近くにいる人のみ認識するように設定されている.

Group Report of 2016 SISP

-8-Group Number 9

MOEMOEDigitalSignage2045〜Cogntion, DesignandCommunication〜（※文責: 柏木敏朗）

4.1.1

Android アプリ

Android 側では PortConnect というアプリを開発した. その際, Bluetooth の API を使った.
まず最初に Android の Bluetooth が ON か OFF かチェックし, OFF だった場合 ON にする. そして常に周囲にあるオープンしているポートを探索し続ける. 探索中にサイネージのポートが検出されると, そのポートと Android の Bluetooth の仮想ポートを接続する. そしてポート同士が近くにある場合は接続された状態を維持する. 接続されている状態でサイネージから情報が送信されるのを常に待機していて, 受信すると Android 側で Notification（通知）が図 4.3 のように出る. これ

図 4.3

サイネージから情報を取得したときに出る通知らの Notification はそれぞれ Intent に結びついており, その Intent に応じて通知をタップした時の動作が異なる. 例えばアプリの広告を取得した場合は Play ストアが起動してそのアプリがすぐインストールできる通知が表示される. 場所を説明する広告の場合はその GoogleMap でその場所までの経路案内が開かれる通知が表示される. 映像コンテンツの場合はその動画を YouTube で開く通知が表示される. ある商品を紹介している広告の場合はその購入ページをブラウザで開く通知を表示される. このように受け取った情報に応じて通知が表示され, 様々なアプリケーションを開くことができる. 今回は Android 端末プリインストールされているアプリを起動する通知にした.
（※文責: 斉藤隆司）

4.1.2

Unity

デジタルサイネージに映すコンテンツによりインタラクティブ性を加えるために Unity を用いた. デジタルサイネージに表示されたデータを受け取るというのが本システムであることから, デGroup Report of 2016 SISP

-9-Group Number 9

MOEMOEDigitalSignage2045〜Cogntion, DesignandCommunication〜
ジタル空間から現実世界のユーザがデータを引き寄せるようなデザインを考案し, 実装を行った.
コンテンツとして, フィールドはデジタル空間を再現し, FPS ゲームのようにユーザが自分の目線で操作を行っているように表現する. またインタラクティブなコンテンツにするために Kinect の認識に対してオブジェクトに変化を起こすことにした.
まず 3 次元空間に広告を配置するために, 3D オブジェクトの Quad を作成した. そして, 広告となる画像をそのオブジェクトのマテリアルに貼り広告を表示した. これを複数作成した. この広告の情報を立体的に切り替えていくために, カメラを真ん中に, その四方に広告を貼ったオブジェク
トを配置する. そして, カメラを特定の広告に向け, 一定時間ごとにカメラの角度を 90 度ずつ回す
スクリプトを作成することで表現した. このスクリプトはカメラを回すだけでなく, 広告一つ一つに数字を割り振り, 今現在どんな広告が表示されているかを数字で判別できるようにプログラムした. これによって広告とその詳細動画の組み合わせを判別できた.
デジタル空間を再現するために, ParticleSystem を用いた. 素材は Illustrator を用いてデジタル
的な図形を作成した. それを, ParticleSystem を用いて平面上にランダムに一定時間出現させてデジタル空間を想像させるような表現が出来た. 次に画面の視点をユーザの目線のように表現した.
これは図？のようにスマートグラスをしている時のようにいろいろなアイコンを立体的に表示することで表現した. この素材も Illustrator を用いて制作した. これは uGUI の Image と RawImageを用いて, 配置を行った. Image はテクスチャのフェードインとフェードアウトが表現できるため,認識されるとフェードイン, 認識されていないとフェードアウトするようにプログラムを行い, 画面の切り替わりをスムーズにした.

Kinect のプログラムを Bluetooth によるデータ送信のプログラムを Unity で統合したことで,
Kinect が認識されているのかがわからないという問題が発生したので人が認識している場合と認識していない場合でデジタルサイネージに表示されるものが異なるようにした. 図 4.2 のようにすべてが表示されている状態の時, 認識している状態を表し, 広告だけが表示されている図 4.1 の状
態ときは認識していないことを表している. さらに画面の明るさや色, カメラの視点を変化させることでも認識の有無を判別できるようにした. またジェスチャの成功不成功が判別できないことも確認された. そのため Downloading, Success が画面上にジェスチャが成功後に連続で表示することで認識できるようにした. それぞれのプログラムの統合は, Kinect の動作を認識するスクリプト,
データを送信するためのスクリプト, 送信可能状態を確認するスクリプトの 3 つの C#スクリプトを Unity 上で用意する. 送信可能状態を確認するスクリプトは, Kinect が図 4.2 の人体が認識されているか確認している. つまり図 4.1 と図 4.2 の切り替わり間ではデータの送信が行わない. このスクリプト上で送信可能状態であれば, Kinect の動作認識のスクリプトを参照しジェスチャを認識するメソッドを呼び, そのメソッドからジェスチャを認識されたと返値が返ってくると, データ送信するためのスクリプトからデータ送信メソッド呼ぶ条件式を作成した. これでジェスチャによるデータ送信ができた. これらのスクリプトを MainCamera にアタッチして実装を行った.
以上の内容が Unity 上で動作が行われている部分である.
（※文責: 柏木敏朗）

4.1.3

Kinect

今回は Kinectv2 を使用して, 鑑賞者が Kinect の前で右手を図 4.4 のように動かすと, Kinect は鑑賞者がジェスチャーを行ったと判断し, プログラムが動き始めるという機能を制作した. これは,Kinect が人間の骨格を認識する際に使う Joint という概念を用いて実装した. Kinectv2 は人間をGroup Report of 2016 SISP

- 10 -

Group Number 9

MOEMOEDigitalSignage2045〜Cogntion, DesignandCommunication〜
認識する時, 図 4.5 のように Joint と呼ばれる 25 個の関節を取得する. これらの内, 肘の関節と手首の関節の位置関係を比較することによって, 特定のジェスチャーの取得に成功した. また, 実装当
初は, 複数人を同時に認識した状態だと, 個別のジェスチャーを判別する事が出来なかった. そこで, Kinect に対し, 距離が一番近い人間の骨格のみ認識するようなプログラムに変更したところ,

Kinect の認識範囲に複数人がいても, 認識したい人間を正確に検知できるようになった.

図 4.4 サイネージから情報を受け取る際のジェスチャー

図 4.5

Kinect で認識可能な関節一覧（※文責: 藤倉稜）

4.1.4

コンテンツ

Unity で説明したようにオブジェクトのマテリアルに実際に広告を表示させている. その中の広告について説明する. 今回は例として 4 つの広告を制作した. 1 つ目はMacBookPro の広告である. 正面の画面には MacBookPro が回転している状態にあり詳細画面を表示するとその製品のPV（プロモーションビデオ）が流れるようになっている. Apple の MacBookPro サイトからプロ
モーションビデオを編集し丁度良い長さに編集してある. 情報取得後, 通知を押すと Apple のサイトに接続される. 2 つ目はポケモンコマスターというスマートフォンのゲームアプリの広告である. 正面の画面にはアプリのロゴが表示されており詳細情報には実際のプレイ画面が流れるようになっている.

情報取得後, 通知を押すと GoogleStore に接続されポケモンコマスターが表示される. 3 つ目は

蔦屋書店の広告である. 正面の画面には蔦屋書店の写真が表示されており詳細情報には実際の近々あるイベント情報についてのスライドショーが流れるようになっている. 情報取得後, 通知を押すと GoogleMap に接続され現在の位置から蔦屋書店までの進路案内をしてくれ

Group Report of 2016 SISP

- 11 -

Group Number 9

MOEMOEDigitalSignage2045〜Cogntion, DesignandCommunication〜
る. 4 つ目は

鈴木このみの CD の広告である. 正面には CD ジャケットが表示され, 詳細情報

では実際に音楽が流れるようになっている. 情報取得後, 通知を押すとその CD 販売サイトに接続される. 今回はシステムがメインだったため, コンテンツは未来大生が見て興味を持つようなものにした. どのようなジャンルでも作ることができるので様々な広告にも対応することができ, さらに通知によるデータ受信なので, ネット接続ではなく経路案内などスマートフォンにある機能を使えば汎用性も広がると考えられる.
（※文責: 出水利治）

Group Report of 2016 SISP

- 12 -

Group Number 9

MOEMOEDigitalSignage2045〜Cogntion, DesignandCommunication〜

第5章

展示

我々プロジェクトは全体のスライドでプロジェクト自体の説明を終えた後, 各班に分かれてポス
ターセッションを行った. まず, 我々が制作したシステムの概要を説明し, その後, デモを見せながら詳細な説明を行った. デモでは, 説明をする人が一人, 実際にサイネージを見る鑑賞者役が一人という形で行った. 鑑賞者役がサイネージのある方向に対し, あらかじめ指定したジェスチャーを行
うと, Android 端末に URL が送信され通知として受け取る, この一連の流れを見せるという事を目的とした. 発表の前半はデモを安定して出来ていたが, 後半になるにつれてシステムの安定性が崩れ, うまく Android 端末に URL を送信出来ないことがあった. また, ポスターセッションを見た人を対象に評価シートの記入をお願いした. 評価シートには, 発表の内容と技術についてのアン
ケートであり, 10 段階の評価とその評価にした理由を述べてもらう形式であった. 評価シートの意
見として以下のような指摘があった.

• 操作が簡単.
• UI や使用している音が魅力的.
• サイネージを見たその場限り以外でも役に立つ情報を入手できる.
• Kinect で実際に体を動かして操作することによって色々な人が興を持ちそうである.
• 自分の端末とサイネージを連携させるのが面白い.
• 鑑賞者の意志に関わらず勝手に次の情報に遷移してしまう.
• もう少しユーザーの行動について考えたほうが良い.
• いろいろなセンサーでセンシングしてみては.
• iBeacon の技術を応用できるのではないか.
全体的に高い評価と肯定的な意見が多く得られた. 操作の簡単さ, 鑑賞者を惹きつけるデザイン,
情報を端末に保存, 鑑賞者とサイネージのインタラクティブ性など, 開発の時点で重視していた点を実際に良いと指摘されたのは喜ぶべき点だと感じた. 逆に, 広告が画面サイズに対して小さい, 鑑
賞者の意志に関わらず勝手に次の情報に画面が遷移するのは鑑賞者の情報取得の妨げになっているという否定的な意見もあった. 我々は, 様々な情報を見てほしいという意味を込めて自動的に画面が遷移する仕組みとして制作したが, 鑑賞者によってはそれが悪い働きをする事もあるのだと知った. 一度このシステムを実際に利多くの人に利用してもらい, 画面遷移は必要なのか, また, デザインなども現在のままで良いのかどうか, 評価をとる必要があると感じた. また, 我々は今回触れな
かったが, Kinect の他にセンサーを利用してジェスチャーを認識する精度を上げる, iBeacon を用いる事により情報取得の手助けになる, など触れてはこなかったデバイスに関わる貴重な意見も頂いた. 発表技術に関してはデモを交えた聞きやすい発表だった, という意見ばかりだった.
（※文責: 藤倉稜）Group Report of 2016 SISP

- 13 -

Group Number 9

MOEMOEDigitalSignage2045〜Cogntion, DesignandCommunication〜

第 6 章 反省と展望
6.1

反省

反省点として大きく 3 点ある.
作業分担
制作物の作成に当たり, 大きく 3 つの作業があった. Unity を使ったインタラティブなコン
テンツ, Kinect による関節取得のためのコーディング, メインとなるデバイスに情報を送るシステム, この作業を進めて行くに当たり, グループメンバーで作業分担を行なったが, 作業の重みがあり Unity 担当であった柏木に作業が集中してしまった. 他のメンバーの Unityの知識不足により頼らざる得ない点があったものの, 一つ一つのオブジェクト制作など手伝えたのではないかと感じた.
スケジュール管理
後期初め, 制作物会議を行いどのような物を作るかグループメンバーで話し合った. しかし, 作るものがぼんやりとしており, ハッキリとしたビジョンを共有することができなかった. そこで実際に作りながら制作物を形取っていこうという方向性に決まった. しかしスケ
ジュールを立てず, 実際に制作物の作成に着手した結果, 実装が思うように進捗を生むことができず最終発表のギリギリまで実装を行う結果になってしまった. 制作物会議の時点でもう少し一人一人のビジョンを共有する方法があれば, もう少しスケジュールを固め, 作業ができたのではないかと感じた.
作業効率
制作物を作るに当たって授業時間では話し合いが多く実際にコードを書いたりする作業は学外での個人の作業になることが多かった. 話し合いを多くすることでグループ内でたくさんの意見が出てき, 制作物のビジョンが固まっていた. そんな中でも作業時間をもう少し授業
内で取ることができたら作業効率はアップしていたのだと感じた.
（※文責: 出水利治）

6.2

展望

今回私たちは, ジェスチャーによりサイネージから情報を得るというシステムを制作した. 今
後のこのシステムの展望は４つあると考えた.

• Android のみでの開発を行なったため, 様々なデバイスにも対応できるように iOS で対応も検討していく.

• デジタルサイネージだけでのシステムでは Kinect の可能性が狭まってしまうと考えられる
ため TV や紙媒体にも応用し, Kinect の汎用性を高め, 新たなデータ取得のシステムの可能性を考えていく.

• 今回はジェスチャーが２パターンしか用意することができなかったため, 他にも様々なジェスチャーにも対応し, 情報量を増やしていく.

Group Report of 2016 SISP

- 14 -

Group Number 9

MOEMOEDigitalSignage2045〜Cogntion, DesignandCommunication〜• サイネージから情報を得るというシステムを制作した. しかしそれだけではインタラクティ
ブな要素が足りなく感じた. そこでさらにデバイスからもデータの送受信ができたらよりその要素が高まると考えた.
以上今後の展望として設定した.
（※文責: 出水利治）

Group Report of 2016 SISP

- 15 -

Group Number 9