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

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

Project Name
MOE MOE Digital Signage 2045 〜Cogntion, Design and Communication〜

グループ名
グループ CGroup NameGroup C
プロジェクト番号/Project No.

9

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

類家怜央

Reo Ruike

グループリーダ/Group Leader
1014174

北山冬弥

Toya Kitayama

グループメンバ/Group Member
1014042

藤谷大輔

Daisuke Fujiya

1014047

大野玲陽

Hiroaki Ono

1014151

浦谷成敏

Shigetoshi Uraya

1014167

樋口鉄朗

Tetsuro Higuchi

指導教員
平田圭二

竹川佳成

田柳恵美子

寺井あすか

AdvisorKeiji Hirata

Yoshinari Takegawa

Emiko Tayanagi

提出日2017 年 01 月 18 日

Date of Submission
January 18, 2017

Asuka Terai概要
現在, 駅構内や商業施設内ではよくデジタルサイネージが使用されている. デジタルサイ
ネージとはディスプレイなどの電子的な表示機器を利用して広告などの情報を発信するシステ
ムのことである. 本プロジェクトは「もえもえデジタルサイネージ 2045」という名称で, デジ
タルサイネージを使用して「もっと人の心に響かせ, もっと人を楽しませる」ことをプロジェク
ト全体の目的として活動している. 前期の後半と後期の活動で私たちは「広告投稿機構開発班」として活動し, システム開発を行った. 公立はこだて未来大学 (以下, 本学とする)1 階エレベー
タ前に設置されている 8 画面のデジタルサイネージ活用して, システム開発を進めた. この班
ではデジタルサイネージにもっと人々を惹きつけ, 表示される情報をより効果的により多くの人に伝えることを課題として開発に取り組んだ. 第 1 に広告投稿のオープンプラットフォーム化である. 学内で不特定多数への情報発信の機会が少ない本学生のために自由に広告などの情報をデジタルサイネージに投稿できる新たな情報発信の機会を生み出す. 第 2 に超指向性ス
ピーカを用いた音声サイネージ方式の開発だ. 超指向性スピーカという特殊なスピーカを使用することで本学のデジタルサイネージにより目を向けさせる効果を生みだす. 私たちは課題解決のために, 以上の 2 つのシステムを開発した.
キーワード

デジタルサイネージ, 超指向性スピーカ, 広告投稿のオープンプラットフォー

ム化（※文責: 北山冬弥）-i-Abstract
Currently, digital signage is often used in the station premises and commercial facilities.The digital signage is a system that transmits information such as advertisement
by using electronic display devices such as display etc... This project is a system with
the name ”Moe Moe Digital Signage 2045”, we are working as a whole project aim touse digital signage and ”more to entertain for people, more to echo for people heart”.
Activities in the latter half of the previous term and late stage, we acted as ”advertisement posting mechanism development team” and developed the system. Working on the
8th screen digital signage installed at the public Hakodate Future University (hereafterreferred to as the university) before the 1st floor elevator, we promoted system development.This team worked on developing as an issue to attract more people to digital
signage and tell more displayed information to more people.The first is to make open
source advertisement posting platform. We create opportunities for new information
dissemination that allows us to post advertisements and other information freely to digital signage for our students who have few opportunities to disseminate information tounspecified people in the university.The second is to create a super directional speaker
used of voice signage method.To use special speaker called super directional speaker,
we can produce the eﬀect of turning our eyes on by digital signage at our university.In
order to solve the problem, we have developed the above two systems developed.
Keyword
Digital signage, Super directional speaker, Open source advertisement
posting platform（※文責: 北山冬弥）- ii -

目次
第1章

背景・目的

1

1.1

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

1

1.2

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

2

目的達成のための課題設定

3

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

3

2.1.1

オープンな広告投稿 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

3

2.1.2

表示内容の効果的な切り替えと更新. . . . . . . . . . . . . . . . . . . . .

3

2.1.3

デジタルサイネージへの音声の組み込み . . . . . . . . . . . . . . . . . . .

4

課題への担当振り分け . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

4

第3章

課題解決プロセス

6

3.1

月ごとの作業過程. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

6

3.2

担当ごとの課題解決過程 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

7

第2章

2.1

2.2

第4章

成果物と考察12

4.1

成果物の説明 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

12

4.2

広告投稿システム. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

12

4.2.1

サーバー, データベース . . . . . . . . . . . . . . . . . . . . . . . . . . . .

12

4.2.2

タブレット側システム . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

14

4.3

広告表示システム

4.3.1. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

ディスプレイへの表示、並びに各広告に紐づいた情報の取得

15. . . . . . . .

15

超指向性スピーカを用いた音声システム . . . . . . . . . . . . . . . . . . . . . . .

16

4.4.1

音声出力時の超指向性スピーカ使用法 . . . . . . . . . . . . . . . . . . . .

16

4.4.2

音声出力時のプレイヤ使用法 . . . . . . . . . . . . . . . . . . . . . . . . .

17

最終成果発表会でのプレゼンテーション . . . . . . . . . . . . . . . . . . . . . . .

18

まとめ

20

5.1

プロジェクト活動全体への反省 . . . . . . . . . . . . . . . . . . . . . . . . . . .

20

5.2

今後の展望 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

20

付録

22

6.1

個人の使用した技術 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

22

6.2

役に立った講義 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

22

6.3

その他制作物 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

23

4.4

4.5
第5章

第6章

- iii -

MOE MOE Digital Signage 2045 〜Cogntion, Design and Communication〜

第 1 章 背景・目的
1.1

背景

人々に物事を伝えるための手段として, ポスターや新聞など, 様々な広告媒体が存在している. その中でも, デジタルサイネージと呼ばれる形態の広告が現在普及し始めている. これは, あらゆる場
所でディスプレイなどの電子的な表示機器を用いて情報を発信するシステムのことである. 従来の紙媒体を用いた広告では, 動的には内容が変化しない静的な情報しか掲載できなかったが, デジタ
ルサイネージでは, 時間に応じた画面の切り替えや動画といった動的な情報を提供することができる. また, ネットワーク等を利用して, 時々刻々と変化する情報を取得し提供できることも魅力の 1つである. これらの特徴から, デジタルサイネージは従来の紙媒体を用いた広告に比べ, 人々の目を惹きやすい仕組みが施されているといえる.
本学においても, 1 階と 3 階にデジタルサイネージが設置されており, 動的な情報を閲覧することができる. しかし, そこには 2 つの課題があると我々は考えた. 1 つは, デジタルサイネージに対する人々の興味を維持し続けることが難しいという点である. デジタルサイネージを用いた広告であれば, 従来の紙媒体を用いた広告に比べ, 人の目を惹くことはできるものの, 時間が経過してしまう, 表示される内容があまり更新されない等の条件により, 人々の興味を維持し続けることが難し
くなってしまう. 本学においても, デジタルサイネージに表示される内容は更新される機会が少な
く, 見慣れてしまうと改めて注目する機会は少なくなってしまう. そして, もう 1 つの課題は, デジ
タルサイネージ自体に目を向けさせるための仕組みを設けるべきだという点である. デジタルサイ
ネージには目を惹く仕組みが施されているものの, 上でも記述した通り, 時間が経ってしまったり,
見慣れてしまったりすると, 改めて注目してもらうことが難しくなってしまう. このような状況においても, デジタルサイネージに対する人々の興味を維持し続けるために, デジタルサイネージ自体に目を向けさせるための仕組みを設けるべきだと我々は考えた. デジタルサイネージ自体に目を向けさせる仕組みの 1 つとして, 音声を用いる方法が挙げられる. 音声による刺激があれば, デジ
タルサイネージの周囲を通りかかった人々の注目をより集めることができる. また, 広告の内容と音声が連動している場合, 広告の内容が更新されれば音声もそれに対応して変化するため, 人々の注目を集めやすくなると考えられる. しかし, 実際に音声を流そうとしても, 騒音等の問題により実施できないというのが現状である.
また, 本学における問題として, 学生が気軽に情報を発信することが難しいという点が挙げられる. 本学では, サークル活動等の情報を発信しようとした場合, 主な手段としては学内で用いられているメールがあるが, 学生がメールで情報を発信するためには事務局にて審査を受ける必要があり,
手軽に情報の発信を行うことができない. また, メールで情報を発信することができたとしても, 情報を受け取ってもらうためには, メールを読んでもらうという受け手の手間が必要であり, 情報を受け取ってもらうことが難しくなっている. 情報を手間なく受け取ってもらうには, デジタルサイ
ネージ等の広告媒体が効果的であるが, 本学では学生が自由にデジタルサイネージを用いることができないというのが現状である.
（※文責: 大野玲陽）Group Report of 2016 SISP

-1-Group Number 9

MOE MOE Digital Signage 2045 〜Cogntion, Design and Communication〜

1.2

目的

1.1 にて述べた問題点を解決するためには, 人々の興味を維持し続ける, 自然と人々の注目を集めるという 2 つの特徴を持つデジタルサイネージと, 学生が気軽に情報を発信しそれを受け取ってもらうことができる仕組みが必要である. そこで, 我々の班は, 本学 1 階に設置されているデジタル
サイネージを用いて, これらの特徴と仕組みを併せ持つ新たな広告投稿機構を提案することとした.
今回は, 広告をわずかな手順で投稿できる Web ベースのオープンプラットフォームを開発することで, 従来に比べ情報を広告として手間なく発信できる仕組みを目指した. そして, 投稿された広告を自動的にディスプレイに表示するためのシステムを開発し, ディスプレイに表示する広告の切り替えと更新を適度に行うことで, 学生が投稿した広告を, ディスプレイの周辺を通りがかった
人々に手間なく受け取ってもらうとともに, デジタルサイネージに対する人々の興味を維持し続けることを目指した. また, 投稿できる広告を動画のみに絞り, 超指向性スピーカを用いてディスプレ
イの周辺へ局地的に動画の音声を届けることで, 人々の心をより惹きつけるとともに, ディスプレ
イの周辺を通りがかった人々の注目を自然と集められるような環境を目指した.
このシステムにより, 学生が手間なく人々の注目を集める広告を投稿できるようになり, 本学 1階に設置されているデジタルサイネージを中心に, 人々が活発に情報の交流を行うようになると考えられる.
（※文責: 大野玲陽）Group Report of 2016 SISP

-2-Group Number 9

MOE MOE Digital Signage 2045 〜Cogntion, Design and Communication〜

第 2 章 目的達成のための課題設定
2.1

課題設定

2.1.1

オープンな広告投稿

私たちはまず第 1 の目的達成のために自由に誰でもデジタルサイネージに広告を投稿できるプ
ラットフォーム環境を整えることが必要であると考えた. 専用のサイトにアクセスして入力するだ
けという簡単なプロセスで, 投稿者を増やすことができる. 投稿用フォームから広告の掲載期間や広告タイトル, 説明文, 再生させるインタラクティブコンテンツを入力して, 送信するだけで, デジ
タルサイネージでこれらの広告が自動的に表示されるという手軽かつ簡潔な仕組みの実装を目指した.
現在のデジタルサイネージの主流な仕組みでは図１のような形で実装している場合が多い. しかしながら, 最終発表会までの約 2 ヶ月半という比較的短い時間で技術を学び, 実装しなければならないという時間的問題がある. ウェブベースの広告投稿システムの 1 からの開発, 投稿されたデータを保持・管理しておくデータベースの設計, 更には動画や写真をデジタルサイネージに表示できるようにするシステムの開発等, 学ばなければ実装すら出来ない技術が大量に必要になってくると分かった. 勉強しながらの実装では発表までに間に合わせることは不可能であると結論付けた. そ
こで, 既に提供されているウェブサービスやその WebAPI を用いることで勉強しなければならな
い技術を減らし, 既に習得済みの技術の延長で実装可能なシステムを設計・開発することで工期を短縮する方針を固めた.

図1

広告投稿システムの設計（※文責: 樋口鉄朗）

2.1.2

表示内容の効果的な切り替えと更新

デジタルサイネージに対する人々の興味を維持し続けるためには, ディスプレイに表示する内容に変化を与えることが効果的だと我々は考えた. そのために今回は, 2.1.1 にて説明のあった, 手軽に広告を投稿できる仕組みを利用し, 投稿された広告をディスプレイに表示することとした. 本学Group Report of 2016 SISP

-3-Group Number 9

MOE MOE Digital Signage 2045 〜Cogntion, Design and Communication〜
1 階に設置されているデジタルサイネージは 8 枚のディスプレイを用いているため, 投稿された広告を 8 つのディスプレイへと振り分け, それぞれのディスプレイで振り分けられた広告を切り替えて表示することで, 表示する内容を変化させることとした. また, 広告に表示する期間を定め, その期間を過ぎると対応した広告が表示されないようにすることで, 情報が古くなった広告をなくし,
ディスプレイに新しい広告が表示されやすくなるようにすることとした.
（※文責: 大野玲陽）

2.1.3

デジタルサイネージへの音声の組み込み

前期のデジタルサイネージ習作において, 制作した 3 つのサイネージを実装・演示したが, なか
なか多くの人の興味を引くことができなかった. どんなに素晴らしい内容でも, やはり見てもらえなければ意味がない. デジタルサイネージとして流していても歩行者が見ることなく, ただ通過してしまっていては意味がない, という反省があった. そこで人の目を惹くデジタルサイネージは何か, ということを班員で話しあった結果, 音声が流れるデジタルサイネージに着目した. 音声を聞いて歩行者の注意をデジタルサイネージに引きつけることができれば, 人の行動を変えたことになると考えた. そこで, 私たちは, 前期のデジタルサイネージ習作の際に, 作成はしていたものの利用することが出来なかった超指向性スピーカに目を付けた. 後期に本学 1 階の 8 面ディスプレイのデジ
タルサイネージにこの超指向性スピーカを本格的に実装しようと考えた. 課題として, 音声を出す
際に広域に音声が聞こえてしまうと, 周りの研究室や共有スペースを利用している人たちの迷惑になってしまう. そこで超指向性スピーカを使うことで局所的な場所にだけ音声を流し, デジタルサ
イネージ前を通過した人にだけ音声を聞かせることが重要であると考えた.

図2

超指向性スピーカ（※文責: 浦谷成敏）

2.2

課題への担当振り分け

3 つの課題に対して, 以下のような班構成で作業にあたった.
後期前半 (10 月)
・システム班：浦谷, 樋口, 藤谷Group Report of 2016 SISP

-4-Group Number 9

MOE MOE Digital Signage 2045 〜Cogntion, Design and Communication〜
・ウェブサイト班：大野, 北山
・音声班：浦谷, 北山, 藤谷
後期後半 (11 月から 12 月)
・システム班：樋口・表示システム班：大野・音声班：浦谷, 北山, 藤谷
後期前半においては, システム班は, Google フォームで受け付けた投稿を Google App Scriptを用いてスプレッドシートでデータベース化し, JavaScript Object Notation(以下, JSON) を介
して YouTube の再生リストに登録する一連の広告投稿システムの作製を担当した. ウェブサイト
班は, 投稿された広告をウェブサイト上で再生するための HTML の作製, また, 過去の広告投稿のアーカイブサイトの作製を行った. 音声班は, 超指向性スピーカの作製, また, 音声作成システムの作製を行った.
後期後半は, システムの完成の目処が立ったところで班構成を変え, 進捗が遅れていた班を兼任していた浦谷と北山, 藤谷が音声班に専念することとなった.
（※文責: 藤谷大輔）

Group Report of 2016 SISP

-5-Group Number 9

MOE MOE Digital Signage 2045 〜Cogntion, Design and Communication〜

第3章
3.1

課題解決プロセス

月ごとの作業過程

7月
・前期に主に活動していた習作班を解散し, 広告投稿機構開発班として活動開始
・開発システム決定に向けての話し合い (全体)・本学オープンキャンパスに向けた展示物についての話し合い (全体)・本学オープンキャンパスに向けた展示物の制作 (全体)8月
・本学オープンキャンパスに向けた展示物の制作 (全体)・本学オープンキャンパスで高校生に向けたプロジェクト紹介 (全体)9月
・開発システム概要決定に向けての話し合い (全体)
・先生方にアドバイスをいただき, 話し合う (全体)・開発システムの概要を大まかに決定 (全体)・開発システムの仕様設計 (樋口)・デジタルサイネージで音声出力するために使用する超指向性スピーカを制作 (北山, 藤谷,
浦谷)
・超指向性スピーカのケースの制作 (北山)・投稿された広告を表示するディスプレイのレイアウトの考案と作成 (大野)・GoogleAppsScript 上でデータベースと各種データ配信機能を WebAPI によって実装, そのまま HTML 上で広告を再生させる状態まで実装 (樋口)・公立はこだて未来大学, 小樽商科大学, 帯広畜産大学, 北見工業大学の 4 大学が合同で開催
した北の 4 大学合宿に参加し, ビジネスプランについて学ぶ (藤谷)10 月・デジタルサイネージで音声出力するために使用する超指向性スピーカを制作 (北山, 藤谷,
浦谷)
・超指向性スピーカの音が届く距離や範囲の調査 (全体)・超指向性スピーカのケースの制作 (北山)・投稿された広告を表示するディスプレイのレイアウトの考案と作成 (大野)・動画の URL と画像の URL を見分けるための正規表現の開発 (藤谷, 浦谷)
・動画を再生する際に利用する Youtube の URL から動画 ID と呼ばれるユニーク ID を自動抽出して Google スプレッドシートに書き込む機能を実装 (樋口)・高校生に向けた開発中システムのプレゼン (全体)11 月
・活動方針の変更により, ディスプレイのレイアウトの考案と作成に加えて, JSON 形式のデータの受け取りを担当 (大野)・データ受け取りと同時に, YouTube Iframe Player API を用いた, YouTube の再生リス
ト内の動画の再生の制御を担当 (大野)Group Report of 2016 SISP

-6-Group Number 9

MOE MOE Digital Signage 2045 〜Cogntion, Design and Communication〜
・広告を表示する為のウェブサイトを別途レンタルサーバーに制作・設置 (樋口)・Youtube の再生リスト機能を使って広告の再生順番を管理 (樋口)・広告掲示期間を基にした広告管理・Youtube Data API v3 を利用して再生リストを自動構築 (樋口)・パソコンの内部で複数の音声を出力する方法を模索し, Media Player Classic Black

Edition を使用することで可能にすることを考案 (北山, 藤谷, 浦谷)
12 月
・YouTube Iframe Player API を用いた, YouTube の再生リスト内の動画の再生の制御(大野)・成果発表会に向けた, ポスターの制作の補助 (大野)・成果発表会における, システム関連の発表を担当 (大野)・投稿されている広告を一覧で表示して確認できる専用ウェブサイトを構築 (樋口)・広告情報をオブジェクト化した任意の JSON データが取得できる WebAPI を実装 (樋口)・動画を再生できる Youtube 再生機能を実装 (樋口)・成果発表に向けたポスター制作 (北山, 藤谷, 大野, 浦谷)
・プロジェクト全体発表で用いるパワーポイントのスライドの制作・校正 (藤谷, 浦谷)
・広告投稿システムのデモ動画の制作 (北山, 浦谷)
・最終成果発表の宣伝のために FM いるかの番組に出演 (北山, 藤谷, 浦谷)
・最終成果発表会 (全体)
・はこだてみらい館に訪問してビジネスプラン案を発表 (藤谷)・北の四大学ビジネスプラン発表会に参加し, ピアノプロジェクションマッピング班が作製した成果物を用いたビジネス展開を考案, または発表スライドと発表原稿を作成し, 発表会
当日にはプレゼンターを務めた.(藤谷)・報告書の作成 (全体)（※文責: 藤谷大輔）

3.2

担当ごとの課題解決過程

北山冬弥
主に超指向性スピーカを使用した音声システムの開発と最終発表のポスター制作を担当
した.

7 月にこのグループの活動が開始された際にグループリーダに立候補してリーダになった.
前期の残りの期間で, 後期にどんなシステムを作るかを話し合った.
後期に入り, 9 月の間も話し合いをし, また, 先生方に相談や意見をもらい, 新しいコンテンツではなく既存のシステムをよりよく改良することにした. 前期の習作で制作したイベント
情報表示システムを学生が広告を自由に投稿できるように, より人の目を惹くようにシステ
ム開発をすることに決定した. そこで私は人の目を惹くための超指向性スピーカの制作とケースの制作, タブレット用サイトの制作を担当した.
超指向性スピーカ関連の制作とタブレット用サイト制作は 10 月も行った. 超指向性スピー
カを複数使用するため, 半田ごてを使用してスピーカの制作にとりかかった. また, 超指向性
スピーカ用のケースを自作した. 制作するにあたってスピーカのモデリングを行い, サイズ

Group Report of 2016 SISP

-7-Group Number 9

MOE MOE Digital Signage 2045 〜Cogntion, Design and Communication〜が合うように設計した. そこからモデリングしたものをレーザーカッターを使用し, アクリ
ル板を素材としてケースを制作した. このケースも超指向性スピーカの使用台数分用意した.
また, タブレットサイトの制作もスピーカと同時に行った. 広告動画を埋め込み, 詳細とともに提供するというものだ.HTML, CSS, JavaScript を使用した. 機能の追加として SNS サイ
トによくあるいいねボタンの実装も行った. これは PHP を使用して実現させた. サーバ上にいいねされた回数を書き込んだファイルを置いておき, それを読み込むことで値を保存・表示するというものだ. ここまで制作したが, 実際に動画情報や詳細をサーバから取ってくることができず, このタブレット用サイトの制作を樋口に託した.

11 月は超指向性スピーカの配置や使用法を考え, 実際に検証を行った. 音声分割のためにプ
レイヤをインストールし実際に分割できるか, 音声をどの画面から出せば音声同士が干渉せずに聞こえるかを検証した.

11 月, 12 月は通して最終発表用にポスターの制作を行った. 見た人に伝わりやすいようにインフォグラフィック素材を制作した. また, 文章は一目で読みやすいものにし, 全体のレイ
アウトも空白をうまく使うように試行錯誤した. 何度も先生方に添削してもらい, 改善した.
完成するころには最初のものとは見違えるわかりやすいポスターができた.
最終発表直前には広告投稿オープンプラットフォームの使用法のデモ動画を制作した. また,
プロジェクト最終発表の宣伝をするために FM いるかに出演し, もえもえデジタルサイネー
ジ 2045 の活動でどんなシステムを開発してきたかを説明した. そして最終発表当日は発表
時間の前半・後半で分けられているうちの前半でプレゼンターを務めた.
（※文責: 北山冬弥）
藤谷大輔
主に, 音声再生のための環境整備を担当した.

9 月は, 公立はこだて未来大学, 小樽商科大学, 帯広畜産大学, 北見工業大学の 4 大学が合同で開催した北の 4 大学合宿に参加し, ビジネスプランについて学び, プロジェクト学習での成果物をビジネス展開するためのノウハウを学んだ.

10 月は, 超指向性スピーカの活用方法を模索した. また, 広告投稿フォームで動画 URL や
画像 URL が適するフォーマットになっているかを判定するための正規表現の開発を行った.

11 月は, パソコンの内部で複数の音声を出力する方法を模索した. コンピュータに保存してある動画を再生するのではなく, 動画投稿サイト YouTube 上でストリーミング再生することを想定していたので, 即時に処理できる方法を考えた. 担当教員の方々と相談した結果, 動
画再生アプリ Media Player Classic Black Edition を用いることとなり, その使用方法を習得した. また, ネット回線に安定して接続するために, 1 階エレベータ前に設置してあるコン
ピュータを有線 LAN で接続した.

12 月は, 最終発表に向けてグループ発表のポスターや全体発表で用いるパワーポイントのスライドの校正を担当した. また, 最終発表会前日にラジオ放送局 FM いるか内の番組に出演し, プロジェクト学習の概要や発表会を函館市民の方々に向けて発信した. 最終発表後には北の 4 大学ビジネスプラン発表会に参加した. そこでは, ピアノプロジェクションマッピ
ング班が作製した成果物を用いたビジネス展開を考案した. その中で, 函館駅付近にあるは
こだてみらい館に訪問してその案を発表し, ビジネス展開に対するアドバイスをいただいた.
その後は発表会に向けて準備を進めた. 特に私は発表スライドと発表原稿を作成した. 発表
会当日にはプレゼンターを務め, 発表に対して技術賞をいただいた.

Group Report of 2016 SISP

-8-Group Number 9

MOE MOE Digital Signage 2045 〜Cogntion, Design and Communication〜（※文責: 藤谷大輔）
大野玲陽
主にディスプレイに映す HTML ファイルのレイアウトの考案と作成, 及び YouTube Iframe

Player API を用いた YouTube の再生リスト内の動画の再生等に関する制御を担当した.
9 月と 10 月は主に, ディスプレイに映す HTML ファイルのレイアウトの考案と作成を行った. 今回用いる, 本学 1 階に設置されているデジタルサイネージは 8 つあるため, すべて同
じレイアウトで統一するよりも, 広告の投稿者が好きなレイアウトを選択できる方が, 投稿される動画に適したレイアウトになるのではないかと考え, 8 つのレイアウトを考案し, 順次作成していった. 1 つ目のレイアウトは動画のみを映すものであり, 動画自体にタイトルや詳細がすべて盛り込まれている場合は, その動画のみを表示しようと考えた. 2 つ目のレイ
アウトは, L 字型放送画面を模したものであり, 動画のサイズを縮小し, 余白部分に, 動画に紐づいた各情報を表示するものである. 情報を流す箇所では, 情報の文字量が多くてもレイアウトが崩れないように, MARQUEE と呼ばれる, 文字を左右にスクロールさせる HTMLのタグを用いた. このタグは最終的なレイアウトにも用いられている. 3 つ目のレイアウト
は, VOCALOID や VOICEROID が動画に紐づいた各情報を吹き出しの中での台詞として話すというものである. このレイアウトでは, 画面の中央に動画を配置し, 画面の左上と右下に２人のキャラクターを配置する. ２人のキャラクターの隣には吹き出しを用意し, 動画の再生に合わせて吹き出しの中に動画に紐づいた各情報を台詞として表示するというものである. この時点ではまだ, 動画に紐づいた各情報を受け取る仕組みができていなかったので,試作品として, 動画にはアニメーションのオープニングを用い, 台詞にはオープニング曲の歌詞をあらかじめ用意して, アニメーションの進行に合わせて２人のキャラクターが歌詞や広告としての情報を口ずさむというものを作成した. このレイアウトは実装には至っていな
いが, 台詞を書き換えるタイミングを不規則に変化させないのであれば, 十分に実現可能なレイアウトであることが確認できた. この期間に作成できたレイアウトはこれらのみであり, 最終的なシステムではレイアウトを 1 つのみにしてあるが, レイアウトを広告者が選択できるようにすることは可能であることを確認できた. また, この期間で, ディスプレイには広告としてどのような情報を表示するべきなのかを学ぶことができた. 加えて, この期間
は, HTML ファイルのレイアウトの考案と作成の暇を見て, 超指向性スピーカの音が届く距
離や範囲の調査を行った. この調査により, 超指向スピーカの音は反射を利用することで届く範囲をある程度制御できることが判明した.

11 月は, 活動の方向性に変化があり, これまで別の班員が担当していた, JSON 形式で存在している, 動画に紐づいた各情報を取得するための JavaScript の勉強と実装も担当することになった. JSON 形式のデータに関しては扱ったことがなく, 11 月は下旬まで勉強することに必死で実装に至ることができなかった. また, この時期から本格的に YouTube 上の動画をウェブサイトに埋め込むための方法を勉強し始めた. 投稿された複数の動画を扱うための方法を考え, YouTube の再生リストを用いてはどうかという提案に至った. そして, ウェ
ブサイトに YouTube の再生リストを埋め込み, 再生リスト内の動画に関する制御を行うには YouTube Iframe Player API と呼ばれるものを用いる必要があると知り, そちらの勉強と実装も行うこととなった. YouTube Iframe Player API は実用された例が少なく, 公式のサイトを参考にしながら試行錯誤を繰り返し, 少しずつ実装していくこととなった.

11 月の下旬から 12 月は, これまで勉強してきた JSON 形式のデータの受け取りと YouTube
Iframe Player API を用いた制御の実装を行った. また, それと同時に, 成果発表会に必要なGroup Report of 2016 SISP

-9-Group Number 9

MOE MOE Digital Signage 2045 〜Cogntion, Design and Communication〜
ポスターの作成の補助として, 我々が開発してきたシステムを図解して理解の手助けをしたり, ポスターに掲載する情報の表現を考案したりした. 成果発表会では, 広告の投稿に関するシステムの発表を担当し, 広告としての動画が投稿されてから, その動画がディスプレイに反映されるまでの一連の流れをデモとして実演した.
（※文責: 大野玲陽）
浦谷成敏
デジタルサイネージ制作における話し合いに参加, 超指向スピーカの音声の範囲調査, デジ
タルサイネージ用 PC の音声振り分け方法の提案及びデジタルサイネージ用 PC の有線化,
ポスター制作の補助, 全体スライドの制作を担当した.

9 月はどんなデジタルサイネージを作るかについての話し合いに参加した. 先生方にも話し合いに加わってもらい, 最初から全部を作るのではなく, 前期のデジタルサイネージ習作班のシステムを改良するという形で作っていこうと決めた.

10 月は超指向性スピーカをどのように設置すればどの距離まで音声が届くのか, といったことを検証した. また, 使用する配線が足りなかったので, どの配線が必要であったかチェックを行った. また, 投稿用の Google フォームの作成を行った. 加えてそのフォームで使うための動画の URL と画像の URL を見分けるための正規表現の開発などを行った.

11 月はどのようにすれば音声の振り分けを行うことが出来るのかを考えた. また, その際に
1 つのパソコンから 2 つ別々のスピーカから音声を出すにはどうすればよいのかを調査し,実際に実験を行った. また, デジタルサイネージ用パソコンが無線 LAN でしか繋がってな
く, 広告投稿をする際に非常に回線が重くなる可能性があったため, 有線 LAN を接続した.

12 月は最終発表用のポスターの制作の補助を行った. 具体的には, 出来てきたポスター案に対しての意見を出したり, 修正点を考えたりした. 他には, 最終発表用のデモ映像撮影を行い, 出演もした. また, 全体発表用のスライド制作も前期に引き続き行った. こちらは最初,
スライド数としてはやや多かったものの, 発表練習の際に 1 枚当たりの情報量を多くして, 1枚に用いる時間を長くした方がよいとの意見を頂いたため, 枚数は少なめだが密度が濃いス
ライドを制作することが出来た. 実際に最終発表では後半の全体スライドのプレゼンターを務め, グループとしての発表では補助に回った. 最終発表の前日には, FM いるかの番組に出演して, 函館市民の方々に向けてプロジェクトの宣伝を行った.
（※文責: 浦谷成敏）
樋口鉄朗
広告投稿システムの投稿されてからデータを取得する機能の実装・動画 ID の抽出などのシステム開発や開発全体の統制, ウェブサイトの制作を担当した.

9 月から前期での活動を基に広告投稿システムを作ることを決定し, 自分が中心となって仕様設計を行った. 最終発表まで 2 ヶ月の期間で開発するため, 既に出来上がっているサービ
スや提供されている機能を用いて完成度を高めることと工期の短縮を同時に達成させるべ
く, GoogleAppsScript 上でデータベースと各種データ配信機能を WebAPI によって実装し, そのまま HTML 上で広告を再生させる状態まで実装を試みた.

10 月には Google フォームに書かれた情報のうち, 動画を再生する際に利用する Youtubeの URL から動画 ID と呼ばれるユニーク ID を自動抽出して Google スプレッドシートに書き込む機能を実装した.

Group Report of 2016 SISP

- 10 -

Group Number 9

MOE MOE Digital Signage 2045 〜Cogntion, Design and Communication〜
11 月前半には先述した HTML を GoogleAppsScript 上から生成すると機能に制限が出る
ことが発覚したこと, HTML 上で広告を再生させる順番を管理するのは実装が難しいこと,
タダの広告投稿システムでは面白みに欠けることなどから, 仕様を変更した. 主な変更内容
としては, 広告を表示する為のウェブサイトを別途レンタルサーバーに制作・設置すること,

Youtube の再生リスト機能を使って広告の再生順番を管理すること, 一部デジタルサイネー
ジから超指向性スピーカによって音声を流す仕組みの構築である.

11 月後半では超指向性スピーカを用いる機能以外を全て実装し, 広告掲示期間を基にした
広告管理・Youtube Data API v3 を利用して再生リストを自動構築することによる広告の再生管理の自動化をさせた. また, 広告データをパラメータを付与した専用のウェブサイト
からアクセスすることで広告情報をオブジェクト化した任意の JSON データが取得できる

WebAPI を実装した.
12 月には, 投稿されている広告を一覧で表示して確認できる専用ウェブサイトを構築した.
このウェブサイトには各広告に対して評価を行う「いいね機能」や, 広告に使われている動画を再生できる Youtube 再生機能が実装出来た.
（※文責: 樋口鉄朗）

Group Report of 2016 SISP

- 11 -

Group Number 9

MOE MOE Digital Signage 2045 〜Cogntion, Design and Communication〜

第4章
4.1

成果物と考察成果物の説明プロジェクト活動を通して, いくつかの成果をあげることができた.
第 1 に, 誰でも気軽に広告投稿できる, Web ベースのオープンプラットフォームを開発した. こ
れは、ユーザである学生が広告としての動画とその詳細情報を投稿することで, 本学 1 階のデジタ
ルサイネージにそれらが表示されるというものである. 投稿された動画は, YouTube Data API v3
によって YouTube 上の専用の再生リストに追加される. 動画以外の詳細情報は, 動画の YouTube
上の videoID と紐づけを行った上で、データベース上で管理される. そして, これらの管理された情報を, 後述するディスプレイへの表示システムが取得し, デジタルサイネージへの表示を行う. このオープンプラットフォームは, GoogleAppsScript や WebAPI, YouTube Data API v3 を用いて開発された. 加えて, デジタルサイネージの横に設置するタブレット用の Web サイトも, このプ
ラットフォームを利用して制作した. この Web サイトは, デジタルサイネージに表示される広告を再び見たい場合や, 詳細を知りたい場合に利用することができる. GoogleAppsScript から動画やその詳細情報を取得して掲載しており, 新たな広告が投稿され情報が追加された際には, その情報がタブレット用の Web サイトにも同時に追加されるような仕様になっている.
第 2 に, ディスプレイへの表示システムを開発した. このシステムでは, YouTube Iframe Player

API と前述した Web ベースのオープンプラットフォームのシステムにて管理された情報を用いて,ディスプレイ上での広告の表示を行う. ディスプレイ上では, 広告としての動画が内包されている,

YouTube 上の再生リストを映し, YouTube Iframe Player API を用いて制御を行うことで, 広告の切り替えと情報の更新を行う. 加えて, 動画が切り替わる度にデータベースにリクエストを行い,
現在映っている広告に紐づいた詳細情報を取得することで, 動画とともにその詳細情報を同時に提供する.
第 3 に, 超指向性スピーカを用いることで, デジタルサイネージからの音声出力を実現した. 超指向性スピーカは, 一般的に使用されているスピーカとは異なり, 音声が届く範囲が限られている.
今回はこの性質を利用し, 本学 1 階のデジタルサイネージの上に設置することにより, デジタルサ
イネージの前を通りがかった人にのみ動画の音声が届くように工夫した. これにより, デジタルサ
イネージの前を通りがかった人がよりデジタルサイネージに目を向けるようになると考えられる.
また, 特定のプレイヤを用いて動画を再生することで, 1 つの PC から複数の音声を出力することを可能にした. そして, 超指向性スピーカと併せて用いることで, 各ディスプレイの前ではそのディスプレイの音声のみが聞こえるように工夫した.
（※文責: 北山冬弥）

4.2

広告投稿システム

4.2.1

サーバー, データベース

技術解説

Group Report of 2016 SISP

- 12 -

Group Number 9

MOE MOE Digital Signage 2045 〜Cogntion, Design and Communication〜• GoogleAppsScript
今回プロジェクト内で作成したシステムはほぼ全てを GoogleAppsScript と呼ばれる

Google 株式会社 (以下, Google) が提供するサーバーサイドスクリプトを使用している.Javascript とほぼおなじ構文で利用でき, Google が提供する各種サービスのほとんどが利用できる各種関数・オブジェクトを扱うことができる. 樋口が一度使ったことがあることから採用するに至っている. 以降の項ではこれを GAS と呼ぶ.

• WebAPI
ウェブサイトやサーバー上から別のサーバーへアクセスして情報を取得する際に GETまたは POST 処理を行う. これを行う際にパラメータを付与してリクエストを行うとその処理を実行した結果がサーバーから返ってくる仕組みのことである. この WebAPIを GAS 上で実装しており, リクエスト結果を JSON 形式で広告データを送信する. 本システムでは図 3 の形で実装している.
機能解説• 投稿フォームの実装
まず, 広告投稿フォームはサイトを自分たちで作らずに Google フォームを利用した. これはアンケートを取る際によく用いられる Google が提供するサービスであるが, これを利用すると広告を受付したのち, Google スプレッドシートという表計算ドキュメン
トファイルに自動的に書き込まれる一連の流れが既に自動化されているものである. また, 広告と一緒に表示するインタラクティブコンテンツとして動画を事前に Youtubeにアップロードした後, その動画を開ける URL をフォームに入力するよう求められる.
次項でも述べるが, この動画 URL から動画ファイルを Youtube から取得できるようにしている.

• 動画アップロード・引用機能の実装
前項で述べた通り, デジタルサイネージ向けのインタラクティブコンテンツとして動画を表示させるために Youtube の広告に表示させるための動画を開く URL を投稿
フォームへ入力を求められる. この URL には Youtube 上の動画に一意に割り振られるユニーク ID が割り振られており, これを videoID と呼ぶ.GAS を用いてこの videoID
を URL から正規表現を用いて抽出したのち, 動画 URL 以外の投稿データと共にスプ
レッドシートに書き込まれる. また, 書き込まれるのと同時に私たちが用意している再生リストへ動画を挿入することで投稿された広告の順序管理を再生リスト上で行う.

• データベースの実装
投稿フォームの実装（番号に置き換える）の項で説明したとおり, 広告投稿データは全て Google スプレッドシート上に１件を１行とし, １行ずつ書き込まれていく. 投稿
フォームに入力された広告掲載期間を基に期間外になった広告を, GAS を用いて定期的に削除する.
（※文責: 樋口鉄朗）

Group Report of 2016 SISP

- 13 -

Group Number 9

MOE MOE Digital Signage 2045 〜Cogntion, Design and Communication〜

図3

4.2.2

広告投稿システムの概要

タブレット側システム

GAS から現在掲載されている広告の一覧を WebAPI で取得をし, 一覧で縦覧できるようにする
ことでデジタルサイネージを見て気になった情報をあとからじっくり見ることが可能になると考え実装した（図 4）. また, 情報を一覧で見れるだけでなく, 直感的に便利な, いい情報だと思ったものを「いいね」ボタンを押して評価ができるようになっている. 一人何回でも「いいね」ができ, 最大で 999 回まで「いいね」できる. また, 広告内の動画をタブレット上で見ることも可能で, これらの機能の組み合わせで広告縦覧・評価ができる様になっている.

図4

タブレットサイト画面（※文責: 樋口鉄朗）

Group Report of 2016 SISP

- 14 -

Group Number 9

MOE MOE Digital Signage 2045 〜Cogntion, Design and Communication〜

4.3

広告表示システム

4.3.1

ディスプレイへの表示、並びに各広告に紐づいた情報の取得

今回, 投稿された動画を表示するために用いる, 本学 1 階に設置されている 8 枚のディスプレイ
では, サーバー上に置かれた HTML ファイルを表示する. HTML ファイルは 8 つ用意されており,

8 枚のディスプレイと 8 つの HTML ファイルが 1 対 1 で対応している.
HTML ファイル内の記述は主に, ディスプレイに表示する内容が記述された部分と, 広告の動画に関する制御を行うための部分の 2 つで構成されている. また, HTML ファイルとは別に, HTML
ファイルのレイアウトを整えるための簡易な CSS ファイルも用意した.
ディスプレイに表示する内容が書きこまれた部分は, HTML ファイルの body タグ内に記述されている. 記述の具体的な内容としては, この広告の表示がプロジェクト学習の一環であるということの説明, 投稿された動画が内包されている YouTube の再生リストを表示する箇所, 4.2.1 にて説明のあったフォームにて入力される, 各動画に紐づいた動画タイトルと詳細を表示する箇所がある. 4.2.1 にて説明のあった YouTube の再生リストは 8 つ用意されており, これらもまた 8 つのHTML ファイルと 1 対 1 で対応している.
広告の動画に関する制御を行うための部分は, HTML ファイル内の script タグ内に JavaScriptを用いて記述されている. ここでは, 通常の JavaScript に加えて YouTube Iframe Player APIと呼ばれるものを用いる. これは, YouTube の動画や再生リストをウェブサイトに埋め込み,

JavaScript で制御を行うためのものである. 4.2.1 にて説明のあった通り, 投稿された広告用の動
画は YouTube の再生リスト内に追加されていく. 再生リストをウェブサイトに埋め込むだけであれば YouTube Iframe Player API を用いる必要はないが, 再生リスト内の各動画に紐づいた動画
タイトルや詳細を YouTube ではない場所から取得して併せて表示する, 新たに再生リストへ追加された動画の情報を反映させる等の行為を行うためには YouTube Iframe Player API を用いる必要があるので, 今回は YouTube Iframe Player API を用いた制御を行っている.
ここからは, 再生リスト内の動画の再生や, 動画に紐づけされた各情報の取得と反映の方法について具体的に記述する. サーバー上に存在しているこれらの HTML ファイルがディスプレイに表示された際, YouTube Iframe Player API によって, プレーヤーが読み込みを完了したのちにそのHTML ファイルに対応した再生リストが読み込まれ, 再生リスト内の最初の動画が再生される. 動
画の再生が始まると, YouTube Iframe Player API ではその動画の置かれている URL を取得し,そこから JavaScript によって動画の YouTube 上の ID が取得される. 動画の ID が取得されると,JavaScript では所定の URL へ GET リクエストを送信する. この URL 上には, 投稿された各動
画の YouTube 上の ID や, 動画のタイトル, 詳細等がひと塊として置かれており, この URL に対し, 動画の YouTube 上の ID の情報を付与して GET リクエストを送信することで, その動画に紐づいた各情報が JSON 形式のデータとして取得できるようになっている. 動画に紐づいた各情報を取得したあと, JavaScript では HTML ファイルの body 内の情報を, 動画に紐づいた各情報に書き換える.
今回, 動画に紐づいた情報のうち, ディスプレイには広告のタイトルと広告の詳細の 2 つを表示
する. ここで, 広告の詳細はどの程度の文字量になるか予測が難しく, 文字量によって画面のレイア
ウトが崩れてしまうような事態は避ける必要があったため, HTML の MARQUEE と呼ばれるタグを用いることで対処した. このタグは, 文字を左右にスクロールさせるもので, このタグを用いることで, 限られた領域の中で無制限に文字を表示することを可能にした. そして, 動画に紐づいた各Group Report of 2016 SISP

- 15 -

Group Number 9

MOE MOE Digital Signage 2045 〜Cogntion, Design and Communication〜
情報は, その動画が再生されている間のみ表示する必要がある. また, 各動画は長さが不統一であり, 場合によっては非常に長い動画が投稿される可能性がある. これらに関する制御を行うために,YouTube Iframe Player API では動画の長さの取得を行う. そして, 動画の長さが規定の秒数を超えていない場合はその動画を最後まで再生し, 規定の秒数を超えている場合は, 既定の秒数に達した時点で再生リスト内の次の動画へ移るようにした. また, 現在再生されている動画が再生リスト
内の最後の動画であるかを判定し, もし最後の動画であれば, 再生が終了した時点で HTML ファ
イルを表示しているウェブページ自体を更新する. この処理は, YouTube の再生リストは HTML
ファイルが読み込まれた時点での状態を保持し続けるため, 再生リストへ新たに加わった動画の情報を反映させるには, ウェブページ自体を更新する必要があるため実装している. また, YouTubeの動画には, 他者が再生リストに動画を追加することを許可していない動画があり, もしそのような動画が再生リスト内にあれば, 再生リストが途中で再生を中断してしまうので, そのような動画があった場合には次の動画へと移る処理も実装している. 加えて, YouTube の動画は, プレーヤーの状態が変化した場合等に再生や音量の調節等に関するコントロールを行うバーが表示されてしまい, 動画の視聴の妨げになる可能性があるので, それらが非表示になるような処理も実装している.
（※文責: 大野玲陽）

4.4

超指向性スピーカを用いた音声システム

4.4.1

音声出力時の超指向性スピーカ使用法

本システムは広告投稿システムで投稿された広告を 1 Ｆデジタルサイネージに表示する機構に超指向性スピーカを組み込んだものである. このスピーカは一般的に使用されているものとは異なり,スピーカ本体を向けた方向にのみ音声が流れるという大きな特徴がある. 一般的なスピーカは音声を広範囲に拡散させているが, 超指向性スピーカは音声の範囲が限定されており, 直線的である. ス
ピーカの前にいなければ音声は聞こえない.
私たちは本システムで使用する超指向性スピーカを市販されているキットをベースに制作した.
スピーカ部分は小さな音声出力部品が複数集まってできており, 基板にスピーカ部分をはんだ付けするものである. さらに, 超指向性スピーカ用のケースも制作した. まず, スピーカケースをモデリングし, ケースとスピーカ本体のサイズ感が合うようにスピーカ本体設計図を参考にした. ケースの素材は 2mm の厚さのアクリル板で, モデリングした形に合わせてアクリル板をレーザーカッ
ターで型取りした. 超指向性スピーカは音声の出力部分を塞ぐと音声が聞こえなくなるので出力部分はむき出しにした.
この超指向性スピーカは, 1 階デジタルサイネージの上側に設置した. これはデジタルサイネー
ジの上にある壁に音声を反射させるためである. そこで, 耳への負担をなくすために, 反射させることにした. この超指向性スピーカの音声は超音波なので直接人に聞かせると耳に負担がかかり, 長
時間聞くには適切でなく, また, 反射させると音声の聞こえる範囲がちょうどデジタルサイネージ
周辺のみになることも好都合である. 本学の構造は吹き抜け仕様だがこれにより, 音声が広がらず
騒音問題にならない. 加えて特定の範囲のみに音声を絞ることでデジタルサイネージ前を通った人が音声に反応してデジタルサイネージの広告に目を向けるということが期待される. それにより広告などの情報がより多くの人に拡散されることを促す.
（※文責: 北山冬弥）

Group Report of 2016 SISP

- 16 -

Group Number 9

MOE MOE Digital Signage 2045 〜Cogntion, Design and Communication〜

4.4.2

図5

超指向性スピーカ配置の仕組み (横からの図)

図6

超指向性スピーカ配置の仕組み (上からの図)

音声出力時のプレイヤ使用法

再生する動画に付与されている音声を再生する際に, 複数の音声が同一のスピーカから再生されるという課題が挙げられていた. この課題を解決する際にマルチメディアプレイヤの Media Player

Classic Black Edition(以下, MPC-BE) を利用した.MPC-BE はオーディオレンダラの設定により再生したい音声を指定したスピーカで再生することが可能である. また, 動画投稿サイト YouTubeの動画 URL や再生リストの URL を読み込むことが出来, 動画を一度ダウンロードすることなくストリーミング再生することが出来る. この特徴を生かすことで指定した指向性スピーカに指定した音声を再生することが可能となった.

1 つ目の特徴である音声の指定について, MPC-BE のメニューからオプションの設定を開き, 音
声タブの音声レンダラーの項目でスピーカを選択することで, 指定したスピーカから音声を流すことが可能となった. ここで設定したスピーカの指定は設定したウインドウでのみ有効であり, 動画を再生するウインドウごとに設定する必要がある.

2 つ目の特徴である URL の読み込みについて, メニューから「ファイル/URL から開く」を選択し, YouTube の動画 URL を入力することでプレイヤを介して動画のストリーミング再生ができGroup Report of 2016 SISP

- 17 -

Group Number 9

MOE MOE Digital Signage 2045 〜Cogntion, Design and Communication〜
た.YouTube の再生リストを読み込むためにはオプションの設定の再生タブより, 「プレイリスト
をロード」のチェックボックスを有効にし, 設定を適応することで読み込みが可能となる.
以上の操作により, 動画が再生されているディスプレイの前に立った時に目の前で再生されている動画の音声のみが聴こえ, デジタルサイネージに人の目が惹かれることとなる. また, 複数の

MPC-BE のウインドウをディスプレイに配置することで同時に複数の音声が再生される動画を再生することが可能となった.
（※文責: 藤谷大輔）

4.5

最終成果発表会でのプレゼンテーション

2016 年 12 月 9 日（金）に行われた成果発表会では, 前半 3 回, 後半 3 回に分けて発表を行った.
本プロジェクトは, 公立はこだて未来大学３階のエレクトロニクス工房前, 及びエレクトロニクス
工房内にて発表を行った. はじめにプロジェクト全体のプレゼンテーションを行い, その後, 興味を持ってもらった班の発表を聞いてもらう, という形式で行った. 広告投稿機構開発班は, 全体スライドを映していたプロジェクタの場所でそのままポスターセッションとデモを行ったため, 全体のプ
レゼンテーションを聞いた後, そのまま発表を聞いてくれる人もいた. 前半は北山, 大野, 藤谷が発表を行い, 後半は浦谷, 樋口が発表を行った. デモをするにあたり, 超指向性スピーカを, 全体プレ
ゼンテーションに用いたスクリーンに向けて音声を反射させて届けようと考えたが上手くいかず,
最終的にはそのまま見てくれる方々にスピーカを向けて音声を聞かせることになった. また, 事前の設営が当日になってしまい, デモの準備などをしっかりとは出来なかった. 加えて, 実際にデモとしてディスプレイを見せるときに, 再生リストがデモ用になっておらず, 投稿された動画が反映されるまでに極端に時間がかかってしまうなどの不都合も生じた. また, 当初の予定では机の上に 2
つディスプレイを用意してどちらのディスプレイからも超指向性スピーカも用いて音声を流す予定だったが, 実際に超指向性スピーカを触ってもらおうと考え, 広告を実際に流しているディスプレ
イにのみ超指向スピーカを用いた. 自動投稿システムに関しては, 関心を示してくれる人が多く, 超指向性スピーカからの音声を体験してもらうことも出来た. しかし, システムを流すディスプレイ
が 1 つしかなかったためその場では 8 画面で広告を流しているのはデモ映像でしか見せることが出来なかった. しかし, 最終成果発表の時間中は実際に 1 階で広告を流していたので, 見てもらえたと思う. また, ポスターセッションを見に来てくれた人に, 評価シートを記入してもらった. 評価
シートの意見としては以下のような指摘があった.
・先に目的などを説明した方がよかった.
・何故超指向スピーカを用いるのか, その説明がない.
・話す内容の詳細が固まっていないように感じた.
・動くシステムを提示出来ているのは良いが, 適切なフィードバックがなされていない.
指摘された点に関する反省として, 全体的な準備不足がある. ポスターを作りはしたものの, そのポスターを用いてどのように発表を行うか, ポスターのどの部分を説明するときに実際のデモを見せるか, デモを行うための広告フォームや再生リストの用意といった細かな部分が抜けてしまっていた. ポスターの制作や実際のデモの撮影が成果発表会前日までずれこんでしまい, 全員での確認や予行演習が行えなかったのは反省すべき点であった. また, 後期になってからの活動ということもあり, システム自体は完成したものの, そのシステムを用いた試用やその結果の調査などに取り掛かれなかった点に関しても大きな反省点といえる.

Group Report of 2016 SISP

- 18 -

Group Number 9

MOE MOE Digital Signage 2045 〜Cogntion, Design and Communication〜（※文責: 浦谷成敏）

Group Report of 2016 SISP

- 19 -

Group Number 9

MOE MOE Digital Signage 2045 〜Cogntion, Design and Communication〜

第5章
5.1

まとめ

プロジェクト活動全体への反省

プロジェクト活動全体を振り返って, 取り組みの姿勢や進め方についての反省は複数ある.
第 1 に全体的なスケジュール管理である. そもそも班としての活動期間が後期スタートしてからで, 時期でいうと 9 月末日ということで, 最終発表に向けたスライド制作やポスター制作も含めると最終発表まで 2 か月と少ししかなかった. その中で, 最初の数週間をアイディアだしのみに用いてしまったのは時間を使い過ぎたと感じた. 実際, 先生方からアドバイスをいただく中で, まずは作ってみて失敗してそこからまた手直ししていけばいい. という意見をもらいながら, そもそも作る物が定まらずに右往左往していたのは非常にもったいなかった. また, 全面的に超指向スピーカを押し出そうとなったのも 11 月の上旬頃であり, 広告の自動投稿システムのプログラムの作成も11 月の中旬頃ということで, やはり動き出すのが全体的に遅かった. 超指向性スピーカももう少し早い段階で２台目を用意していれば実際の実験にも着手できた.
第 2 に, 無駄な作業をし過ぎたという点である. 例えば, 1 つのパソコンに 2 つのスピーカを接続
し, ２つのスピーカからは別々の広告の音声を出そうとしたが, 結局 3 週間ほど試し出来ず, 先生方に相談した結果, その日のうちに MPC-BE プレイヤーを用いてではあるが別々に音声を出すことに成功した. これは出来ないと判断した時点で先生方に相談していれば長い期間悩まずに済むことが出来た. また, 出来ないとわかった時点で別の作業を行ったり, 打開策としてのパソコンを 2 台用いることを即決出来ていればもう少し違う結果になっていただろう.
第 3 に作業の分担が極端であった点である. 最終的に出来上がりはしたものの, システム面の実装は全て樋口, 大野両名に任せることになってしまった. また, ポスターの制作はほぼ全てを北山が担当に, 最終発表のプレゼンは浦谷, 藤谷両名が担当するという風にそれぞれが担当分野を完全に分けるという形になってしまった. これによって個人作業が多くなり, それぞれの担当以外の部分を共有するときに, 双方間での見解の不一致が生じた. このような見解の不一致がポスター制作の際や, ポスターセッションの際に大きな障害になったので, 毎回の活動の中でこういったズレをもっとなくすべきだった.
（※文責: 浦谷成敏）

5.2

今後の展望

プロジェクトとしてグループで活動し, システム開発を行ってきた. しかし, 制作したものは完璧ではなく, やり残したことがいくつかある.
第 1 にシステムの評価実験である. 活動を通して広告投稿システムやディスプレイ表示システム,
超指向性スピーカを使用した音声出力などの成果をあげてきたが, 実際に試用するまでに至ることができなかった. これは仕様の決定やシステム開発に時間をかけすぎたためである. 開発が完了した時点で活動を終えるのではなく, システムの評価実験を行いフィードバックをもらい, その反省を行ったうえでシステムの改善につなげることが重要である. 開発したシステムをより実用的なものにするために, 広告投稿システムを学生に試用してもらい、自由に投稿できることを実感してもGroup Report of 2016 SISP

- 20 -

Group Number 9

MOE MOE Digital Signage 2045 〜Cogntion, Design and Communication〜
らったうえで, 使いやすい点や使いにくい点はどこであったかといったフィードバックを受け取ることが重要である. また, 超指向性スピーカに関しても, デジタルサイネージの前を通りがかった人が音声によって目を向けてくれるか, 音声により情報の取得や交流が活発になるかといったことを検証する必要がある. その際には, 定点カメラによるデジタルサイネージ周辺の様子の撮影が効果的だと考えている.
第 2 に広告投稿機構と音声分割の両立である. 現段階ではデジタルサイネージを 1 つの PC で制御しているため, 複数の音声を分割して別々に流すことができない. この問題を解決するために, 今
回は MPC-BE というプレイヤを使用しており, これによって音声の分割を可能にしている. しかし, デジタルサイネージに表示している広告の動画やそれに紐付いた情報は, ブラウザで開くことにより同時に提供することを可能にしているため, MPC-BE をプレイヤとして用いた場合は, 広告の動画に紐付いた情報を同時に提供することができなくなってしまう. また, 新たな広告が投稿された場合, MPC-BE でその情報を反映するにはプレイヤを再び読み込む必要がある. これらのことからわかるように, 現段階の成果物では, 広告投稿機構と音声分割の両立を行うことはできていな
い. 広告投稿機構と音声分割の両立を行うための方法の 1 つとして, PC 自体をさらに増やすという方法が挙げられる. PC 自体を増やすことで, 増やした数だけ音声分割を行うことができ, 広告投稿機構との両立を行うことができるようになる.
以上のように, 今後システムをより良くするために行うべきことはあるが, 本年度の我々の活動では行うことができなかった. もし, 次年度の本プロジェクトの活動の一環として引き続きこのシステムのさらなる開発を行うのであれば, これらのやり残したことを実施してもらい, システムをより実用的なものにしてほしい.
（※文責: 北山冬弥）

Group Report of 2016 SISP

- 21 -

Group Number 9

MOE MOE Digital Signage 2045 〜Cogntion, Design and Communication〜

第6章
6.1

付録

個人の使用した技術

北山冬弥
・CSS
・JavaScript
・HTML
・PHP
・Illustrator
・はんだ付け・レーザーカッター
藤谷大輔
・スピーカの配線情報
・JSON の使用方法
・正規表現の開発
・Media Player Classic の使用方法
大野玲陽
・HTML
・CSS
・JavaScript
・YouTube Iframe Player API
・JSON(データの簡易な受け取りのみ)
浦谷成敏
・スピーカの配線情報
・スライドの制作方法, 上手な見せ方
・A1 ポスターのレイアウト配置について
・NextScreen の使用方法
樋口鉄朗
・GoogleAppsScript
・WebAPI
・YouTube Data API v3
・JavaScript
・MaterialDesignLight

6.2

役に立った講義

北山冬弥
・情報表現基礎Group Report of 2016 SISP

- 22 -

Group Number 9

MOE MOE Digital Signage 2045 〜Cogntion, Design and Communication〜
・情報機器概論
・情報デザイン・ユーザインタフェース
・認知心理学藤谷大輔
・情報表現基礎
・情報機器概論
・認知心理学・ヒューマンインタフェース
・形式言語とオートマトン
・認知システム論
大野玲陽・ヒューマンインターフェース
・ヒューマンインターフェース演習
浦谷成敏
・情報表現基礎
・情報機器概論
・認知心理学・ヒューマンインタフェース
樋口鉄朗
・情報表現入門
・情報機器概論

6.3

その他制作物

超指向性スピーカ
・複数利用のために 4 つ制作
・スピーカ専用ケースを設計・制作

Group Report of 2016 SISP

- 23 -

Group Number 9