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

プロジェクト名
函館山カメラ-文脈展示のためのシステムとコンテンツの開発

Project Name
Mt.Hakodate camera - development of systems and contents for Contexts-exhibition

グループ名Group Name
プロジェクト番号/Project No.

11

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

折田佳大

Keita Orita

グループリーダ/Group Leader
グループメンバ/Group Member
1014235

青木花菜子

Kanako Aoki

1014131

大橋慎生

Mizuki Ohashi

1014089

折田佳大

Keita Orita

1014092

工藤雅也

Masaya Kudo

1014050

島田美優

Miyu Shimada

1014124

藤原瞳

Hitomi Fujiwara

1014103

村上亮太朗

1014190

和田龍

Ryotaro Murakami

Tatsuru Wada

指導教員
安井重哉

木村健一

原田泰

Advisor
Shigeya Yasui Ken-ichi Kimura Yasushi Harada

提出日2017 年 1 月 18 日

Date of Submission
January 18, 2017

概要
本プロジェクトは函館山をテーマに「文脈展示」を実現することを目的として活動した。文脈
展示とは、コンテンツを事柄や背景に沿って展示することである [1]。函館山は一般的に世界的な夜景の名所として知られているが、夜景以外にも興味深い自然や歴史的建造物があり、これを函館山のことをあまり知らない人にも知ってほしいと考えた。ここではコンテンツを函館山に関する自然や歴史的建造物とし、これらを函館山という文脈に沿ってインタラクティブに理解できる展示物の制作を本プロジェクトにおいての文脈展示の実現とした。操作においては、
観賞者の動きで展示物に変化をつけることによって観賞者の興味を惹き、従来の展示物よりも更にクオリティの高いものができるのではないか、と考えた。活動概要としては模型制作、函館山でのフィールドワーク、展示物システムの構築、コンテンツの制作、実際の展示を行なった。模型制作でははじめに 3 班に別れ函館山模型を制作した。各班様々な方法で函館山模型を制作し、その結果、レーザーカッターを用いての模型制作が効率よく作業でき、かつ綺麗な模型ができることがわかった。ここから、Adobe Illustrator CC を用いて製図を行い、それに従いレーザーカッターを用いてスチレンボードを切った。切ったスチレンボードを、1 層を
標高 10 メートルとして積み重ね、実際の函館山の 2500 分の 1 のサイズの模型を制作し、これを展示物にも活用した。函館山でのフィールドワークでは前後期共に積極的に行った。前期のフィールドワークではプロジェクト開始時に自分たちが知っていた函館山に関する情報というのは山頂からの夜景ぐらいの情報しかなかったため、函館山を知る、ということに重点を置
きフィールドワークを行った。後期のフィールドワークでは主に展示コンテンツに使用する撮影活動を中心としてフィールドワークを行った。具体的には OSMO を用いて実際に登山道を歩いた時の映像を撮影したり、函館山山頂などからのパノラマ写真を撮影した。これらの撮影
活動は前期のフィールドワークを生かして、見所になりそうな景色や自然を重点に置いて撮影した。展示システムは函館山模型に映像投影を行い、この映像で表現されたコンテンツをを Xbox One Kinect センサーを用いて操作を行い、コンテンツの説明や映像を設置したモニ
ターや投影した映像に表示する、といったシステムにした。これにより、観賞者が実際に手を動かし、また、興味を惹く展示物になったと考える。 コンテンツの制作ではフィールドワークで撮影してきた映像を iMovie などの動画編集ソフトを使い編集を行った。コンテンツは登山
道ごとに制作し、3 登山道で計 9 つのコンテンツを制作した。映像以外にも旧登山道や函館山山頂で撮影したパノラマなどもコンテンツに使用した。実際の展示では本学 3 階ミュージアム
を用いて 2016 年 11 月 25 日に行った。学生を対象にし、展示物を観賞してもらったあと、使用感や見たコンテンツなどを問うアンケートを行い、それを元に評価を行った。その結果、観賞者に展示物としてのコンテンツや操作方法などに対して興味を持たせることには評価が得られた。その一方で PC スペックの不足により、満足に操作できないといった声も上がった。この問題に関しては、展示後、さらに性能がいい PC を使用することにより改善されている。また、操作法に対しての指摘もあった。改善策としてはコンテンツ選択時などに音声で説明を入れたり、マッピング映像に文字での説明を入れるなどが考えられる。以上から、本プロジェク
トの目的である函館山をテーマに「文脈展示」を実現するという目的は展示物自体の性能という点では問題が残ったが、文脈展示を実現するということに関しては達成することができた。
キーワード

函館山, 展示模型, プロジェクションマッピング, インタラクティブシステム, デジタルコンテンツ（※文責: 大橋慎生）-i-Abstract
We acted for the purpose which is to implement the Contexts-exhibition about
Mt.Hakodate. Contexts-exhibition is to exhibit along matter and background incontents. Mt.Hakodate is known as a famous sightseeing spot that can be looked at
the night view. But, there are not only night view but also nature and landmark
in Mt.Hakodate. We thought that we want to people who don t know very muchabout Mt.Hakodate to know that.In this project, contexts mean nature and historicbuildings. We make interactive exhibition along with Mt.Hakodate to use contexts.
This is to implement the Contexts-exhibition in this project. We thought that we
can make the better exhibition by attracting the spectators for changing exhibition in
motion of human. We made models of Mt.Hakodate, went to Mt.Hakodate and theoutskirts, constructed exhibition system, produced contents and held an exhibition.
In the beginning, we divided into three groups and made models in each group. We
made in various kinds. It was found from the result that making by laser cutter isthe best because we worked eﬃciently and appearance of model was beautiful. Then,we drafted by Adobe Illustrator CC. We cut styrene board by laser cutter along thatdrafting and to accumulate cutting styrene boards which one layer is 10 meter. Model
size is actual a 2500 part and it was used as exhibition. We went to Mt.Hakodate
for fieldwork during all term positively. Our knowledge about Mt.Hakodate is only
night view before to go to Mt.Hakodate on fieldwork. So, we went to Mt.Hakodate on
fieldwork for to know about Mt.Hakodate in the first semester. In the second semester,we went to Mt.Hakodate on fieldwork to take the pictures and movies for contexts. To
explain about these things concretely, to take the movie which we walked mountain
trails by OSMO and to take panorama from Mt.Hakodate peak. These movies andpictures were to refer to the first semester s experience. We made exhibition system.
To project on Mt.Hakodate model to manipulate by Xbox One Kinect sensor and toindicate context s explanation or movie on monitor or model. These system makeviewers to move themselves hands. We think that exhibition be interesting. In content
production, we edited videos what we filmed while field work by using video editing
software such as iMovie. We produced contents for each mountain trail, and in all,nine contents was produced about three mountain trails. Other than video content,
panoramas which was taken mountain trail and mountain peak’s views also used ascontents. In November 25, 2016, we carried out the actual exhibition using the museum
the 3rd floor of our university. This exhibition was targeted students. After they viewit, we took a survey about its usability and understandability. Based on the resultsof the survey, we evaluated our exhibition. As a result, this exhibition has gained
evaluation about interest the contents and its how to operate. On the other hands,
they answered that they could not operate it smoothly because we did not use high-end
machine to run a program. To solve this problem, we introduced high-end machine. In
addition to, it was pointed out about the operation method. As an improvement plan,at the time of content selection, we conceivable to introduce a description by voice or
to put a description with letters on the Projection Mapping video. From these things,
usability of the exhibit’s is low performance. But, we could achieved our purpose which
to implement the Contexts-exhibition about Mt.Hakodate.
Keyword Mt.Hakodate, display model, projection mapping, interactive system, digital contents（※文責: 大橋慎生）- ii -

目次
第1章

背景

1

1.1

該当分野の現状・従来例 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

1

1.2

現状における問題点 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

1

1.3

課題の概要 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

1

到達目標

2

第2章

2.1

本プロジェクトにおける目的. . . . . . . . . . . . . . . . . . . . . . . . . . . .

2

2.2

プロジェクト学習で行う利点. . . . . . . . . . . . . . . . . . . . . . . . . . . .

2

2.3

具体的な手順・課題設定 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

2

2.3.1

撮影機材の使い方の学習. . . . . . . . . . . . . . . . . . . . . . . . . . .

2

2.3.2

撮影技法の学習 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

2

2.3.3

第 1 回模型プロトタイプ制作 . . . . . . . . . . . . . . . . . . . . . . . . .

3

2.3.4

等高線データ作成 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

3

2.3.5

第 2 回模型プロトタイプ制作 . . . . . . . . . . . . . . . . . . . . . . . . .

3

2.3.6

前期フィールドワーク . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

3

2.3.7

カスタマージャーニーマップの作成. . . . . . . . . . . . . . . . . . . . .

3

2.3.8

展示コンテンツの設定 . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

4

2.3.9

システムの決定 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

4

2.3.10 模型への投影 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

4

2.3.11 画像認識機能プログラムの作成 . . . . . . . . . . . . . . . . . . . . . . . .

4

2.3.12 Xbox One Kinect センサーの導入と設定 . . . . . . . . . . . . . . . . . .

4

2.3.13 Xbox One Kinect センサーの動作研究 . . . . . . . . . . . . . . . . . . . .

4

2.3.14 展示システムの最終決定 . . . . . . . . . . . . . . . . . . . . . . . . . . .

5

2.3.15 後期フィールドワーク . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

5

2.3.16 大型模型の改良 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2.3.17 展示コンテンツの最終決定 . . . . . . . . . . . . . . . . . . . . . . . . . .

55

2.3.18 ディスプレイモニタの動作プログラムの作成 . . . . . . . . . . . . . . . . .

5

2.3.19 Xbox One Kinect センサーからの信号を処理するプログラムの作成 . . . .

6

2.3.20 プロジェクションマッピングの動作プログラムの作成 . . . . . . . . . . . .

6

2.3.21 プロジェクションマッピングとディスプレイの動作の同期 . . . . . . . . . .

6

2.3.22 プロジェクションマッピング動画の制作 . . . . . . . . . . . . . . . . . . .

6

2.3.23 コンテンツの動画制作 . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

6

2.3.24 ディスプレイモニタの動画制作 . . . . . . . . . . . . . . . . . . . . . . . .

6

2.3.25 HAKODATE Developer Conference 2016 への参加 . . . . . . . . . . . .

7

2.3.26 学内ミュージアムでの展示 . . . . . . . . . . . . . . . . . . . . . . . . . .

7

2.3.27 展示後の評価における改善 . . . . . . . . . . . . . . . . . . . . . . . . . .

7

課題解決のプロセスの概要

83.1

撮影機材の使い方の学習 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

8

3.2

撮影技法の学習 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

8

第3章- iii -

3.3

第 1 回模型プロトタイプ制作

3.4

等高線データ作成. . . . . . . . . . . . . . . . . . . . . . . . . . . .

8. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

93.5

大型模型制作 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

9

3.6

前期フィールドワーク . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

9

3.7

カスタマージャーニーマップの作成 . . . . . . . . . . . . . . . . . . . . . . . . .

9

3.8

展示コンテンツの設定 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

10

3.9

システムの決定 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

10

3.10

模型への投影 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

10

3.11

画像認識機能プログラムの作成 . . . . . . . . . . . . . . . . . . . . . . . . . . .

11

3.12

Xbox One Kinect センサーの導入と設定 . . . . . . . . . . . . . . . . . . . . . .

11

3.13

Xbox One Kinect センサーの動作研究 . . . . . . . . . . . . . . . . . . . . . . .

11

3.14

展示システムの最終決定 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

12

3.15
3.16

後期フィールドワーク . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
大型模型の改良 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

12
13

3.17

展示コンテンツの最終決定 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

13

3.17.1 概要説明動画の制作 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

13

3.17.2 登山道選択の動画制作 . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

13

3.17.3 説明するコンテンツの決定 . . . . . . . . . . . . . . . . . . . . . . . . . .

14

3.18

ディスプレイモニタの動作プログラムの作成 . . . . . . . . . . . . . . . . . . . .

15

3.19

Xbox One Kinect センサーからの信号を処理するプログラムの作成 . . . . . . . .

16

3.20

プロジェクションマッピングの動作プログラムの作成. . . . . . . . . . . . . . .

16

3.21

プロジェクションマッピングとディスプレイの動作の同期 . . . . . . . . . . . . .

16

3.22

プロジェクションマッピング動画の制作 . . . . . . . . . . . . . . . . . . . . . . .

17

3.23

コンテンツの動画制作 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

17

3.24

ディスプレイモニタの動画制作 . . . . . . . . . . . . . . . . . . . . . . . . . . .

17

3.25

HAKODATE Developer Conference 2016 への参加 . . . . . . . . . . . . . . . .

17

3.26

学内ミュージアムでの展示 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

18

3.27

展示後の評価における改善 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

18

第4章

課題解決のプロセスの詳細

4.1

19
青木花菜子の課題解決過程の詳細 . . . . . . . . . . . . . . . . . . . . . . . . . . 19

4.2

藤原瞳の課題解決過程の詳細. . . . . . . . . . . . . . . . . . . . . . . . . . . .

21

4.3

島田美優の課題解決過程の詳細 . . . . . . . . . . . . . . . . . . . . . . . . . . .

23

4.4

和田龍の課題解決過程の詳細. . . . . . . . . . . . . . . . . . . . . . . . . . . .

25

4.5

工藤雅也の課題解決過程の詳細 . . . . . . . . . . . . . . . . . . . . . . . . . . .

27

4.6

村上亮太朗の課題解決過程の詳細 . . . . . . . . . . . . . . . . . . . . . . . . . .

29

4.7

大橋慎生の課題解決過程の詳細 . . . . . . . . . . . . . . . . . . . . . . . . . . .

30

4.8

折田佳大の課題解決過程の詳細 . . . . . . . . . . . . . . . . . . . . . . . . . . .

32

結果

35

プロジェクトの結果 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

35

5.1.1

撮影機材の使い方・技法の学習 . . . . . . . . . . . . . . . . . . . . . . . .

35

5.1.2

函館公園フィールドワーク動画の制作 . . . . . . . . . . . . . . . . . . . .

36

5.1.3

函館山模型プロトタイプ第 1 弾 . . . . . . . . . . . . . . . . . . . . . . . .

36

5.1.4

函館山模型プロトタイプ第 2 弾 . . . . . . . . . . . . . . . . . . . . . . . .

36

第5章

5.1

- iv -

5.2

第6章

5.1.5

フィールドワーク . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

36

5.1.6

カスタマージャーニーマップ . . . . . . . . . . . . . . . . . . . . . . . . .

37

5.1.7

第 3 弾函館山模型制作 . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

37

5.1.8

大型模型の改良結果 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

37

5.1.9

Xbox One Kinect センサーを用いた人検知プログラム . . . . . . . . . . .

37

5.1.10 展示におけるプロジェクションマッピングの動作プログラム . . . . . . . .

37

5.1.11 展示におけるディスプレイの動作プログラム . . . . . . . . . . . . . . . . .

38

5.1.12 プロジェクションマッピングで用いる動画 . . . . . . . . . . . . . . . . . .

38

5.1.13 ディスプレイで用いる動画・画像 . . . . . . . . . . . . . . . . . . . . . . .

38

5.1.14 函館山を紹介するための展示物 . . . . . . . . . . . . . . . . . . . . . . . .

39

成果の評価 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

39

5.2.1

撮影機材の使い方・技法の学習 . . . . . . . . . . . . . . . . . . . . . . . .

39

5.2.2
5.2.3

函館公園フィールドワーク動画の制作 . . . . . . . . . . . . . . . . . . . .
函館山模型プロトタイプ第 1 弾 . . . . . . . . . . . . . . . . . . . . . . . .

39
40

5.2.4

函館山模型プロトタイプ第 2 弾 . . . . . . . . . . . . . . . . . . . . . . . .

40

5.2.5

第 3 弾函館山模型制作 . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

40

5.2.6

カスタマージャーニーマップ . . . . . . . . . . . . . . . . . . . . . . . . .

40

5.2.7

フィールドワーク . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

41

5.2.8

大型模型の改良結果 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

41

5.2.9

Xbox One Kinect センサーを用いた人検知プログラム . . . . . . . . . . .

41

5.2.10 展示におけるプロジェクションマッピングの動作プログラム . . . . . . . .

41

5.2.11 展示におけるディスプレイの動作プログラム . . . . . . . . . . . . . . . . .

41

5.2.12 プロジェクションマッピングで用いる動画 . . . . . . . . . . . . . . . . . .

42

5.2.13 ディスプレイで用いる動画・画像 . . . . . . . . . . . . . . . . . . . . . . .

42

5.2.14 函館山を紹介するための展示物 . . . . . . . . . . . . . . . . . . . . . . . .

42

今後の課題と展望

43

参考文献

44

-v-

Mt.Hakodate camera - development of systems and contents for Contexts-exhibition

第 1 章 背景1.1

該当分野の現状・従来例

函館山に関する展示は、市立函館博物館など様々な場所で行われいる。展示物の多くは写真や映像、ポスターなどの平面的なものが多い。これらは情報発信源から観賞者への受動的な展示物であり、観賞者は展示物を見る・聞くことで情報を得る。
（※文責: 折田佳大）

1.2

現状における問題点

平面的な展示では、観賞者は書いてある文章や写真、映像、音声から情報を得ることしか出来ず、展示物から新しい発見をすることは難しい。
（※文責: 折田佳大）

1.3

課題の概要

本プロジェクトの大きな課題として、函館山に関するインタラクティブな文脈展示のシステム開発がある。それを達成するためには、函館山に関する情報収集、展示システムの構築、コンテンツ
制作の 3 つが課題となる。1 つ目の、函館山に関する情報収集は、実際に函館山に行き、フィール
ドワークを行うことで現場を体感し、実際に函館山に存在する建造物や植物、登山ルート、登山者の性別や年齢などを見ることでターゲットの選定や展示物にしたいコンテンツ収集をしたり、書籍やインターネットでの情報収集を行ったりする必要がある。2 つ目に、展示システムの構築では、集めてきた情報を整理し函館山の魅力をより理解してもらえるインタラクティブでわかりやすい
ユーザーインターフェース設計や、自分たちがシステムの管理をしやすいプログラム作成などの展示システムが必要となってくる。3 つ目に、コンテンツの制作では、整理した情報を観賞者にわか
りやすくかつインパクトのあるコンテンツ制作技術の取得が必要となる。
（※文責: 工藤雅也）

Group Report of 2016 SISP

-1-Group Number 11

Mt.Hakodate camera - development of systems and contents for Contexts-exhibition

第2章

到達目標

本プロジェクトにおける目的

2.1

本プロジェクトの目的は、函館山をテーマとする「文脈展示」を実現することである。そのために、大まかに分けて 4 つの工程を行う。1 つ目に、函館山およびその周辺をフィールドとして歴史・文化・自然などをデジタルアーカイブ化する。2 つ目にに、それらをある文脈に沿って再構成することによってコンテンツ化する。3 つ目に、そのコンテンツを、複数の観賞者が多視点から能動的に体験できる展示物としてインタラクティブシステム化する。4 つ目に、それを実際に博物館等で展示し評価する。これらが本プロジェクトにおける目的である。
（※文責: 工藤雅也）

プロジェクト学習で行う利点

2.2

通常の授業は先生から課題を与えられ、1 人で取り組むことが多い。プロジェクト学習では、グループ活動によって、実社会の課題を自分たちで解決していく。そのために、調べたり、新たな技術を習得したり、学外との交流を行なっていく。例えば、このプロジェクトでは撮影技術の習得やフィールドワークといったことである。また、グループで行う活動のため、メンバー間の連携が必
要で、情報の共有をすることが求められる。これがプロジェクト学習と通常の授業の違いである。
この違いからプロジェクト学習で行う利点は実社会を知ることができ、協調性を高め、コミュニ
ケーションを取る機会が増え、専門知識や技術が身につくのである。
（※文責: 島田美優）

2.3

具体的な手順・課題設定

2.3.1

撮影機材の使い方の学習

課題

所有している 3 つのカメラを全員が使いこなせるようにする
カメラの使い方を学ぶ
フィールドワークなどで撮影をしてカメラに慣れる学習した使い方をプロジェクト内で共有する（※文責: 島田美優）

2.3.2

撮影技法の学習課題

撮り方による対象の見え方を知る
写真での効果的な撮影の仕方を知る
学んだことを取り入れて実践をして身につける（※文責: 島田美優）

Group Report of 2016 SISP

-2-Group Number 11

Mt.Hakodate camera - development of systems and contents for Contexts-exhibition

2.3.3

第 1 回模型プロトタイプ制作

課題

函館山の積層模型を制作する

3 つのグループに分かれて積層模型を制作する
制作方法による時間やコスト等のメリット、デメリットを発見する
模型にして俯瞰的にみることで新たな発見をする（※文責: 青木花菜子）

2.3.4

等高線データ作成

課題

レーザーカッターで出力するためのデータを制作する
データを作成すると同時に Adobe Illustrator CC の技術を習得する

Adobe Illustrator CC で函館山とその周辺の等高線をデータ化する
切断時のずれを考慮する（※文責: 青木花菜子）

2.3.5

第 2 回模型プロトタイプ制作

課題

マッピングを考慮した大きさの模型制作
第 1 回の模型制作の反省を活かす
組み立て方を工夫する
完成した模型に手を加えることでアイデアを膨らませていく（※文責: 青木花菜子）

2.3.6

前期フィールドワーク

課題

実際に函館山を体感することで新しい発見をする
函館山やその周辺に行く
資料を集め知識を増やす
函館山で撮影をし記録に残す（※文責: 島田美優）

2.3.7

カスタマージャーニーマップの作成

課題

我々プロジェクトメンバーを対象ユーザーと設定し、函館山にて行ったフィールドワーク
で体験や感じたことを可視化する
登山で感じたことを書き出す
点数化し、それをグラフ化する
可視化された情報から函館山とユーザーとの間にどのような接点があったか分析する
分析したことをコンテンツ考案に生かすGroup Report of 2016 SISP

-3-Group Number 11

Mt.Hakodate camera - development of systems and contents for Contexts-exhibition（※文責: 和田龍）

2.3.8

展示コンテンツの設定

課題

函館山をテーマとした文脈展示によって、観賞者に伝えたい、知ってもらいたい事を考える
コンテンツの考案
観賞者の興味を惹いてもらうものを作る（※文責: 和田龍）

2.3.9

システムの決定課題

インタラクティブな機能を考える
今までに無い新しい展示システムの考案
観賞者の体の動きを展示システムに取り入れる（※文責: 大橋慎生）

2.3.10
課題

模型への投影模型に動的な展示としての機能を持たせる

立体物だからこそできる表現をする
プロジェクションマッピングの特性と模型の形状を生かした映像を制作する（※文責: 青木花菜子）

2.3.11
課題

画像認識機能プログラムの作成
模型上の操作法の考案

観賞者の模型への干渉を反映する（※文責: 村上亮太朗）

2.3.12
課題

Xbox One Kinect センサーの導入と設定
展示物の操作法の改善案の考察

Xbox One Kinect センサーを用いてより正確に観賞者の動きを検知する（※文責: 村上亮太朗）

2.3.13
課題

Xbox One Kinect センサーの動作研究
Xbox One Kinect センサーによってインタラクティブな操作が可能になるか考察する

Xbox One Kinect センサーでどのようなプログラムがあるか調査しテストする
人の動きを利用した展示システムの考案をするGroup Report of 2016 SISP

-4-Group Number 11

Mt.Hakodate camera - development of systems and contents for Contexts-exhibition（※文責: 工藤雅也）

2.3.14
課題

展示システムの最終決定
実際の展示において観賞者の興味を惹く展示システムを考える

今までに無い新しい展示システムをより観賞してもらえるような展示システムを考案する（※文責: 大橋慎生）

2.3.15
課題

後期フィールドワーク
コンテンツに必要な情報、映像を集める

函館山やその周辺に行く
情報収集を行う
函館山に登り、魅力を探す
コンテンツ制作に必要な静止画・動画の撮影を行う（※文責: 島田美優）

2.3.16
課題

大型模型の改良模型の見栄えと映像の映りを良くする

映像が鮮明に見られるような工夫をする
模型の強度を上げ、実際の展示活動に耐えられるようにする（※文責: 折田佳大）

2.3.17
課題

展示コンテンツの最終決定
目的を達成できるようなコンテンツを決定する

フィールドワークなどを通してコンテンツを決める
内容を具体化させる
どのようにコンテンツを見せるかを決める（※文責: 島田美優）

2.3.18
課題

ディスプレイモニタの動作プログラムの作成
プロジェクションマッピングだけでは不足する情報を捕捉する

ディスプレイに表示する画像や動画を切り替える動作を制御する（※文責: 折田佳大）Group Report of 2016 SISP

-5-Group Number 11

Mt.Hakodate camera - development of systems and contents for Contexts-exhibition

2.3.19
課題

Xbox One Kinect センサーからの信号を処理するプログラムの作成
Xbox One Kinect センサーが取得するスケルトン情報の解析と映像を切り替えるシステ

ムの構築
スケルトン座標を取得できるようにする
手の動きで映像を切り替えるシステムを構築する（※文責: 工藤雅也）

2.3.20
課題

プロジェクションマッピングの動作プログラムの作成
動画や写真を表示するプログラムの作成

プロジェクションマッピング（位置ズレの修正）ができるプログラムの作成
修正後のセーブ、ロード機能の作成（※文責: 工藤雅也）

2.3.21
課題

プロジェクションマッピングとディスプレイの動作の同期
プロジェクションマッピングとディスプレイの動きを連動させる

時間を計り、プログラムを切り替えるタイミングを調整する（※文責: 折田佳大）

2.3.22
課題

プロジェクションマッピング動画の制作
函館山模型の形に合った動画を制作する

模型の凹凸を考慮して映像を作る（※文責: 和田龍）

2.3.23
課題

コンテンツの動画制作
観賞者に伝わるような表現で動画を制作する

模型に動きを持たせることのできる動画を制作する
動画を見ていてコンテンツなどが理解できるようにする（※文責: 青木花菜子）

2.3.24
課題

ディスプレイモニタの動画制作
プロジェクションマッピングで投影できない動画や画像を補足的に表示する

プロジェクターで投影できない説明として、ディスプレイモニタの利点を生かして観賞者が理解できるような補足となる動画や画像を制作する（※文責: 藤原瞳）

Group Report of 2016 SISP

-6-Group Number 11

Mt.Hakodate camera - development of systems and contents for Contexts-exhibition

HAKODATE Developer Conference 2016 への参加

2.3.25
課題

HAKODATE Developer Conference 2016 に参加して本プロジェクトについて発表する
2016 年 10 月 22 日に公立はこだて未来大学で開催される HAKODATE Developer Conference 2016 への参加希望を提出したところ、実行委員会より選抜されたため、HAKODATE
Developer Conference 2016 にて本プロジェクトの発表を行う（※文責: 藤原瞳）

学内ミュージアムでの展示

2.3.26
課題

展示環境の構築
より観賞者の興味を惹いて展示に足を運ばせるような展示環境を構築する
操作性のテストを行う
評価点や改善点を発見する目的でアンケートを行う（※文責: 大橋慎生）

展示後の評価における改善

2.3.27
課題

学内展示での改善点をまとめ、試行錯誤を行う
前述の学内展示を行った後、事前に制作したアンケートから得られた、観賞者からの批評やコメント・アドバイスなどを基に評価点と改善点を発見し、改善できる箇所からよりよい展示物となるよう改善に取り組む
アンケートだけでなく自分たちで展示を行ってて気づいた箇所も改善できる箇所として考える（※文責: 藤原瞳）

Group Report of 2016 SISP

-7-Group Number 11

Mt.Hakodate camera - development of systems and contents for Contexts-exhibition

第3章
3.1

課題解決のプロセスの概要

撮影機材の使い方の学習

課題過程 OSMO、ハンディカム、HDR の 3 つの撮影機材を使用した。機材を使用するのに必要なアプリケーションがあった。OSMO は DJI の DJI GO(バージョン 3.1.2)、HDR はSony corporation のカメラリモコン:PlayMemorysMobile(バージョン 5.7.1) をインストー
ルした。3 つのグループに分かれ、函館公園などのフィールドワークなどを通して、それぞれのカメラを使いこなせるようにした。そして、それぞれ習得したカメラの使い方を教えあい、メンバー全員が機材を扱えるようにした。
（※文責: 島田美優）

3.2

撮影技法の学習

課題過程 担当教員から静止画、動画での対象の取り方、画面の動かし方を教わった。具体的には、撮影の心得やカメラアングル、カメラワーク、フレーミングといったようなことを学んだ。その後、実際に学内で静止画、動画の撮影を行い、フィードバックを行った。そこで何が足りていないのかを確認し、撮影時に意識すべきところを知った。そして、それをフィールドワークでの撮影に繋げた。
（※文責: 島田美優）

3.3
課題

第 1 回模型プロトタイプ制作
函館山の積層模型を作る、ということだけ統一し、3 つのグループに分かれて素材、切り出
し方、層の厚さの異なる模型を制作した。また、完成した模型に地名がわかるようにしたものや、地図を投影したものをプロトタイプ第 1 弾とした。それぞれのチームの模型の素材、切り出し方、表現方法は以下のとおりである。
・ スタイロフォームを電熱線で切り、1 層を標高 50 メートルとして積み重ねたもの。
・ スチレンボードをカッターで切り、1 層を標高 10 メートルとして積み重ねたもの。函館山内の山頂に爪楊枝でそれぞれ印を立てた。
・ スチレンボードをレーザーカッターで切り出し、1 層を標高 20 メートルとして積み重ねたもの。プロジェクターで山の地図を模型に投影した。
それぞれの製法で模型制作をした結果、レーザーカッターで切り出すことが一番時間効率、完成品のクオリティが高く、量産もしやすいことがわかった。また、標高 10m ごとに 1 層積み上げることで、模型にした際に実物の山の凹凸がよく表現できた。そのため、今後の模型では、スチレンボードをレーザーカッターで切り出し、1 層を標高 10 メートルとして制作することにした。
（※文責: 青木花菜子）

Group Report of 2016 SISP

-8-Group Number 11

Mt.Hakodate camera - development of systems and contents for Contexts-exhibition

3.4

等高線データ作成

課題過程

レーザーカッターでの出力のため、国土地理院から函館山とその周辺の等高線を Adobe

Illustrator CC を用いてデータ化した。[5] 赤（R:255 G:0 B:0）のラインを切断線、青（R:0
G:0 B:255）のラインをケガキ線として作成した。また、レーザーカッターでの切り出しの際には、材料の溶けがどうしても出てしまうため、それを考慮してケガキ線はズレをもたせたものを作成した。今後このデータを基にして模型が作られることを想定し、出力するサイズが変わっても対応できるようにした。
（※文責: 青木花菜子）

3.5

大型模型制作課題過程

材料として使った厚さ 4 ミリのスチレンボードを 1 層とし、1 層 10 メートルとして考

えて模型の縮尺を 2500 分の 1 にすることに決定した。レーザーカッターで切ることのできる範囲が 60 × 30 平方センチメートルであったため、函館山を 10 分割してパーツごとに切り出した。切り出しには時間がかかったため何名か交代で行い、切り出し終わったパーツは下の層から順次貼り付けていった。
（※文責: 青木花菜子）

3.6

前期フィールドワーク

課題過程

前期は以下の場所でフィールドワークを行った。

・

旧登山道コース・

千畳敷コース・

函館公園

主に撮影機材の扱いに慣れること、撮影技術の向上を目的とした。函館公園や函館山ではエゾタンポポとセイヨウタンポポが存在しており、見分け方は総包がそり返っているかいないかであるということを学んだ。函館公園ではその特徴からエゾタンポポを見つけ、学んだ撮影技法を取り入れながら、撮影を行った。函館山ではメンバーに函館山登山経験者が少なかったため、実際の函館山はどのようなものなのか知り、コンテンツの題材を探した。そこ
で、湿度や標高などによる植物の違い、鳥や虫の鳴き声を実際に感じることができた。また、歩いていく中で、自然や建造物が多く存在していることがわかった。
（※文責: 島田美優）

3.7

カスタマージャーニーマップの作成

課題過程

我々プロジェクトメンバーを対象ユーザーとし、函館山で旧登山道コースを実際に登山した時の出来事や心境を可視化するためにカスタマージャーニーマップを作成した。時間軸
を「準備、集合、登山開始、登山中、頂上、下山・帰宅」の 6 つに大まかに分けて、事実と感想を書きだしていった。感想には点数をつけて、グラフ化し、その時にあった事実とすり合わせて考察を行った。その結果、「初めての登山で不安」「登山路のスタート・ゴールがわGroup Report of 2016 SISP

-9-Group Number 11

Mt.Hakodate camera - development of systems and contents for Contexts-exhibition
からない」「動植物の種類がわからない」「登山に置けるモチベーションの維持が難しい」という点を取り上げ、特に「動植物の種類がわからない」ということに重点を置いて今後のコンテンツ作りに生かすことを決めた。以下の図は、点数をつけてグラフ化したものである。

図 3.1 カスタマージャーニーマップ（※文責: 和田龍）

展示コンテンツの設定

3.8

課題過程 カスタマージャーニーマップでの発見を元に、動植物の分布や、特徴をコンテンツにすることを決定した。また函館山に関する歴史的なこととして函館山が軍事要塞であったこと、函館戦争、函館大火のことを伝えることを仮決定した。デモとしてエゾタンポポ、セイヨウタンポポの分布映像を制作した。
（※文責: 和田龍）

システムの決定3.9

課題過程 観賞者がわかりやすく、興味を惹くインタラクティブな展示システムを構築することを目的とし、展示システムを設定した。展示物に多くの情報を持たせ、コンテンツを把握しやすくするため、函館山の情報やコンテンツを盛り込んだプロジェクションマッピング映像を模型に投影することに決定した。また、映像を操作することにより観賞者の興味を惹き、また展示物としても今までにないようなものができるのではないか、と考えた。開発当初は

IC チップを埋め込んだミニチュアモデルによって映像を操作するなどといった案が出ていた。しかしながら、操作性に多様性がなく、ただ置くだけの操作は単純すぎるのではないかという意見が出たため、操作システムの見直しを行なった。その結果、観賞者の体の動きを認識し、その動きによってプロジェクションマッピング映像を自由に操作することを可能とする Xbox One Kinect センサーを使用する案が挙がり、これを採用した。以上より、システムとしては模型にプロジェクションマッピング映像を投影し、その映像を Xbox One

Kinect センサーを用いて操作するというシステムに決定した。
（※文責: 大橋慎生）

3.10

模型への投影

課題過程 模型にプロジェクターを用いて映像を投影した。投影したものはエゾタンポポとセイヨ
ウタンポポの分布図である。その結果、地形と分布に関係性があることが考察できた。また、投影を行った結果、プロジェクターの性能によっては投影される映像が鮮明ではなくGroup Report of 2016 SISP

- 10 -

Group Number 11

Mt.Hakodate camera - development of systems and contents for Contexts-exhibition
なってしまう、模型の凹凸面に投影すると画像や文字は読むことができない、模型外の平面に映しても観賞者に気が付いてもらいにくい、模型上では直線的なものは投影に向かな
い、ということがわかったため、それを考慮した投影映像の制作をする必要があることがわかった。
（※文責: 青木花菜子）

3.11

画像認識機能プログラムの作成

課題過程

特定の色のマーカーとなるものを用意し、カメラで撮影することで模型上の座標を読みとる機能の作成をした。特定の色の一か所を検出すること、特定の座標にマーカーが来たことの判別までできた。問題としては、模型に映像を投影した上にマーカーを置くことになるので、そのせいで色が変わってしまうこと、一か所しか検出できないため複数人での使用に向かないことがあげられる。以上よりこのシステムは展示では使用しなかった。
（※文責: 村上亮太朗）

3.12

Xbox One Kinect センサーの導入と設定

課題過程

人の動きでプロジェクションマッピングとモニターの映像を操作するためにセンサーの導入を検討した。Arduino などの電子工作を考察したが模型に組み込むのが困難なため、カメラと赤外線センサーが複合された Xbox One Kinect センサーがもっとも正確に人の動きを検知することができるため Xbox One Kinect センサーを利用した。Xbox One Kinect
センサーの初期設定には Windows for SDK ver.2 と Processing のライブラリの設定を行った。
（※文責: 村上亮太朗）

3.13

Xbox One Kinect センサーの動作研究

課題過程

プログラミング言語は Processing を使用した。kinect v2 for processing というライブ

ラリの中にあるサンプルプログラムを一通り実行し、どのような動きやプログラムが可能かを考察、テストをした。その中で手の x,y 座標の取得に成功したため、それを有効活用したシステムの考案をした。最初は、模型にいくつかポイントを表示してそこに手をかざすと、そこに何があるかなどの情報を伝えるというシステムの考案をした。しかし、操作する手が映像と被ってしまい他の観賞者の妨げになってしまった。そこで、マッピングしている映像と観賞者の間に操作盤をマッピングし設けることで解決した。操作盤には基本的に円状のものがマッピングされ、そこに対して手をボタンを押すように上から下に動かしたり、かざし
たりすることで映像を変化させることができる。これは前述したような座標を取得することを利用して、操作する手の座標を取得し特定の部分に座標が来たら映像を変更するというプ
ログラムである。
（※文責: 工藤雅也）

Group Report of 2016 SISP

- 11 -

Group Number 11

Mt.Hakodate camera - development of systems and contents for Contexts-exhibition

3.14

展示システムの最終決定

課題過程 観賞者が実際に展示物に手を触れて操作できる展示システムを考案・制作し決定した。システムとしては函館山模型にプロジェクションマッピング映像を投影し、Xbox One

Kinect センサーを用いることによりコンテンツ選択や映像の操作を行ったり、設置したモ
ニターにコンテンツの内容を流したりすると言ったものである。具体的にはまず函館山に関する基本的な説明映像を流す。その映像が終わったあと、旧登山道コース、入江山コース、
千畳敷コースの 3 つの登山道の中から観賞者が選択できるようにする。登山道を選択すると、実際にプロジェクトメンバーが DJ OSMO を使用して撮影してきた登山道を歩いている様子の映像がモニターに流れる。その後、登山道ごとにコンテンツを表示し、それを選択するとコンテンツの概要がプロジェクションマッピング映像やモニターに映されるといったものである。このように観賞者が実際に手を動かすことができ、視覚的に動作すると言った
展示システムに決定した。

図 3.2

展示システムの外観（※文責: 大橋慎生）

3.15

後期フィールドワーク

課題過程 後期では以下の場所でフィールドワークを行った。
・ 旧登山道コース
・ 千畳敷コース
・ 七曲りコース
・ 入江山コース
・ 観音コース
・ ふれあいセンター
・ 立待岬
・ 市立函館博物館
最初は前期同様、コンテンツの題材を探した。ふれあいセンターでは植物の写真や詳細、函館山に関する歴史の資料があり、そこで情報収集を行った。函館山のそれぞれのコースでは、山頂以外でも風景の良いところを発見したので、コンテンツに取り入れることになった。そのため、旧登山道コース、千畳敷コース、入江山コースのパノラマ写真の撮影を行った。また、登山道している時の様子の動画を作ることが決まってからは、OSMO、ハンディカムを用いて登山しながら自分の目線に合わせて動画撮影を行った。フィールドワークと並Group Report of 2016 SISP

- 12 -

Group Number 11

Mt.Hakodate camera - development of systems and contents for Contexts-exhibition
行して、本やインターネットでも函館山について調べていき、コンテンツが決まってからはそれぞれのコースで OSMO、ハンディカムを使用して、建造物の写真など目的に合わせた撮影を行なった。
（※文責: 島田美優）

3.16

大型模型の改良

課題過程

積層模型の裏面をガムテープで補強し、模型全体をカラースプレーで白く塗った。パテ

で模型の段差を埋めるというアイデアも試したが、綺麗に仕上げることが難しく、白く塗るだけでも充分綺麗に映像が投映されると判断した。
（※文責: 折田佳大）

3.17

展示コンテンツの最終決定

3.17.1

概要説明動画の制作

課題過程

情報収集の手段の 1 つとして、函館山に関する本を探した。そこで、「函館山 自然ガイ

ド」[5] を見つけた。その本を詳しく読むことで、知らないことが多くあった。例えば、標高、周囲、面積といった基本情報、12 の山々が合わさったものであること、函館山が作られた歴史や戦争との関連といった内容である。このような函館山全体に関わることを紹介する動画を最初の説明動画として制作することにした。函館山は牛が寝そべっているように見える様から臥牛山と呼ばれていて、12 種類の山々が合わさっている。そして御殿山は標高334m、周囲 9km 面積 326 ヘクタールである。また、函館山は海底火山の溶岩などの噴出物が積み重なって出来た山であり、雨風や海流の浸食によって削られた山の土砂が砂州となり、北海道とつながって函館の土台となった。その後、明治 32 年から昭和の終戦にかけて、軍事機密区域に指定され、一般の人の立ち入りが禁止となったが、昭和 21 年には再び開放されたという内容である。
（※文責: 島田美優）

3.17.2

登山道選択の動画制作

課題過程

フィールドワークに行き、撮影を重ねていくことで、実際に函館山の登山道がどのような道になっているかを体感した。それぞれのコースで見れるものが違うということがわかったので、それぞれでどのような道になっているかを紹介したいと考えた。函館山は多くのコースが存在しているが、いくつかのコースが合わさって、1 本の道になっている場合がある。そこで、旧登山道コース、七曲り・千畳敷・入江山コース、観音コースの大きな 3 本の登山道の紹介の動画を制作しようとした。しかし、台風の影響で観音コースが入れず、建造物の撮影を行えなかった。よって、旧登山道コース、七曲り・千畳敷コース、入江山コースの 3 つの動画の制作を行うことになった。そしてコースの様子をより伝えられるようにナレーションを加えることになった。コースの距離、所要時間、それぞれの特徴の簡単な説明を音声で流している。
（※文責: 島田美優）

Group Report of 2016 SISP

- 13 -

Group Number 11

Mt.Hakodate camera - development of systems and contents for Contexts-exhibition

説明するコンテンツの決定

3.17.3

課題過程 紹介する登山道コースにある建造物、自然をコンテンツに取り入れることになった。そこでまずは、「函館山 自然ガイド」[5] を参考にした。読んでいく中で、それぞれの建造物、自然にも歴史があることがわかった。そこで、歴史と関連づけたコンテンツを作りたいと考えた。自分たちが気になってコンテンツにしていきたいと思ったものをいくつかあげた。そこから各自で少し詳しく調べて、プロジェクションマッピングでどのように説明できるかを考えた。その結果、旧登山道コースでは杉、植物、七曲り・千畳敷コースでは千畳敷砲台跡、
立待岬、入江山コースでは入江山砲台跡、ロープウェイを紹介するコンテンツを制作することが決まった。それぞれのコンテンツの詳細は以下の通りである。
風景

3 つのコースの自分たちで撮影したパノラマ写真をディスプレイに表示させ、XboxOne Kinect センサーを利用して手を左右に動かすことで、画面の左右の操作を行う。
杉 「函館市史デジタル版」[7] で調べた。植林についての歴史をプロジェクションマッピン
グで模型に投影する。1801 年に植林が義務付けられ、1810 年には杉 2 万本、松 3 千本を植林し、現在は伐採や火災などの影響で残っているものは少なくなっているという内
容である。
植物

旧登山道コースで撮影した花を 8 種類紹介する。名前、何科、何属、咲いている時期

を「函館山 自然ガイド」[5] で調べ、それをディスプレイに表示させる。
千畳敷砲台跡 「函館山 自然ガイド」[5]、「 函館市史デジタル版」[7] で調べた。戦闘指令所が使われていた時のことをプロジェクションマッピングで模型に投影し、戦闘指令所、電話の写真をディスプレイに表示する。建設時に函館山の全体を見渡せるように周りのこぶ山を削ったため、指令所より高いところは頂上付近だけになっているという内容である。
立待岬 「函館山 自然ガイド」[5]、「函館市公式サイト」[8] 、「 函館市公式観光情報サイト
はこぶら」[9] で調べた。昔の立待岬の歴史をプロジェクションマッピングで模型に投影し、立待岬という名前の由来をディスプレイに表示する。昔は採石場として使われていて、その石は 1878 年に起きた火事の復興のためや五稜郭の石垣に使われていたという内容である。
入江山砲台跡 「函館山 自然ガイド」[5]、「函館要塞を尋ねて」[6] で調べた。演習砲台と観測所の成り立ちをプロジェクションマッピングで模型に投影し、駒ケ岳が見れるといったことを説明しながらディスプレイに表示する。演習砲台跡は練習用の施設で、昭和 4年に作られた。八八式海岸射撃具が使われ、コンピュータによって計算処理される新しい観測機器が採用されていたといった特徴がある。また、その近くには観測所跡があり、函館山の他の施設よりも、性能の良い観測機器が使われていたという特徴がある。
現在は、駒ケ岳を一望できることもあるといった内容である。
ロープウェイ 「函館市史デジタル版」[7]、「函館山ロープウェイ」[11] で調べた。ロープ
ウェイがいつ建てられているか、また、函館山が観光地となるまでの歴史をプロジェク
ションマッピングで模型に投影し、現在のロープウェイの写真をディスプレイに表示する。昭和 25 年に観光道路が、28 年には展望台が建てられた。また、33 年にロープウェ
イの工事が行われ、翌年に営業が開始された。そして、現在では 125 人がロープウェイには乗れるという内容である。
（※文責: 島田美優）

Group Report of 2016 SISP

- 14 -

Group Number 11

Mt.Hakodate camera - development of systems and contents for Contexts-exhibition

3.18

ディスプレイモニタの動作プログラムの作成

課題過程

プログラムの作成は Processing で行った。Xbox One Kinect センサーが感知した観賞者の右手の座標によって、画面に映し出されるコンテンツを切り替えている。大まかな構造としては、プログラムのそれぞれの行程を以下のフローチャートに従って段階に分け、 movienumberという変数の値を変えることでディスプレイの映像を切り替えている。movienumber は、右手の座標が特定の範囲内になった時、再生中の動画の再生が終了
した時、一定時間経過した時に切り替わるようになっており、コンテンツに合わせて適切に

movienumber が変化するようになっている。

図 3.3 展示の流れ

試作段階では、ディスプレイにコンテンツを表示する際に「プロジェクションマッピングとディスプレイのどちらを見ればいいのかわからない」といった視線誘導の問題が見つかったので、コンテンツを表示するのは常にマッピングかディスプレイのどちらかとし、コンテン
ツを表示していない方の画面を暗くした。同時に、目線が下から上、上から下と動くように、画面の下から上、上から下へとフェードがかかるように明るく・暗くなるようにした。

図 3.4

フェードプログラムの出力例

このシステムの概要は、まず画面を横に 20 分割して、色は黒で透明度が 0(0 255 で数値が低いほど透明度が高く、0 が完全に透明、255 が真っ黒である) の横長で細い長方形を並べる。その長方形の透明度を上から順番に 1 コマごとに 10 ずつ増やしていくことで、上の図のように上から下へ流れるようにフェードをかけて暗くしている。明るくするときは逆に下から順番に透明度を 10 ずつ減らしていくようになっている。パノラマのコンテンツでは、Xbox One Kinect センサーが感知した観賞者の右手の x 座標と画面に表示した画像の x 座
標を同期させ、観賞者が画像を手でスライドさせ楽しむシステムを制作した。画像は各登山道毎に計 3 種類用意した。試作段階で担当教員から「ただ画像が表示されるだけでは操作方法がわからない」との意見を頂いた為、画面下部にシークバーのようなものを設置し、直観的に操作出来るよう工夫した。プログラムの作成時には、プログラムを何度も一から書き直して無駄を省き、関数を作成してなるべく簡略化し、なるべく動作が軽くなるような構成にすることを徹底した。また、プログラムの随所にコメントによる説明を入れ、プロジェクト
メンバーが誰でも読めて改善できるプログラムにした。
（※文責: 折田佳大）Group Report of 2016 SISP

- 15 -

Group Number 11

Mt.Hakodate camera - development of systems and contents for Contexts-exhibition

3.19

Xbox One Kinect センサーからの信号を処理するプログ
ラムの作成

課題過程 サンプルプログラムを参考にスケルトンの検出を行い、そこから手の座標を取得するプ
ログラムを作成した。使用した Xbox One Kinect センサーは最大 6 人を同時に検知してしまい、他の人に操作の優先権が発生してしまうことがあった。それを防ぐために、展示物に対してある特定の場所に立っている人だけが操作できるようにマスクをかけた。また、両手での操作をテスト的に行ったが左手で操作したつもりが右手が優先的に反応してしまった、またはその逆のような誤作動が複数回現れたために右手だけの操作にすることで誤作動を防いだ。映像を切り替える時に表示する選択ボタンを函館山のマッピング映像内に表示していたが文字のゆがみなどで見にくいことを防ぐために、画面外に操作スペースを配置し、丸い
ボタンのようなものを投影することで選択を促す手法を取った。
（※文責: 工藤雅也）

3.20

プロジェクションマッピングの動作プログラムの作成

課題過程 映像や写真を模型にただ投影しただけでは大きさや角度などのズレが生じてしまった。
それによって映像がきれいに見えなかったり文字が歪んでしまい読めなかったりなどの問題点が発生した。そこでズレを修正するプログラムの作成をした。このプログラムでは

keystone というライブラリを利用した [10]。このプログラムはいくつかの画面を張り合わせるようにすることできれいなマッピングをすることが可能となる。今回制作した展示物では模型にマッピングする画面とそのマッピング映像を操作する操作盤の 2 つの画面をマッピングすることにした。また、投影した映像や画像を切り替えるプログラムの作成を行った。
大まかな構造は 3.17 と同じである。
（※文責: 工藤雅也）

3.21

プロジェクションマッピングとディスプレイの動作の同期

課題過程 プロジェクションマッピングのプログラムとディスプレイのプログラムのそれぞれの動
作のタイミングが合うように調節を行った。システムの構造上、片方のプログラムがコンテンツの映像を再生している間にもう片方のプログラムは映像の終了を待ってから次の動作へ移行しなければならない。お互いのプログラム間で変数の値の共有が出来なかったので、コンテンツの映像の再生時間を測定し、その時間分動作を遅延させることにした。例えばディスプレイで 10 秒の映像を再生する時、マッピングのプログラムのフレームレートが 60 であるため、1/60 秒毎に 1 増える変数 count の値が 600 になるまでは変数 movienumber の値が変化しないようになっている。どうしてもディスプレイのプログラムに比べマッピングのプログラムが重く、時間にズレが生じてしまうため、何度も試験を繰り返してタイミングを合わせた。
（※文責: 折田佳大）Group Report of 2016 SISP

- 16 -

Group Number 11

Mt.Hakodate camera - development of systems and contents for Contexts-exhibition

3.22

プロジェクションマッピング動画の制作

課題過程

動画は Adobe After Eﬀect CC を用いて制作した。そして、デモ動画を実際に函館山の模型へプロジェクターで投影をしながら、模型への移り方を確認し動画に修正を加えて行った。その際に、その後行うコンテンツ動画にて影響を及ぼすであろう点を見つけながら動画を制作した。例えば、山の凹凸によって投影映像が見えにくくなる所や、映像の解像度が低いところである。
（※文責: 和田龍）

3.23

コンテンツの動画制作

課題過程

映像コンテンツとしてプロジェクションマッピング用に 5 本の動画を制作した。プロ

ジェクションマッピング用の動画は、4 名で分担した。まずそれぞれのコンテンツについての調査を行った。主な情報源として書籍や、信用のできるホームページを用いた。そこから、それぞれのコンテンツが 1 分程度にまとまるように動画の絵コンテとナレーションを制作し、その音声に合わせて模型に投影する動画を Adobe After Eﬀect CC を用いて制作した。実物の写真や文字など、プロジェクションマッピングで模型に投影できないようなものもあったため、その場合にはディスプレイに表示することで対応した。
（※文責: 青木花菜子）

3.24

ディスプレイモニタの動画制作

課題過程

コンテンツの説明を模型に投影する際に、模型だけでは伝わりにくいと考えられる画像や動画を補足として観賞者に見てもらうことができるような制作を行った。ディスプレイモ
ニタを使用することでより鮮明かつ綺麗に見せることができるため、解像度の低いプロジェ
クターでは映すことの難しい画像や細かい説明を表示することができることから、模型の投影映像では説明しきれない内容を説明するものとして制作することを決定した。具体的な制作物としては、登山道を選択した後に自分達で登山した様子を 30 秒に編集した動画、各コンテンツで必要となる植物の写真と説明をのせた画像やナレーションだけではわかりにくい
言葉の説明を画像にしたものの 2 種類を制作した。
（※文責: 藤原瞳）

3.25

HAKODATE Developer Conference 2016 への参加

課題過程2016 年 10 月 22 日に公立はこだて未来大学で開催された、HAKODATE Developer

Conference 2016 にて本プロジェクトの発表を行った。発表した内容としては、中間発表会と同じ、スライド形式での発表を主として行った。また中間発表会と違い、発表場所の関係から実際に展示物を見せることができなかったため、別日に展示物を動かしているデモ映像を撮影し編集した動画を発表に使用し展示物を見せることとした。
（※文責: 藤原瞳）

Group Report of 2016 SISP

- 17 -

Group Number 11

Mt.Hakodate camera - development of systems and contents for Contexts-exhibition

3.26

学内ミュージアムでの展示

課題過程 2016 年 11 月 25 日に本学ミュージアムにて展示を行なった。実際に学生を対象として展示物を操作してもらい、操作後に成果を確認するためのアンケートを行なった。アンケー
ト内容としては使用感・実際にみたコンテンツなどに回答してもらった。評価点としてはコ
ンテンツの内容に関して、登山道に対して複数のアプローチがあってよかった、見ていて面白かったなどの評価を得た。また、システムに関しても一定の評価を頂いた。一方で、操作性、操作法に関しての指摘もあった。操作性に関しては快適に操作できなかったなどの指摘があった。これは使用していた PC のスペック不足が考えられる。また、操作法に関してもわかりにくいなどの意見がたくさん寄せられた。これはユーザーインターフェースに対する詰めの甘さが見える結果となった。以上のよう実際に学内ミュージアムにて展示することによって、評価点と改善点が浮き彫りになった。
（※文責: 大橋慎生）

3.27

展示後の評価における改善

課題過程 前述での学内展示において得られた評価点と改善点のうち、よりよい展示物に改善できる箇所として、それまで使用していたノートパソコンによるスペック不足の問題が改善できると考えた。スペック不足によって展示プログラムをスムーズに動かすことができず、展示として成り立つことが難しいことが学内展示においてわかったためである。よって、プログ
ラムをスムーズに動かすことのできるだけのスペックを確保するため、より性能の良いデス
クトップ PC を導入し、プログラムをスムーズに動作させることができるよう環境構築などを行った。デスクトップ PC は他プロジェクトのメンバーが所有しているものを借りて使用した。なおそれぞれの PC の性能は以下の通りである。

図 3.5 PC スペックの比較図（※文責: 藤原瞳）

Group Report of 2016 SISP

- 18 -

Group Number 11

Mt.Hakodate camera - development of systems and contents for Contexts-exhibition

第 4 章 課題解決のプロセスの詳細
4.1
5月

青木花菜子の課題解決過程の詳細
函館山の積層模型の制作（第 1 弾）
撮影機材の操作方法の学習
撮影技術の学習
フィールドワーク
・

函館公園

・

旧登山道コース・

千畳敷コース

函館公園フィールドワークの動画制作

6月

函館山の積層模型の制作（第 2 弾）
コンテンツの案の検討

7月

映像コンテンツの制作
コンテンツ案の検討
函館山の積層模型の制作（第 3 弾）

9月

コンテンツ案の再検討
フィールドワークでのコンテンツ素材の収集
コンテンツの情報収集

10 月 コンテンツ動画の絵コンテ制作
コンテンツ動画の制作
コンテンツ素材の収集
コンテンツの情報収集
フィールドワーク
・

旧登山道コース・

千畳敷コース11 月 コンテンツ動画の制作
ディスプレイ表示用の画像制作
コンテンツ動画用のナレーション原稿の制作

12 月 引き続きプロジェクションマッピング動画制作、修正
ディスプレイ表示用の画像制作

5 月は函館山の積層模型の制作を行った。私の所属したグループでは材料であるスチレンボード
を、レーザーカッターを用いて切り出した。そのための等高線のデータを Adobe Illustrator CCを用いて制作し、切り出しをするところまで行った。カットするときに材料が溶けたことによって、部品が薄くなってしまい模型の強度が低くなったり、穴が開いたりしてしまった。また、空き時間の都合から、組み立てに参加することができなかったが、模型の組み立て時にうまくつなげることができなかったようで模型にゆがみが生じてしまった。そのことから、レーザー出力用の等高線データを作るときに切断幅は余裕を持った広いものにする必要があること、自分以外が組み立てることを考えてわかりやすい印等をつける必要があったことを発見した。撮影機材の操作方法
は、私の所属したグループでは HDR の操作方法を最初に学んだ。専用のスマホアプリを利用する

Group Report of 2016 SISP

- 19 -

Group Number 11

Mt.Hakodate camera - development of systems and contents for Contexts-exhibition
ことでカメラの操作を行い、長い棒の先端に取り付けることによって高い位置、低い位置からの撮影ができ、標準・広角の切り替えによる見え方の異なる撮影を行うことができるものであった。人間が普通に立って見るのとは違った視点からの映像を撮ることができるので、新たな発見があるのではないかと考えた。他の撮影機材も使い方を教わることで扱えるようになったため、フィール
ドワークでの撮影の際にこれらの機材を用いた撮影を行った。撮影技術の学習は、技法、用語を学んだことによって、今までフィーリングで写真を撮影していたが、心がけて撮ることができるよ
うになれた。また、撮影技術の学習の後に一眼レフを購入し、写真を撮影する機会が多くなった。
フィールドワークはこの時期に 3 回参加した。函館公園では、主に撮影機材の使用練習を目的として散策した。HDR を持つのに両手がふさがるため、カメラを持つ人とスマホで撮れている映像を確認する人に役割を分けて撮影する必要があり、HDR の扱いの難しさを感じた。函館山の旧登山道コースでは、この時初めて函館山を自分の足で登山し、一部分ではあるが自然や砲台などの歴史的建造物のような夜景以外の函館山について知ることができた。千畳敷コースでは、天気が悪くあまり写真や動画を撮ることができなかった。しかし、戦闘指令所の中を散策し、昔の空気感を感じることができた。函館公園フィ―ルドワークの動画制作では、私は動画の制作に主に Adobe After

Eﬀect CC を使用した。エゾタンポポとセイヨウタンポポの違いが分かるように、テロップと、角にはアップになったタンポポの花の画像を表示しつつ、それぞれのタンポポを見つけた地点の周辺を動画で流した。花の画像の編集には Adobe Photoshop CC を用いた。フィードバックの結果、ストーリー性を持たせないと何が伝えたいのかわからないという問題点があり、もっと説明を入れるべきであったことが分かった。

6 月は 2 つ目の函館山の積層模型の制作を行った。1 つ目の模型とは大きさも切り出す標高も違っていたため、ほかのメンバーの協力を得つつ、1 つ目の模型を制作したときの反省点も踏まえたレーザーカッターの出力用のデータを作成した。函館山を 10 分割してしまうことから、部品にそれぞれ番号を振って切り出しを行ったが、制作時に誤って必要な部品まで捨ててしまうことがあったため、データを作成した人と模型を組み立てる人の間での連絡不足があった。

7 月はまず 1 つのコンテンツとして、エゾタンポポとセイヨウタンポポの分布を函館山に投影するための動画を制作した。私が行ったのはコンテンツ動画制作のベースとなる海面と、函館山周辺の航空写真を組み合わせた背景の制作だった。制作には Adobe After Eﬀect CC を利用し、海面作成のためにフラクタルノイズを利用した。コンテンツ案の検討は、函館山を実際に登山したからこそ発見できたものから、函館山の魅力として発信できそうなものを考えた。この時点では、模型に手をかざすと函館山に生息する植物や野生動物を発見することができ、その生態を見ることができるというものや、函館山は昔はげ山で、植林が行われて今の自然があるという背景から観賞者の手で函館山を緑にしてもらうものなどを考えていた。

7 月下旬には、3 つ目の積層模型を制作した。レーザーカッター出力用のデータを前回 2 回の反省を踏まえて制作し材料の切り出しを行った。この時の模型制作では組み立てにも参加し、データ作成時に考慮したことを伝えながら組み立てを行うことができた。完成品は比較的きれいに制作することができ、情報共有の大切さを学ぶことができた。

9 月はコンテンツ案の再検討を行った。Xbox One Kinect センサーでは、模型上での観賞者の手の動きをうまく感知することができず、今まで考えていたものでは実現が難しくなったため、見せ方やコンテンツ自体を変更することにした。コンテンツは主に登山道周辺の自然や歴史的建造物を紹介することにし、模型に動画を投影することで動きを出すことにした。また、それに伴い必要になった写真や映像の撮影と、コンテンツについて更なる理解を深めるための情報収集を行った。

10 月はコンテンツ動画の制作と引き続き撮影と情報収集を行った。動画制作を行うときに、絵コンテなどを考えずに制作を行ってしまったため内容がまとまっておらず何が伝えたいのかわからないとの指摘があったため、絵コンテを制作し話の内容をまとめることにした。

Group Report of 2016 SISP

- 20 -

Group Number 11

Mt.Hakodate camera - development of systems and contents for Contexts-exhibition
11 月は絵コンテからきちんと制作して動画制作にあたった。また、動画内で使用するナレーショ
ン用の原稿を制作した。動画制作のほかに、コンテンツの 1 つである函館山の植物の説明を紹介する画像の制作も行った。

12 月は実際に模型に投影した様子や、展示を行って得たアンケートをふまえて、制作した動画の修正を行った。制作したコンテンツのうち、植林された杉についての動画が成果発表会の際に展
示物のコンテンツとして紹介された。
（※文責: 青木花菜子）

4.2
5月

藤原瞳の課題解決過程の詳細
函館山模型プロトタイプ第 1 弾の制作
函館公園や函館山でのフィールドワークにおける記録撮影
カスタマージャーニーマップの作成

Adobe Illustrator CC の技術習得
フィールドワーク

6月

・

函館公園

・

旧登山道コース

函館山模型プロトタイプ第 2 弾の制作
コンテンツ案やシステム案の検討
記録撮影データの整理作業

7月

引き続きコンテンツ案やシステム案の検討
中間発表会にむけての準備と発表

9月

コンテンツ案・展示システム案の再検討
フィールドワークでのコンテンツ収集

10 月 最終的な展示システムの設定
コンテンツ素材の収集
模型投影の登山道選択・コンテンツ選択部分
コンテンツ (ロープウェイ・立待岬) の画像動画制作
フィールドワーク・

市立函館博物館

・ふれあいセンター

・

旧登山道コース

11 月 ユーザテスト及び学内に向けた展示の提案と実行
展示におけるミュージアムの手配
フィールドワーク・

ふれあいセンター

・

旧登山道コース

・

観音コース

・

立待岬

12 月 引き続きプロジェクションマッピング動画制作
コンテンツ制作部分の修正
成果発表会に向けたハードウェア環境改善におけるデスクトップパソコンの手配と環境設定
及び維持全体を通して、スケジュール管理や必要書類の作成整理、活動記録映像の撮影

Group Report of 2016 SISP

- 21 -

Group Number 11

Mt.Hakodate camera - development of systems and contents for Contexts-exhibition
プロジェクトが開始してから 5 月は、第 1 弾の函館山模型プロトタイプ作業として、カッターナ
イフでスチレンボードを切り取り積層模型制作方法 [2] を用いて制作を行い、プロトタイプ第 1 弾を完成させた。また函館公園で行ったフィールドワークでは、ハンディカムを用いて、映像や写真の撮り方の練習を行いながら記録撮影を行った。以降プロジェクトの活動記録撮影にはこのハン
ディカムを用いて行った。その函館公園でのフィールドワークを基にカスタマージャーニーマップを作成し、登山の開始から下山までを付箋に書き出して表に貼りつけ、それぞれに点数をつけて自分自身だけでなくメンバー全員の点数を書き出してグラフを作成した。また、グラフを見て得られたこと、わかったことをまとめる作業を行った。今後コンテンツの動画や画像を制作する際に使うことを考え Adobe Illustrator CC の使い方をメンバーと一緒に学習した。

6 月は第 2 弾模型プロトタイプをレーザーカッターを使用して模型を制作することに決定したため、レーザーカッター講習を受け認定証を得て作業を行った。前回と同じスチレンボードを用いてレーザーカッターで切断したパーツを前回と同じ積層模型制作方法 [2] を用いて組み立て完成させた。前回と違い、2500 分の 1 サイズと大きめの模型を制作しようとしていたため、レーザーカッ
ターの関係からデータを 10 分割して切り分け、積層模型の制作要領でパーツを積み上げ、段差のないように注意をしながら制作を行った。その模型制作を行いながら、制作した模型で伝えたいコンテンツ案やコンテンツを表現するためのシステム案の検討をメンバー全員で行った。話し合いだ
けでなくスライドを作ったり絵を描いたりなどして考えをメンバーと共有することが出来るように工夫した。また、函館公園で行ったフィールドワークなどの撮影したデータを Google ドライブや

Flickr などの web アプリケーションサービス等を用いて整理し、メンバーでデータの共有を行えるような環境を構築した。

7 月は引き続きコンテンツ案やシステム案の検討、実践を行った。実際にミュージアムを借りてどのように投影されるのかなどを確認した。投影する中で気づいた箇所や思ったことなどを積極的に制作者に聞いて改善を図った。中間発表会の発表スライドや発表原稿の準備及び発表を行い、中間発表会でのアンケートをもとに再度検討すべき箇所を確認し、後期の活動方針を考えた。

9 月から 10 月にかけては、展示システムについて再度話し合い、検討を行った。また最終的に展示物としてどのような展示の流れにするかといったシステムの流れを図やイラストなど具体的に示して、メンバー全員が考えを共有できるようにした。最終的な展示システムの流れを決定した
際には、見せるためのコンテンツを制作する側として、函館山の登山道の選択・各登山道のコンテ
ンツの選択・立待岬 [5][8][9] についての説明動画・函館山ロープウェイ [11] についての説明動画の 4 つを Adobe After Eﬀect CC を用いて制作した。またロープウェイのコンテンツに関しては、
ディスプレイモニタに表示する画像も制作した。画像は実際のロープウェイのゴンドラの画像を担
当教員から Adobe After Eﬀect CC は使用経験がなかったため、使うことのできるメンバーから制作方法を教えてもらいながら制作を行った。いずれも模型に投影する動画のため、登山道の配色
やコンテンツ選択の際の挙動を観賞者が見るだけで理解できるように何度も投影し、確認しながら制作した。

11 月は制作した展示物を実際に第 3 者となる観賞者にテストしてもらう展示と、学内の学生や教員に向けた展示を行う計画を率先して立てミュージアムの使用申請の手続きを行い、実際に開催した。展示をするにあたって動画制作を引き続き行いつつ、決定した展示システムをわかりやすく
図示したものを制作し、それに沿って完成しているコンテンツ部分と完成していないコンテンツ部
分を確認しながら、プログラムの担当と突き合わせ作業を行った。展示を行っている間、展示物の評価や改善箇所を発見するためのアンケートの作成を行い、各展示を行っている間も自分が制作したコンテンツの動画だけでなく、展示全体が動いている中で気づいた箇所の修正を行った。またア
ンケートで得られた意見などから評価点や改善点をまとめ、成果発表会にむけて改善を行った。

12 月は展示の際に問題になっていたハードウェア環境の改善を行った。それまで使用していた推奨機ノートパソコン 1 台のみでは、スペック不足などからスムーズな展示環境とはならなかったGroup Report of 2016 SISP

- 22 -

Group Number 11

Mt.Hakodate camera - development of systems and contents for Contexts-exhibition
ため、スペックのより大きなデスクトップ PC を導入することを提案した。デスクトップ PC については、他プロジェクトのメンバーが所有しているものを拝借した。借りたデスクトップ PC の導入の手配と環境構築を行い、展示がスムーズに行うことが出来るよう改善を図った。成果発表会ではデスクトップ PC を用いた展示物として発表を行った。発表の際は、観賞者が立つと想定している箇所に人が集まる可能性を考えて、模型を操作するシステム部分を手作業で動かし、パノラマ写
真などディスプレイモニタを動かすシステムは Xbox One Kinect センサーを用いて行った。年間を通して、プロジェクトとして活動するにおいて必要となる申請や書類の作成と提出、映像を始めとした活動記録撮影を行った。
（※文責: 藤原瞳）

4.3
5月

島田美優の課題解決過程の詳細
函館山の積層模型の制作
フィールドワーク
・

函館公園

・

旧登山道コース

Adobe Illustrator CC の基本操作の習得
カスタマージャーニーマップの制作

6月

函館山の積層模型の制作
展示システム案・コンテンツ案の検討

IC についての調査
中間発表会用ポスターの文章の制作

7月

展示システム案・コンテンツ案の検討
中間発表会用ポスターの文章の修正

9〜10 月 フィールドワーク
・ふれあいセンター・

市立函館博物館

・

旧登山道コース

コンテンツ案・展示システム案・ユーザーインターフェースの再検討
登山道 (旧登山道コース) 動画の制作

11 月

フィールドワーク・

ふれあいセンター・

函館山旧登山道コース

・

入江山コース

・

観音コース

・

立待岬

コンテンツ案・展示システム案・ユーザーインターフェースの再検討
コンテンツの決定
登山道 (入江山コース) 動画の制作
登山道 (旧登山道コース) 動画の修正
コンテンツ動画のディスプレイ用の画像 (立待岬) の制作
コンテンツのナレーション原稿の制作

12 月

登山道の動画 (旧登山道コース、入江山コース) の修正
成果発表会の準備

Group Report of 2016 SISP

- 23 -

Group Number 11

Mt.Hakodate camera - development of systems and contents for Contexts-exhibition
5 月はプロトタイプ第 1 弾の模型制作を行った。他の 2 つのグループとは違った制作方法、材料が良いと考え、スタイロフォームを電熱線で切り、模型を作った。第 2 弾では Adobe Illustrator

CC の基本操作を教えてもらい、レーザーカッターで切るためのデータを作成した。そして切ったものを組み立てる作業を行った。また、最初の段階で撮影機材の使い方や撮影技術の方法を学んだ。今まではものを正面から写真を取ることが多かったが、角度を変えたり、ものとの距離を変えることで、写真の印象が変わるということがわかった。また、カメラワークを意識をして見ると様々なものがあるということもわかった。そして、それぞれのカメラワークには意味があるということも知ることができてとても勉強になった。撮影機材に慣れるということで、最初に OSMO を扱った。iPhone に DJI GO をインストールし、それを OSMO と連携をした。そして、撮影技術などの学んだことを生かして、函館公園、函館山の旧登山道コースでのフィールドワークを行った。函館公園では撮ったものを使って動画制作を行った。ストーリー性をつけたつもりだったが、それがうまく伝わらず、動画制作の難しさを知った。函館山では撮影の練習だけでなく、体感するためにも行った。そこでは、植物の写真をメインに撮影を行った。撮る角度だったり、撮った写真を見ると、逆光であったり、ピントがうまく合わなかったり、上手に撮影することができないものが多かった。フィールドワークに行った後、カスタマージャーニーマップの制作を行った。初めての函館山の登山ということで疲れなどがあり、全体的に点数が低かった。他の人の結果を見て、点数が高い人もいたり、グラフ化したことによって、人の気持ちの上がり下がりが見れて面白かった。そしてそこから分析をして理由を見つけ、コンテンツ案を考えるのに役立てたので、今後、プ
ロジェクト学習以外でも使えるものであると思った。
。

6 月は模型制作を続けて行った。主に組み立て作業を行った。切り出したパーツが小さいものもあり、どれがどこのパーツか分からなくなってしまった。次作るときは切り出したらすぐにわかる
ように番号をふるなどして、組み立てやすいようにしたいと思った。また、映像の操作に IC チッ
プを用いるという案が出たので、IC について調べた。最終的に IC は展示物には使用しなかったが、IC の種類や使用例、仕組みなど、自分の知識が増えたので良い経験となった。

7 月は中間発表会にむけての準備を行った。その中でポスターの文章を考えた。発表当日には発表者の 1 人として参加した。質問された時にうまく答えることができなかったのが 1 番の反省点である。前期は展示システムとコンテンツ案を考えることが多かったが、あまり意見を述べることができなかった。

9 月からは本格的にコンテンツをどのようなものにするかを考えた。「函館山 自然ガイド」[5] を情報源の基本として、函館山に存在している建造物、自然がどんなものがあるかを調べた。函館山については夜景のことしか知らなかったため、函館山は全体であったり、それぞれの建造物であったり、歴史があるということなど色々知れて勉強になった。

9〜11 月では函館山の入江山、旧登山道、観音コースでフィールドワークを行った。主に登山をしている時の自分の目線に合わせた動画やパノラマ写真、植物の写真の撮影を行った。他にも、ふれあいセンター、市立函館博物館に行き、情報収集を行なった。ふれあいセンターでは資料が多くあり、コンテンツ案を考えるのに参考になった。後期も旧登山道コースに登ったが、前期とは違い、植物がほとんどなかった。そのことに早く気づいていれば、もっと前の時期にフィールドワークに行って、咲いている綺麗な花を撮ることができたので、コンテンツの制作に支障が出てしまったと思った。また、登山道の動画を作るにあたってどのような撮影方法がいいかを考え、パラパラ漫画のように写真を 1 枚 1 枚繋げて動画を作るという案がでた。そこで、入江山コースに行き、撮影をし、その写真を繋げて動画を作った。今回はテスト用ということで、自分の歩幅の 3 歩、5 歩、10
歩の 3 パターンの動画を作った。それとは別に、旧登山道コースで撮影した動画を繋げた動画も作った。これらを比較した結果、最終的な動画の形となった。観音コースでも登山道の撮影をしたが、台風の影響で入れない部分があり、建造物などがない状況であった。後期はメインで作業したのが動画制作だったため、1 番大変だった。登山道の動画は iMovie で制作し、旧登山道コースとGroup Report of 2016 SISP

- 24 -

Group Number 11

Mt.Hakodate camera - development of systems and contents for Contexts-exhibition
入江山コースを担当した。まず、動画の時間をどれくらいにするかを考えた。旧登山道コースを登山するのに 1 時間以上かかり、登山をしている最中、いろんな発見をした。しかし、全部それを動画にしようと思うと、長時間の動画になってしまい、観賞者があきてしまう。よって短時間かつ観賞者にも登山道の様子が伝わる動画を作ることを目標とした。PC のスペックが改善される前は動画の再生スピードが遅く、30 秒の動画を作っても、実際の動画時間はもっと長くなってしまった。
そこで、動画自体の再生スピードをあげて、実際に再生して調整するという作業を何回も行い、自然に動画が再生されるようにした。コンテンツでは立待岬を担当した。「函館山 自然ガイド」[5]、「函館市公式サイト」[8]、「函館市公式観光情報サイトはこぶら」[9] を使って内容を考えた。調べていく中で、立待岬のことをあまり知らない人でも名前の由来や五稜郭との関連付けたものにする
ことで少しでも興味を持ってもらえるのではないかと考えた。内容が決まってからはナレーションの原稿を考え、プロジェクションマッピングで投影する絵コンテをかき、ディスプレイに表示する画面を制作した。
（※文責: 島田美優）

4.4
5月

和田龍の課題解決過程の詳細
函館山の積層模型の制作
フィールドワーク

6月

・

函館公園

・

旧登山道コース

函館山の積層模型の制作
映像コンテンツの制作

7月

映像コンテンツの制作

9 月〜10 月 映像コンテンツの制作と修正
フィールドワーク
・

七曲りコース・

千畳敷コース・

市立函館博物館

・

立待岬

11 月〜12 月 映像コンテンツの修正
5 月はまず、函館山の積層模型を制作した。プロジェクトメンバーで 3 つのグループに分かれて山の積層模型の制作方法が書かれているホームページ [3] を参考にし、青木・大橋とともに模型を制作した。このホームページでは手作業で模型を制作するという説明があり、334m もある函館山を参考にしたホームページのように手作業で制作することは非効率であるので作業の効率化を図る
ために、2 年次に技術習得をしていたレーザーカッターの電子機器を使う制作方法を考えた。その方法を応用して、積層模型の技術習得をした。また、フィールドワークでは、外でカメラを使う機会があるということで、担当教員によるカメラでの写真の撮り方のワークショップにも参加し、写真、動画の撮影技法を学んだ。さらに、本プロジェクトの担当教員が所有している撮影機材の使い方を学んだ。他には函館公園と函館山にある登山道の 1 つの旧登山道コースへフィールドワークを行った。函館公園ではエゾタンポポの発見を、旧登山道コースでは函館山とはどのような場所で何を見ることができるか、何があるのか、など函館山を知るという事を重要視して行った。特に函館公園でのフィールドワークはプロジェクトとして初めて行うフィールドワークであったので、撮影
機材の撮影練習やフィールドワークにおける初歩的なものを学ぶ場でもあった。

Group Report of 2016 SISP

- 25 -

Group Number 11

Mt.Hakodate camera - development of systems and contents for Contexts-exhibition
6 月は 5 月に初めて制作していた函館山の積層模型から、プロジェクトメンバー全員で評価を行った。そこで、私と青木・大橋とともに制作した模型、レーザーカッターを用いた積層模型の制作方法で今後模型を作っていくと決まった。その際に、実寸大サイズで作られていなかった事や、大きさが小さいという問題を考慮し、2 つ目の函館山の積層模型を制作した。また、函館山の積層模型へ映像を投影するというコンテンツを行うと決定したため、Adobe After Eﬀects CC を使用し、投影する映像を制作した。そして、このアイデアをどう生かすことが出来るかを検討しあった。

7 月は 6 月から検討していた投影する映像をコンテンツとして表現することになり、函館山の自
然や歴史、文化などを模型に投影しようとプロジェクトで決定した。そして、担当教員やプロジェ
クトメンバーからフィードバックをもらいながら、改良、改善を行った。そして、中間発表会に向けて発表の準備を行った。

9 月では、前期で既に制作していた映像を今後、目指す展示物に対応したものへと修正を行いつつ、新たな映像コンテンツを参考文献を探しながら、制作した [2][6]。また、映像コンテンツの情報収集の一環として、再びフィールドワークを行った。このフィールドワークでは、函館公園内にある市立函館博物館へ行った。市立函館博物館では、どのようなものが展示されているか、という
下調べと何か自分たちが作るコンテンツのアイデアとして得られるものがあるのではないかという目的で見学をした。登山コースでは展示物のコンテンツとして道のりの映像や道中での写真、登山
道から見渡せる風景の映像や写真を撮影した。

10 月では、引き続きコンテンツとしての映像制作を行った。また 10 月でもフィールドワークを行った。この月では、函館山の登山コースである七曲りコース、地蔵山コース、千畳敷コースの 3
つのコースを歩いた。このコースでは展示物のコンテンツとして函館山の麓にある七曲りコースから地蔵山、千畳敷とつながっている登山コースの道のりの映像やその道中での写真、見渡せる風景の映像や写真を撮影した。また、函館山の模型へ投影をする際、投影映像が見えにくいという問題が起きていた。函館山の模型はスチレンボードという素材で作られており、この素材の色はやや明るい橙色をしている。その影響で投影をすると映像が見えずらいということが起きていた。この問題を解決するために、3.16 にある説明のように模型を白く塗り映像を見えやすくしようという案をプロジェクトメンバー内で提案された。そこで、市販で売られている白色に塗るスプレー缶を使い函館山の模型を折田とともに表面を白く塗った。むらもなく濡れたことにより、以前より模型に映る映像が見えやすくなった。

1 月〜12 月では、9 月〜10 月にて制作した映像コンテンツを他のプロジェクトメンバーや担当
教員、TA の方々に見てもらい、フィードバックをいただいたり、実際に本番さながらの環境下で投影を行った際に発見したことを元に修正を行った。主な指摘としては、観賞者に誤解を生む表現方法がある、本来の参考文献にはない表現方法を用いているなどのように、展示物としておかれる
際に注意するべきである項目を指摘していただいた。また 11 月中旬以降になると、コンテンツ動
画にてナレーションが必要であるという判断が下った。本来自分たちが思い描いていた展示物は、文字による誘導がなくても理解できる展示物を作ろうと思い制作をしていた。だが、文字による説
明なしではわかりずらいのではないか、という意見が担当教員や TA の人たちから募った。ただ単
純に、凸凹とした表面をしている函館山の模型へ文字を映そうとすると文字が歪み、見にくいという問題があった。そのため、模型へ映す文字は最小限にとどめ、観賞者への説明の部分として音声を使ったものにしようという意見でこの問題を解決しようとした。私はそのナレーション役をした。これまで作っていなかった一部のコンテンツ動画のナレーション原稿を制作していたコンテンツの参考文献より新たに作成した。そして、全てのコンテンツ動画のナレーション収録を行った。
その後、実際にミュージアムで函館山の模型を置き映像を投影して本番さながらの状況下で調整を行った。具体的には、プログラムによって動かされた映像が音声と一致する動きをするか、投影をして気づいた点を意見し合って変更するなどをした。

Group Report of 2016 SISP

- 26 -

Group Number 11

Mt.Hakodate camera - development of systems and contents for Contexts-exhibition（※文責: 和田龍）

4.5
5月

工藤雅也の課題解決過程の詳細
函館山の積層模型の制作
フィールドワーク
・

函館公園

・

旧登山道コース

Adobe Illustrator CC、Adobe After Eﬀects CC の技術習得
射影変換のプログラム作成

6月

函館山の積層模型の制作
映像コンテンツの制作

7月

映像コンテンツの制作
中間発表会の原稿修正

9〜10 月 Xbox One Kinect センサーを利用したプログラムの研究・調査
インタラクティブな動作の考察
フィールドワーク
・

七曲りコース・

千畳敷コース・

立待岬

11 月 映像・画像を表示するプログラムの作成
Xbox One Kinect センサーを利用して人の手の動きを検知するプログラムの作成
Xbox One Kinect センサーから取得した手の座標によって映像を切り替えられるプログラ
ムの作成
展示物のユーザーインターフェースの考察

12 月 全体のプログラムの修正
5 月は函館山の積層模型 (第 1 弾) の制作をカッターナイフで行った。スチレンボードに函館山の地図をコピーした紙を貼り、その上から等高線に合わせてカッターで切り出しを行って、それを積み重ね貼り付けた。カッターナイフでの切り出しは時間と労力が必要で大変と感じたために、効率の良いレーザーカッター班のものを採用し、函館山積層模型 (第 2 弾) の作成を検討した。また、レーザーカッター班の作成した模型対してエゾタンポポとセイヨウタンポポの分布図の資料を投影したところ、模型の形に図が合わなかったり、サイズ間が違ったり、ゆがみがあったりなど様々な問題があった。それを解決するために、Processing で画像や映像を表示しそれをマッピングできるプログラムの作成を行った。さらに、正確な投影をするために 2500 分の 1 サイズの函館山模型
をレーザーカッターによって積層模型 (第 2 弾) として制作した。その時にレーザーカッター講習を受講し、レーザーカッターの操作について学んだ。また、レーザーカッターでの切り出しの際に必要なデータを Adobe Illustrator CC で作成した。Adobe Illustrator CC を利用するのが初めてのメンバーが多くいたため利用したことのあるメンバーから講習会という形で基本操作を学んだ。
その他に、函館公園と旧登山道コースへのフィールドワークを行った。このフィールドワークでは
様々な植物や鳥やリスなどの動物、歴史的建造物を中心に写真や映像に収めた。函館公園フィール
ドワークで収めた写真を 30 秒の紹介ムービーとして編集した。これはメンバー全員で行い、写真の取り方や動画の編集に対して指導教員や TA から講評をいただき写真撮影技術の向上に励んだ。

6 月はフィールドワークをもとに函館山の積層模型へ映像を投影する際に必要なコンテンツをAdobe After Eﬀects CC で制作した。その中で海が流れる映像と、函館山にある砲台の位置をGroup Report of 2016 SISP

- 27 -

Group Number 11

Mt.Hakodate camera - development of systems and contents for Contexts-exhibition
マッピングする映像を制作した。映像をただ移すだけの展示物ではなく、映像に観賞者自らが絡めるような展示物の作成を考えていたためにセンサの利用が検討された。そして Arduino や IC チップなどでの操作が考えられ様々なアイデアを検討した。

7 月は中間発表会へ向けての原稿、スライド作成に着手した。発表会では原稿をポイントだけ覚え自分なりの言葉で表現し伝えることができたと考えられる。声に関しては周りの音に負けていたように感じられたので今後の課題点としてある。しかし、メンバーの人に発表に関していい評価をしていただけたので様々な人の印象に残るようなプレゼンテーションを目指していきたいと感じた。

9〜10 月は Xbox One Kinect センサーで何ができるのかを実際にプログラムを書いたり本やイ
ンターネットで調査したりした。主に Processing 内にあるライブラリのサンプルプログラムをアレンジし、どのようなインタラクティブな展示物にしていくかを考察した。考察内容としては模型に手をかざす動作をするとそこにあるコンテンツの細かい内容を見ることができるというシステムである。作成したシステムとしては、人のスケルトン座標を読み取り、一部 (例えば右手の座標)だけの取得をするプログラムや、手の動きを読み取って映像を変化させるプログラムを作成した。
この時、Xbox One Kinect センサーのカメラ範囲に 2 人以上の人がいるときに誤作動が多く発生したために、模型に対して中央に立つ人に対してだけ判定を行えるようにマスクをかけた。この部分をもし克服することができていれば複数人での操作が行えるようになり展示物としての幅が広がると考えれる。

11 月は展示物に利用するプログラムの作成を主に行った。具体的に、人の右手の座標を読み取りその位置によって模型にマッピングされている映像の切り替えを行うことができるシステムの構築を行った。また、初めて展示物を見た人でも簡単に操作方法が理解でき、簡単な動作で操作可能なユーザーインターフェースを考察した。ユーザーインターフェースについては模型に手をかざすと影できれいに見えないという意見から模型に直接手をかざすのではなく、模型と離れたところに操作スペースを設け、主にボタンを押すような操作で映像切り替えを行うようにした。操作スペースに関しては村上に担当をしてもらい、私はそれについて評価をして改善していく作業をした。また、モニターと模型によるマッピングの 2 画面を利用するためどちらを見るべきかわかりにくかったために、一方をフェードで暗くすることで見てほしい画面に視線を誘導するプログラムを折田が中心となり作成した。これらのプログラムを作成している段階で映像処理が特に重くなってしまい
フレームレートが下がっている状況であった。制作した展示物はモニターとプロジェクターによるプロジェクションマッピングの二つのプログラムを Xbox One Kinect センサーから取得する座標によって連動させていた。しかし、プロジェクションマッピングをするプログラムのフレームレー
トが非常に低くなってしまうために連動が取れていなかった。この時は二つのプログラムに生じるズレの秒数を計測し、その分遅延させることで連動しているように見せるような手法を取っていた。また、新しいアイデアが出るたびにプログラムをつけたしていった手法を取っていたためにプ
ログラム全体の処理などが効率の悪いプログラムになっていた。そこでプログラムの見直しを行
い、ゼロからプログラムを作成した。その結果として多少の改善は見られたがまだまだ動きに不安定さが残る状態であった。そのためにパソコンのスペックの改善を行うことで動作を滑らかにすることを検討し実際に導入した。

12 月ではプログラムの最終調整を本学ミュージアムで行った。調整内容は Xbox One Kinect
センサーで取得する座標の範囲指定やモニターのプログラムとの連動確認及び調整を中心に全体の動きを確認した。また、PC スペックの改善を行うことで動作が滑らかになり遅延もほぼなくする
ことができた。しかし、フレームレートの差はまだあった。また、遅延していた秒数の変更を行うとともにモニターとの連動性も確認した。発表会に関してはプログラムの動作不良が一回あり、皆さんにお見せすることができず焦ってしまった部分があるので落ち着いて対処できるようにしたいと感じた。また、プロジェクト全体をとうして自分が考えたこと感じたことをはっきりと言えるよGroup Report of 2016 SISP

- 28 -

Group Number 11

Mt.Hakodate camera - development of systems and contents for Contexts-exhibition
うになったので、今後も尻込みせず発言していきたいと感じた。
（※文責: 工藤雅也）

4.6
5月

村上亮太朗の課題解決過程の詳細
函館山の積層模型の制作
フィールドワーク
・

函館公園

・

旧登山道コース・

千畳敷コース

Arduino 講座 (Future Body プロジェクトと合同)
6月

函館山の積層模型の制作
色検知プログラム作成「みんなですすめる木づかいプロジェクト」へ参加

7月

動作検知プログラム作成
中間発表会の発表準備

9月Xbox One Kinect センサーを利用したプログラムの研究・調査

10 月 インタラクティブな動作の考察
フィールドワーク・

市立函館博物館

・

七曲りコース・

入江山コース・

千畳敷コース

・

旧登山道コース

11 月 展示物を操作するコントロールバーのプログラムの作成
展示物のユーザーインターフェースの考察
模型手直し
フィールドワーク
・

旧登山道コース・

入江山コース12 月 コントロールバーのプログラムの機能追加・修正・組み込み
5 月は函館山の積層模型 (第 1 弾) は電熱線でスタイロフォームを切断し制作した。厚さ 8mm のスタイロフォームを使用したため函館山の形状を大まかにしか再現できなかった。フィールドワー
クは函館公園と旧登山道コースと千畳敷コースの 3 回行った。函館山公園のフィールドワークでは撮影練習を主に行いエゾタンポポを発見して撮影した。旧登山道コースのフィールドワークは初めて函館山を登山するメンバーが多かった。植物などを撮影しながらの慣れない登山でとても時間がかかってしまった。この時のフィールドワークをカスタマージャーニーマップを利用してフィードバックした。千畳敷コースのフィールドワークもコースを歩きながら撮影を行った。この日は雨が降っていて霧も濃くあまり良い映像や写真を撮影することはできなかった。Arduino 技術習得のためは Future Body プロジェクトと合同で Arduino 講座として行った。Arduino 講座では最初に竹川先生から説明があり、それからグループに分かれて制作を行った。私が参加したグループでは心拍を計測するデバイスを Arduino と連動させることができた。

Group Report of 2016 SISP

- 29 -

Group Number 11

Mt.Hakodate camera - development of systems and contents for Contexts-exhibition
6 月は函館山の積層模型 (第 2 弾) を縮尺を 2500 分の 1 で計算してレーザーカッターで制作した。縮尺を正確に計算し厚さ 4mm のスチレンボードを重ねて制作したため積層模型 (第 1 弾) 以
上に函館山の形状を再現できた。色を白くしてプロジェクションマッピングの映りを良くするなど工夫した。展示システムの考案では色検知プログラムの作成を Processing を用いて行った。ある決められた色が存在する座標を読むプログラムを作成した。このプログラムでは色で判断するため
背景や周りの色に反応してしまうことや、光の当たり具合で誤作動が起こることなど問題点があげられた。「みんなですすめる木づかいプロジェクト」へ参加し函館山の麓である西部地区の伝統的建造物を見学した。函館山に植林された杉材の利用法など、函館山に関する情報を得ることが出来た。

7 月は色検知プログラムに引き続き動作検知プログラムの作成を Processing を用いて行った。
ものが動いた座標を読むプログラムを作成した。このプログラムも周りの人や物が動くと誤作動を起こすなど問題点があげられた。中間発表会では色検知プログラムと模型とフィールドワークについての紹介を行った。色検知プログラムと動作検知プログラムの反省からより正確に展示物を操作できるシステムを作るために Xbox One Kinect センサーを用いることにした。

9 月〜10 月は Xbox One Kinect センサーを利用するための PC の設定とサンプルプログラムの応用を行った。使おうと考えていたソフトウェアのサイトがしまっていて設定にとても時間がかかってしまった。撮影活動は七曲りコース、入江山コース、千畳敷コースの登山者目線の映像と旧登山道コースのパノラマ写真の撮影を担当した。登山者目線の映像では手ブレのない映像を撮影するため OSMO を用いた。パノラマ写真は iPhone のパノラマ写真機能を用いた。

11 月からは観賞者が操作するコントロールバーの設計を行った。観賞者が操作法がわかりやす
いようユーザーインターフェースを考えた。また、各コンテンツの選択肢に対応するようにプログ
ラムを作成した。

12 月はそのプログラムを修正し全体のプログラムに組み込んだ。展示会に向けてテストを繰り返した。展示会前のテスト中に PC のスペックの限界でプログラムが動作しなくなることが度々あった。それを改善するためスペックの高い PC を用いた。プログラムが問題なく動作するようになったので展示物としての質を向上させ、展示会を行うことができた。以上の活動を元に成果発表
会の準備を行った。
（※文責: 村上亮太朗）

4.7
5月

大橋慎生の課題解決過程の詳細
函館山の積層模型の制作
フィールドワーク・ 函館公園・ 旧登山道コース

6月

函館山の積層模型の制作
マッピング映像の内容考案
ナレーション原稿制作

7月

中間発表会の原稿制作

9月

市立函館博物館での資料集め

10 月 フィールドワーク
・ 入江山コース
・ 千畳敷コース

HAKODATE Developer Conference 2016 の発表準備 (発表内容の考案・原稿制作・スライ
Group Report of 2016 SISP

- 30 -

Group Number 11

Mt.Hakodate camera - development of systems and contents for Contexts-exhibition
ド製作)

11 月 フィールドワーク
・

旧登山道コース・

入江山コース

展示ポスター制作
コンテンツ制作 (千畳敷登山道の動画制作)
最終成果発表に向けたポスター制作・発表内容考案・成果発表スライド製作・発表原稿制作

12 月 最終成果発表準備・発表
5 月はまずはじめに青木・和田と共に函館山の積層模型（第 1 弾）を Adobe Illustrator CC での製図を行い、そのデータを基にレーザーカッターでの切り出しを行い、それを組み立てて函館山
積層模型プロトタイプとした。この模型制作活動と同時並行で函館公園でのフィールドワーク、函館山旧登山道でのフィールドワーク、計 2 回のフィールドワークを行った。これら 2 回のフィール
ドワークは撮影になれるためと、実際に函館山に行ってみることによって函館山を体感するという目的で行なった。フィールドワークを行う以前では自分の中では函館山に関する知識というのは夜景しかなかったのだが、実際にフィールドワークにいくことによって函館山の自然の豊富さとたくさんの歴史的建造物を知ることができた。また、これらの自然や歴史を以前の自分たちのような函館山をあまり知らない人に伝えたいと思った。

6 月は第 1 弾の函館山模型のフィードバックを行い、そのフィードバックを基にさらに正確な
縮尺かつ大きい函館山模型第 2 弾を制作した。これは第 1 弾の函館山模型制作と同じく、製図を

Adobe Illustrator CC で行い、レーザーカッターで切り出しを行った。この模型は最終的な展示物としても活用している。また、函館山模型に投影するフィールドワーク等で得たコンテンツの映像の構成・映像につけるナレーションの考案を行った。

7 月には中間発表会に向けての発表内容の考案及び原稿の制作を行った。これらの自分が考案した発表内容に基づいて中間発表会を行った。また、中間発表会で得た発表フィードバックを基に後期に向けての目標設定・具体的な制作物の検討をした。この段階の発表の出来としては、原稿を見ながら話していたり、スライドの方ばかり見て話したりと発表を見て頂いた方に伝えようという気持ちが希薄だった。また、自分の言葉ではなく作られた言葉で話していた。

9 月は函館山に関する知識や今後のコンテンツに生かすための情報を収集するために市立函館博
物館とを訪問した。実際のフィールドワークに行く以外にも博物館で資料を見ることによって、より深い函館山に関する知識を得ることができた。

10 月はまず入江山・千畳敷でのフィールドワークと撮影活動を行なった。これは実際に登山
道紹介の際に使用するための映像撮影とコンテンツを決定するための情報収集の目的をもって行なった。入江山・千畳敷共にコンテンツに使えるであろう多くの砲台跡や戦闘司令所、登山道映像に使えそうな自然や風景などの目星をつけた。また、それと同時進行で HAKODATE Developer

Conference 2016 の発表に向けての準備を行なった。具体的には発表内容を考案し、それに沿った発表スライドと原稿の制作を行なった。発表内容としては展示物を持っていくことはできなかったので、展示物よりも少し小さい函館山模型を持っていき、模型がどのような形かを説明した。また、これまでの制作の進行状況、今後の展望などを中心として発表を行った。さらに、発表の際にデモムービーがあると分かりやすいという意見が出たため、10 月段階での展示物を操作してる様子を映像に納めた。これらを使用し実際に発表した結果、優秀賞をいただいた。この発表では、スライドを見ながらではあるが、原稿通りの発表ではなく、自分自身で考えながらプレゼンテーショ
ンすることができた。この経験は、自分自身のプレゼンテーションスキルの向上に繋がったのではないかと思っている。

Group Report of 2016 SISP

- 31 -

Group Number 11

Mt.Hakodate camera - development of systems and contents for Contexts-exhibition
11 月は大きく分けて 3 つの活動を行った。まず 1 つ目は撮影活動である。実際の展示物のコン
テンツに利用するものとして前述した千畳敷や入江山を歩いている視点での映像を OSMO を用いて撮影した。また、千畳敷の先頭司令所や砲台跡の撮影を行った。これら以外にも旧登山道と函館
山山頂にてパノラマ撮影を行った。映像は iMovie を用いて編集を行い、展示コンテンツに使用した。2 つ目は展示ポスター製作である。実際の展示を本学ミュージアムにて行ったのだが、その際にミュージアムで何やっているのか、またどのような展示をしているのかが一目でわかるようにするために展示ポスターの製作を行った。ポスターの背景写真に展示物の写真を使用し、見栄えをよくするために文字は最低限にとどめ、より興味の惹く展示ポスターを製作した。3 つ目は成果発表準備である。具体的には発表ポスターの製作、発表スライドの製作、発表内容の考案である。発表
ポスターは自分たちがこの 1 年間でやって来たこと、制作したものをわかりやすく伝えることに重きを置いて製作した。発表内容としては展示物を実際に置き、それを操作しながら発表することによって、展示物の概要をよりわかりやすく説明するようなものとした。この発表内容に基づいて展示スライドを製作した。

12 月は成果発表の準備、最終調整、実際の発表を行った。発表では展示物が動作しないというトラブルが発生したその状況でも伝わりやすいように展示物や成果の説明をできた。成果発表では自分たちが本プロジェクトで活動してきた全てを自分の言葉で伝えることができた。そのため、発表を見て頂いた方から良い発表だった、などの評価を頂いた。ここから、本プロジェクトを通して一番自分が得たスキルとして挙げられるのはプレゼンテーションスキルである。これに関しては自分の中でも自信を持てるものになった。このスキルを 2 月に秋葉原で行われるプロジェクト成果発
表会でも生かしたいと思う。
（※文責: 大橋慎生）

4.8
5月

折田佳大の課題解決過程の詳細
函館山模型の制作
フィールドワーク・ 函館公園・ 旧登山道コース
・ 千畳敷コース
システムプログラム考察

6 月 「みんなですすめる木づかいプロジェクト」へ参加
函館山積層模型の制作
システムプログラム試作

7月

中間発表会の原稿修正
スライドの制作

9月

市立函館博物館へ資料集め

Processing でのシステム開発
模型投映の基盤となるプログラムの作成
動画ファイルの再生プログラムの作成
再生する動画を自動で切り替えるプログラムの作成

10 月 大型模型の改良
市立函館高校の高校生プロジェクト見学の発表

HAKODATE Developer Conference 2016 の発表準備・発表
Processing でのシステム開発
Group Report of 2016 SISP

- 32 -

Group Number 11

Mt.Hakodate camera - development of systems and contents for Contexts-exhibition
ディスプレイ用プログラムの作成
フィールドワーク・

市立函館博物館

11 月 Processing でのシステム開発
プログラムの軽量化・書き直し
フェード機能の実装
パノラマコンテンツの制作
ディスプレイ用プログラムと Xbox One Kinect センサーの連携

12 月 学内ミュージアムでの展示
成果発表会準備

Processing でのシステム開発
コンテンツ再生のタイミング調整

PC 変更による設定の変更
5 月はまず、工藤・藤原と函館山模型のプロトタイプを制作した。このプロトタイプは印刷した地図を素材に貼り、カッターで切り抜いて重ねていく積層模型である。他の班が制作した模型と比べ、カッターで切り抜く方法で制作した模型は形が歪になってしまったが、特殊な機械を必要とせず、誰でも制作できるという利点があることがわかった。また、同時期に函館公園にてフィールド
ワークを行ったり、ワークショップを先生方に開催してもらうことで、カメラの使い方を学んだ。
この時点では函館山を紹介するアプリを制作するというアイデアが出ており、それに対し、何のために、どのようなアプリを、どの OS で作るかを決めた。

6 月は西部地区で行われたワークショップ「みんなですすめる木づかいプロジェクト」に村上と共に参加した。函館山に植林された杉材の利用法など、函館山に関する情報を得ることが出来た。
また函館山の旧登山道コースでフィールドワークを行った。村上が作成していた色検知のプログラ
ムと、工藤・和田・青木が制作したプロジェクションマッピング映像を繋げるシステムプログラムを試作した。

7 月は中間発表会に向け、スライドの製作や発表の準備を行った。プロジェクトの目的や目標を再確認し、展示物完成への方向性を定めた。

9 月はまず函館公園内にある市立函館博物館へ行き、コンテンツ制作のためのアイデアを探した。函館山の動植物や函館市街地の歴史についての展示から、新しいコンテンツのアイデアを得ることが出来た。また、函館山ふれあいセンターでは、登山した人達が記録したデータが大量に保存されており、インターネットで調べても見つからないような情報がコンテンツ制作に非常に役立った。プログラムの作成においては、まず模型へ投映するプログラムの基盤を作成した。keystoneというライブラリを使用し、動画が再生とれている四角形の画面の四隅を自由に操作出来るものである。これによってプロジェクションマッピングの映像を模型の形に合わせる調整が容易になった。詳細は項目 3.19 にて解説している。また動画ファイルを Processing 上で再生し、別の動画に切り替えることも可能にするプログラムを作成した。始めに複数の動画ファイルの読み込みを行うと動作が重くなったりメモリがオーバーフローしてしまう危険があるため、動画を切り替えるごとに新しい動画ファイルを上書きするように読み込む方法を取った。これによって大量の動画ファイルを再生したり、何度も動画の切り替えを行ってもプログラムが重くならないシステムになった。

10 月の活動としては、まず大型模型の改良を行った。前期に制作した模型第 1 弾を使用し白ス
プレーで模型を塗ったものと、パテで積層模型の段差を埋めたもののサンプルを用意し比べた。

3.16 で説明した通り、白スプレーで模型を塗る案が採用され、成果発表会で使用した大型模型を塗る作業を行った。市立函館高校の高校生が未来大のプロジェクト学習の見学に来た際は、工藤と共に高校生に対して展示物の紹介を行った。当時はシステムが未完成であったため実演は出来Group Report of 2016 SISP

- 33 -

Group Number 11

Mt.Hakodate camera - development of systems and contents for Contexts-exhibition
なかったが、初めて外部に向けて自分たちの最終的な発表に向けた展示物を紹介する場になった。

HAKODATE Developer Conference 2016 では、構想が出来上がっていたシステムの概要やデモムービーによる展示物の紹介を、IT 業界の最先端を学ぶ場で発表させて頂き、優秀賞を頂いた。
当日にプレゼンターを担当することになり上手く発表できなかった。事前の準備が足りなかったことと、他のプロジェクトメンバーも人前で発表することや発言することをもっと積極的に行って欲しいということを感じた。ディスプレイ用プログラムの進捗としては、最初の待機状態から登山道の選択画面までを作成した。工藤が担当したプロジェクションマッピング用のプログラムと照らし合わせ、動作を確認し合いながら作成していった。

11 月はシステムの完成に向けてプログラムの作成を行った。課題となったのは主に「視線移動のための誘導」と「動作遅延の軽減」であった。観賞者の視点をディスプレイから模型、模型からディスプレイへと移動させることを促す方法として、画面にフェードをかけるように暗く・明るくするアイデアを提案し、それを作成した。始めに作成したフェードシステムは単純に画面全体が徐々に暗くなる・明るくなるだけのものであったが、観賞者の視点を導くには動作が足りないと考え、3.17 で説明したようなフェードシステムを作成した。動作遅延の軽減に関しては、推奨機という動作環境の都合上、処理の重さによる遅延というハードウェアのスペックによる問題がどうしても発生してしまい、如何にしてプログラム面で処理を軽くする工夫をするかが課題であった。このプロジェクトではトライアンドエラーで次々とアイデアを試し組み込んできた為、プログラム内には仕様変更で必要が無くなった処理や重複した処理、余分なループなど、効率の悪い処理方法が存在していた。それらを洗い出して改善するため、プログラム全体を 1 から全て書き直した。無駄を省き、遅延の原因になりそうな処理方法を改善した結果、プログラムの動作を大幅に軽くすることができた。その他の作業としは、ディスプレイ用プログラムと Xbox One Kinect センサーの連動を行った。実際に Xbox One Kinect センサーで座標を取得し動かすことが可能になり、限りなく完成品に近い状態に近づけることが出来た。またコンテンツの 1 つであるパノラマのプログラム
を、村上が作成したプログラムを元に改良して作成した。詳細は 3.17 の通りである。

12 月はプログラムの調整と学内ミュージアムでの展示、成果発表会の準備と発表を行った。藤原が知人からハイスペックの PC を借りてきたことでハードウェアによるスペックの低さという課
題が解決され、ディスプレイのプログラムではほぼ動作の遅延は発生しなくなった。それに伴い、遅延を考慮した上で調整していたプログラムを遅延を考慮しない物へ変更した。同時に、工藤が作成したプロジェクションマッピング用のプログラムと同時に動作させと時に、動作のタイミングにズレが生じないように調整を行った。詳細は 3.20 で説明した通りである。形が出来上がった展示
物を実際に学内のミュージアムに展示し、学内の生徒に実際に展示を体験してもらい、評価を頂いた。それを元に更なる改善を行った。
（※文責: 折田佳大）Group Report of 2016 SISP

- 34 -

Group Number 11

Mt.Hakodate camera - development of systems and contents for Contexts-exhibition

第 5 章 結果
本プロジェクトの結果・成果物は以下の通りである。
・ 撮影機材の使い方・技法の学習
・ フィールドワークでの動画制作
・ 第 1 回模型プロトタイプ
・ 第 2 回模型プロトタイプ
・ 第 3 弾函館山模型制作
・ フィールドワーク
・ カスタマージャーニーマップ
・ 大型模型の改良結果
・ Xbox One Kinect センサーを用いた人検知プログラム
・ 展示におけるプロジェクションマッピングの動作プログラム
・ 展示におけるディスプレイの動作プログラム
・ プロジェクションマッピングで用いる動画
・ ディスプレイで用いる動画・画像
・ 函館山を紹介するための展示物

5.1

プロジェクトの結果

5.1.1

撮影機材の使い方・技法の学習

撮影機材はまず、3 つのグループに分かれて、OSMO、ハンディカム、HDR の 3 つの撮影機材の使い方を、1 つのグループにつき 1 つの機材の扱いを覚えるところから始めた。函館公園でのフィールドワークを通して、グループごとに撮影機材を使いこなせるようにした。各グループで機材の扱いを学習した後、最初に学習したもの以外の機材の使い方をお互いに教えあうことで、メンバー全員がすべての機材を扱うことができるようにした。技法の学習は、写真、動画での対象の撮り方、画面の動かし方を教わった。撮影を行うにあたっての心構えや、写真撮影時のフレーミン
グ、アングル、また、動画撮影時のカメラの視点、パンやドリーなどのカメラワーク、ライティン
グなどの基本技術を学習した。また、盛り上がりや、オチを付けるなど、メリハリのある撮影をするといいと学んだ。その後、学習した撮影技法を用いて公立はこだて未来大学内部を 20 分ほど散策して撮影を行い、撮影してきたものにフィードバックを行った。それによって、知識として知っていても、実際に撮影するときに対象が見切れてしまったりするなど、より意識しながらの撮影を行う必要があることが分かった。同じものを撮る場合でも撮影者によって視点の違いや、対象とするものの着眼点の違いなどを感じることができた。
（※文責: 青木花菜子）

Group Report of 2016 SISP

- 35 -

Group Number 11

Mt.Hakodate camera - development of systems and contents for Contexts-exhibition

5.1.2

函館公園フィールドワーク動画の制作

函館公園のフィールドワークでメンバーが撮影したものを個人で編集し、函館公園で行ったフィールドワークについて 1 分にまとめたものを制作した。制作方法はそれぞれ任意の動画編集ソフトを使い、好きなように動画編集を行った。制作した動画をお互いにフィードバックを行い、よかった点や改善すべき点を学んだ。
（※文責: 青木花菜子）

5.1.3

函館山模型プロトタイプ第 1 弾

展示物としての土台となる模型を制作した。積層模型の作り方のホームページ〔3〕を参考にし、完成物をどのように制作するかの検討を行うため、電熱線、レーザーカッター、カッターナイフの3 種類の道具ごとの模型プロトタイプを制作した。制作において使用した素材は、電熱線はスタイ
ロフォーム、レーザーカッターとカッターナイフはスチレンボードを用いた。また、レーザーカッ
ターで制作した模型に、市立函館博物館主催の自然観察会で入手した 2 種類のタンポポの分布図を投影し、映り方を確認した〔4〕。
（※文責: 藤原瞳）

5.1.4

函館山模型プロトタイプ第 2 弾

プロトタイプ第 1 弾のフィードバックを経て、プロトタイプ第 2 弾を制作した。プロトタイプ第1 弾に比べて、縮尺が正確かつサイズの大きい模型を制作した。制作方法はプロトタイプ第 1 弾のレーザーカッターで制作する方法を採用した。プロトタイプ第 2 弾では正確な縮尺の函館山の模型を制作するため、国土地理院が公開している地図の等高線を用いた。〔5〕地図データを 10m から等高線に沿って Adobe Illustrator CC で制作し、函館山を 10 分割で用意し、レーザーカッターで切断後組み合わせて制作した。完成した模型の縮尺は 2500 分の 1 であり、制作素材はプロトタイ
プ第 1 弾のレーザーカッターで用いた素材を使用した。制作期間は約 3 週間であった。模型に投影する映像としては、展示することを想定した映像を制作し模型に投影した。実際に模型に投影することでどのように投影され、どのように見ることができるかを確認した。
（※文責: 藤原瞳）

5.1.5

フィールドワーク

前期は函館山について詳しくなるため、函館公園の撮影練習、函館山旧登山道の登山兼自然物等の観察の 2 回行った。後期はコンテンツに用いる撮影のため、千畳敷コース、観音コース、七曲り
コース等複数回行った。
（※文責: 村上）Group Report of 2016 SISP

- 36 -

Group Number 11

Mt.Hakodate camera - development of systems and contents for Contexts-exhibition

5.1.6

カスタマージャーニーマップ

カスタマージャーニマップを作成することで、函館山でのフィールドワークで自分たちが思っていたことや感じたこと、得られたことをお互いに理解、共有することが出来た。そして行ったフィールドワークをまとめたことにより、展示物のコンテンツとして観賞者にどのような事を見てほしいか、伝えてほしいかを考える元にすることが出来た。例えば、登山道を上っている際に、見かけた植物や動物の名前が分からない、などのようにカスタマージャーニーマップより自分たちが疑問に思っていた事を参考にして展示物のコンテンツを作った。
（※文責: 和田龍）

5.1.7

第 3 弾函館山模型制作

3 つ目の模型として制作方法は第 2 回の模型プロトタイプと同じでサイズの小さいものを制作した。サイズは 5000 分の 1 の縮尺であった。レーザーカッターで切ることができるようにするため、函館山を 3 つに分割したデータを用意して部品を切り出した。大きな模型へのプロジェクショ
ンマッピングは限られた場所でしか行うことができなかったため、この模型は主にそれ以外の場所
でテスト投映を行うのに使用した。
（※文責: 青木花菜子）

5.1.8

大型模型の改良結果

まず模型の裏側からガムテープを貼ることで構造上脆くなってしまう部分を補強した。アイデアの提案段階で模型に爪楊枝を刺して出来た穴をパテを使って埋め、ペンで書き込んだ跡は白いスプ
レーで消した。
（※文責: 折田佳大）

5.1.9

Xbox One Kinect センサーを用いた人検知プログラム

Processing のライブラリの Kinect V2 for Processing のサンプルコードの SkeltonMaskDepthを応用した。このプログラムではキネクトのカメラと赤外線センサーを用いて人の骨格を判断することができる。この機能で観賞者の動きを検知した。
（※文責: 村上亮太朗）

5.1.10

展示におけるプロジェクションマッピングの動作プログラム

まず、映像や画像を模型に投影し、それによって生じるずれを修正するプログラムを作成した。
これによって函館山の上空からの画像が模型に対してズレなく合わせることが可能になった。また、ズレを修正した状態をセーブ、ロードできる機能の追加も行ったことによって毎回位置合わせをすることなく作業の効率化が可能となった。次に Xbox One Kinect センサーによって特定の場
所にいる人の手の座標を取得するプログラムを作成した。さらに、表示する映像を特定の数値を取得することで切り替えるプログラムを作成した。これら 2 つを組み合わせて、人の手で映像を切りGroup Report of 2016 SISP

- 37 -

Group Number 11

Mt.Hakodate camera - development of systems and contents for Contexts-exhibition
替えることができるプログラムを作成した。これによって観賞者自らが複数のコンテンツから見たいものを選択することが可能となった。しかし、フレームレートが設定値より下がってしまい誤作
動や滑らかな操作ができないなどの問題点があげられた。
（※文責: 工藤雅也）

5.1.11

展示におけるディスプレイの動作プログラム

主なシステムは 5.1.8 で紹介しているプロジェクションマッピングのシステムと同様で、観賞者の右手の座標を取得し、その座標によって画面に表示している映像を切り替えるというものである。x 座標と y 座標の範囲を if 文で指定し、その範囲内に右手が移動したら動作させている。例えばコンテンツ A が再生中のとき、観賞者の右手の x 座標が 180 以下、y 座標が 200 以上 230 以下になったらコンテンツ B を実行する。この座標をプロジェクションマッピング用のプログラムと合わせることで 2 つのプログラムが同時に動作し、システムの連携が可能となった。問題点は、2つのプログラムをそれぞれ動かして同時に動いているように見せているため、処理速度の低下などが原因でお互いの動作にズレが生じてしまうことが挙げられた。
（※文責: 折田佳大）

5.1.12

プロジェクションマッピングで用いる動画

模型に投影する上で登山道を選択したり、函館山のコンテンツを見てもらうために模型に投影する動画を制作した。制作した動画としては、誰もいない状態から人が検知された後に流れる函館山の概要を説明する動画、函館山にある登山道を 3 つピックアップしそれらのどれかを選択する場面
での動画、各登山道にある 3 つのコンテンツを選択する場面での動画、各コンテンツの模型を用いた説明動画の主に 4 種類を制作した。これらは Adobe After Eﬀect CC を用いて制作した。これらの動画は、プロジェクタを通して函館山模型に投影し、プロセッシングを用いて Xbox One

Kinect センサーによって制御することが出来るように行った。
（※文責: 藤原瞳）

5.1.13

ディスプレイで用いる動画・画像

登山道の動画、コンテンツの説明動画でディスプレイを使用した。登山道の動画は旧登山道コース、入江山コース、七曲り・千畳敷コースの 3 つを iMovie で制作した。登山道の中で、3、4 つの自分たちがおすすめしたい場所で、実際に撮った映像を使用して 30 秒の動画を制作した。最初は推奨機でシステムを動かしていたため、作った動画の再生速度が遅くなってしまうという問題があった。そのため、動画自体の再生速度をあげておき、調整を行った。しかし、学内展示後、デス
クトップ PC を導入したことによって、動画の再生速度が上がり、元の動画の速度をあげる必要がなくなった。動画の構成としては、コースの始まり、途中、終わりの道の映像とし、登山している
様子がわかるように制作を心がけた。また、最初にコース名を表示させたり、映像が流れている間は左下にコース名を表示させることで、どのコースの映像かわかるようにした。コンテンツの説明
動画では風景の 3 つのコンテンツ、残りの 6 つのコンテンツといった大きく 2 つの使い方をした。
風景の方ではコンテンツの決定がされるとパノラマ写真が表示され、Xbox One Kinect センサーを使って操作をする。6 つのコンテンツの方では、プロジェクションマッピングでの投影が終わっGroup Report of 2016 SISP

- 38 -

Group Number 11

Mt.Hakodate camera - development of systems and contents for Contexts-exhibition
た後、写真や文字をディスプレイで数秒表示し、投影で伝えきれなかったことを補った。
（※文責: 島田美優）

5.1.14函館山を紹介するための展示物

函館山模型、プロジェクションマッピング映像、Xbox One Kinect センサーを組み合わせて展
示物を制作した。また、表現するコンテンツは各登山道ごとに調べたものや実際に撮影したきたものを使用して表現した。展示物の流れとしてはまず函館山に関する基本的な説明映像を流す。その映像が終わったあと、旧登山道コース、入江山コース、千畳敷コースの 3 つの登山道の中から観賞者が選択できるようにする。登山道を選択すると、実際にプロジェクトメンバーが OSMO を使用して撮影してきた登山道を歩いている様子の映像がモニターに流れる。その後、登山道ごとにコンテンツを表示し、それを選択するとコンテンツの概要がプロジェクションマッピング映像やモニターに映されるといったものである。これを実際に本学ミュージアムにて展示することによって観賞者への効果を検証した。全てが良い意見ばかりではなかったが、見てて興味を惹くなどの展示物に対しての良い意見を得ることができた。このことから、観賞者の興味を惹き、さらに自分たちが表現したかった函館山の魅力を伝え、紹介する展示物を制作できたのではないかと考える。
（※文責: 大橋慎生）

5.2

成果の評価

5.2.1

撮影機材の使い方・技法の学習

撮影機材の使い方については、人によって習熟度の差が出てしまい、特にハンディカムの設定をうまく扱うことができずに輝度の高すぎる白い映像になってしまったことがあった。撮影技法については、写真撮影はコンテンツで使用したこともあって、主に花を対象に正面から撮影することが多く、技術をあまり発展的に扱うことがなかった。以上のことから、撮影機材使用のある程度の習熟度が確保のために口頭での説明だけでなく、簡単に操作方法をまとめたものを用意することと、
コンテンツとの兼ね合いも必要だが、観賞者により多くの情報が伝えることができるよう、撮影技術を向上させることが必要である。
（※文責: 青木花菜子）

5.2.2

函館公園フィールドワーク動画の制作

各々が動画編集の操作を学びつつ、フィールドワークの様子を伝える動画を制作した。テロップ
や、動画の切り替え時にフェードを用いたり、編集を行うことで 1 分という短い時間の中でいかにストーリー性を持たせた動画にできるかを撮影時から考えてフィールドワークを行うことがよい素
材、動画を作るうえで必要であると学んだ。
（※文責: 青木花菜子）

Group Report of 2016 SISP

- 39 -

Group Number 11

Mt.Hakodate camera - development of systems and contents for Contexts-exhibition

5.2.3

函館山模型プロトタイプ第 1 弾

第 1 回の模型プロトタイプでは 3 種類の模型を全て積層模型の方法で制作した。1 つ目の電熱線でスタイロフォームを切った模型は、1 段の厚みが 30mm の 6 段で構成されているため函館山の細かな地形が把握できなかった。2 つ目にカッターナイフでスチレンボードを切った模型は、4mmの厚さのスチレンボードを 2 層に分けて環状に切断したため、細かな地形は見た目としては把握しやすかったが、模型の箇所によってはスチレンボードが欠けることがあった。3 つ目のレーザーカッターでスチレンボードを切断した模型は、カッターナイフと同様にスチレンボードを 2 層に分けて切断しため、カッターナイフの時と違いレーザーカッターの熱によりスチレンボードが溶けて穴の空いた模型ができてしまった。また、1 層を 8mm で作ったため地形の凹凸感は表現できたが縮尺が正確ではなかった。これらの模型はどれも小さく縮尺が不正確なため、展示物として行うプ
ロジェクションマッピングには適さないことがわかった。
（※文責: 藤原瞳）

5.2.4

函館山模型プロトタイプ第 2 弾

第 2 回の模型プロトタイプでは、第 1 回の制作における反省からレーザーカッターを用いてスチレンボードを 6 層 10 分割の環状の部品で構成されるよう制作を行った。結果として模型に穴はなくなったが、レーザーカッターを使用する関係上スチレンボードの分割数が多く、切断した後制作する段階での部品の紛失が多かった。前回のプロトタイプと違い、縮尺を計算して正確に部品を切断し制作したことで、映像を投影しても違和感を少なくすることができた。また、より映像を綺麗に投影することができるよう、層と層の段差を埋めたり色をつけたりなどの工夫が必要である。
（※文責: 藤原瞳）

5.2.5

第 3 弾函館山模型制作

今までで 1 番歪みも少なく、きれいに制作することができた模型だった。1 人でも扱いやすいサイズであったため、HAKODATE Developer Conference 2016 の発表時に展示物の見本として使用したり、普段のプロジェクト活動中での試写などに利用したりと、とても役立った。しかし、展示物として利用するには小さすぎたため、展示物としての本格的な利用はしなかった。また、制作した時期が 7 月の下旬と遅かったため、もっと早くいろいろな函館山の模型を制作することで試行錯誤を行うべきであった。
（※文責: 青木花菜子）

5.2.6

カスタマージャーニーマップ

コンテンツ制作で考える元となったが、フィールドワークをプロジェクトメンバー全員で共有しあう事は前期のみであった。後期にも函館山へ集団、個人で赴いたがそのことをカスタマージャー
ニマップを使い、分かったことや考えたことを共有する必要があった。
（※文責: 和田龍）

Group Report of 2016 SISP

- 40 -

Group Number 11

Mt.Hakodate camera - development of systems and contents for Contexts-exhibition

5.2.7

フィールドワーク

前期のフィールドワークではカスタマージャーニーマップを用いてフィードバックを行った。カ
スタマージャーニーマップから初めて函館山を登った時の自分たちの心の動きを見てその後の活動に生かすことができた。後期は主に撮影を行ったため撮影した写真や動画をコンテンツの制作に生かすことができた。
（※文責: 村上亮太朗）

5.2.8

大型模型の改良結果

積層模型の裏側からガムテープを貼ることで構造上脆くなってしまう部分を補強し、模型を頑丈にした。アイデアの提案段階で模型に爪楊枝を刺して出来た穴をパテを使って埋め、ペンで書き込
んだ跡は白いスプレーで消し、プロジェクションマッピングの映像が見易くなった。実際に展示することを想定すると破損などのトラブルが発生することが考えられるため、同じ模型を幾つか用意する必要がある。
（※文責: 折田佳大）

5.2.9

Xbox One Kinect センサーを用いた人検知プログラム

実際に作ったプログラムでは Xbox One Kinect センサーで縦座標と横座標をとることはできたが、観賞者と Xbox One Kinect センサーとの距離をとることができなっかた。そのため展示物の操作法を工夫することによって解決し、操作しやすい展示物として完成した。
（※文責: 村上亮太朗）

5.2.10

展示におけるプロジェクションマッピングの動作プログラム

位置を修正するプログラムは模型に表示する映像をよりきれいに映すことができた。Xbox One

Kinect センサーに関しては x,y 座標の取得は可能であったが z 座標を取得することができず平面的な操作しかできなかった。z 座標を取得できることができれば奥行きがある動作が可能となり、模型に対してよりインタラクティブに干渉できると考えられる。また Xbox One Kinect センサーのプログラムと位置を修正するプログラムを掛け合わせるとフレームレートが落ちてしまい映像
が止まってしまったり音声がずれてしまったりなどの問題点をあった。また、モニターのプログラ
ムとマッピングのプログラムが別のためプログラムの同期をさせるために Xbox One Kinect セン
サーの座標と、時間を使って同期を行っていた。しかし、フレームレートに大きな差が生じてしま
い同期がうまくいかないことも問題点である。
（※文責: 工藤雅也）

5.2.11

展示におけるディスプレイの動作プログラム

プログラムの改善やハードウェアの変更などの対策が功を奏し、処理の重さは気にならない程度にまで改善された。一連の動作は滞りなく行えるが、操作性やデザイン面に改善の余地があると考Group Report of 2016 SISP

- 41 -

Group Number 11

Mt.Hakodate camera - development of systems and contents for Contexts-exhibition
えられる。またプロジェクションマッピングのプログラムとのズレで同期が上手く行かなくなることがあるが、現状ではズレてしまった後のリカバリーが不可能な状態であるため、プログラムを正常な状態に合わせるためのシステムを作成する必要があると考えられる。
（※文責: 折田佳大）

5.2.12

プロジェクションマッピングで用いる動画

登山道選択やコンテンツの説明において、学内のミュージアムなど暗所で動画を投影することで投影することで綺麗に見えるため、観賞者から目をひくことのできる模型展示物を実現することが出来た。実際に展示を行った際にも、展示物を見ていて面白いといった意見をもらうことが出来た。しかし、プロジェクタによっては解像度などが低いものを使用して映像を投影するため、投影している航空写真が荒く見えたり、選択するボタンの画像が見にくくパッと見て理解しにくいといった問題があった。また、山全体を東側から見ることが出来るよう配置したため、御殿山の西にある入江山部分が見づらく、入江山の投影動画が見ていて何を表現しているのかが理解しづらいといった問題もあった。
（※文責: 藤原瞳）

5.2.13

ディスプレイで用いる動画・画像

ディスプレイで表示させることで、模型に投影するより、写真や文字を綺麗に見ることができた。登山道の映像だけではうまく伝えたいことを表現できなかったため、そのコースの基本情報や流れている映像についてのナレーションを加えた。千畳敷コースと入江山コースの動画は OSMOで撮影をしたものを使っているため、綺麗な映像となっている。しかし、旧登山道コースではハン
ディカムでの撮影の動画になっているため、映像にブレが生じてしまった。展示物として風景のコ
ンテンツのディスプレイの操作を行った時、自分たちで撮ったパノラマ写真では操作の幅が狭かった。そのため、腕の動きが少なくなってしまった。また、風景のコンテンツ以外ではただディスプ
レイに写真や動画を表示させるだけになってしまい、Xbox One Kinect センサーを使っての動きを取り入れたものを作ることができなかった。
（※文責: 島田美優）

5.2.14函館山を紹介するための展示物

観賞者が自らの手を動かすことによって動作するので、展示物としての興味を惹くということはできた。実際に操作した観賞者からはシステム的にもコンテンツ的にも一定の評価を頂いている。
その一方で、満足に操作感、操作法に関しては厳しい意見を受けた。実際、操作感に関しては PC
スペック等の問題があり、Xbox One Kinect センサーの動作に遅延が見られたり、映像が止まるなどの不具合が見受けられた。この問題に関しては展示後ではあるがハイスペックなデスクトッ
プ PC を導入することによって改善している。操作法に関しては実際に操作した観賞者から操作がわからないなどの意見がでた。ここから、制作の方に時間を取りすぎたため、展示物としてのユー
ザーインターフェースに大きな問題があることもわかった。改善案としては音声での説明を入れたり、操作が必要なときなどの要所要所で映像に説明を入れることが考えられる。
（※文責: 大橋慎生）

Group Report of 2016 SISP

- 42 -

Group Number 11

Mt.Hakodate camera - development of systems and contents for Contexts-exhibition

第 6 章 今後の課題と展望
函館山をテーマとする「文脈展示」を実現することをテーマとして活動し、函館山模型のプロト
タイプ制作とその模型に投影する映像制作などを行った。課題として、展示活動を行った際にもらったフィードバックを参考に、操作のプログラムと展示物のユーザーインターフェースの改善が必要であるとわかった。例えば、最初はどの位置へ見に行けばよいかわからない、展示物の操作方法が分からない、のように観賞者が展示物に興味を引いてくれたにも関わらず、何をすればよいかわからないということが起こっていた。今後の展望として、2 月に行われる秋葉原での発表会に向け、展示物の紹介映像の撮影を行うために、展示活動にて指摘された改善点、例えば、観賞者が初めて見ても迷わずに操作ができる誘導の仕組みや、コンテンツの選択画面ユーザーインターフェースを解消することが考えられる。
（※文責: 和田龍）

Group Report of 2016 SISP

- 43 -

Group Number 11

Mt.Hakodate camera - development of systems and contents for Contexts-exhibition

参考文献[1] 近藤悠太郎, 川嶋稔夫. 文脈を伴う多様なディジタル展示のインタラクティブ編纂. 情報処理学会 vol.2011-DD-79 NO.4, 1-6, 2011.

[2] 国 土 地 理 院. 国 土 地 理 院 地 図. http://maps.gsi.go.jp/#15/41.758908/140.704179/&base=std&ls=std&disp=1&vs=c1j0l0u0f0[3] 株式会社トラストシステム. 立体地図を作ってみよう！（積層模型の作り方）. http://www.
trust-system.co.jp/how_to_make_contour_model.htm[4] 市立函館博物館. 自然観察入門講座-タンポポの分布を調べてみよう[5] 木村マサ子. 函館山 自然ガイド. 北海道新聞社. 2011.
[6] 函館要塞を尋ねて. 函館産業遺産研究会. 2009[7] 函館市史デジタル版. http://archives.c.fun.ac.jp/hakodateshishi/shishi_index.
htm[8] 函館市公式サイト. http://www.city.hakodate.hokkaido.jp[9] 函館市公式観光情報サイトはこぶら. http://www.hakobura.jp[10] yoppa.org. 第 2 回:Processing でプロジェクション・マッピングをプログラミング. http://yoppa.org/tauinteraction15/6529.html[11] 函館山ロープウェイ. ロープウェイ概要. http://334.co.jp/ropeway/outline

Group Report of 2016 SISP

- 44 -

Group Number 11