公立はこだて未来大学 2012 年度 システム情報科学実習
グループ報告書
Future University Hakodate 2012 System Information Science Practice
Group Report
プロジェクト名
函館アバター
Project Name
Hakodate Avatar
グループ名
AR パンフレット
Group Name
AR Pamphlet
プロジェクト番号/Project No.
18-A
プロジェクトリーダ/Project Leader
1010175
川又康平
Kouhei Kawamata
グループリーダ/Group Leader
1010226
藤井健太郎
Kentarou Fujii
グループメンバ/Group Member
1008170
木村文彬
Fumiaki Kimura
1010001
青木佑恭
Yusuke Aoki
1010011
清野裕太
Yuta Seino
1010079
藤谷拓哉
Takuya Fujitani
1010086
池上奨
1010132
織田幸博
1010226
藤井健太郎
Sho Ikegami
Yukihiro Oda
Kentarou Fujii
指導教員
迎山和司
大沢英一
角康之
Advisor
Kazushi Mukaiyama
Eichi Osawa
Yasuyuki Sumi
提出日
2013 年 1 月 16 日
Date of Submission
January 16, 2013
概要
本プロジェクトでは Virtual Reality（以下, VR と表記する）および Augmented Reality
（以下, AR と表記する）という技術を扱い, 実空間と仮想空間の連携を深められるようなコン
テンツを製作することが主な目的である.
前期では, 2012 年度から室蘭工業大学との学術連携を図るものの一つとして本学に導入され
た VR システムを用いて, 本学と室蘭工業大学との交流を深めるという目的のもと, 函館と室
蘭の観光案内を行う 3D アニメーションの製作に向けて活動した.
このアニメーションを製作するにあたって, ストーリーの作成やアニメーションに登場する
キャラクターのデザイン考案, そのキャラクターや背景の 3D モデルおよびモーションの制作
を行い, また技術的な要素として, 仮想空間内での物理現象を再現するための物理演算エンジン
（以下, 物理エンジンと表記する）の導入, 制作した 3D モデルおよびモーションをプログラム
上で表示できるようプログラムの拡張等を行った. その結果, インタラクティブな要素を持っ
た函館と室蘭の 3D 観光案内アニメーションを製作することができたが, 技術面では物理エン
ジンやアニメーション内におけるアクションの実装, コンテンツ面ではストーリー作成や 3D
モデル制作における問題等いくつかの問題点が見られた.
後期では前期に製作した 3D アニメーションの要素である 3D モデルおよびモーションを表
示する技術や函館の観光案内という内容を踏まえ, AR 技術を活用した函館観光についてのパ
ンフレットおよび Android 端末向けアプリ“AR 観光案内パンフレット”（以下, AR パンフ
レットと表記する）の製作に向けて活動した. これはパンフレットという紙媒体からの情報に,
仮想のキャラクターや建物を用いたアニメーションや動画, Web ページ, Google マップ等の
情報を Android 端末を通して付加することによって, 従来のパンフレットでは味わえない面白
さを味わうことができるということを狙いとしたものである.
この AR パンフレットを実現する方法として, 前期でも用いた 3D モデルおよびモーション
を表示する技術に加え, 新たに AR マーカーを検出する技術や Android 端末でのアプリケー
ション（以下, アプリと表記する）開発におけるプログラミング等を学習し, システムに導入
した. また, 函館の観光地をいくつかピックアップして取材し, 記事にしたものをプロジェク
ト内で製本するといった作業も行った. 結果として, 記事に合わせて作製したオリジナルの
AR マーカーを読み込むことで, キャラクターのアニメーションや動画の再生, Web ページや
Google マップの利用ができるようなコンテンツを製作することができた. AR パンフレット
の今後の展望として, AR マーカーの検出を容易にするためにパンフレットの紙やインクの質
を向上させることや, 景観を損なわないために AR マーカーではなくカラーの画像を検出でき
るようアプリのシステムを改善すること等によって, より高品質な AR パンフレットを製作す
ることができると考えられる.
キーワード
VR, AR, 観光案内, AR パンフレット
（※文責: 青木佑恭）
-i-
Abstract
The main purpose of this project is to make the contents which deepen the cooperation
between actual space and virtual space using Virtual Reality（VR） and Augmented
Reality（AR）.
On the first semester, we made 3D animation of visitor information about Hakodate
and Muroran using the VR system（This VR system imported this university in 2012
as one of the planning academic cooperation with Muroran Institute of Technology.） to
deepen interchange between this university and Muroran Institute of Technology. Upon
making this animation, we made the stories, designed the characters which appear on
this animation, and produced the 3D model and motion data of the characters and backgrounds. As the technical elements of this animation, we introduced a physics engine to
reproduct the physical phenomena in virtual space, and extended the program to show
the 3D model and motion data in virtual space. Consequently, we could make the 3D
animation which has some interactive elements. However, there are some problems such
as in action of the animation, in physics engine, and so on in the technical field. Also,
there are some problems such as in the story of an animation, in producing 3D model,
and so on in the contents field.
On the second semester, based on the skill to show 3D model and motion data and
the content of visitor information of Hakodate which are some of the elements in 3D
animation we made on the first semester, we were active to make a pamphlet and an
application for Android about visitor information of Hakodate using AR（We called it
‘AR Pamphlet’）. We aimed to add information on Android that is the animation
using virtual characters and vistual buildings, movies, Web pages, Google Maps and so
on to information of the paper medium of the pamphlet. We expected it gives users the
interest which is not able to experience usual pamphlet.
We learned the skill of detecting the AR markers and programming skill for Android
application, and introduced them to a system anew to realize AR Pamphlet. Moreover, we collected materials about some tourist resorts in Hakodate which we picked up
ourselves, and binded the materials ourselves. Consequently, we could make a content
which is able to watch the animation, movies, Web pages, and Google Maps by reading
the AR markers we made. As a perspective of AR Pamphlet, we can make AR Pamphlet
better quality by improving the quality of paper and ink which is used on the pamphlet
to be able to detect the AR markers easily, and improving the system in application to
detect not only the AR markers but also color images（we think it makes the landscape
of the pamphlet good）.
Keyword
VR, AR, visitor information, AR Pamphlet
（※文責: 青木佑恭）
- ii -
目次
要約
1
1.1
背景 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
1
1.2
目標 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
1
1.3
課題解決 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
1
1.4
結果 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2
背景
3
2.1
前期の目標 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
3
2.2
前期の結果 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
3
2.3
後期製作物の提案（前期からの引継ぎ） . . . . . . . . . . . . . . . . . . . . . . .
3
目標
5
リッチメディアパンフレットの製作 . . . . . . . . . . . . . . . . . . . . . . . . .
5
3.1.1
従来の問題点 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
5
3.1.2
問題点の解決 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
5
第1章
第2章
第3章
3.1
第4章
課題解決のプロセス
7
4.1
後期の課題の割り当て . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
7
4.2
AR の利用 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
8
4.2.1
Android アプリの環境構築 . . . . . . . . . . . . . . . . . . . . . . . . . .
8
4.2.2
Android 端末の選定 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
12
4.2.3
マーカー検出 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
13
4.2.4
オリジナル AR マーカー作製 . . . . . . . . . . . . . . . . . . . . . . . . .
15
4.2.5
3D モデルの表示 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
18
4.2.6
Web ページの表示 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
20
4.2.7
動画の再生 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
22
4.2.8
Google マップの表示 . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
22
3D モデルの制作とアニメーション . . . . . . . . . . . . . . . . . . . . . . . . .
25
4.3.1
建物のモデル制作 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
25
4.3.2
3D アニメーション . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
35
4.3.3
ストーリー作成 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
35
4.3.4
音声 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
37
4.3
4.4
パンフレット製作
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
38
4.4.1
ページレイアウト作成 . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
38
4.4.2
詳細設定 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
40
4.4.3
取材と撮影 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
43
4.4.4
ページデザイン . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
45
4.4.5
製本 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
46
- iii -
アプリを使うと想定される環境 . . . . . . . . . . . . . . . . . . . . . . . . . . .
49
結果
52
5.1
AR パンフレット製作 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
52
5.2
AR アプリ開発成果 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
53
5.3
プロジェクト最終発表について . . . . . . . . . . . . . . . . . . . . . . . . . . .
54
5.3.1
最終発表について . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
54
5.3.2
中間発表のフィードバック . . . . . . . . . . . . . . . . . . . . . . . . . .
56
5.3.3
最終発表のフィードバック（パンフレット） . . . . . . . . . . . . . . . . .
58
5.3.4
中間発表との比較 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
60
4.5
第5章
第6章
課題と展望
61
6.1
パンフレットの改善 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
61
6.2
AR マーカーの改善 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
62
各メンバーの活動まとめ
64
プロジェクトにおける活動報告 . . . . . . . . . . . . . . . . . . . . . . . . . . .
64
7.1.1
川又康平 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
64
7.1.2
藤井健太郎 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
65
7.1.3
木村文彬 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
68
7.1.4
青木佑恭 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
69
7.1.5
清野裕太 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
70
7.1.6
藤谷拓哉 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
74
7.1.7
池上奨 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
75
7.1.8
織田幸博 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
78
グループリーダーのプロジェクト活動総括 . . . . . . . . . . . . . . . . . . . . .
82
プロジェクト活動報告及びマネジメント
86
8.1
本章概要 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
86
8.2
プロジェクトの組織体系 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
86
8.3
プロジェクトマネジメント方法 . . . . . . . . . . . . . . . . . . . . . . . . . . .
87
8.3.1
プロジェクトマネジメント概要 . . . . . . . . . . . . . . . . . . . . . . . .
87
8.3.2
前期プロジェクトマネジメント . . . . . . . . . . . . . . . . . . . . . . . .
88
8.3.3
後期プロジェクトマネジメント . . . . . . . . . . . . . . . . . . . . . . . .
90
8.3.4
前期, 後期マネジメント比較と評価 . . . . . . . . . . . . . . . . . . . . . .
91
8.3.5
プロジェクトマネジメントまとめ . . . . . . . . . . . . . . . . . . . . . . .
92
プロジェクト全体を通しての活動報告 . . . . . . . . . . . . . . . . . . . . . . . .
93
8.4.1
年間スケジュール . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
93
8.4.2
通常活動 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
93
8.4.3
中間・最終成果発表会 . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
94
洞爺湖ワークショップにおける成果物の発表 . . . . . . . . . . . . . . . . . . . .
95
8.5.1
本項概要 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
95
8.5.2
当日の様子と結果 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
95
8.5.3
本章まとめ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
96
第7章
7.1
7.2
第8章
8.4
8.5
- iv -
付録 A
新規習得技術
97
付録 B
活用した講義
98
参考文献
99
-v-
Hakodate Avatar
第1章
1.1
要約
背景
2012 年度より本学に VR システムが導入された. この VR システムは室蘭工業大学で開発され
たものであり, 室蘭工業大学と本学との学術連携の一環として導入されたものである. 本学ではこ
のシステムの利用方法を模索していた. そこで前期の本プロジェクトでは VR の技術を利用したコ
ンテンツの製作を進めた. 後期ではこの経験を活かし, より人に身近な AR 技術を活用したコンテ
ンツの製作を模索した. そこで, 従来の紙媒体では情報の変更や更新が不可能であるため, AR 技術
により情報の追加や更新できるコンテンツを考案した. そこで, 前期と同様の「観光」をテーマと
した AR パンフレットの製作に決定した.
（※文責: 木村文彬）
1.2
目標
前期で製作した VR による 3D 観光案内アニメーションでは, キャラクターと背景の 3D モデル
を制作し, VR 空間内にて観光案内をするアニメーションを再生するコンテンツを製作した. そこ
で後期では, 情報の修正や追加等が不可能な紙媒体に, 新たに画像を認識する技術を利用したアプ
リを搭載することで情報を変更できる AR パンフレットの製作を行う. この AR パンフレットでは
単に Web ページの表示や動画の再生だけではなく, 3D 観光案内アニメーション同様, 3DCG によ
る立体オブジェクトでの建造物の 3D 閲覧と音声による簡単な説明も導入し, 目的地に到着せずと
も事前知識の獲得を可能にする.
（※文責: 木村文彬）
1.3
課題解決
前期では室蘭工業大学で開発された VR システムを使用し VR 観光案内アニメーションという
ものを製作した. そこから後期では「観光」というキーワードを継承し, AR マーカーを使用した
AR パンフレットというものを製作した. この AR パンフレットはパンフレットの記事内部に AR
マーカーを掲載している. その AR マーカーを開発した Android アプリで認識・識別することで,
建物の 3D モデルや 3D キャラクターが現れ, 説明や会話を行うことで情報の拡張を行う. 今回扱
う情報の拡張は記事内に記載されていない情報をキャラクターが話すことで表現するものとなって
いる.
（※文責: 藤井健太郎）
Group Report of 2012 SISP
-1-
Group Number 18-A
Hakodate Avatar
1.4
結果
後期の活動を通じて, AR マーカーとパンフレットはすべて自作し個別のページに設置された
AR マーカーを別々の AR マーカーとして認識することに成功した. アプリ内の機能も 3D モデル
の表示, 音声再生, 動画サイトへの接続, Google マップの作成表示等の機能を付加することに成功
した. 建物の 3D モデルはパンフレット製作時に使用した写真等を活用し精巧な 3D モデルを制作
することができた. 2012 年 11 月 27 日に行われた室蘭工業大学との合同ワークショップでは試作
段階でのデモンストレーションを行った. 同年 12 月 9 日に公立はこだて未来大学で行われた最終
成果発表会でデモンストレーション (図 1.1) を行い「パンフレットの出来が良い」, 「見ていて面
白い」, 「建物の質が高い」という感想があった.
図 1.1 AR マーカーを端末のカメラで認識すると 3D キャラクターと 3D モデルが出現
（※文責: 藤井健太郎）
Group Report of 2012 SISP
-2-
Group Number 18-A
Hakodate Avatar
第2章
2.1
背景
前期の目標
前期では, VR 技術を用いて仮想空間と実空間の間で仮想のキャラクターと触れ合うことや, 実
際に存在する物体の動きが仮想空間に反映される等のインタラクションを行うことを目標とし活動
した. また, 前期に使用した VR システムは室蘭工業大学で開発されたもので, 本学との学術連携
の一環として導入された. この経緯から, 本プロジェクトの前期のもう一つの目標として函館と室
蘭の観光案内を行う 3D アニメーションを製作し, 室蘭工業大学との交流を図るというものが設定
された.
以上の目標を達成するために本プロジェクト内で, 3D アニメーションのストーリーの考案や必
要となる 3D モデルの制作を行うコンテンツ班と, コンテンツ班が用意したストーリーや 3D モデ
ルが VR 装置上で実際に 3D アニメーションとして動くようにプログラムの作成を行う技術班と
に分かれて作業を行った.
（※文責: 織田幸博）
2.2
前期の結果
前期の成果として VR 装置で再生できる函館と室蘭の観光案内を行う 3D アニメーションを製
作した. また, 3D アニメーションの中で実空間からのアクションを起こすことで仮想空間の 3D
モデルに変化を出すという内容も盛り込んだ. しかし, 3D アニメーションは当初計画したものよ
りも短く簡素になり, 仮想空間と実空間との間のインタラクションも当初の予定より大幅に少なく
なってしまった.
（※文責: 織田幸博）
2.3
後期製作物の提案（前期からの引継ぎ）
テーマの決定
前期では, 函館の振興を目的として「観光」というテーマのもと, VR 観光案内アニメーションの
製作を行った. 函館への観光客が減少傾向にあるという調査結果のもと, 後期でも引き続き, 函館の
観光産業振興を目的とした VR/AR コンテンツの製作を行う.
（※文責: 清野裕太）
使用技術の決定
前期の VR 観光案内アニメーションでは, VR システムのある場所でしか見られないという, 場
所の制約があった. スマートフォンやタブレット端末の普及に伴って, 後期では, VR システムとい
Group Report of 2012 SISP
-3-
Group Number 18-A
Hakodate Avatar
う場所の制限を改善するために, スマートフォンやタブレット端末があれば, どこでも見ることの
できる, AR 技術を利用したコンテンツの製作を行う.
（※文責: 清野裕太）
AR 技術の活用
AR とは, 拡張現実感のことであり, 代表的なサービスには, iPhone 上で動作する「セカイカメ
ラ」等が挙げられる. 現実で知覚される情報を, デジタル合成等の技術によって拡張することで, よ
り多くの情報を提供するというものである. AR 技術を用いれば, 現実のものに様々な情報を付加
することができる. 例えば, 掲載できる情報やスペースに制約のあった紙媒体に, 写真や動画だけで
はなく, 360 度の視点から見ることのできる 3D モデルを映し出すことができ, 手元のマーカーの角
度や向きによって, 映し出した 3D モデルの側面や背面を見ることもできる. 現実世界の制約を取
り払うことによる表現の幅の広がりは大きく, 発信側の工夫次第で, これまでにない, より面白いメ
ディアを作ることができると考えられる.
（※文責: 清野裕太）
前期製作物の活用
前述の通り, AR 技術では, 3D モデルを映し出すことができる. そのため, 前期に制作を行った
キャラクターモデルや, 五稜郭タワー等の 3D モデルを活用することで, 後期の観光 AR コンテン
ツを, 効率良く製作することができる.
（※文責: 清野裕太）
後期製作物の決定
具体的な後期製作物として, 様々なアイディアを出し, 検討を行ったが, 最終的には, AR 技術を
用いた観光パンフレットを製作することに決定した. その理由として, 前期で製作を行ったキャラ
クターと, 現実世界のオブジェクトとの間でインタラクションができるということ. 前期のテーマ
を継承し, プロジェクト全体を通して一貫性を持った成果物の製作を行うことができるということ
等が挙げられる.
（※文責: 清野裕太）
Group Report of 2012 SISP
-4-
Group Number 18-A
Hakodate Avatar
第3章
3.1
目標
リッチメディアパンフレットの製作
3.1.1
従来の問題点
紙媒体
従来の紙媒体は, 実際に手にとって持つことで, 直感的なページ操作が可能であり, また, 人間に
とって慣れ親しんだ媒体であるために, 可読性が高いといったメリットがある. その一方で, 文字や
画像という限られた情報しか掲載できず, 情報を伝える手段としては, 表現の幅が狭く, 一度載せた
情報を, 後から変更, 更新することもできない. また, スペースの制約もあり, 掲載できる情報の量
が, 実際の紙面のサイズに限られているといったデメリットがある. 情報量と手軽さはトレードオ
フの関係にあり, より多くの情報量を掲載するために, 大きいサイズの紙面にすると, 持ち運びや,
扱いに手軽さが無くなるといった問題が生じる. その逆に, 扱いやすい大きさのサイズにすると, 掲
載することのできる情報が減少してしまう.
（※文責: 清野裕太）
電子媒体
それに対して, 電子媒体は, 動画や音声, ハイパーリンク, 3D モデルといった, 紙媒体では実現す
ることのできない, 膨大な量, 様々な種類のコンテンツを, 少ないスペースの中に含めることがで
き, 情報の更新も可能である. その一方で, 紙媒体のような操作の手軽さ, 可読性が無く, ページを
めくる感触等, 人間にとって自然な, 手に馴染んだインタラクションを行うことができない. 近年で
は, 実際にページをめくるような動きをする電子媒体もあるが, それは所詮デジタル上で再現され
た機能に過ぎず, 本物の紙を完全に再現することは不可能である.
（※文責: 清野裕太）
3.1.2
問題点の解決
そこで, これら紙媒体と電子媒体, 従来のメディアの問題点を解決（両方のメリットを活用）す
る方法として, AR 技術を用いることが考えられる. AR 技術によって, 紙媒体を電子的に拡張する
ことで, 紙媒体の手軽さや, 電子媒体の情報量といった, それぞれのメリットを活かすことができる
ような, 新しいメディアの製作を行う.
今回製作する AR 技術を用いたパンフレットでは, 3D モデルや動画, Web サイトへのハイパー
リンク等, 多様な情報を掲載することで, 二次元上の限られた紙面を拡張し, それによる新たな情報
の表現手段, 面白さの付加や, 情報の変更が不可能な媒体に, 情報の追加, 更新を行うといった, 利
便性の向上等を目標としている.
実際の紙媒体を, AR 技術によって拡張しているために, 成果物は実際に手にとって持つことが
でき, 直感的なページ操作が可能である. それに加えて, 電子的に膨大な量の情報も含まれており,
Group Report of 2012 SISP
-5-
Group Number 18-A
Hakodate Avatar
紙媒体と電子媒体の抱えているそれぞれの問題を解決することができる.
図 3.1 AR パンフレットイメージ図
（※文責: 清野裕太）
AR の利用
本グループが目指すコンテンツを製作するためには, AR の技術を利用するのが良いと考えられ
る. AR を実現させるために, AR マーカーの作製とそれを読み取って使用するアプリの開発を行
う必要がある. 今回 AR マーカーはパンフレットに載せる仕様とするのだが, 従来の標準的な AR
マーカーでは見栄えが悪いという意見のもと, 写真を AR マーカーとして認識させることとした.
そのため, 写真で作られた AR マーカー, また, その AR マーカーを認識するための Android アプ
リを開発することを目標とした.
（※文責: 藤谷拓哉）
3D モデルの表示と 3D アニメーション再生
観光地の建造物のページでは, 3D アニメーションを再生する. そのためには, 小型の端末でもど
の建物であるのか理解できるように, 単純であり, なおかつ特徴を捉えた 3D モデルを表示する. こ
の 3D モデルはアプリ上で読み込めるように変換し, 音声とアニメーションを同時に表示できるア
プリを開発する. このとき, AR マーカーを読み取る位置によって 3D モデルの見える角度を変化
させる. また, 液晶サイズの異なる端末上でも, それに適したサイズのアニメーションを表示できる
ようにする.
（※文責: 木村文彬）
パンフレット製作
パンフレット製作の目標として AR の技術を使用しなくても観光パンフレットとしての役割を
果たし, 且つ AR コンテンツを再生したくなるレイアウトを目指すことにした. そのために観光パ
ンフレットととして役割を果たしつつもあえて情報を少し減らすことで AR を使用することに対
するモチベーションを上げる工夫を凝らすことを目指した.
（※文責: 織田幸博）
Group Report of 2012 SISP
-6-
Group Number 18-A
Hakodate Avatar
第4章
4.1
課題解決のプロセス
後期の課題の割り当て
後期の AR パンフレットでの課題として以下が挙げられる
アプリ開発
• マーカー検出
• 3D モデルの表示・再生
• オリジナル AR マーカーの作製
• 音声の再生
• 動画の再生
• Web サイトの表示
• Google マップの作成
モデリング
• 3D モデルの制作
• ストーリーの作成
パンフレット
• キャラクターの音声の作成
• パンフレットのレイアウト作成
• 記事の取材・撮影
• 3 パンフレットの製本
以上の課題解決するためにも似た課題をまとめグループ 3 つに分けて課題を割り振ることにし
た. マーカー検出, 3D モデルの表示,・再生, 動画の再生, Web サイトの表示, Google マップの作
成等をアプリで動作できるよう開発するアプリ班. アプリで表示する 3D モデル及びキャラクター
の制作, ストーリーの作成, キャラクターの音声の作成を行うモデリング班. パンフレットに載せる
写真の撮影や記事の取材, 記事やページのレイアウトの作成, パンフレットとしての製本を行うパ
ンフレット班. 以上のグループで後期は活動した.
班編成は以下のように割り振った.
• アプリ班 (青木, 藤谷)
• モデリング班 (木村)
• パンフレット班 (織田, 池上, 清野)
（※文責: 藤井健太郎）
Group Report of 2012 SISP
-7-
Group Number 18-A
Hakodate Avatar
AR の利用
4.2
4.2.1
Android アプリの環境構築
Android 開発環境構築
AR パンフレットの製作にあたり AR マーカーを読み取ってコンテンツを再生させるアプリを開
発することとなった. Android 用のアプリを開発する上で最低限必要となる開発環境は以下のもの
となる.
• JDK/Eclipse
• Android SDK
• Android Development Tools（以下, ADT）
（※文責: 藤谷拓哉）
JDK/Eclipse
JDK, Eclipse は Java 言語を扱ったプログラムを作成するためにインストールする必要がある.
JDK とは Java 言語による開発に必要なツールをまとめているもので, 今回は特にバージョンの違
いによる問題も発生しないと考え最新版のものを利用した. Eclipse は Java 言語での開発が行える
統合開発環境（以下, IDE）である. Java の代表的な IDE としては Eclipse や NetBeans というも
のが挙げられる. これらを比較すると以下のような意見が挙げられた（以下が全てというわけでは
ない）.
• NetBeans: インストールしやすい, 動作が Eclipse に比べて軽い
• Eclipse: Android 開発環境導入に関する検索結果が多い, 本学の「情報処理演習 I」という
講義で導入して使用した経験がある
導入のしやすさという点から考え, 本グループでは Eclipse を開発環境として利用することとし
た. また, Eclipse が開発環境として推奨されているという点も理由として挙げられる.
（※文責: 藤谷拓哉）
Android SDK
Android SDK とは Google で公開されている Android 開発用のツールである. この開発用の
ツールには「Android SDK」と「Android NDK」というものが存在する. これらは主に, Android
SDK がアプリ・ソフトウェア開発用, Android NDK がランタイム・ライブラリ開発用として提
供されている. この Android NDK には Java だけでなく, C/C++ でプログラムを書けたり, ア
プリの処理速度を向上させることができる, といったような利点がある. しかし, Android NDK
は導入にやや手間がかかるという難点がある. それに対し, Android SDK は導入が楽に済む,
Android NDK に比べてハードルが低いという利点が存在し, 今回は Android SDK を利用するこ
ととなった.
（※文責: 藤谷拓哉）
Group Report of 2012 SISP
-8-
Group Number 18-A
Hakodate Avatar
Android Development Tools
ADT とは Android 用のプロジェクトを作成可能にするプラグインである. Android 開発には
必須となるため, このプラグインを Eclipse のアップデートマネージャーを利用してインストール
した.
（※文責: 藤谷拓哉）
以上のものをインストール・設定することによって基本的な Android のアプリを開発する環境
自体は揃った. しかし, この状態で一からアプリを開発するには知識と期間が足りないため, サンプ
ルプロジェクトを利用し, そこから改良していくこととする.
（※文責: 藤谷拓哉）
使用ライブラリの選択
自分たちで Android のアプリを開発するにあたってライブラリやオープンソースのソフトウェ
アを利用していくこととした. この AR に関するオープンソースのソフトウェアで最も有名だと思
われるのが NyARToolkit for Android である. また, その他にも比較的簡単に AR のアプリを開
発できる AndAR というライブラリも存在する. 以下でそれぞれを説明していく.
（※文責: 藤谷拓哉）
NyARToolKit for Android
NyARToolkit for Android はオープンソースのライブラリであり, これは C 言語のライブラリ
である ARToolkit というものを参考にして作られている. ライセンスについては, GPL（GNU
General Public License）と商用ライセンス（Commercial license）のどちらかを選択するデュア
ルライセンス制となっている.
この中にはサンプルアプリが付属されている. アプリを実行するとカメラが立ち上がり, デフォ
ルトの状態では「hiro」と書かれている AR マーカーに Android 端末をかざすことによって, 映し
だされた AR マーカー上に 3D のオブジェクトを投影するというものとなっている. このアプリは
以下のような流れで実行されている.
1. アプリの初期化
2. カメラプレビューの開始, プレビュー画像のキャプチャ
3. カメラプレビュー上に 3D モデルを重畳
4. 3D モデルの登録
5. 3D モデルの表示
アプリを起動すると初期化処理のため, 必要なインスタンスの準備やカメラプレビュー用の
ビューを生成する. その後カメラプレビューを開始し, カメラプレビューをキャプチャできるよう
にする. キャプチャされた画像をもとに AR マーカーがプレビュー上にあるかどうかを判定してい
る. これらを行った後, アプリの向きを取得するための設定と 3D モデルを表示するためのビュー
を生成している. さらにカメラ画像から AR マーカーの有無の判定や変換行列の取得を行うための
インスタンス生成や 3D モデル表示用のビューを生成している. OpenGL ES の設定もこのときに
Group Report of 2012 SISP
-9-
Group Number 18-A
Hakodate Avatar
行なっている. 次の段階では AR マーカー上に投影する 3D モデルの登録を行なっている. また,
この時には OpenGL ES の光源の位置やカメラ位置の設定も行なっている. 最後の段階で 3D モデ
ルを表示するためにカメラ画像から AR マーカーの有無の判定や表示する 3D モデルを AR マー
カーの座標系に変換するための変換行列の取得等を行なっている. AR マーカーの判定と座標の取
得処理では, キャプチャした画像データのフォーマットを変更し AR マーカーを検出する. 変換行
列の取得を行い判定した情報を通知, その後 3D モデルを描画するという流れとなっている. 画像
から AR マーカーの検出が成功したら, その AR マーカーに合わせて 3D モデルを表示するために
変換行列を取得する. 検出した AR マーカーの一致度も取得されており, 一致度が高い場合に検出
した AR マーカーの種類と変換行列を取得して 3D モデルを表示している. また, AR マーカーの
種類は登録時に ID で割り振られており, 検出した AR マーカーと関連付けさせることにより, 複
数種類の AR マーカーの登録や AR マーカーごとの異なった 3D モデル表示が行えるようになっ
ている.
（※文責: 藤谷拓哉）
AndAR
AndAR は Tobians Domhan 氏 が 開 発 し た ラ イ ブ ラ リ で あ る [1].
このライブラリは
NyARToolkit for Android 同様に ARToolkit をベースとして作られており, 消費労力を最小限
にして Android 上で動かすことを目的に作成されている. この AndAR は NyARToolkit for
Android と比較して敷居が低い. ソースコードがオブジェクト指向に即しており, 比較的簡単に理
解しカスタムをすることができる. また, 3 つのクラスを変更するだけでオリジナルの 3D モデル
を表示することができる.
（※文責: 藤谷拓哉）
AndAR は NyARToolkit for Android に対して比較的初心者向けでとっつきやすいライブラリ
となっている. しかし, NyARToolkit for Android と比較するとやはり参考文献となるようなもの
が非常に少ない. そのため, 大きくコンテンツを変更するにあたっては NyARToolkit for Android
の方に分があると判断し, 当グループ内では NyARToolkit for Android を利用してアプリを開発
してゆくこととした.
（※文責: 藤谷拓哉）
アプリ基盤
本プロジェクトでは前期に制作した 3D モデルをコンテンツとして利用することが課題の一つと
なっている. そのためにこの AR パンフレット班ではアプリ内で 3D モデルを表示する機能を必要
とする. NyARToolkit for Android の標準で表示することのできる 3D モデルのファイル形式は
OBJ データや MQO データである. しかし, 前期の成果としてわかっていることに MQO データ
は読み込みに時間がかかるというものがある. また, そのために前期の活動では MMD で制作さ
れた PMD データを使用していた. そのため, 後期開発する Android アプリでも前期で使用した
PMD データや新規の PMD データを使用するためのソースコードを実装する必要がある.
PMD データを再生するライブラリとして NyMmd というものがある. また, これから派生して,
Android 用である NyMmdForAndroid というライブラリが存在する. そして, このライブラリを
Group Report of 2012 SISP
- 10 -
Group Number 18-A
Hakodate Avatar
利用して PMD データを表示する Android アプリのソースコードを nyatla 氏が NyARToolkit for
Android demo として公開している [2]. 本グループが開発したいコンテンツに近く導入が比較的
簡単と思われたため, このアプリをベースとして使用しアプリを開発していくこととした. ここで
簡単に説明をすると, この NyARToolkit for Android demo は以下の 4 つのプロジェクトから成
り立っている.
• AndMmd
• NyARToolkit for Android ‐ AndUtils
• NyARToolkit for Android
• NyMmdForAndroid
一番上にあげた AndMmd というものが MMD を AR マーカー上に表示するアプリ本体である.
二, 三番目に関しては前項で触れた NyARToolkit for Android 関連のライブラリとなっている. そ
して最後にあげたのが先程説明した NyMmdForAndroid である. 以上の 4 つのプロジェクトによ
り構成されている. これらは NyARToolkit のサンプルソースコードに NyMmd の初期化処理や描
画処理を足した簡単なものとなっている.
（※文責: 藤谷拓哉）
環境導入時の諸問題解決
開発環境を整える段階で多くのエラーが発生してきた. それらの内容と解決法を記載してゆく.
まず NyMmdForAndroid を導入した際にエラーが消えないという事象が発生した. これはライ
ブラリとしてリンクされたフォルダーのロケーションが, ライブラリの作者が作成した別名のフォ
ルダになっていることが原因だった. したがって, NyMmd に関するロケーションの指定を正しい
場所に指定し直すことによってエラーは消えた.
次に, NyMmdForAndroid を AndMmd のライブラリとして関連付けした際にエラーが発生
した. これは NyMmdForAndroid の JAR ファイルが存在しないことによるエラーだと判明し
た. そのため, JAR ファイルを Eclipse を利用してエクスポートすることにより解決できた. し
かし, Android SDK を利用しているライブラリを作成するには, Android のプロジェクト作成
時に Activity を作成しない, AndroidManifest.xml のアプリタブに表示されている「Define an
application tag in the AndroidManifest.xml」という項目のチェックを外す, エクスポートする際
に AndroidManifest.xml をリソース選択時に含めないようにする, という 3 つの項目を守る必要
がある.
また, AndMmd と NyARToolkit for Android ‐ AndUtils とのリンクの際にエラーが発生し
た. 原因は AndMmd 側の Java ビルドパスの設定だと判明したので, ビルドパスを正しい情報に書
きなおすことによって正常に動くようになった. 以上のような点でエラーが発生してたものの, 環
境導入を行なってから数日でこれらを解決し終えることができ, アプリ開発の段階に移行した.
（※文責: 藤谷拓哉）
Group Report of 2012 SISP
- 11 -
Group Number 18-A
Hakodate Avatar
4.2.2
Android 端末の選定
Android アプリの開発で利用する試験機については, 予め先生より Lenovo 社の 7 インチ相当
のタブレット PC が数台与えられた. まずはこの端末でアプリの開発が始まり, アプリの仕様も
この機種に沿うもので考えられていた. しかしながら, 機種自体は旧式（ 搭載されていた OS は
Android2.2 である）であり, 全て同じモデルであった. このままでは, 開発されたアプリが新型の
機種（当時の最新 OS は Android4.0 であった）では動作せず, デモによる説明では動作しない恐
れがあった. そのため新しい Android OS を搭載したタブレット PC を導入することとなった. 新
しいタブレット PC についてはグループメンバーで相談した結果, 以下のような条件で検討するこ
ととなった.
• 価格
• サイズ
• 背面カメラ
（※文責: 木村文彬）
価格
新しく導入するタブレット PC 用の予算は 7 万円程であった. 今回の試験用のタブレット PC は
最終報告会でのデモ機としての役目も兼ねるため, 2, 3 台は必要であるという結論に至り, 1 台につ
き高くても 4 万円という条件に至った. この時点で国内メーカーのタブレット PC の大半は導入対
象外となった.
（※文責: 木村文彬）
サイズ
端末のサイズについては, AR パンフレットを片手に持ち, もう片方にタブレット PC を持つこ
とを考慮して, 片手で扱いやすい 7 インチサイズの端末を検討していた. しかしながら, 発表時に
実演する提案があり, 異なるサイズでの試験も行う必要もあったため, 10 インチサイズの端末も対
象に加えることとなった.
（※文責: 木村文彬）
背面カメラ
背面カメラは AR パンフレットに印字された AR マーカーの検出の際に, ユーザーは画面を見な
がら合わせる必要があるので必須条件であった. しかしながら, 7 インチ相当のサイズの Android
端末の多くは前面カメラを搭載していても, 同時に背面カメラを搭載したものは非常に少なく, こ
の条件を満たす機種は大幅に限られた. 以上の条件より絞り込み, 7 インチ相当のタブレット PC
は Lenovo 社に決定し, 10 インチ相当のタブレット PC は ASUS 社のそれぞれ最新型を導入する
ことに決定した.
（※文責: 木村文彬）
Group Report of 2012 SISP
- 12 -
Group Number 18-A
Hakodate Avatar
4.2.3
マーカー検出
AR マーカーの検出に関して AR パンフレット班で AR マーカーの構造や検出方法をどのよう
にするか検討した. 一番初めに出た案が OpenCV を用いたカラーの画像を用いた画像認識である.
ここで AR マーカーについて説明をすると, AR マーカーとは AR コンテンツを投影するために何
かしらのパターンが描かれた目印のことである. 基本的な AR マーカーは正方形の黒枠に囲われて
いる白黒の画像が主となっている. そのため, カラー画像をそのまま利用した見栄えの損なわない
パンフレットを作るために, カラーの画像を利用した AR マーカーを検出するということを当初の
目標として活動した.
（※文責: 藤谷拓哉）
OpenCV の導入
カラー画像の読み取りということで一番先に思い浮かぶのが本学の「パターン認識」という講義
でも使用した OpenCV である. OpenCV とはコンピュータビジョン向けのオープンソースライブ
ラリであり, OpenCV を利用することによって画像処理やパターン認識等を行えるようになる. こ
のライブラリには Android に対応したものも存在している. このライブラリにはいくつかバージョ
ンが存在しており, ビルドされていないバージョンと既にビルドされている prebuild バージョンが
ある. このビルドされていないバージョンは主にバージョン 2.2 以前のものであり, これを利用す
るには Android NDK の導入が必要だった. しかし, バージョン 2.3.1 以降からは既にビルドされ
ていて, 利用する際に Android SDK のみで済む prebuild というものがある. ネイティブな項目を
利用したい場合は Android NDK を利用する必要があるが, それ以外の場合では Android SDK だ
けで行えて簡単に利用することができる.
Android 開発環境を整える段階で本グループでは Android SDK を利用することになってい
る. そのため, 今回導入した OpenCV は既にビルドしてある prebuild 版を利用することとした.
OpenCV にはいろいろなバージョンがあるが, 作業時間の効率を考えバージョン 2.3.1 とバージョ
ン 2.4.1 やバージョン 2.4.2 での導入にわかれて作業を行った. prebuild 版はインポートするだけ
で使用することができるはずなのだが, 起動することができず, 結果的に 1 ヶ月近く作業を行なっ
て導入し終えることができなかった.
導入する段階では OpenCV のバージョンを変更して試行するだけでなく, Android 実機の OS
のバージョンも異なる条件で試行した. 実際に試行したバージョンは, 2.3.4 と 4.0.1 である. しか
し, その甲斐もなく導入がうまくいくことはなかった.
そこで, 原因を探るために違うアプローチから導入してみることとした. それがマーケットを利
用した導入である. Android では, Google Play という配信サービスを利用することができる. そ
こでは OpenCV に関連するアプリが無料配布されている. これをインストールすることによっ
て, そもそも OpenCV を利用することができるのかを検証することとした. そこで発見したこと
が OpenCV 本体だけでなく, OpenCV Manager というものが必要となるということと, OpenCV
自体の搭載プロセッサごとに異なる形式のものを導入する必要があるということである. 前者に関
してはインストールするだけだったので容易に行えた. 次に後者の方なのだが, 本グループが利用
していた Android 実機を調べると, 使用しているプロセッサが「armeabi-v7a neon」というもの
と「NVIDIA Tegra 3」というもので異なっていることが判明した. そこでそれぞれの形式に対応
した OpenCV が Google Play 上に配布されていたため, それらをインストールした. その際利用
Group Report of 2012 SISP
- 13 -
Group Number 18-A
Hakodate Avatar
した Android が OS バージョン 2.3 のもの別機種 2 種類と OS バージョン 4.0 のもの 2 種類なの
だが, 導入を試みたところ, OS バージョン 2.3 のもののうち片方の Android 端末でのみ稼働した.
しかし, その他の端末では稼働することなく, OpenCV を利用できる条件というものも判明させる
ことができなかった.
結果的に, 動かせる端末の条件の特定や Eclipse を経由したプログラムの導入方法の確立ができ
なかった. そのため, 本グループでは OpenCV を利用したアプリを開発することを断念した.
（※文責: 藤谷拓哉）
マーカー検出方法の再検討
前項であげたように, OpenCV を利用したカラー画像の検出は導入段階で断念することとなっ
た. そのため, AR パンフレット班では新たにマーカー検出法を考案することとなり, 班内で検討を
行った. そこで, AR マーカーを用いることによる問題点を定義することにより, AR マーカーの検
出方法を考察することとした.
検討している際に上がった意見が, ユーザー視点での利便性と 3D モデルの多視点化という 2 つ
が重要であるというものであった.
まず前者の件についてだが, AR マーカーをパンフレットに組み込むという性質上, パンフレッ
トを利用するユーザーが AR の技術を活用するためには, AR マーカー自体がわかりやすくないと
いけないというものである. 既存の AR マーカーというのは四角い黒枠の画像となっており一目
でそれが何かしらの作用を及ぼす目印だとユーザーは判断することができる. それに比べて, 本グ
ループが最初に考えていたカラー画像の検出では, パンフレットに載っている写真そのものを AR
マーカーとして利用するというものだった. しかしその場合, ユーザーは予めそれが AR マーカー
としての機能も備えているという認知がなければ見逃してしまう. このように, AR マーカー自体
のわかりやすさを追求して, ユーザーにとって使いやすいものにする必要があるということだ.
次に後者の件についてだが, AR マーカー上に 3D モデルを表示するということで, AR マーカー
と Android 端末との距離や角度・向き, また光のあたり具合によって認識精度に違いがでてくる.
それをどうにか改善して様々な視点から 3D モデルを見ることができるようにするべきであると考
えた.
ここで, AR マーカーの認識方法自体に関係がありそうなものは前者である. 後者に関してはプ
ログラムの精度や AR マーカーを変更する, また使用環境を変更することで実現させるほうが良い
と思われる. したがって, 認識方法を検討する際にはユーザー視点での利便性を基準項目とした.
さらに開発側からの問題点として技術的挑戦となりうるか, OpenCV の導入で時間を取られてお
り, 残り活動期間が短いことを考慮すると, 比較的導入がスムーズに行えるかという点を考慮する
こととした.
マーカー検出方法と AR マーカーの仕様を列挙していった中で出たものが, 画像認識, パター
ン認識, 文字認識である. 画像認識というのが OpenCV を利用した認識方法でカラー画像を AR
マーカーとしている. そしてパターン認識はいわゆる普通の AR マーカーを利用した認識方法であ
り, ARToolkit の標準検出方法である. 文字認識は検出方法としてはパターン認識等だが, AR マー
カーとなる部分が文字であるというものである.
そこで新たに出た意見が, 画像＋ AR マーカーというものだった. これは検出方法はパターン認
識で, AR マーカー自体が黒枠とカラーの画像から構成されているというものである. そこで, これ
ら上がった意見の利点や欠点を上げていって検出方法を決定を検討してゆく.
Group Report of 2012 SISP
- 14 -
Group Number 18-A
Hakodate Avatar
まず, 画像認識に関しては一度試行しているため除外する. 次にパターン認識だが, これは
ARToolkit の標準で利用されている検出方法であるので導入は既に済んでいる. また, AR マー
カーも標準のものであるのでユーザーの視点から見てもわかりやすい. しかし, 技術的挑戦が見い
だせないという欠点がある.
次に文字認識の方だが, 詳しい方法がわかりづらいといった班内の技術能力的な問題と, 文字が
AR マーカーとなる場合にそれが AR マーカーなのかそれとも通常の記事としての文字なのかが判
別しにくい, 事前にユーザーに説明しておかないと機能の存在に気づかない可能性が存在するとい
う意見があがった.
そして最後にあがった画像＋ AR マーカーに関してだが, AR マーカーに黒枠を作っておけば
それが AR マーカーだと識別しやすいし, 黒枠内をカラー画像にすることで少しは技術的挑戦
につながる可能性があるという意見が上がった. これらの意見から検出方法と AR マーカーは
NyARToolkit for Android によるパターン認識で検出を行い, AR マーカーは黒枠の中にカラーの
画像を用いたものを AR マーカーにすることとした.
（※文責: 藤谷拓哉）
4.2.4
オリジナル AR マーカー作製
マーカー作製の基本
NyARToolkit for Android を含む ARToolkit 系列のライブラリでは AR マーカーの仕組みはほ
ぼ共通となっている. この AR マーカーというものにはいくつかルールが存在する. AR マーカー
自体が正方形になっていること. 外側は黒枠で囲い, 黒枠, 白領域, 黒枠という領域の割合が 1:2:1
となっていること. ただしこれは標準であり, 最低でも 3:14:3 まで黒枠を細くできる. 白領域内で
は点・線対称のデザインや細い線を利用したデザインを使用しない. 点・線対称のデザインにした
場合, 投影するコンテンツが Web サイトへのリンク等の場合には支障はない. しかし, 3D モデル
等を投影する場合には, 投影する方向が AR マーカーを認識する度に変わってしまうという問題が
発生する. 以上のような制約が存在し, 基本的にはこのルールに従って AR マーカーを作製する.
（※文責: 藤谷拓哉）
パターンファイル
投影される対象となるものが先ほど説明した AR マーカーとなる. そしてそれが「AR マーカー
である」というようにプログラムが認識するためのものがパターンファイルである. パターンファ
イルとは AR マーカーをもとに作成するデータファイルとなっており, 白領域内の画像の RGB を
0∼255 の数値でデータ化している. パターンファイルには分割数というものが指定されており, 標
準では 16 となっている. これは縦横それぞれを 16 つに分割しているという意味である. 分割数が
増えれば増えるほどパターン認識を行う際, パターンを合致させる箇所が増えるためにマーカー検
出が精巧なものになるが, その分処理に対する負荷が高くなってしまう.
（※文責: 藤谷拓哉）
Group Report of 2012 SISP
- 15 -
Group Number 18-A
Hakodate Avatar
オリジナル AR マーカー
本グループではパンフレット・3D モデル・アプリを作る者をそれぞれ分けて担当していた. そ
れに伴い, オリジナル AR マーカーの作製はパンフレット, パターンファイルの作成はアプリに属
する者がそれぞれを担当した. したがって, 作業の流れとしてはパンフレット班の者がオリジナル
AR マーカーを作製し, それをアプリ班の者に渡してパターンファイルを作成する, という流れと
なっている. この作業をマーカー検出の精度が納得行くものになるまで繰り返して行った. まず本
グループでは黒枠の中身はカラー画像となる AR マーカーを作製することになっていたため, その
ようなものをオリジナル AR マーカーとして作製した（図 4.1）. これをアプリ班が受け取り, パ
ターンファイルを作成した.
図 4.1
オリジナル AR マーカー（函館ハリストス正教会）
パターンファイルの作成には主に 2 通りの方法がある. それは ARToolkit に付属してあるパター
ンファイル作成ツールを使用する方法と, タルタローグで公開されている「ARToolKit Marker
Generator Online」を利用する方法である. 今回は作成のしやすさ等の理由から, 後者である
ARToolKit Marker Generator Online を使用した [3]. こちらでは 2 通りの方法でパターンファ
イルを作成することができる. 一つは Web カメラに AR マーカーを映す方法である. これは先ほ
どあげた ARToolkit に付属してあるパターンファイル作成ツールである mkmkpatt.exe で作成す
る方法と同じである. もう一つは画像を読み込んで作成する方法である. こちらは mkpatt.exe で
はできない方法であるので, Web カメラを所持していない者でもこれを利用して作成することが
できる. しかし, 本グループで作製したオリジナル AR マーカーを後者の方法で読み込んでみたと
ころ, 原因が不明だがうまく読み込まれないという現象が複数回発生した. そのためスムーズに作
業を進行させるため基本的には Web カメラからの読み取りを行った. また, ARToolKit Marker
Generator Online では AR マーカーの分割数や AR マーカーの大きさも指定できる. 今回は分割
数, 大きさ共に標準の状態で作成した.
上記の方法でパターンファイルを作成して試行した. パンフレット内では 9 つの AR マーカーを
判別する必要があるのだが, 違う AR マーカーに対して違うコンテンツを再生させるところを, 同
じコンテンツを再生してしまったり, AR マーカーではないただのパンフレットの記事や写真で反
Group Report of 2012 SISP
- 16 -
Group Number 18-A
Hakodate Avatar
応してしまったりと, 精度はよくなかった. そのため, 処理が重くなることを覚悟して, 今回は分割
数を 32 に変更した. 64 でも試行したが, そちらではあまりに重くなってしまい再生がうまくされ
ないコンテンツがあったため, 32 分割で使用することとした. 使用する AR マーカーを全て分割数
32 にして再び試した. すると前の状態ほどはひどくなかったが, やはり誤認が発生した. これでは
パンフレットの使用そのものができず, 意味のないものになってしまうため, カラー画像の使用を
断念した.
図 4.2 オリジナル AR マーカー没案 1
図 4.3 オリジナル AR マーカー没案 2
カラー画像を使用しないということで, また新たに白黒の AR マーカーを作製した. しかし, こ
こで AR マーカーの作製者とパターンファイルの作成者が異なることによる問題が発生した. そ
れが知識の共有である. パターンファイルを作成した者はマーカー作製の基本の項で明記したよう
なことに関する知識を有していたが, マーカー作製者は全てを把握していなかった. それによって
Group Report of 2012 SISP
- 17 -
Group Number 18-A
Hakodate Avatar
作製されたマーカーが図 4.2 である. これは点・線対称のデザインが多く利用されている. これで
は 3D モデル表示コンテンツではうまく使用することができない. また, 中段一番左のような AR
マーカーだと, AR マーカーの中に AR マーカーが存在するような形になってしまい誤認が発生し
てしまう. そのため, 異なる AR マーカーを作製し直した. そこでも別の問題が未だ発生していた.
それが AR マーカー同士での誤認なのだが, 例えば図 4.3 のような AR マーカーがあったとする.
この AR マーカー郡では上段一番右, 中段一番右, 下段一番左が同じパターンだと認識されてしま
う. 特に, 中段一番右のような AR マーカーだと線が細いため, その他の AR マーカーと容易に誤
認が発生してしまう. そのため, いくつかの AR マーカーを残し, さらに AR マーカーの作製のし
直しを行った. 結果的に誤認が最大限に抑えられたものが図 4.4 の AR マーカーたちである. した
がって, 本グループで使用する AR マーカーは図 4.4 のものと決まった.
図 4.4 採用されたオリジナル AR マーカー
（※文責: 藤谷拓哉）
4.2.5
3D モデルの表示
前期に製作した VR システムでの 3D 観光案内アニメーションと同じく, 後期の AR パンフレッ
トにおいても, 3D モデルやそれに対応するモーションを表示させることによってアニメーション
を製作していった. 方法としては MikuMikuDance で制作した PMD データ（3D モデルのファイ
ル形式）と VMD データ（3D モデルのモーションに関する情報が入ったファイル形式）を読み込
み, 表示するといったものである. これらの処理を Java 言語に対応しているライブラリを利用して
プログラムを作成していった.
使用したライブラリは NyMmd for Android というライブラリで, 前期でキャラクターや建物,
背景等を仮想空間に表示する際に使用した NyMmd というライブラリの Android 端末用ラッパー
ライブラリである.
NyMmd ではプログラムの仕様上, Inverse Kinematics（定められた末端部分の位置に合わせて
その親となる関節の位置を決めていき, 自然な動きを実現できるようにする手法. 以下, IK と表記
する）や表情, ボーン（3D モデル内の腕, 足等のような各関節のこと）等 PMD データに含まれる
Group Report of 2012 SISP
- 18 -
Group Number 18-A
Hakodate Avatar
すべての設定を読み込むことになっている. しかし, 本プロジェクト内で制作された 3D モデルは
すべて IK と表情に関する設定がされていなかったため, ライブラリをそのまま使用すると IK と
表情を読み込む段階でエラーが発生した. この問題は IK と表情を読み込む処理を行わないように
プログラムを変更することで解消された.
他には, 3D モデル描画の部分のプログラムを作成する際にレンダリング時の設定や光源の設定,
初期設定等に誤りがあると, 図 4.5 のような 3D モデル表示の不具合が発生するので, その点に注意
しつつプログラムを実装した.
図 4.5
プログラム内に誤りがあると発生する描画ミス
さらに, アニメーションを再生する際に同時に音声も再生されるようにプログラムを実装した.
Android 端末での音声ファイルの再生には Android API に含まれている MediaPlayer というク
ラスを用いた（なお MediaPlayer は音声ファイル再生だけではなく, 動画ファイルの再生にも利用
できる）. MediaPlayer を用いて音声ファイルを再生するためには, 次のような手順で処理してい
く必要がある.
1. MediaPlayer のインスタンスを生成する
2. FileDescripter というクラスを使って, 音声ファイルを読み込む
3. 1. で生成した MediaPlayer のインスタンスに 2. で生成した FileDescripter を設定する
4. prepare() というメソッドを使って再生準備をする
5. AR マーカーを検出したら, 該当する音声ファイルを start() を使って再生開始する
これらの手順に沿ってプログラムを実装していった. この他にも, 途中で AR マーカーが検出で
きなくなったら音声ファイルを一時停止し, 表示されていた 3D モデルを消す等の処理も実装した.
開発したアプリでは, 一つの音声ファイルが再生しきったら次の音声ファイルを再生するように
しており, この再生される音声ファイルが切り替わるタイミングでキャラクターの 3D モデルおよ
びモーションが切り替わるようにしている.
また PMD データに使われているテクスチャは, より大きく複雑な 3D モデルであるほどサイ
ズが大きくなる. 本プロジェクト内で制作した 3D モデルは建物が多く, どれもテクスチャを多く
使っている傾向にある. したがって, 一つのページのアニメーションを閲覧してから別のページの
アニメーションを閲覧しようとすると, OutOfMemoryError（端末で確保可能なメモリが不足する
と起こるエラー）が発生する. この対策として, アニメーションを再生し終えた際, 再生した 3D モ
デルのテクスチャを解放するようにプログラムを作成した.
このようにして音声ファイルと 3D モデルの表示を実現させることができたが, 次の 4.2.6 や
4.2.7, 4.2.8 にあるように, 今回開発したアプリではメインである Android 端末のカメラプレビュー
Group Report of 2012 SISP
- 19 -
Group Number 18-A
Hakodate Avatar
および 3D アニメーションが閲覧できる画面（以下, メイン画面と表記する）の他に, 検出された
AR マーカーによっては動画再生や Web ページ等の別の画面に遷移することがある. この別の
画面に遷移する際に次のような処理を行わなければエラーが起こるかプログラムに不具合が発生
する.
• MediaPlayer の再生を停止し, release() というメソッドを使って MediaPlayer を解放する
• 3D モデルに使用されているテクスチャを解放する
• Android 端末のカメラを解放する
アプリ内で実行される一つひとつの画面のことをアクティビティと呼ぶ. アクティビティには状
態遷移（アクティビティが破棄された状態, アクティビティがスリープになった状態等）があり,
先述したような処理はアクティビティの状態を考慮して実装する必要がある. 例えば, アクティビ
ティが破棄される前（スリープ状態, 実行を待機している状態等）に先述の処理を行うと, アプリ
内でカメラが使用できなくなったりアプリが強制終了したりするという問題が発生する. 特にカメ
ラの処理は, 他のカメラを使用するアプリにも影響を及ぼすことがあるので, 処理の順序を意識し
なければならない.
Android 端末でカメラを使用するアプリを開発する際は, カメラを解放しないままアプリを終了
すると別のアプリでカメラを使用することができなくなるため, アプリを終了させる時にもカメラ
を解放する処理を実装する必要がある.
（※文責: 青木佑恭）
4.2.6
Web ページの表示
先述の 3D モデルを利用したアニメーションだけでなく, 検出した AR マーカーの種類によって
は別のアクションが起こるとよりアプリとしての利便性が上がるという考えから, 今回開発したア
プリでは Web ページの表示, インターネット上の動画の再生, Google マップの利用ができるよう
な仕様を目指しアプリを開発した. ここでは Web ページの表示について解説する.
Android 端末上で Web ページを閲覧する画面を作成するためには, Android API の WebView
というクラスを使う. まず WebView と Web ページを閲覧するためのクライアントを作成し, その
後読み込む Web ページの URL を指定し, アプリの画面に WebView を追加するという非常に簡易
な方法で Web ページの閲覧画面を作成することができる.
先述した方法で Web ページを閲覧することはできるものの, これだけでは画面上に Web ページ
が表示されるという機能しか実装できていないため, ユーザーにとっては非常に扱いづらい仕様で
ある. そのような点を解消するため, 今回作成した Web ページの閲覧画面では PC の Web ブラウ
ザのように様々な機能を実装した. 具体的には次のようなものである．
• ＋：画面を拡大する
• ‐：画面を縮小する
• ←：一つ前のページに戻る（それ以上戻れない場合は何も起こらない）
• →：一つ先のページに進む（それ以上進めない場合は何も起こらない）
• ×： Web ビュー画面を終了し, メイン画面に戻る
これらの通りに Web ページの表示のアクティビティを作成していくと, 図 4.6 のようになる.
今回開発したアプリの基本的な機能である端末のカメラを利用した AR マーカーの検出を利用
Group Report of 2012 SISP
- 20 -
Group Number 18-A
Hakodate Avatar
図 4.6 Web ページの表示画面のイメージ
しつつ, この Web ページの表示や動画の再生, Google マップの表示を可能にさせるためには, 起動
しているアクティビティを一旦終了させてから各アクティビティに移るという操作ができるように
プログラムを作成する必要がある. この処理に必要な手順は次のようになる.
1. インテント（現在実行しているアクティビティから別のアクティビティに移る際に必要な
もの. 別のアクティビティに数値や文字列等のデータを受け渡すことも可能である）を生成
する
2. 別のアクティビティに受け渡したいデータやインテントのオプション（現在実行しているア
クティビティを除く他のアクティビティをすべて強制終了させる等）を設定する
3. インテントの設定にしたがってアクティビティを開始させる
4. 起動していたアクティビティを終了させる
今回開発したアプリでは, 検出した AR マーカーによってインテントに異なる数値を受け渡し,
その数値によって動画再生か Web ページの表示か, もしくは Google マップを利用するかを判別
するようにしている. 図 4.7 はその処理のフロー図である.
図 4.7 アクティビティ遷移の解説フロー図
当然ながらこのアクティビティ遷移の操作は, 各アクティビティ（Web ページの表示画面, 動画
Group Report of 2012 SISP
- 21 -
Group Number 18-A
Hakodate Avatar
再生画面, Google マップ画面）からメイン画面に戻る際にも必要なものとなっているので, 各アク
ティビティを終了させる際にも同じようにインテントをメイン画面に受け渡すようプログラムで作
成した.
（※文責: 青木佑恭）
4.2.7
動画の再生
Android 端末上で動画を再生するには２つの方法がある. １つ目は 4.2.5 で述べた MediaPlayer
に動画のパスを指定する方法, ２つ目は Android API の VideoView というクラスを利用して動画
を読み込ませる方法である. VideoView では動画の再生・一時停止等の操作ができるコントローラ
が利用できるため, 今回開発したアプリでは VideoView を利用して動画再生画面を作成した.
Android の動画再生ではディレクトリを指定しローカルにファイルを読み込むだけでなく, URL
からファイルを読み込んでストリーミング再生することができる. そのことから, 将来的に他の動
画にもリンクできるように YouTube 上にある動画を再生できるようプログラムを作成していった.
動画のストリーミングには従来の Web ページの URL ではなく Real Time Streaming Protocol
（以下, RTSP と表記する）という形式の URL を使用した. RTSP とは, インターネット等の
TCP/IP ネットワーク上で音声・動画等をリアルタイムにストリーミングすることができるプロ
トコルのことである. RTSP を使用すると, 音声・動画をダウンロードしながら再生・停止等の操
作ができるという利点がある.
動画再生をする際に, まず動画ファイルが存在する URL からデータを読み込む必要が出てくる.
動画のデータを読み込んでいる段階で再生や一時停止等の操作を行おうとするとシステム内にエ
ラーが発生し強制終了してしまうので, 動画を読み込んでいる途中にユーザーが誤って再生等の操
作を行わないよう, 動画のデータの読み込みが終わっていない間は画面中央に「Now loading」と
いうダイアログを表示し, 動画の操作に関する部分を操作できないように処理を施した. ダイアロ
グは読み込みが失敗するか読み込みが完了すると消える設定になるよう実装した. また, 動画を再
生しきった場合には動画を初めから再生するような仕様になるようプログラムを作成した.
上述のような処理を実装していくと, 図 4.8 のようになる.
図 4.8 では動画再生画面の下部にシークバーや一時停止ボタン, 早送りボタン等が可視化され
ているが, 実際に開発したアプリでは５秒ほどでこれらが見えなくなってしまうため, ユーザーに
とっての利用しやすさを考慮すると, 今後はその点も修正していく必要があると考えられる. また,
今回開発したアプリでは図４のように, ただ動画を再生および操作することしかできていないので,
他の動画へリンクできたり, 動画再生後に Web ページにアクセスしたりといった機能を実装でき
ると, より実用性が高まると考えられる.
（※文責: 青木佑恭）
4.2.8
Google マップの表示
Google マップをアプリで利用するには Google Maps API をプログラム内で用いる必要がある
が, そのためにはまず Google Maps API キーというものを取得する必要がある. このキーによっ
て, Google マップを利用した独自の Android 端末向けアプリを開発することができる.
キーを取得した後, Google Maps API を利用してプログラムを作成していった. 基本的に
Group Report of 2012 SISP
- 22 -
Group Number 18-A
Hakodate Avatar
図 4.8
動画再生画面のイメージ
Google マップのアクティビティを作成する際は, MapActivity というクラスを親クラスとして設
定し作成していく（従来のアクティビティでは Activity を親クラスとする）.
アプリ内でのマップは, なるべくパンフレットの該当ページに近いものを利用できるようにする
ことを目標としプログラムを作成した. まず, パンフレットに記載されている観光地および本学が
すべて画面内に収まるように地図の位置とズームを調整し, 各観光地と本学の位置にパンフレット
で使用されているピンの画像（図 4.9 左図参照）を貼り付けるようにした. ここまでの処理を正し
く行うと, 実行画面は図 4.9 の右図のようになる.
図 4.9
左：アプリおよびパンフレット内で使用されたピン 右：途中段階の実行画面
さらに, 地図としても, 本グループで製作したパンフレットのアプリとしても, 実用性をより高め
られるよう, 次の２つの機能をこのマップ画面に追加した.
Group Report of 2012 SISP
- 23 -
Group Number 18-A
Hakodate Avatar
1. ピンをタッチすると説明が書かれたバルーンが現れる
2. ユーザーの現在地を取得して表示する
まず１の機能について説明する. これは Google のホームページから閲覧できる従来の Google
マップにおいては図 4.10 の左図のように用いられている機能であるが, 本グループが開発したア
プリでは, 製作したパンフレットのアプリとしての実用性をより高められるよう, その観光地の簡
単な説明と, パンフレットでその観光地についての記事が載っているページをバルーンで表示す
るようなものを作成した. プログラムを作成するにあたって, バルーンを実装できるようなものが
Google Maps API には存在しなかっため, オープンソースのライブラリである Android MapView
Ballons というものを利用した. このライブラリの中の BallonItemizedOverlay というクラスを利
用すると, バルーン表示の機能を作成することができる. また Web 上で配布されているライブラリ
の ZIP ファイルの中にはサンプルコードも同梱しており, それを参考にすれば Android プログラ
ミングの初心者でも簡単にバルーンを利用したアプリを開発できるようになっている.
開発したアプリでは, 例えば函館ハリストス正教会のピンをタッチすると, 図 4.10 の右図のよう
に説明が現れる.
図 4.10 左：従来の Google マップでのバルーン表示の例 右：作成した Google マップ画面
でのバルーン表示の例
次に 2 の機能について説明する. LocationManager というクラスを利用することで, 時間は掛か
るもののユーザーの現在地を GPS 情報かネットワーク上の情報から取得することができる. ユー
ザーの現在地には, 観光地に使用しているピンではなくクラちゃんを配置することで, ユーザーが
区別しやすいようにした.
なお, この LocationManager では何度も現在地の更新を行うため, Google マップのアクティビ
ティを終了させてメイン画面に戻る際に, 現在地の更新を停止させなければ挙動がおかしくなるの
で注意が必要である.
開発したアプリで現在地を取得すると, 図 4.11 のようにユーザーの現在地の緯度と経度が下部に
ダイアログとして表示され, クラちゃんもその地点に移動するようになっている.
（※文責: 青木佑恭）
Group Report of 2012 SISP
- 24 -
Group Number 18-A
Hakodate Avatar
図 4.11 作成した Google マップ画面での現在地取得の例
4.3
4.3.1
3D モデルの制作とアニメーション
建物のモデル制作
AR パンフレットの建物のページに掲載が予定されていた 3D モデルに以下の 2 つが追加される
こととなった. 使用するソフトは前期に引き続き Metasequoia を使った.
• 金森赤レンガ倉庫
• 函館ハリストス正教会
（※文責: 木村文彬）
金森赤レンガ倉庫について
金森赤レンガ倉庫は目立った模様が少ないため, 単純なモデリングでは歴史的建造物のようには
見えない立体感のない 3D モデルとなってしまう. そのため, できる限り凸凹を付け, 影ができるよ
うに工夫をこらす必要があった. 以下を詳細に説明していく.
• 金森赤レンガ倉庫の基本型
• レンガテクスチャ
• 屋根のテクスチャ
• 金森赤レンガ倉庫まとめ
（※文責: 木村文彬）
金森赤レンガ倉庫の基本型
まずは最初に長方形を基本型として作成した. 金森赤レンガ倉庫は非常に縦に長く, 一目では
全体の造りを知ることができない. また, 設計図を確認することができなかったため, 縦と横の比
Group Report of 2012 SISP
- 25 -
Group Number 18-A
Hakodate Avatar
率の精密な値は不明である. よってこの作業を進めている時に多くの Web 上で検索した画像か
ら本物の金森赤レンガ倉庫と比較して不自然の無いようにサイズの比率を合わせた. これ以降は,
Metasequoia のコマンド機能の 1 つであるナイフにて頂点数を増やし, 移動や拡大コマンドで調整
していった.
全体を作成した結果, やはり全体的にシンプルにまとまりすぎていたため, 金森赤レンガ倉庫と
同じような壁の段差を再現する必要があった. 金森赤レンガ倉庫は基本的に屋根は下のレンガ部分
よりもせり出しているため, x 軸方向, z 軸方向で, 多少大きめにはみ出るように平行移動させてい
る. これにより影が増え, 比較的立体感が増しているように見える. 特に屋根とレンガ部分の境周
辺は凸凹が多くなるようにモデリングした. この箇所のポリゴンは屋根の部分を拡張させている.
さらにその操作を繰り返し, 影が発生し, 立体感を感じられる程度に仕上げた.
正面では, 金森赤レンガ倉庫の象徴とも言える森の文字をテクスチャではなく, ポリゴンによっ
て表現した. まず 1 つの長方形を作成し, これをコピー後, 太さが変化しないようにサイズを変更,
実物の写真と比較しながら, 移動, 回転, 拡張を繰り返し近づけていった. これに加えて, 金属のド
アと窓を作成後, 正面方向へ大きめに前へせり出した. 金属のドアと窓は真ん中の部分に隙間を設
けることで継ぎ目を再現した.
更に, 倉庫正面にピンク色に近い金属の装飾も再現した. これの真ん中がくり抜かれた菱形のポ
リゴンは, 正方形のポリゴンを 3 つ並べ, その下に真ん中は空くように 2 つだけ配置した後また 3
つ並べ, 45°回転させて作成した. あとは実物の写真を参考に配置して完成させた.
また, 真上からの観察を考慮して屋根の部分には煙突を配置した. 煙突の構造は, 1 本の小さい円
柱を覆うように上下にポリゴンの無い大きい円柱を配置. 中央よりやや上をナイフ機能にて切断し,
上部分の全ての頂点を中央に揃えることで, 煙突カバーを再現した.
（※文責: 木村文彬）
レンガテクスチャ
さらに, 金森赤レンガ倉庫にはレンガ造り特有の不均一な模様が存在する. これをグラフィック
ス処理能力が通常のデスクトップ PC やノート PC よりも乏しい, タブレット PC 上で再現しなく
てはならない. 当初の予定では, レンガを 1 つモデリング後, コピーとペーストを繰り返して外部
を覆う予定であった. これにより, 外壁に影が発生し, より立体感を出すことができるであろうと考
えていた. しかしながら, この作業には多くの手間が考えられ, 何よりもポリゴン数と頂点数の増加
により, タブレット PC 上では 3D モデルを描画することが難しいであろうと考えた. そこで, レン
ガ模様のテクスチャを外壁部分に貼り付けることでこの問題を解決する方法に決定した.
この方法の問題は 3D モデルのデータに新たにテクスチャ用のデータが加えられ, ファイルサイ
ズが大きくなることでエラーが発生し, アプリが開けなくなる可能性が高くなる. この問題を解決
する方法はテクスチャのサイズを事前に小さくすることで回避できる. そのため, 事前にテクス
チャのサイズを 256 × 256 ピクセルで設定した.
レンガの模様は CLIP STUDIO PAINT に初期状態で素材としてインストールされていたレン
ガ-IS を加工して利用した. まず, 金森赤レンガ倉庫の色合いに近づけるために色調補正にて色を変
化させた. その後レンガとレンガの間の部分をペン機能にて黒にて描画した. これはレンガの影と
傷の代わりとして描画した.
テクスチャ完成後, 作成したテクスチャを Metasequoia のコマンドの UV 操作にて貼り付けた.
しかしながら, レンガの模様にずれが発生した. これは上と下の部分が全く同じパターンで貼り付
Group Report of 2012 SISP
- 26 -
Group Number 18-A
Hakodate Avatar
けていたため, 貼り付けられたテクスチャの前の行と次の行で同じパターンでかぶってしまうため
だ. そのため, テクスチャからレンガを 1 段だけ削除するためにサイズを 256 × 197 ピクセルに変
更し, 図 4.12 が完成した. このテクスチャを Metasequoia にて貼り付け, 金森赤レンガ倉庫の写真
と比較してサイズと角度を調整した.
図 4.12
レンガのテクスチャ
（※文責: 木村文彬）
屋根のテクスチャ
また屋根には図 4.13 のテクスチャを貼り付けた. このテクスチャも CLIP STUDIO PAINT に
て模様を描画した. こちらは金森赤レンガ倉庫の薄い瓦屋根のようなものを再現しようと作成した
もので, レンガのテクスチャよりも目立たないようにシンプルな作りにした.
図 4.13 屋根のテクスチャ
Group Report of 2012 SISP
- 27 -
Group Number 18-A
Hakodate Avatar
（※文責: 木村文彬）
金森赤レンガ倉庫まとめ
また, 倉庫自体は x 軸方向と z 軸方向で, 倉庫の入り口と森の文字以外は線対称であるため, 常
に全体を 4 分の 1 に編集し, 作業を進めるうちに必要となった時だけ, ミラーリングにて鏡面を生
成していた. これにより, 手間を省き, それぞれの軸の対象の位置でオブジェクトの座標が異なる
といった事態を未然に防いだ. また, 3D モデルは 1 つのみ予定していたが, 金森赤レンガ倉庫は
数多く存在するので, 急遽窓を削除した同じ 3D モデルを用意して横に並ばせて, 金森赤レンガ倉
庫の 3D モデル図 4.14 は完成した. 頂点数 2696, 面の数は 1910 であり, 制作期間は 3 週間程度で
あった.
図 4.14
金森赤レンガ倉庫
（※文責: 木村文彬）
函館ハリストス正教会について
函館ハリストス正教会は特徴的な部分が多く, アーチやクーポルと呼ばれる建物の屋根にある不
思議なオブジェのような丸い形をしたデザインは頂点数を多くとってしまう. この時アプリ開発の
メンバーから頂点数は 1 万を超えないようにと伝えられた. この 3D モデルでは細部の作りこみと
シンプルさとの兼ね合いを最も意識して制作する必要があった. そのため, 作りこみが必要なオブ
ジェは別のファイルにて別途作成したものを挿入して調整を行った. 以下を詳細に説明していく.
• 建物全体の設計
• アーチ
• クーポル
Group Report of 2012 SISP
- 28 -
Group Number 18-A
Hakodate Avatar
• ロシアン・クロス
• エントランス上部
• 鐘
• 3 種類の窓
• エントランスの扉
• 函館ハリストス正教会まとめ
（※文責: 木村文彬）
建物全体の設計
まずは函館ハリストス正教会の写真と比較しながら, 大雑把ながら建物全体をモデリングした.
当初はインターネットによる画像検索で作業を進めていたが, この作業を進めている時, パンフ
レット製作のメンバーが AR パンフレットに実際に掲載する観光地の許可を取りに行くため, つい
でにハリストス正教会の外からの写真を撮ってもらった.
建物は大雑把に 4 つに区分した. 上部に鐘と屋上にクーポルのあるエントランス, そこから中央
の建物へ繋げる通路, クーポルが 5 つ屋根にある中央の建物, そこから少しばかり突き出た後ろの
建物でそれぞれ別の建物として制作していった.
中央の建物は正立方体を原点に置き, その上に三角形の屋根を配置している. これらの境界部分
にも実際の建物に似せるため, 正立方体の上の部分は僅かながら拡大し, 屋根の下の部分は台形の
形に編集した後, 色を変化させている.
エントランスは八角形の円柱を基本に作成し, 上の先端部分をナイフ機能にて切断して尖らせて
いる. また実物の建物同様の凸凹を付けた.
エントランスと中央の建物を繋ぐ通路は, 下の部分を長方形にて作成し, 上の部分を半円にて作
成している. 屋根となる上の部分は単なる半円とは異なるため, ナイフ機能にて横方向へ切断し, 面
を増やした上で変形することで実際の函館ハリストス正教会に近い作りに仕上げている. また中央
部分の屋根と同じように, 下の部分を変形し, 色を変えている. また, 屋根には実際の建物と同じ凸
凹を付けたものの, これは最終的に頂点数等の問題があったため削除した.
中央の建物から後ろ方向へ突き出ている部分は, 通路で制作した 3D モデルを後ろに延長させた
ものを先端が三角形になるように編集, ナイフ機能にて縦に切断し円形となるように作成した.
（※文責: 木村文彬）
アーチ
函館ハリストス正教会には多くのアーチとその下を支える柱が存在する. まず, アーチの形をし
た 3D モデルは, 面の生成にて手作業で作成した. この手段を選んだ理由には, アーチが中央部分で
上へ尖っているためである.
さらにこのアーチで真下へ向いている 2 つの面を選択後, 地面へ延長させることで柱を再現して
いる.
この柱もナイフ機能と拡大編集を利用して出っ張らせ, 茶色のテクスチャを貼っている. この柱
とアーチはエントランスの正面部分と左右に 1 つずつ, エントランスの鐘を鳴らす場所に縮小した
ものを 8 つ, 扉があるところに縮小したものを 1 つ, 拡大したものを中央の建物のエントランスの
正面から見て左右に 1 つずつ配置している.
Group Report of 2012 SISP
- 29 -
Group Number 18-A
Hakodate Avatar
（※文責: 木村文彬）
クーポル
クーポルは函館ハリストス正教会の中でも際立って特徴的なデザインであるため, 新しくファイ
ルを作成して, モデリングと改良が容易で, 他の 3D モデルとの編集が可能になるように配慮した.
まずは上下が丸められている八角形の円柱を利用した. ここでもナイフ機能を利用し, 頂点数を
増やした後にサイズの編集をする.
この玉葱のような形をしたデザインは, 上の部分を細く, 下へ進むにつれて円を少しずつ拡大し
ていき, 途中で急に円を大きくするとくびれのような形ができる, そのあとは少し円を大きくした
後, 小さくしていくことで完成した.
このクーポルの周りにある緑色の四角形の模様はテクスチャではなく, ポリゴンで作成した. こ
れは 1 つ作成した四角形を x 軸と z 軸を対象に鏡面を生成し, ミラーリングにより作成したもの
をコピーして 45°回転させることで, ずれが発生することなく, 周りに貼り付いたように見える.
クーポルの下部分はナイフ機能と面の押し出しを利用して似たような形に変形し, 上記の緑色の四
角形の模様と同じように鏡面生成したものを, ミラーリングにより作成している.
最後に頂上に小さな球体を載せることで図 4.15 が完成した.
図 4.15 クーポル
（※文責: 木村文彬）
ロシアン・クロス
函館ハリストス正教会の十字架は通常の十字架とは異なり, ロシアン・クロスと呼ばれる八端十
字架である. こちらは長方形を 4 本使い, そのうちの 1 本は斜めに傾けている. こちらは完成後,
クーポルの 3D モデルへ挿入を行ったため, 大きさは全てクーポルとの比率で変化している.
Group Report of 2012 SISP
- 30 -
Group Number 18-A
Hakodate Avatar
図 4.16
十字架
（※文責: 木村文彬）
エントランス上部
エントランスの上部には鐘を鳴らすためのスペースが存在する. これはアーチ上の窓が前後左右
にあり, 正面から見ればもちろん後ろ側にある中央の建物が見えるはずである. この場所を作成す
るにはまず, エントランスの外壁の一部を削除して, その周囲に先ほどのアーチをエントランスの
外壁に沿う形で配置する必要がある.
エントランスの上の部分にて先ほど制作した出っ張り部分の上部に, ナイフ機能にて新たに頂点
を作った すると, エントランスの建物自体は八角形となっているため, 長方形の面が 8 枚作られる
ため, その 8 枚できた内の正面と後ろと左右の 4 枚を削除して空洞を作った.
その後, 先ほど作成したアーチを 8 つ円を描くように配置した. このアーチは円に並べて配置
するように設計されておらず, 柱と柱の部分は継ぎ目が発生しないように編集しなければならな
かった.
まず, 鏡面を生成して 3D モデルを対照に配置するため, 予めエントランスの中心に原点が来る
ように移動した. 適切なサイズになるまで何度もサイズの拡大と縮小を繰り返す必要があるが, 重
なった柱はそれぞれの真ん中の座標に揃えるため問題は無い.
その後, 鐘がぶら下がるための長方形の柱を作成した.
（※文責: 木村文彬）
鐘
当初制作予定に無かった鐘を追加することが決まった. 函館ハリストス正教会は 5 個の鐘を使っ
て楽器のように鳴らしていたので, ガンガン寺という名前で親しまれていた. そのため, 鐘はこの建
物の象徴の 1 つであった.
しかしながら, 鐘の 3D モデルには多くの曲面を使い, 頂点数が膨大な量となる. 制作の初期段階
ではクーポルとアーチでどれほどの頂点数がどれほどの量となるのかわからなかったため, 鐘はお
Group Report of 2012 SISP
- 31 -
Group Number 18-A
Hakodate Avatar
図 4.17
鐘
ろか建物全体が表示できなくなる可能性があった. また, AR マーカーの都合上, 斜め上からの視点
となるため, 鐘は天井で隠れてしまい, 重要度は他と比べて低かった.
追加が決定した要因は頂点数に余裕があったためであったことと, エントランスの鐘を鳴らす場
所を作成した結果, 何も無い空洞になってしまったためである. 鐘のモデリングでは, 上下が丸く
なっている円柱を基本として作成した. この円柱の下の部分を切断し, 先ほど制作したクーポルの
方法でくびれを制作した. 通常では面の裏側となるところでは, ポリゴンが作られないため透けて
しまうので, 面を両面化する処理を施しておいた.
撞木は球体を基本に上と下に筒状に成るように変形した. また, 非常に細長い長方形を作成し, 下
から鑑賞した際に, 撞木が鐘にぶら下がって見えるように工夫した.
最後に, 鐘の上部に五角形の物体を作成して図 4.17 の通り完成した. 鐘と柱を繋げる部分は柱の
ポリゴンをナイフ機能にて切断してそれをひきのばしている.
鐘は中央部に大型のものを 1 つ, 扉側から見て手前と左に通常サイズを, 右側には小型のものを
2 つ, 奥のほうには色を銅色に変えた通常サイズのものを配置した.
（※文責: 木村文彬）
3 種類の窓
窓はテクスチャにて再現することとなった. なぜならば, 窓の形は複雑な形をしており, 予定し
ていた頂点数と面の数をオーバーする恐れがあったためだ. そのため, CLIP STUDIO PAINT に
よって窓の形を描画し, それを 3D モデルに貼り付けることになった.
最初に描画する窓は, 一番大きく, 他の窓と同じ形を持つ, 中央の建物の窓であった. まずは, グ
リッドを ON にして, 緑色の長方形を描画し, その内側を黒で塗りつぶす. その上に緑色の直線に
て黒の正方形が 8 つできるように描画した. ただし, 中央の緑の直線は倍の太さで描画した. 次に
その上部に太めの緑色の正方形を描画し, 内側を黒で塗りつぶす. そしてその上に先ほどの太さの
緑色の線で黒の四角形を 9 つ作った. ただし, 中央の四角形は大きな正方形となるように描画した.
更に, その上部に緑色の円を描き, 半分を削除し, 中を塗りつぶせるように直線を引き, 中を黒で塗
りつぶした. この半円を小さくしたものを 1 つ内側に描いて, それぞれの弧の中央へ緑色の線を引
Group Report of 2012 SISP
- 32 -
Group Number 18-A
Hakodate Avatar
図 4.18 窓
いた. 大きい半円よりもさらに大きい黒の半円を 2 つ描いた, 今まで描いた部分をコピーして接す
るように横にペーストし, 横に 2 つ並ぶ形になる半円を直径とするような半円を 3 つ描き, 下のほ
うへ直線を引いた. また, 横に 2 つ並んだ半円と, 新しく描いた大きな半円に接するように 黒い円
を描き, その内側に緑色の円を描き, その内側を黒で塗りつぶした. その上に緑色の十字の直線を引
き, 中央の円形の窓を再現した. 更に, 茶色の太い線を下と半円の下に, 今まで窓として描画してい
たレイヤーよりも下のレイヤーに描画した. 最後に左右の凹みを表現する黒の円と直線を, 3D モデ
ルに貼り付けながら調整し, 図 4.18 の窓が完成した.
この窓の 8 つの正方形が並んだ部分を利用して, エントランス下部の左右の窓と, 中央の通路の
左右の窓と, 後ろへ突き出したところの左右の窓に貼り付けた. こちらも同様に上部に半円がある
ものの, こちらは円の中心に向かって緑色の線が引かれている.
また, エントランス下部の窓のテクスチャには凹みを表現するため, 窓の上に黒い円と, その上に
さらに大きい黒い半円とそこから下へ黒い直線を引いた. また, エントランス上部の 8 つの窓用に,
4 つの正方形の窓と凹みを表現する黒い長方形を描画した.
（※文責: 木村文彬）
エントランスの扉
窓と同様に, エントランスもテクスチャで表現することに決定した. まず, 中が茶色で塗りつぶさ
れた長方形を描画した. そしてこの長方形に, 扉の凸凹として, 正方形を 2 つ, その下に長方形を 1
つ描き, それを左右対称になるようにコピーして貼り付けた. その上部に扉との境界として, 黒い線
を引き, 中心に黒い線を引いた. 中心の黒い線の右隣にドアのとってを金色に近い直線で描画した.
また, 実際の函館ハリストス正教会の扉の上のガラスも再現している. 最後に扉の周りの段差を黒
い半円と直線にて描画し, 函館ハリストス正教会の扉のテクスチャが図 4.19 のように完成した.
この他にも建物の天井にもひし形のテクスチャを貼る予定ではあったものの, この時点で函館ハ
リストス正教会の 3D モデルは多くのポリゴンとテクスチャでごった返しているので, これ以上の
作りこみを進めるとかえって見栄えが悪くなるのではないかという意見を受けたため, この時点で
函館ハリストス正教会への大きな作業の追加は中止した.
（※文責: 木村文彬）
Group Report of 2012 SISP
- 33 -
Group Number 18-A
Hakodate Avatar
図 4.19
エントランスの扉
函館ハリストス正教会まとめ
仕上げに窓の下のところに, 茶色の出っ張り部分を玄関を除く建物全体を囲うように作成して,
函館ハリストス正教会の 3D モデル図 4.20 が完成した. この 3D モデルの頂点数は 8763, 面の数
は 9069 であり, 制作期間は 1 ヶ月半程であった.
図 4.20
Group Report of 2012 SISP
函館ハリストス正教会
- 34 -
Group Number 18-A
Hakodate Avatar
（※文責: 木村文彬）
4.3.2
3D アニメーション
3D アニメーションの再生では上記で説明した Metasequoia で制作した 3D モデルを MikuMikuDance を使用することでモーションを付加させている. MikuMikuDance では 3D モデルに
付加されているボーンをフレーム時間毎に操作することでモーションを制作している. その後, プ
ログラム内で使用できる VMD 形式の出力も MikuMikuDance でも行うことができる. 後期で使
用するキャラクターは前期で使用していた函館をイメージして制作された「クラちゃん」を使用し
ている. モーションも前期で制作していた怒っている表情のモーションや喜んでいる表情のモー
ション, 説明を行っているモーション等のパターンを流用した. こちらの写真は MikuMikuDance
でモーションを付加している状態の写真である (図 4.21).
図 4.21 MikuMikuDance での作業画面
（※文責: 藤井健太郎）
4.3.3
ストーリー作成
ストーリーとはページに付加された AR マーカーを識別することで再生される 3D モデルやアニ
メーションをそのページに合った内容で作成されたものである. 今回のストーリーではパンフレッ
トに記載されていない隠された情報を説明するということをコンセプトに作成した. これはパンフ
レット内の記載されている内容をもう一度説明するより記事に記載されていない隠された情報を説
明することでパンフレットを読むだけでなくマーカー認識を行う意義を見出すということが目的と
なっている. 1 ページに再生されるストーリーは長すぎる場合, 端末を使用している人への負担が
かかってしまうという理由から 15∼20 秒程のものになっている.
キャラクターが説明を行うページは以下のようになっている.
• AR パンフレットについての説明
• 函館ハリストス正教会
Group Report of 2012 SISP
- 35 -
Group Number 18-A
Hakodate Avatar
• 金森赤レンガ倉庫
• 五稜郭タワー
• 公立はこだて未来大学
AR パンフレットのついての説明の部分では記事の中にキャラクターが話しかけてくる簡単な
吹出しがあるが, 詳しい説明は行なっていない (図 4.22). AR マーカーを検出することでキャラク
ターが現れ自己紹介を行う. これによって AR マーカーの使い方を説明とするいわゆるチュートリ
アルのようなものとなっている.
図 4.22 AR パンフレットについての説明ページ
函館ハリストス正教会の部分では教会内の内装の写真をメインとした記事となっている. キャラ
クターは建築時期や歴史, 建物の特徴についての説明を行っている.
金森赤レンガ倉庫の部分では倉庫内部にある店舗の説明や写真をメインとした記事となってい
る. キャラクターは金森赤レンガ倉庫の起源となる初代渡邉熊四郎が函館に渡ってきた歴史的な説
明を行っている.
五稜郭タワーの部分では五稜郭タワーの写真をメインに内部の展望台や売店の説明をする記事と
なっている. キャラクターは五稜郭タワーが建設された歴史の説明を行っている.
Group Report of 2012 SISP
- 36 -
Group Number 18-A
Hakodate Avatar
公立はこだて未来大学の部分ではその特徴的な建物の写真を多く使い, 言葉での説明は少ない記
事となっている. キャラクターは建築に携わった建築家の説明や見た目だけではわかりづらい建物
の構造の説明を行っている.
また, キャラクターの話す内容によってキャラクターの表情や動きの変化を変えるために文章の
区切りに対して悲しむ表情やうれしい表情, 動きをつけることで説明しているキャラクターに躍動
感を与えた.
（※文責: 藤井健太郎）
4.3.4
音声
音声はマーカー認識で現れるキャラクターに付けるものになっている. このキャラクターは前期
で制作した函館をイメージしたクラちゃんを使用している. 声優も前期と同じくアクアリウム班に
所属している立松に担当してもらった.
また, 撮ってもらった音声だが初期のものは周波数や bit 数の関係から容量が大きくなり実機で
の再生する場合動作が重くなる自体が予想された. これは前期での成果物でも同じ問題が発生して
いたので対処法がすでにあり問題なく対処することができた.
（※文責: 藤井健太郎）
SoundEngine
SoundEngine は音質を補正できる音声波形編集ソフトである. このソフトを使用して音声の編
集を行った. 容量が重かった点は周波数や bit 数を減らすことで Android 端末でも問題なく再生で
きるようになった.
また, プログラムでの音声の再生はモーションデータである VMD データと連動する形をとって
いる. 1 つの音声が再生される時にその音声に合わせた VMD データを再生することでキャラク
ターの声とモーションを合わせている. このモーションと音声を合わせるために SoundEngine を
使い, 1 つの長い音声を切り取り複数の短い音声を作成した. この音声の切り取りは上記で説明し
たように文章の区切りに合わせている（図 4.23）.
図 4.23 編集前 (左) の音声データと編集後 (右) の音声データ
（※文責: 藤井健太郎）
Group Report of 2012 SISP
- 37 -
Group Number 18-A
Hakodate Avatar
4.4
4.4.1
パンフレット製作
ページレイアウト作成
ページレイアウト目標
ページレイアウトに当たって皆それぞれ作業をしてしまうとレイアウトがバラバラになってしま
うので, まず皆でレイアウトを揃えることを目標にした. しかし, 最初はレイアウトを揃えることを
意識するあまり作業が進まなかったので, 各々で作業を進め, その後レイアウトを揃えていく方針
に決定した.
（※文責: 織田幸博）
各担当
各ページの担当は表紙, 函館ハリストス正教会, 五稜郭タワーを織田が担当し, 目次, 注意書き,
函館山, 公立はこだて未来大学を清野が担当, 目次の次のページの函館の地図, 朝市, 金森のベイエ
リアを池上が担当した. 当初は織田の担当箇所は函館ハリストス正教会ではなく, 函館ハリストス
正教会を含む元町全体であったが, 他の箇所に比べて範囲が広く見開き 2 ページに収めるのが非常
に難しいため函館ハリストス正教会のみとした.
（※文責: 織田幸博）
レイアウト概要
紙は A4 用紙を使用した. その用紙の端を切り取って製本したため製本された状態の大きさは
A5 より少し小さい. 持ち運びもできることを考慮した結果この大きさが一番良いという結論に
至った. そして製本するにはページの中央にホチキスを止める必要があったため中とじ製本用ホッ
チキスが必要になり, 中とじ製本用ホッチキスを購入した.
パンフレットのタイトルであるが「クラちゃんと行く 函館観光」とした. 観光パンフレットな
ので, 明るい雰囲気を出そうとした結果このようなタイトルとなった. また, 表表紙には煽り文を追
加した. 「AR で飛び出す！函館の街」である. AR パンフレットの概要と魅力を一言で伝える文
を考えたところこのような文で落ち着いた.
函館山は見開き 2 ページの予定であったが他の観光地とレイアウトを合わせるため見開き 1 ペー
ジにした. 各観光地はそれぞれ見開き 1 ページで統一し, AR 観光パンフレットの説明と目次で見
開き 1 ページ, 函館地図で見開き 1 ページ, 引用元とクラちゃんの挨拶で見開き 1 ページとした.
第 1 稿完成時では各観光地のレイアウトが統一されていなかったのでまず各観光地のタイトル,
サブタイトルの位置とフォントサイズ, フォントの種類を決定した. フォントはヒラギノ角ゴシッ
ク ProN で統一しフォントサイズはタイトルは 23pt で統一した. 位置は見開き左ページの左上に
統一した. また, 各観光地のタイトルの上にアイコンを設置した.
また AR 認証について当初は画像認識のみで行う予定であったが, 技術的観点から見ても安定し
た動作は難しい, 説明無しでは分かりづらいという面から AR マーカーをページの下部に設置して
AR コンテンツを再生する仕組みとした. また, 第 3 稿の時点ではマーカーの中に観光地にまつわ
Group Report of 2012 SISP
- 38 -
Group Number 18-A
Hakodate Avatar
る画像を入れていたが, 最終発表に向け精度を高めることを優先し, 二値化した単純な画像を組み
合わせたものをマーカーの内部に組み込んだ.
最終稿ではそれまで製本した際に中央のページが切れてしまっていたので, ページ番号の位置を
少し中央に寄せた.
表紙については元町の八幡坂で AR パンフレットを実際に使用しているシーンを想定して制作
した. また実際には飛び出さないが, AR コンテンツがタブレット端末から飛び出しているように
画像を編集したことで AR コンテンツを表示することの印象を強めることを目指した.
図 4.24
ページレイアウト 1
図 4.25
ページレイアウト 2
（※文責: 織田幸博）
Group Report of 2012 SISP
- 39 -
Group Number 18-A
Hakodate Avatar
図 4.26
パンフレット表紙
反省点
反省点として, 元町の取材を早く函館ハリストス正教会に絞るべきであった. 元町のページに地
図を入れる作業と地図のアイコンを作る作業を行ったが結果的に没になってしまったからだ. また
ページ数等を第 1 稿完成直前まで決めていなかったことも挙げられる. このようなことが起こった
原因としてプロジェクト内で製本経験のある者がおらず, どの程度のボリュームが一番良いのか判
断が遅かったことが挙げられる.
（※文責: 織田幸博）
4.4.2
詳細設定
掲載スポットの決定
パンフレットに掲載する観光地として, 函館の代表的な観光地である, 函館ハリストス正教会, 五
稜郭タワー, 金森倉庫, 函館朝市, 函館山に加えて, 隠れた観光スポットである公立はこだて未来大
学を選出した. 函館には, 函館ハリストス正教会だけではなく, 様々な種類の美しい教会や歴史的建
造物があるが, 元町周辺エリア全体を網羅しようとすると範囲が広く, 見開き 1 ページ内に全ての
情報が収まり切らないため, 今回製作したパンフレットでは, 元町周辺エリアでは無く, 函館ハリス
トス正教会に対象を絞った.
また, 今回製作するパンフレットの対象ユーザーは外部から函館に訪れた観光客であるため, 選
出した観光地をのせたマップも掲載している. これらの情報を含め, 全体のページ数は 20 ページと
なった.
（※文責: 清野裕太）
Group Report of 2012 SISP
- 40 -
Group Number 18-A
Hakodate Avatar
AR コンテンツの決定
AR マーカーによって再生されるコンテンツには, 動画, 音声, 3D モデル, Web ページへのリン
ク等が挙げられる. ページの内容によって, 再生されるべきコンテンツが異なるため, それぞれの
ページに対応する AR コンテンツの決定を行った. 以下に示す.
（※文責: 清野裕太）
パンフレットについての説明 ‐ 3D キャラクター（クラちゃん）による音声ガイド
AR パンフレットの使い方のチュートリアルのため, 3D キャラクターによる音声ガイドを行っ
た. このページは, ユーザーが目次の次に見るページであり, パンフレット全体に配置されている
AR マーカーを再生する方法等のガイドを行なっている.
観光地マップ ‐ Google マップへのリンク
マップの範囲は広いため, 見開き A4 より若干小さい紙面上のマップには, 最低限の情報を掲載
し, マーカーから Google マップに接続させることで, 情報の補完を行なっている.
図 4.27 Google マップへのリンク
函館ハリストス正教会 ‐ 教会の 3D モデル, 3D キャラクターによる音声ガイド
函館ハリストス正教会は, 函館の異国情緒漂う町並みを構成している, 代表的な建物の一つであ
る. そのため, AR マーカーによって再生されるコンテンツとして, 函館ハリストス正教会の外観を
360°見ることのできる 3D モデルを再生. ビザンチン様式の教会である函館ハリストス正教会の
真っ白な壁や半円型の窓, 「ガンガン寺」と呼ばれる所以にもなっている鐘等の造形を再現し, 歴
史的建造物としての魅力を伝えることを目標としている.
Group Report of 2012 SISP
- 41 -
Group Number 18-A
Hakodate Avatar
五稜郭タワー ‐ タワーの 3D モデル, 3D キャラクターによる音声ガイド
函館のシンボルタワーである五稜郭タワーは, 2006 年に建てなおされ, 函館の新しいランドマー
クとなっている. 五稜郭タワーのページでは, AR マーカーによって再生されるコンテンツとして,
この新しい五稜郭タワーの外観を 360°見ることのできる 3D モデルを再生. 五角形, 星型をモチー
フにしたタワーを, 普通では見ることのできない, 真上からの視点等でも眺めることができる.
函館朝市 ‐ YouTube への動画リンク, 朝市公式サイトへのリンク
港町函館として, 代表的な観光スポットである函館朝市. 函館朝市のページでは, AR マーカーに
よって再生されるコンテンツとして, 朝市の様子を写した動画や, 朝市に加入している様々な店舗
の詳細情報を見ることのできる, 公式サイトへのリンクを設置している.
金森倉庫 ‐ 倉庫の 3D モデル, 3D キャラクターによる音声ガイド
開港 100 年の歴史を持つ金森赤レンガ倉庫群では, 1020 坪にも及ぶ倉庫が立ち並んでいる. 金森
倉庫のページでは, その倉庫を 3D モデルで再現し, AR マーカーによって再生させた. 倉庫の外観
を 360°見ることができるため, 側面や背面, 普段見られない真上からの視点等, 端末のかざす方向
によって視点を変えて眺めることができる.
図 4.28
金森倉庫 3D モデル
函館山 ‐ YouTube への動画リンク
函館山から見ることのできる景色は, 綺麗にライトアップされた夜景が有名であるが, それを 3D
モデルで再現することは, 視点の問題等により, 困難である. そのため, 函館山のページでは, AR
マーカーによって再生されるコンテンツとして, 朝から夜までの移り変わりを写した動画を再生.
函館山から見える景色の, 夜景移り変わっていく瞬間を見ることができる.
Group Report of 2012 SISP
- 42 -
Group Number 18-A
Hakodate Avatar
図 4.29 函館山 YouTube への動画リンク
公立はこだて未来大学 ‐ 大学の 3D モデル, 3D キャラクターによる音声ガイド
公立はこだて未来大学は, 山本理顕設計工場により設計され, 2002 年には日本建築学会賞作品賞
を受賞している. 約 100 × 120m の平面のボックス型 5 階建で, 全面ガラス張りの建物が美しい.
そのため, 公立はこだて未来大学のページでは, AR マーカーによって再生されるコンテンツとし
て, 大学の外観を 360°見ることのできる 3D モデルを再生. 大学全体を俯瞰することができる.
（※文責: 清野裕太）
4.4.3
取材と撮影
取材地
取材地として主に各担当地である函館ハリストス正教会, 朝市, 金森のベイエリア, 五稜郭タワー
へ行った. 取材には主に織田の自家用車を使用した.
（※文責: 織田幸博）
取材目的
取材には主にパンフレット内で使用する写真撮影のために行った. 取材のカメラには織田のデ
ジタルカメラを使用した. パンフレット内の文章は主に観光パンフレット「タビハナ函館 [4]」と
「まっぷる函館 [5]」を参考にした.
（※文責: 織田幸博）
Group Report of 2012 SISP
- 43 -
Group Number 18-A
Hakodate Avatar
取材工程
まず第 1 回目の取材は 2012 年 10 月 11 日に行ったが, その日はあいにくの雨のためその時点で
モデル制作で最低限必要だった函館ハリストス正教会の外観を撮影して終了した. モデル制作に使
用するため 360°の角度から撮影を行い, 3D モデル制作時に不具合が出ないように注意した.
第 2 回目の取材は 2012 年 10 月 16 日に行った. この日は天気が良かったため, 朝市, 元町, 金森
のベイエリア, 立待岬, 五稜郭タワーを取材した. 朝市では主に店舗の外観を撮影した. 元町では函
館ハリストス正教会をはじめ, カトリック元町教会, 函館聖ヨハネ教会, 旧函館区公会堂, 八幡坂を
撮影した. 金森のベイエリアではレンガ倉庫の外観を撮影した. 各建造物を様々な角度から撮影す
ることを念頭において取材を行った. 立待岬は AR パンフレットのコンテンツ不足が起こった場合
の予備として取材を行った. この日最後に行った五稜郭タワーでは, 外観のみの撮影だった. しか
し, この後 AR パンフレットの第 1 稿完成時に素材として足りない写真が多く出現したため, 取材
地を周り直す必要が出てきた.
第 3 回目の取材は 2012 年 11 月 2 日に行った. 今回は主に前回の取材で足りなかった部分を回っ
た. 主に函館ハリストス正教会の内部である. 函館ハリストス正教会の内部は入ってすぐに大広間
のような部屋がありそこに様々な絵やシャンデリア等の装飾が施されている. 今回の取材ではその
装飾を様々な角度から撮影し, また横だけでなく縦写真も撮影した.
第 4 回目の取材は 2012 年 11 月 16 日に行った. この日は午前中に五稜郭タワー内部とその外観
を撮影した. 内部では 1 階の売店, カウンター, ２階のジェラート店を撮影し, 展望台ではガラスの
床でできたシースルーフロア, 土方歳三の座像, ソフトクリーム店, 展望台から見た五稜郭の全貌,
五稜郭の歴史を描いたジオラマやパネル等を撮影した. また, 外部からは五稜郭を下から見上げた
様子を撮影した. 土方歳三の座像の撮影時にはどうしても逆光気味になったので, フラッシュをた
いて撮影した. ジェラート店では他の客の顔が映らないように注意して撮影した. その後五稜郭タ
ワーの外観の撮影を行ったが, 雨が降り始めたため途中で中断となった.
第 5 回目の取材は 2012 年 11 月 18 日に行った. この日は前に行った朝市と金森のベイエリアの
五稜郭タワーの取材の補完として行った. 朝市では海鮮丼の写真に加え, イカ漁の様子や店内の漁
船の模型を撮影した. イカ漁ではイカが潮を吹くこともあり危うくカメラにかかりそうになった.
金森のベイエリアではレンガ倉庫の内部のお土産屋と和風小物店, 手焼きせんべい店を撮影した.
五稜郭タワーでは外観の撮り直しのみ行った.
第 6 回目の取材は五稜郭タワーの外観の撮り直しのみ行った. 前回の被写体の角度がレイアウト
に合わなかったので撮り直しを行った. またこの第 6 回目を持って取材の全行程を終了とする.
（※文責: 織田幸博）
注意点
撮影時には止まっている絵が多いため常に手ブレを抑えることを意識して撮影した. またパンフ
レットに載せることを意識してより綺麗に見えるように心がけた. 具体的には八幡坂を撮るときに
は道路の中央線を写真の中央にくるように撮影することや大きさを強調するために被写体の下から
撮影することである. また他の観光客の迷惑にならないように人ごみはなるべく避けた.
（※文責: 織田幸博）
Group Report of 2012 SISP
- 44 -
Group Number 18-A
Hakodate Avatar
反省点
反省点として取材では AR パンフレットのどのような場面でどの写真を使用するか不明確にした
まま行った部分があるため, 足りない写真が出てきて同じ場所を２度以上行く場面が生じてしまっ
たことが挙げられる. 原因として, 当初インターネットにある画像をそのまま使用しようとしてい
たことが挙げられる. 印刷物を制作する上でインターネット上の画像をそのまま使うことが良くな
いということに早く気づくべきだった.
また函館ハリストス正教会では事前の連絡なしに行って迷惑をかけたので深く反省しなければ
ならない. この反省を活かし, 第 4 回以降の取材時には建物内部を撮影するときに事前に撮影許可
を取っている. また写真撮影において事前の天気の確認を怠っていたこと, 取材中の撮影時におけ
る光源の確認が足りなかったことが反省点に挙げられる. 天気が良くない時期が続いていたことも
あったが, 上記のことを前もって意識しておけば取材は多くて 3 回程度で済んだだろう.
（※文責: 織田幸博）
4.4.4
ページデザイン
図 4.30 函館山のページデザイン
個々のページデザインは, パンフレット製作班 3 人で計 6 箇所の観光地をそれぞれ 2 箇所ずつ担
当し, 製作を行った. その際の課題として, 個々のページで担当が分かれているために, デザインに
統一感が無くなる, という問題が挙げられる. その問題を解決するため, 実際にページのデザインを
始める前に, 使用状況毎のフォントの種類やサイズ等, いくつかのルールを定め, 製作を行った. ま
た, 実際にページのデザインをしていく中でも, 見出し位置やページ番号の統一等も行い, ページ毎
のデザインにバラつきが出ないように注意した.
AR パンフレット特有の課題としては, AR マーカーの扱いが挙げられる. １つは, AR マーカー
の存在に気づかせるようなページデザインにするということ. AR マーカーがページに完全に埋も
れてしまうと, ユーザーはどこに端末をかざせばコンテンツが再生できるのかわからなくなる. そ
Group Report of 2012 SISP
- 45 -
Group Number 18-A
Hakodate Avatar
のため, AR マーカーは従来の黒枠のついた AR マーカーを用い, ページ上のわかりやすい位置に
配置した.
もう 1 つは, ユーザーが AR マーカーに埋め込まれたコンテンツを再生したくなるようなページ
デザインにするということ. 紙としてのページ内の情報と, AR マーカーを再生した時の情報が同
一であると, ユーザーが AR マーカーを再生する必要性がなくなってしまう. そのため, 紙として
のページ内の情報をある程度制限し, 文字や画像では表現できない新たな情報を AR 技術によって
付加するという形で, AR マーカーを再生する価値を高めている.
具体的なページのデザインとしては, 左上に観光地を表すアイコンと見出しを配置し, 短い紹介
文を添え, 観光地の大まかな概要の説明を行った. 見開きページ左側には観光地のシンボルとなる
ような写真を大きく配置し, ページ右側で詳細な説明を行なっている. 全体的には文字の分量を少
なく, 写真を多めに配置することで, パンフレットとして気軽に読めるようなデザインを心がけた.
図 4.31
五稜郭タワーのページデザイン
（※文責: 清野裕太）
4.4.5
製本
作業準備
まずパンフレットを製本するにあたって, 媒体の考案から始めた. 紙を媒体とすることは事前に
決まっていたのでサイズの決定をすることにした. ポイントとしてはパンフレット単体として使用
する時の持ちやすさ, 見やすさ等を考慮した. 大きいサイズにしてしまうと文字が見やすく情報量
を多くできるメリットがあるが, パンフレットを両手で持たないといけなくなり, 端末を持てなく
なってしまうので棄却. 逆に小さいサイズにすると持ちやすさはあるが文字や画像が見にくく, AR
マーカーのサイズも小さくなるので認識率が悪くなってしまうので棄却. 手軽で実際の観光雑誌の
大きさにもなっている A4 サイズから一回り小さい大きさの用紙に切り取りパンフレットを製作す
ることに決定した.
次に製本方法や折り加工の決定, 必要な備品の確認を行った. 話し合いの結果, 製本方法は手軽に
できて業者に依頼したかのように綺麗にまとめあげることができる点, しっかり見開きができるの
Group Report of 2012 SISP
- 46 -
Group Number 18-A
Hakodate Avatar
で AR マーカーを上手く読み取ることができる点を考慮して中綴じに, 折り加工はパンフレットに
なるべく折り目やヨレができて見た目の悪さがでないようにするために二つ折りに決定した. 備品
は艶があり上質なパンフレットにするために王子製紙 POD グロスコート紙＜ 128 ＞ A4 を 250
枚, 印刷した用紙を綺麗に切るために大型カッター TJM デザイン オートロック グリ-L 替刃内蔵
LC570H を, 二つ折りにした用紙を中綴じするためにマックス 中とじホッチキス HD-10DB をそ
れぞれ受注して用意した.
（※文責: 池上奨）
問題と解決
図 4.32 二つ折り時のトンボのずれ
当初は綺麗でリッチな AR パンフレットを製作するために製本は業者に依頼する予定だった. し
かし業者に依頼するのには大量の部数を印刷する必要があり, また印刷コストも大きかった. そこ
で担当である迎山先生に相談した結果手作業で製本することになった.
Group Report of 2012 SISP
- 47 -
Group Number 18-A
Hakodate Avatar
図 4.33
切りミスによって AR マーカーが切れている図
手作業による製本作業は, 印刷をする度にトンボの位置に数 mm のずれが生じ, 二つ折りをした
際にトンボの位置がずれたり, カッターで切る時に重ねた用紙の位置が合わなくてきちんと揃えて
切ることができず, パンフレットの見栄えが悪くなる問題が生じた.
これは先に二つ折りにした用紙を重ねてホッチキスで中綴じをしてとめてからトンボに沿ってま
とめてカッターで切るといった方法をとることで綺麗に切ることに成功した.
図 4.34
Group Report of 2012 SISP
中綴じをしている様子
- 48 -
Group Number 18-A
Hakodate Avatar
また, 逐一トンボの位置調整や製本作業を繰り返したことによって慣れたこと, 切るのが上手に
なったことも問題解決の要因となったと考えられる. 以上の工程で製本したものを最終発表のため
に 10 部揃えた.
図 4.35 最終発表に使われたパンフレット
（※文責: 池上奨）
4.5
アプリを使うと想定される環境
今回開発したアプリは当初片手にパンフレット, もう片方の手に端末で操作を行うという状況を
想定していた. しかし, 前述したようにマーカー検出では様々な環境の変化によって認識精度が悪
くなる. このような状況で最初に想定していた AR マーカーの検出方法が本当に最適なのかという
疑問が現れた.
ここで現在わかっている認識精度の悪くなる状況は以下が挙げられる.
1. 蛍光灯等の光が反射することで AR マーカーが隠れてしまう
2. 暗い場所での使用
3. AR マーカーのパターンが似ている, または AR マーカーと誤認してしまう物体がある
4. パンフレットの形が激しく歪んで AR マーカーの形が変わってしまう
5. 端末のカメラをパンフレットに対して水平方向に向ける
6. 持ち運びながらでのマーカー認識
主に以上のような状況が想定される. 2, 4, 5 は AR マーカー検出の性質上どうしても発生してし
まう状況であるので今回は 1, 3, 6 の状況の改善を行った.
Group Report of 2012 SISP
- 49 -
Group Number 18-A
Hakodate Avatar
（※文責: 藤井健太郎）
光の反射で AR マーカーを認識しない
この状況だがパンフレットの上に蛍光灯等の光源が存在する場合に発生する. 原因としてパンフ
レットに使用している POD グロスコートという紙が光を反射しやすいものであったことである.
他にもパンフレットを印刷する際に使用したプリンターやインクの関係から光の反射が起きやすい
のでないかと思われる (図 4.36). この問題は最終発表の 1 週間前に判明したことであり, 残念だが
今回対策を行うことができなかった. 対処法としては強い光源の真下でのマーカー検出は行わない
ことが今のところの対策である.
図 4.36 光の反射によって AR マーカーが認識しない
（※文責: 藤井健太郎）
AR マーカーの誤認識
AR マーカーの誤認識だが, これも前述したように作製した AR マーカーのパターンが似たもの
であった場合角度や方向を変えることで誤認識してしまう. しかし, AR マーカーをシンプルでパ
ターンが似たものにならないように作製することで対策が行えた. よってこの問題は環境の変化に
よって認識精度の悪化が起こらないようにすることができた.
（※文責: 藤井健太郎）
Group Report of 2012 SISP
- 50 -
Group Number 18-A
Hakodate Avatar
持ち運びながらでの AR マーカー認識
想定される状況で一番考えられるのがこの持ち運びながらでのマーカー検出だ. パンフレットを
使用する人は観光地に持っていき歩きながら見るであろう. しかし, その場合日光による反射, 風に
よってパンフレットが曲がり AR マーカーが認識できない等いままで上げた問題点がたくさん現れ
る. そこで歩きながらパンフレットを見る場合は本来の用途と同じように記事を読んだり, 写真を
見るという方法で使い, AR マーカーを使った 3D モデルの再生等を行う場合は自宅や車, 電車の中
のようなパンフレットを広げられ両手で端末の操作ができる状況で行うというコンセプトにした.
この場合屋内にいるので風の影響で AR マーカーが曲がったり隠れてしまう問題は解消される. 光
の反射による認識率の低下問題だが前述したように光源の真下でマーカー検出を行わなければ問題
なく動作する.
（※文責: 藤井健太郎）
以上から AR パンフレットは屋外ではパンフレットとして他のパンフレットと同じように中身
を読み, 屋内や移動中等パンフレットを床や机の上における状況の場合は端末を用い AR での情報
拡張を行うものというコンセプトにした.
（※文責: 藤井健太郎）
Group Report of 2012 SISP
- 51 -
Group Number 18-A
Hakodate Avatar
第 5 章 結果
5.1
AR パンフレット製作
パンフレット製作の結果として最終発表時に計 10 部を製作し, 第 4 稿をもって最終稿とした.
ページ数は第 1 稿から一貫して表紙含め 20 ページである. 最終稿の時点で AR マーカーは 9 つで
ある. AR パンフレットで取り扱っている観光地は全部で 6 箇所であり, 函館ハリストス正教会, 金
森倉庫, 朝市, 五稜郭タワー, 公立はこだて未来大学である. パンフレットの内容は以下の通りで
ある.
• 表表紙
• 目次
• AR パンフレットについての説明
• 函館観光マップ
• 函館ハリストス正教会
• 金森倉庫
• 朝市
• 五稜郭タワー
• 公立はこだて未来大学
• 引用元
• クラちゃんの挨拶
• 裏表紙
製本は第 3 稿まで紙を印刷し, 端を切り落としてからページの中央をホチキスで止めて折りたた
むという順番で作業していたが, 最終稿の直前で順番を変えた. 紙を印刷し, 定規とカッターの背で
折り目をつけてからホチキスで止め, 見開いた状態から横を切り落とし, 折りたたんでから縦を切
り落とした. この作業をするために大きめのカッターを 3 本購入した. 結果的にこの方法が一番綺
麗に仕上がったが, 一度に切る枚数が多い分製作者の力と集中力が必要となった.
発表時にはパンフレットの出来と AR コンテンツの出来は好評であったが, パンフレットと AR
コンテンツを組み合わせる意義に疑問符を投げかける人が少なからずいたため, 発表時やポスター
作製時に意識すべき問題だった.
また, Adobe Illustrator で制作したファイルが重いせいで, 印刷時に時間がかかるという問題が
発生した. 印刷物なので画像ファイルを圧縮しすぎると見栄えが悪くなるが, ある程度圧縮しなけ
れば上記のような問題が生じてしまうためバランスを保つことが必要である. Adobe Illustrator
を使用する際にレイヤーを分かりやすく整理することを心がけることが他のメンバーとファイルを
統合する時に重要である. そうしなければファイルの中のどこに何があるかわからなくなってしま
うからである. さらに Adobe Illustrator で画像ファイルを統合していない場合, ファイルの受け
渡しが終わった後に画像ファイルが見つからず画像が Adobe Illustrator ファイルに載っていない
という問題が発生した. 事前に Adobe Illustrator 上に画像ファイルを統合していればそのような
ことは起こらず, Adobe Illustrator ファイルも 1 つに収めることができただろう.
Group Report of 2012 SISP
- 52 -
Group Number 18-A
Hakodate Avatar
（※文責: 織田幸博）
5.2
AR アプリ開発成果
成果物として, 以下のような Android 端末向けアプリを開発することができた.
（※文責: 青木佑恭）
アプリを利用する際の注意点
本グループでは, 次に挙げる条件が備わっている Android 端末に対応するようにアプリを開発
した.
• Android OS 2.3.3 以上（開発作業の際にテストした実機のうち, 最も古い端末の Android
OS のバージョンに合わせたため）
• 背面カメラが備わっている Android 端末（ユーザーが端末のカメラのプレビュー画面を通
してアニメーションを閲覧することを考えると, 背面にカメラを搭載している端末でなけれ
ばアプリを利用するのに無理があるため）
• ネットが利用できる（AR マーカーを検出した時に起こるアクションの一部（開発したアプ
リでは Web ページの表示, 動画の再生, Google マップの表示）はネットを介して実行され
るため）
これらの条件が備わっていない Android 端末では, 今回開発したアプリを利用できない（もしく
はアプリを十分に利用できない）ような仕様となっている.
他に注意する点として, AR マーカーはその仕様上, 非常に環境に左右されやすいものであること
が判明している. したがってアプリを利用する際には, 周囲の環境に注意する必要がある. 例えば,
光の強い場所ではパンフレット内に使用されている AR マーカーが反射してしまうため, Android
端末のカメラの認識精度が大きく下がってしまう. また使用する Android 端末がオートフォーカ
スに対応していない場合, 認識精度が下がりスムーズにアプリを利用できない可能性が高いので,
Android 端末はオートフォーカスに対応しているものを使用することが望ましい.
（※文責: 青木佑恭）
アプリの仕様
AR を活用したアプリの土台となる Android 端末のカメラを使った AR マーカーの検出につい
ては, 4.2.1 の Android アプリの環境構築の項で述べられている通り, NyARToolkit for Android
がベースとなっている. なお今回製作したパンフレットでは計 9 つもの AR マーカーが使用されて
いるため, 他のページの AR マーカーを誤認識することがない様, 一致度が 65 ％以上の場合のみ
アクションが起こるようになっている. AR マーカーの検出方法の詳細については 4.2.3, 実際に作
成・使用した AR マーカーの詳細については 4.2.4 で述べられている.
また 4.2.5∼4.2.8 で述べたように, AR マーカーを検出することで利用できる機能は次の通りで
ある.
Group Report of 2012 SISP
- 53 -
Group Number 18-A
Hakodate Avatar
• 2 ページ（パンフレットおよびアプリについての説明）, 5 ページ∼8 ページ（函館ハリスト
ス正教会, 金森赤レンガ倉庫の紹介）, 11 ページ∼14 ページ（五稜郭タワー, 本学の紹介）：
MMD の PMD データおよび VMD データを利用したアニメーション（本プロジェクトで
独自に作成した各観光地の音声での説明付き）
• 10 ページ（函館朝市）：Web ページの表示（ページの拡大・縮小等の機能あり）
• 9 ページ（函館朝市）, 15 ページ（函館山）：YouTube 上にアップロードされている動画の
再生（一時停止・巻き戻し・早送り等の機能あり）
• 3 ページ（函館市の簡略地図が載っているページ）：Google マップの利用（現在地表示等の
機能あり）
各機能の詳しい仕様については, 4.2.5∼4.2.8 で述べている.
さらに今回開発したアプリでは, AR マーカーの認識精度を高めるためにオートフォーカスにも
対応させた（対応していない Android 端末でもアプリを使用することはできる）. メイン画面で終
了ボタン以外の部分をタッチすると自動で焦点を合わせるようになっている.
図 5.1 は, 実際に完成したアプリを実行している画面の一例である.
図 5.1 完成したアプリの実行画面
（※文責: 青木佑恭）
5.3
5.3.1
プロジェクト最終発表について
最終発表について
発表準備及びスケジュール
スケジュールは発表 2 週間前にアプリ開発の修正以外のすべてのタスクを終了し, パンフレット
及びモデリング班に発表準備を行うようにした. 最終発表が 2012 年 12 月 7 日だったので, 12 月
3，5 日にポスターチェックを, 同月 5 日に発表の最終チェックを担当教員やプロジェクトメンバー
Group Report of 2012 SISP
- 54 -
Group Number 18-A
Hakodate Avatar
により行なった. それ以降は担当プレゼンターと共に発表練習をするというスケジュールで実行し
た. プレゼンターの構成はプロジェクト全体について話すプレゼンターが 1 人, AR パンフレット
の説明を行うプレゼンターをパンフレット班から 1 人, アクアリウムの説明を行うプレゼンターを
アクアリウム班から 1 人, AR パンフレットでは発表中にも簡単なデモンストレーションを行うの
でその補助に 1 人の一度の発表に合計 4 人の体制をとった. 残りのメンバーはエレクトロニクス工
房の外でアクアリウムや AR パンフレットのデモンストレーションを行うのでその補佐や説明を
担当した.
発表目標として専門用語が発表中にたくさん出てくるので細かく説明し, VR や AR がわからな
い人でもどのようなものなのか発表で理解できるようにすることである. 発表練習でもメンバーか
ら質問や意見を発言してもらい発表を改善していくようにした. また, 前期にも引き続き発表とは
別にエレクトロニクス工房の外でデモンストレーションを行った. 実際にパンフレットやアプリを
触ってもらうことでわかりやすく，楽しく発表に来てもらう形式にした. その際質問を受けても答
えられるようこちらもプロジェクトメンバーで実際にデモ体験を行い注意すべき点や予想される質
問への対応等, 改善も行った.
（※文責: 藤井健太郎）
ポスター, スライドの作製
最終発表準備として, プレゼンテーション用のスライドの作製, 展示用のポスターの作製を
行った.
スライドの作製はプレゼンテーションで何を説明するのかというストーリーの作成から行った.
これは聞き手に本グループの活動をスムーズに理解してもらえるスライドであることを目的として
いる. AR や VR という言葉を多く使う説明となるのでまずはその説明を行い, そこから本題に入
ることで視聴している方々が AR の意味がわからなくても理解してもらえるものとした. また, プ
レゼンターの発表資料だがこれは基本的な道筋をまとめただけで明確に作成しなかった. 資料を完
全に作成してしまうと暗記した内容を話しているのみとなってしまい質疑応答に答えられなくなる
からだ. 先にスライドを作製し, その図に合わせて自分の言葉で説明できるように練習を行うこと
でプレゼンターも発表内容を理解でき, 質問にも答えられるようになる. このような理由で発表練
習を多く設け自然に説明が行える環境を作っていった. このイメージ写真は最終発表当日の写真で
ある（図 5.2）.
ポスター作製ではメインポスターを 1 枚にサブポスターをパンフレット班, アクアリウム班でそ
れぞれ 1 枚ずつ作製した. ポスターに関しても画像を多く使い文字での説明を極力避ける仕様とし
た. また, 前期で作製したポスターは背景を黒としたことでポスターフレームや光の反射により見
えづらいという反省点があったが, 後期ポスターではその点レイアウトは大きく変えず背景を白等
の明るめの色を使用することでより見やすいポスターに改善できた.
（※文責: 藤井健太郎）
発表練習
発表練習は最終発表の 10 日ほど前から行い 2 度担当教員に実際に発表を行った. その際, 担当
教員に指摘箇所や改善をしていただいた. また, 毎日発表練習を行い作業の時間が空いているメン
バーに見てもらうことでプレゼンターの話す内容の間違いや複数人いるプレゼンターのそれぞれの
Group Report of 2012 SISP
- 55 -
Group Number 18-A
Hakodate Avatar
図 5.2 最終発表時の発表風景
発表内容での齟齬がないように事前に修正することができた.
（※文責: 藤井健太郎）
5.3.2
中間発表のフィードバック
発表技術においては図や動画を用いた発表方法が良いという評価が全体的に多く見られた. また,
発表者の説明が丁寧でわかりやすいという意見も多く見られた. 否定的な意見としては, 聞きやす
かったという意見もあったが, それ以上に声量が低いという意見と説明が早口であるという意見が
多数挙げられた. これは前半, 後半のどちらにも見られたので反省し, 次回への課題としたい. 後期
の発表では発表練習を増やし, 大きな声量でゆっくりと説明することが一つの課題であると考えら
れる.
発表内容においては良い点としてシステムの説明がわかりやすいという意見や, 専門用語の説明
を上手にできていたという意見が挙げられた. しかし, 意見の大多数は何を目的としているのかわ
からないや最終目標は何か伝わらない, 背景が読み取れない等といった悪い点について述べられて
いた. また, スライドでの反省点において連携が取れていない等聞き手にとって不必要な情報があ
るという意見や, 連携が取れていないにしてもどう解決するのかという提案が説明されていない等
厳しい指摘を受け, 発表内容に関しては多くの改善要素があると考えられる.
以上から, スライドやデモを用いた発表技術に関しては高い評価をいただいたが反面発表内容は
悪い点の指摘が多く見られた結果となった. よって後期に向けての課題はプロジェクトの目的, 目
標を明確化させることであり. その上で, どのような場面で, どのようなユーザがどういった目的で
使用するものなのか, 実用化にあたっての活用方法というものを具体的に掘り下げて考えていかな
ければならないと気付くことができた. 最終発表では中間発表で指摘された課題を解決して, 発表
内容を濃くしていく予定である.
Group Report of 2012 SISP
- 56 -
Group Number 18-A
Hakodate Avatar
前半
解答人数： 37 名（2 年 3 名 3 年 15 名 4 年 12 名 Ｍ 11 名 Ｍ 2 3 名 教員 3 名）
発表技術の平均点：7.97 点
発表内容の平均点：7.66 点
後半
解答人数： 30 名（2 年 2 名 3 年 19 名 4 年 6 名 Ｍ 11 名 教員 1 名 無記入 1 名）
発表技術の平均点：7.69 点
発表内容の平均点：7.61 点
合計
解答人数： 67 名（2 年 5 名 3 年 34 名 4 年 18 名 Ｍ 12 名 Ｍ 2 3 名 教員 4 名 無
記入 1 名）
発表技術の平均点：7.85 点
発表内容の平均点：7.63 点
中間発表技術について主な意見
良い点
• スライドを使った発表が良い
• 図が多いのでわかりやすい
• 動画やアニメーションのデモがありわかりやすかった
• 声がはきはきしていて良かった
• 説明が丁寧で練習をしているという様子が読み取れた
悪い点
• 声量が小さい
• 説明が早口である
• BGM の音量が大きく, 声が聞こえなかった.
• 専門用語をもう少し解りやすく説明してほしい
中間発表内容について主な意見
良い点
• システム等の説明がわかりやすい
• 難しい専門用語や内容を上手く説明できていた
• 興味をもてる面白い内容である
悪い点
• 何を目的としているのかが良くわからない
• 最終目標がわからない
• 反省点の解決策が無い
• 連携がうまく取れていない等不必要な情報がある
• 背景がわからない
• 室工との連携をしている経緯がわからない
• いきなり VR から AR に変わる理由が説明されていない
Group Report of 2012 SISP
- 57 -
Group Number 18-A
Hakodate Avatar
• AR, VR という言葉の訳し方を再検討するべき
（※文責: 池上奨）
最終発表のフィードバック（パンフレット）
5.3.3
発表技術においては画像を多く取り入れ動的なスライドが見やすい, 声量がよく聞き取りやすく
デモを行ってくれるからわかりやすい等好評価な意見が多く見られた. 反面, 画像ばかりで説明文
がないので見にくいスライドがある, 文字と背景の色の組み合わせを考えたほうが良いといった部
分的に悪いという意見も挙げられた. 他には教員に対して敬語になっている, 「えっと」「まぁ」が
多く聞き手側としては気になるという言葉の問題点が若干ではあるが見られた. このことからスラ
イドの見せ方や前期の課題となっていた声量が小さいという問題は達成し良い評価をいただくこと
ができた. 後は, 発表の練習を増やす, 言葉遣いを意識して説明することができれば技術面では特に
問題は無いと考えられる.
発表内容においてはパンフレット自体の質が高くて凄い, みていて面白いと AR パンフレットそ
のものに関する評価は良い意見が多く見られた. しかし, 悪い点として用紙に光が反射して上手く
認識できていない, 映像が途切れ途切れになってしまっている, 実際に持って観光するには手が疲
れる等の意見から実用性の問題を指摘された. これはデモを行う人が練習をする, 上手く作動しな
かったときのために代わりのデモ動画を流すといったようにカバーはできたと思われるので練習不
足や代わりのデモを用意していなかったのは反省するべき点であると考えられる. その他にもバー
コードによる読み取りで十分ではないのか, 新規性が全く感じられないといった厳しい意見も多々
見られた.
最終発表は技術面に関しては高いが内容が弱いという結果になったと思われる. この要因として
は AR をパンフレットに用いることが既存の技術であり新規性が見つからない点や実際に使用し
た時の使いにくさが問題であると考えられる. また, AR を用いた理由がわからない, AR に不可欠
な更新が見られないという意見も見られたのでそこは反省し, AR におけるグループ内の理解を一
層深め, これらの問題を解決していきたい.
以上から本グループの目標であるパンフレットに AR を活用することでパンフレットという情
報の変更等が不可能な媒体に更新だけでなく情報の追加をし, 更に 3D キャラクターや 3D モデル
を使用することで面白さを付加することであり, これは良い評価は必ずしも多くはないが, 若干な
りとも寄与できたと思われる.
前半
解答人数： 34 名（2 年 5 名 3 年 15 名 4 年 5 名 Ｍ 11 名 教員 3 名 職員 3 名 一
般 2 名）
発表技術の平均点：7．53 点
発表内容の平均点：7．37 点
後半
解答人数： 37 名（2 年 4 名 3 年 16 名 4 年 13 名 Ｍ 2 1 名 教員 1 名 職員 1 名 無
記入 1 名）
発表技術の平均点：8．21 点
発表内容の平均点：7．33 点
合計 解答人数： 71 名（2 年 9 名 3 年 31 名 4 年 18 名 Ｍ 11 名 Ｍ 2 1 名 教員 4 名 職
員 4 名 一般 2 名 無記入 1 名）
Group Report of 2012 SISP
- 58 -
Group Number 18-A
Hakodate Avatar
発表技術の平均点：7．87 点
発表内容の平均点：7．35 点
最終発表技術について主な意見
良い点
• スライドが良くできている
• デモがあるのはわかりやすい
• 聞き取りやすい声量である
• 画像を多く取り入れているので見やすい
悪い点
• 言葉遣いや言葉の言い間違いに注意
• 図だけの説明ではごちゃごちゃしてわかりにくい. 文章も少し付けたほうが良い
•「えっと」「まぁ」が多く, 聞いていて気になる
• 文字と背景の組み合わせが悪く文字が見えないスライドがある
• デモも認識しない時のために映像等を用意していたら良かった
最終発表内容について主な意見
良い点
• パンフレットの実用性は高いと思う
• パンフレットが良くできている
• 見ていて面白い
• 実際に読み取りキャラクターが動くのが良い
• 建物の質が高い
悪い点
• AR を用いる理由がわからない
• パンフレットで AR マーカーを使うよりもバーコードで読み取るほうが良い
• パンフレットの新しさがない, わからない
• 対象ユーザが見えない
• 光が反射して見えないので紙媒体の検討が必要
• 認識の精度が悪い
• パンフレットを片手に持ちながらもう片方の手で端末を持ってパンフレットを使用するのは
疲れる
• 端末で認識した後は流し続けている状態じゃないと途切れて見にくい
• 二つの班の共通の, プロジェクトとしての目的が伝わらない
（※文責: 池上奨）
Group Report of 2012 SISP
- 59 -
Group Number 18-A
Hakodate Avatar
5.3.4
中間発表との比較
発表技術についての比較
発表技術においては中間, 最終発表ともにデモやスライドの出来が良く, わかりやすいという評
価を多数いただいた. また図を多く取り入れて見やすいという意見も多く挙げられた. このことか
ら一般の人にも理解しやすいように作製できていたと考えられる. また, 中間発表では悪い点とし
て声量が小さい, 専門用語をわかりやすくして欲しいとあったが, 最終発表では聞き取りやすい声
量である, わかりやすかったと欠点が良い点に変わっていたので, これは前期の反省を十分に活か
すことができたと考えられる. 比較結果としては技術内容は中間発表も高い評価だが最終発表は中
間発表以上であるといえるだろう. このことは統計した点数からもうかがうことができる.
発表内容についての比較
発表内容においては前期の課題であった目標, 目的の明確化させること, 対象ユーザを考えるこ
とを重要視していた. しかしフィードバックの結果から目的が伝わらない, 対象ユーザがわからな
いという意見も多数見られたのでこの課題は十分に達成できなかったと考えられる. 十分に達成で
きなかった理由として目標, 対象ユーザの詳細を深く掘り下げきれてなく, 伝えきれなかったこと
が原因だと考えられる. これは反省すべき点であると思われる. 良い点としては中間発表ではシス
テムの内容の説明や専門用語の説明がしっかりとされている, 面白い内容だった, となっていて最
終発表ではパンフレットが良くできていて実用性は高そうである, キャラクターが動きが良く, 見
ていて面白いとなっている. ここから中間発表はシステムの内容や説明といったものが良かったの
に対し, 最終発表では AR パンフレットという成果物自体の評価が良かった. このことから技術力
が向上し前期よりも良い成果物を製作できたのではないかと考えられる. また中間, 最終発表とも
に内容が面白いという評価をいただいていることから, 新規性の要素は薄いかもしれないがユニー
クな成果物を製作することができたのではないかと考えられる.
（※文責: 池上奨）
Group Report of 2012 SISP
- 60 -
Group Number 18-A
Hakodate Avatar
第6章
6.1
課題と展望
パンフレットの改善
本グループでは, パンフレットに AR を活用することでパンフレットに更新だけでなく情報の追
加をし, 更に 3D キャラクターや 3D モデルを使用することで面白さを付加することを目標とした.
具体的な方法としてはパンフレットの中に AR マーカーを付加することで, 記載されている情報の
他に 3D キャラクターによる説明や 3D モデルの建物を出現させて普通に見るのと違う角度や高度
での建物を観察することができるといったものである. 成果物は完成したがいくつかの課題がみら
れた.
（※文責: 池上奨）
用紙, インクの問題
まず, 発表のフィードバックにもあるように AR マーカーの認識が悪く, 見にくいという問題が
挙げられる. この認識の悪さは紙の材質やインクの光沢が光に反射したことが主な原因だと思われ
る. この問題の解決策としては紙質を艶のあるグロスコート紙から艶のないマットコート紙に変え
る, または半光沢紙を用いることで光の反射を抑えることができると思われる. また, インクもフォ
トブラックからマットブラック変えると艶を抑えることができると思われる. しかし艶が全く無い
と色が淡白になりパンフレットが綺麗に見えなくなってしまう可能性があるので用紙とインクの組
み合わせは試行錯誤していく必要があると思われる.
（※文責: 池上奨）
パンフレットの問題
次に, 実際にパンフレットを片手に持ちながらもう一つの手で端末を見るのは疲れる, 難しいと
いう意見がある. 本グループが想定した端末を使って AR マーカーを見る場面は, 座れる落ち着い
た所でパンフレットを置き, そこで端末を持って AR マーカーを認識するものとしていた. しかし
必ずしも想定した通りに使って貰えるとは限らない上にデモ時に二人がかりで大変そうという意見
も見られた. なのでこの解決策としてはパンフレットを現状より持ちやすくなれば疲れるし大変と
いう問題を解消できる可能性がある. 具体的にはパンフレットのサイズを小さくする, 折り加工の
仕方を変える, 大きさの小さい端末を用いるといった方法が挙げられる. しかし, サイズを小さくす
ると文字や画像も小さくしないといけなくなるので全体的に見にくくなってしまう. 折り加工の仕
方を変えるとなると, 三つ折り等折る回数を増やし AR マーカーのある部分だけを開くといった方
法が考えられるが, ページ数が多いと重ねて止めるのが難しくなる. 以上から現状では端末の大き
さの小さいものを用いて使ってもらうか, 前述の通り本グループの想定した使用方法で使ってもら
うしかないと思われる. この件は今後の課題としてより良い案を練っていきたい.
（※文責: 池上奨）
Group Report of 2012 SISP
- 61 -
Group Number 18-A
Hakodate Avatar
レイアウトの問題
もう一つはレイアウトの問題として黒白の AR マーカーが大きくて後ろの画像が見えなくなっ
てしまいもったいないという指摘があった. 本グループでは違和感のない AR マーカーを作製する
予定だったのでこの指摘は反省したい. 改善策としては黒白の AR マーカーではなく, 写真を AR
マーカーとして認識できるようになると良いと考えている. そうすることによって黒白の AR マー
カーを使う必要が無くなる上, 違和感が良くなると考えられる. ただしこの時の問題としては AR
マーカーとして使用する写真と似たような形の画像があれば誤認識が起こってしまう可能性があ
る. なのでそこから更に任意の大きさの画像認識ができるようになれば AR パンフレットに使用さ
れている画像を認識することができるので誤認識を減らすことができ, 尚且つ無理に AR マーカー
を配置する必要もないので全体的に違和感のないレイアウトにすることができると考えられる.
（※文責: 池上奨）
6.2
AR マーカーの改善
図 6.1
展望イメージ図
AR マーカー自体の改善に関しては様々な点が挙げられる. 主に考えられるのは, カラー画像の
使用による改善である. 今回はパンフレットを製作しているためカラー画像, つまりは写真を AR
マーカーとして使用することによって, パンフレットの見栄えを全く損なわないようなものが作れ
ると考えられる. そのイメージ図が図 6.1 である. 黒枠も全くない写真を AR マーカーにすること
によって, それがよりパンフレットらしさを残したまま AR の技術を活かせるコンテンツに仕上が
る. また, 黒枠も何もない AR マーカーを利用することによって起きる利点はもう一つ考えられる.
それは, 従来のパンフレットにも適用できるという点だ. 従来のパンフレットの多くは AR マー
カーを使わない普通のパンフレットである. そこでアプリ自体がただの写真を AR マーカーとして
Group Report of 2012 SISP
- 62 -
Group Number 18-A
Hakodate Avatar
認識することができれば, パンフレットを新たに印刷し直すことなく, AR のコンテンツを利用で
きる. そのためには, 本グループが使用している二値化した画像のパターン認識ではまずこのよう
なアプリを開発できない. 今回導入段階でつまづいてしまった OpenCV が導入できればそれを実
現できる可能性があったと思われる. 写真をパターン認識ではなく, もしくはパターン認識だけで
なく, 特徴点による検出が行えればカラーの画像でも比較的認識できると考えられる. 今回のアプ
リではパターン認識する前に二値化を行なってしまっている. それでは, 似たような画像が存在す
れば誤認してしまう. 色彩情報がある程度異なっている場合, 画像の配置パターンが同じような画
像でも, 色彩情報を利用したパターン認識が行えれば, 問題なく検出できるであろう.
（※文責: 藤谷拓哉）
Group Report of 2012 SISP
- 63 -
Group Number 18-A
Hakodate Avatar
第 7 章 各メンバーの活動まとめ
7.1
7.1.1
プロジェクトにおける活動報告
川又康平
プロジェクトリーダーとしての活動
プロジェクトリーダーとして, プロジェクトでは主にマネジメントを担当した. プロジェクトの
作業の中心にはあまりかかわらず, 客観的な視点で広く様々な作業に関わり, 主にアドバイザーの
ような活動をメインに行った. また, プロジェクトの全体的な進行係として, なにか全体で話し合う
ことがあった時等は司会者役を務めた. プロジェクトメンバーとはなるべく密にコミュニケーショ
ンを取り, 問題発生時にはすぐさま対処できるように心がけた.
プロジェクトで発生した問題等によってスケジュールに狂いが生じた場合等にはグループリー
ダーと話しながらスケジュールや作業日程の変更を行った. 作業日程の変更に伴って, 各メンバー
の作業内容の変化が起きる. その際にメンバーが自分の行う作業について混乱しないように纏める
作業も行った.
前期ではリーダーとして多くの反省点を見つけ, 後期ではその見つけた反省点を活かしてマネジ
メントを行った. 問題発生時には前期より素早く対応することができ, またメンバーが混乱するこ
とが少なかったので前期よりはうまくマネジメントができたのではないかと思われる. しかし, 後
期は後期で別の反省点を見つける機会にもなった. 確認を多くしすぎたあまり, 同じ情報を何度も
聞くことになり, その分メンバーの作業時間を取ってしまった. ちょうど良い確認の方法を熟知し
ていなかった点が挙げられる. またリーダーとしてマネジメントを行う機会があれば今後はその反
省点を活かし, さらなるリーダーとしてマネジメント力に磨きをかけたいと考えられる.
（※文責: 川又康平）
成果発表会で使用したデモムービー制作やポスターの作製
成果発表会で使用するデモムービーの制作を行った. デジタルカメラを用いて, 実際に本プロ
ジェクトで制作した成果物を利用している様子を動画で撮影した. さらにパソコン画面上で動作し
ているプログラムをキャプチャーできるものは動画としてキャプチャーして, 集めた動画を編集し
てデモムービーを制作した. 発表時間は限られているので, 短い時間で成果物がどのようなものか
伝わるデモムービーの制作を心がけた.
また, VR アクアリウムのポスターの作製作業を行った. AR パンフレットで作製するポスター
とレイアウトを一致させ, あまりかけ離れすぎないように調整しながら作製を行った. 自分たちが
どのような学習をしてきたのかという内容が伝わるように気を配り, なるべく写真や図を多く使い,
読ませるのではなく見せるポスター作りを心がけた.
（※文責: 川又康平）
Group Report of 2012 SISP
- 64 -
Group Number 18-A
Hakodate Avatar
中間・最終成果発表の発表者としての活動
中間・最終成果発表のどちらも発表者を担当した. 大きな声で滑舌よく, 聴いてくれる人が集中
できるような発表を目指して取り組んだ. 発表に用いたプレゼンテーションのスライドに合わせて
自分の発表がなめらかになるように練習し, 実践した. 前期では調子よく発表することができ, 質疑
応答の時間ではうまく返答することができたと考えられる. しかし後期では, 練習の時間をあまり
多く取ることができず, また多くの人がきたこともあり, 一回目の発表では緊張からうまく発表を
行うことができず, 練習の大切さを痛感した.
（※文責: 川又康平）
その他活動
プロジェクト全体で通達したい事柄等を, 「Skype」
「サイボウズ Live」を利用してプロジェクト
メンバー全体へ連絡をすることや, プロジェクトの活動の様子を写真に収める等の雑務をこなした.
また, プロジェクト全体から教員への連絡や相談があればその橋渡し役等を務めた.
（※文責: 川又康平）
7.1.2
藤井健太郎
私はこのプロジェクトにおいて活動したことは, 前期はストーリー班, 後期ではパンフレット班
でグループリーダーを担当した.
（※文責: 藤井健太郎）
前期活動
前期で行った活動は以下の通りである.
• キャラクターの設定, イラストの話し合い
• ストーリーボードの作製
• 中間発表資料の作成
• 成果発表会でのプレゼンター
活動初期は VR システムでどの程度の VR 的な表現が行えるのかわからず, ストーリー班で色々
なアクション要素を考えた. アクション要素を考える中でキャラクターが観光名所を案内する観光
案内アニメーションを製作することとなった.
活動中盤からはストーリーボード (図 7.1) の作製を行い, 他のプロジェクトメンバーにどのよう
なアクションが必要なのか, どの 3D モデルが必要になるのか理解しやすい形で作製した.
ストーリー作成では他にキャラクターがどの場面でどのようなこと会話をするのかを決め, 実際
に音声を録音した. その会話時間等をストーリーボードに合わせておくことで秒単位での詳しいス
トーリーボードの作製ができた.
また, 毎週水曜日に行っている担当教員を交えての報告会ではその時に教員からいただいたアド
バイスを議事録としてまとめ管理することも担当した. これを毎週サイボウズ Live に掲載するこ
とで数週間前に行っていた課題や今後のスケジュール管理の参考になった. また, 中間報告書や最
Group Report of 2012 SISP
- 65 -
Group Number 18-A
Hakodate Avatar
図 7.1
ストーリーボード
終報告書の参考となる重要なものであると考えた.
中間発表では発表資料の作成とプレゼンターを担当し, 発表資料とスライドの修正確認を相互に
行うことでスライドのクオリティ向上や発表内容の改善ができた.
（※文責: 藤井健太郎）
前期反省点
ストーリー内のアクション要素を決める際, VR システム側で実際に実装が可能かどうかしっか
りと話し合う時間を充分に設けなかった. そのため, ストーリーの変更が多岐にわたってしまった.
これから各グループ進捗状況だけでなく他グループへの要望や質問等をこまめに交換することが必
要であった.
中間発表では発表中にデモンストレーションを行わず, 動画を撮影して流す方法を取った. デモ
ンストレーションはエレクトロニクス工房内に設置されている VR システムで行った. 発表自体は
概ね良かったと思うが, 質問への対応が充分ではなかった. 予期せぬ質問に対して黙ってしまった
り, 言葉がしどろもどろになってしまい, うまく言いたいことが伝えられず発表全体の評価を下げ
てしまったことは反省が必要であった.
Group Report of 2012 SISP
- 66 -
Group Number 18-A
Hakodate Avatar
（※文責: 藤井健太郎）
後期活動
後期はパンフレット班のグループリーダーを務めてきた. 後期行った活動は以下の通りである.
• グループ週報のまとめ
• 会議の日程や時間の決定
• 進捗状況の確認
• スケジュール調整
• 最終発表資料の作成
• 成果発表会でのプレゼンター
グループ週報は前期の途中から始めたものだが進捗確認やその週で行った活動, その状況につい
て把握するのにとても重要であった. 毎週火曜日までに週報をグループリーダーに提出してもらい
まとめそこからプロジェクトリーダーが報告書を作成していた. 毎週水曜日に行われる他グループ,
担当教員との報告会で使用されていた.
会議の日程や時間の決定だがこれは「Skype」を使った会議のことである. Android 端末の選定
の際に Skype を使用した会議を行った. 帰宅後でもメンバーの時間を合わせることで話し合いの
場を設けることができた.
進捗状況管理だが前述したグループ週報によって進捗状況は逐一わかるようになっていた. そ
こから進行が遅れている課題の作業が難航している理由, 現在の作業速度や解決へのめどがどれく
らいかかるか把握することで課題の方向転換や現状把握を行い, プロジェクトリーダーへの報告を
行っていた.
スケジュール調整は上記の進捗状況を受けた上で課題解決期間の延長や他の班との足並みを揃え
るようにした.
最終発表資料の作成では前期とほぼ同じように道筋のみを作成し, あとはプレゼンターの言葉で
説明してもらう形とした.
成果発表会でパンフレット班のプレゼンターを行った. パンフレットに関する質問や意見には答
えられるよう最終発表 1 週間前から毎日他のプレゼンターと発表練習を行った.
（※文責: 藤井健太郎）
後期反省点
進捗管理からのスケジュール調整に関しては大きな反省点がある. 今回扱ったアプリ開発は講義
でも使用したことのない技術でありスケジュールどおりに進まないことは予想できていたが, 完成
までの残り期間を考えずに解決すべき問題を先送りにしてしまっていた. 方向転換等を行い最終発
表日には成果物として披露することはできたが発表 1 週間前は夜中まで作業を行った. この時もメ
ンバーからケガ人を出してしまったことは強く反省している. 今後はこの経験を活かし歪んだスケ
ジュールにならないようにしたい.
会議の日程や時間の決定に関しては調整自体は問題がなかったが, デモンストレーションで使う
Android 端末の選定の際どのような基準で端末を決めるのか明確に決めずに会議をおこなってし
まったため会議にかける時間が大幅に増えてしまった. これは事前に基準事項を明確に決めていれ
ば良かった部分であった. また, その会議が行われたのは活動初期であったためアプリの完成形や
Group Report of 2012 SISP
- 67 -
Group Number 18-A
Hakodate Avatar
マーカー認識等にどのような端末が適しているのかという部分が曖昧であった. このことから会議
は難航し, アプリの基本的な機能が開発できてからまた検討するという先送りになってしまった.
これは対応すべき課題の順序が誤っていたと反省した.
最終発表では事前の準備やトラブルへの対策を充分に行っていたと自負していた. 実機でのデモ
ンストレーションでもうまく動作しない場合のためにあらかじめ用意したデモンストレーションの
ビデオ映像を流すというものになっていたが, 本番ではうまく動作するときもあればうまく動作し
ないときもあり, どこで映像に切り替えれば良いのかというタイミングがうまく掴めず前述で受け
た感想のように「デモも認識しないときのための映像等を用意していたら良かった」と思われてし
まったことは深く反省している. これは発表練習がまだ充分でなく, トラブルへの対応が甘かった
ことにほかならない. これからはこの反省をしっかりと活かして, 自分達が準備した発表を最大限
理解していただけるように精進したいと考えている.
（※文責: 藤井健太郎）
7.1.3
木村文彬
前後期共に 3D モデルの制作と発表用のスライドの作製を行った. 前期ではコンテンツ班, 後期
では AR パンフレット班に所属していた.
前期プロジェクト授業開始前, プロジェクト説明会にて使用する 3DCG ソフトウェアは Metase-
quoia でほぼ決まっているということだったので, プロジェクトの配属が決定してすぐに Metasequoia の無償版をインストールした. そして, ネット上で Metasequoia の操作方法を解説している
サイトをたよりに, 実際にいくつかの 3D モデルを制作し, どのような流れで作れるのかを自学で
学んでいた. この時にポリゴンの作成や編集だけでなく, 鏡面の生成によるミラーリング処理, UV
操作によるテクスチャの操作等といったテクニックも習得した状態でプロジェクトのモデリング作
業に挑むことができた.
その後, コンテンツ班に配属され, 前期製作物である VR 観光案内アニメーションのキャラク
ター「クラちゃん」の 3D モデル制作を担当することとなった. 三面図を制作せず, 無償版の
Metasequoia で制作したところ, ファイルにロックがかかっており, そのデータは鑑賞用のみと
なってしまった. しかし, その後プロジェクトの予算がおり, 有償版にて 1 から作り直した結果, 前
回では修復できなかった箇所を修復できた.
次に, キャラクター本体はすぐに完成したため, キャラクターに新選組のような模様の服を着た
3D モデル制作を行った. 後にこれは後期まで没作品となってしまったが, 体に沿ってモデリングす
る方法は予想以上に困難なものであった.
次に, VR 観光案内アニメーションの函館側のメインである五稜郭タワーが完成したため, 周り
にある信号機, 草, 花壇と花の 3D モデルを制作し, それぞれを VR 空間上の世界として利用するモ
デルに挿入, 適したサイズに編集し, 配置した. 信号機の 3D モデルは 90 分程度で制作することが
できた. しかしながら, 花壇と花と草は曲面生成を利用したため, メインである五稜郭タワーよりも
多く頂点数をとってしまい, VR システム上での動作が遅くなってしまった. これ以降は, 曲面生成
を利用することは禁止した.
この作業が完了した後, 作業が割り当てられていなかったため, 当時は後期にて作られる予定で
あった室蘭側のメインである白鳥大橋の 3D モデルの制作を行った. これは後になって急遽前期で
利用することが決定し, 後の作業をスムーズに進行することができた.
このモデリング作業が完了したころに中間報告会用のスライドの作製を担当し, 発表も行った.
Group Report of 2012 SISP
- 68 -
Group Number 18-A
Hakodate Avatar
この発表により, 後のスライドの作製が非常に効率良く, わかりやすいものが作製できるように
なった.
後期プロジェクト授業では, AR パンフレット班のモデリング作業を担当した. まず最初に金森
赤レンガ倉庫の制作を行った. 不均一なレンガテクスチャの制作により, 平らな 3D モデルに凸凹
があるように見せることができた.
この作業の途中, 高校生の見学会があり, 専用のスライドの編集と発表も担当した. このスライド
はとにかくわからないであろう単語を排除し, キーワードとなる部分のみ説明を交えて発表した.
金森赤レンガ倉庫の制作後, 函館ハリストス正教会の 3D モデル制作を行った. ありとあらゆる
箇所でモデリングが難しい難所の山であったが, どのようにそれらしく見せるかを分析し, そのた
めには何をすれば良いかを考慮した.
その後は最終報告会が 1 週間後に控えていた. 報告会の仕事として, 発表用のスライドの作製
とデモ機による説明を担当した. このスライドでは中間報告会の時とはレイアウトが異なり, 質問
がしやすいように質問用のまとめスライドを追加している. また, 最後のスライドでは今までプロ
ジェクトで制作した 3D モデルが登場し, 没作品となった新選組のような服を着たクラちゃんも登
場させることができた.
（※文責: 木村文彬）
7.1.4
青木佑恭
前期は技術班として, VR システムでの観光案内アニメーション開発に携わった. アニメーショ
ン内に物理エンジンを導入できるようプログラムを作成したが, なかなかライブラリの概要を理解
できず, 自由落下を再現することしかできなかった. またプログラム内で自分が作成した部分のグ
ループ内での情報共有が不足していたので, 後期ではこれらを反省点とし, 新規の技術を予習する
時間を増やすことと, 情報共有を積極的に行うことを目標として活動した.
後期は AR パンフレット製作グループの一員として, Android 端末のアプリ開発に携わった. 個
人の活動としては, 3D モデルの表示や, Web ページの表示, 動画の再生等, 主に AR マーカーを検
出した時の Android 端末のアクションの部分を担当し，作成した. 3D モデルの表示は前期の VR
を利用したアニメーションでも用いていた技術であったため, 前期で学んだ知識を活かして実装で
きた. さらに Android 端末でのプログラミングは新たに取り組んだ技術であったが, グループ内の
メンバーと協力して学んでいけたので, 後期の活動を開始して一ヶ月後あたりからはスムーズに作
業を進められた. しかし問題点として, 自己管理の甘さから体調を崩してしまい, 作業に支障をきた
してしまうことが多々あった. また後期の活動が開始してからの一ヶ月間は, 開発環境の構築の面
でなかなか作業を進められず, 藤谷君に頼る結果になってしまったため, その点を反省し今後に活
かしていきたい.
（※文責: 青木佑恭）
Group Report of 2012 SISP
- 69 -
Group Number 18-A
Hakodate Avatar
7.1.5
清野裕太
前期の活動
モーション制作
3D モデルをアニメーションさせるためには, 3D モデルの骨格を決めるボーンと, ボーンの動き
を決めるモーションデータが必要となる. 3D モデルは三次元の頂点情報であり, それ単体ではただ
の彫像にすぎず, ポーズを付けたり, アニメーションさせることはできない. そのため, それぞれの
頂点と関連付けたボーンの設置と, それを動かすためのモーションデータを制作しなければならな
い. 本プロジェクトでは, 観光案内アニメーションの製作を目的として, 2 体のメインキャラクター
を生き生きと表現するため, 個人の作業として, ボーンの設置と, 観光案内を行う様々なモーション
データの制作を行った.
3D モデルをアニメーションさせるにあたり, いくつかのソフトウェアを併用して制作を行った.
使用したソフトの概要を以下に示す.
● Metasequia
3DCG や CAD, ゲーム制作等に用いる立体形状データを作成するためのポリゴンベースの 3D
モデリングソフト. 3D モデルの制作に使用.
● MikuMikuDance
3D モデルを操作しアニメーションを製作することができる 3DCG ソフトウェア. ボーンを動か
すモーションデータの制作に使用.
● PMDEditor
MikuMikuDance で使用される 3D モデルデータ (PMD) の編集を行うことができるソフトウェ
ア. ボーンの設置に使用.
3D モデルをアニメーションさせるにあたり, いくつかのソフトウェアを併用して制作を行った.
3D モデルの制作には, 3D モデリングソフトである Metasequoia を, ボーンを動かすモーション
データの制作には, 3D モデルを操作しアニメーションを制作することができる 3DCG ソフトウェ
ア MikuMikuDance を使用し, ボーンの設置には, MikuMikuDance で使用される 3D モデルデー
タ (PMD) の編集を行うことができる PMDEditor を使用した.
ここで問題となったのが, ソフトウェア間でのファイル移行である. MikuMikuDance や
PMDEditor で編集することができるファイル形式は, MikuMikuDance 独自形式の PMD, PMX
形式, または X データ形式であるが, 3D モデルデータは Metasequoia 独自の形式である MQO
データで出力される. Metasequoia では, X データ形式にエクスポートすることはできるが, そう
して出力された X データを PMDEditor で読み込むと, 3D モデルが正しく読み込まれないとい
う問題が発生した. 原因を調べたところ, ボーンの情報が入っていないデータは PMDEditor で
読み込めないということが分かった. そこで, MQO データにボーンモーションをつけるツール
RokDeBone2 を経由し, ボーン情報を付与した X データに変換することで, PMDEditor で正し
く 3D モデルデータを読み込むことに成功した. また, 3D モデルのポリゴン数が一定を超えると,
Group Report of 2012 SISP
- 70 -
Group Number 18-A
Hakodate Avatar
RokDeBone2 で開けずに, データ変換ができなくなるという問題が副次的に発生したが, 3D モデ
ルの簡略化によってポリゴン数を減らすことで対応した.
ファイル移行の問題を解決した後の全体の作業の流れとしては, Metasequoia で 3D モデル制作,
RokDeBone2 で X データに変換, PMDEditor でボーンの設置, MikuMikuDance でモーション
データの制作, となる. ここで, モーション制作の主要となる PMDEditor と MikuMikuDance で
の, 個々の作業について説明する.
PMDEditor では, モーション付けに利用するボーンを新たに 3D モデルに追加し, 3D モデルの
形状を変更させる. 作業手順としては, 形状変化用のボーン追加, ボーン位置の調整, 3D モデルの
頂点に対するボーンの影響度 (ウェイト値), 範囲の設定, MikuMikuDance 表示用「ボーン枠」へ
のボーンの追加, となる. 3D モデルにボーンを追加することで, キャラクターに動きを付けること
ができるようになる.
MikuMikuDance では, キャラクターを動かすモーションを制作し, VR システム上で動かすこ
とができる VMD 形式のモーションデータを出力する. モーションはボーンとして設定した各パー
ツを, フレームごとに動かし, 様々な動きを表現する. VR システム上では, モーションデータは
ループ再生されるため, 基本となるモーションはそれを考慮して, 起点と終点を同一にし, 自然に
ループできるようにした. ここで, ループ再生に適さないような, 手を挙げる, 等といったモーショ
ンが自然に再生できない, という問題が発生する. そのため, ループ再生に適さないモーションに
は, 動作後のポーズで数秒間固まるように設定することで対応した.
これらの作業を経て, 最終的にキャラクターを動かすことができた. 今後の課題としては, モー
フィングによるキャラクターモデルの表情変化が挙げられる. 現状は, 表情毎に 3D モデルデータ
を用意し, それを切り替えることで表情の変化を表現しているが, モーフィングを用いることで, よ
り自然な表情変化の表現ができる. さらに, 一つの 3D モデルデータを読み込み, 表情変化をモー
ションデータで行うため, 現状よりもデータの軽量化が見込める. また, 3D モデルに物理剛体が
入っていないため, 髪の毛や服がなびく, 等といった表現ができないという課題も残されている. こ
ちらは, PMDEditor を用いて, 3D モデルにボーン追従の剛体を追加することで, 解決することが
できる.
（※文責: 清野裕太）
その他の作業
VR システム上で読み込むため, MQO ファイルから PMD への 3D モデルデータ変換・VR シ
ステムから見える視野角, 深度に対応する 3D モデルデータの大きさ調整, いくつか必要となる 3D
モデルデータの制作・調整, プロジェクトの中間発表で使用するメインポスターの作製を行った.
メインポスターは, サブポスターとのデザインの統一を行った.
（※文責: 清野裕太）
前期成果物のまとめ
• キャラクターに動きをつけるための, ボーンを追加したキャラクター 3D モデルデータ
• キャラクターの喜怒哀楽や, 手を振る等の基本的なアクションを表現したモーション
• 背景や小物等の, 細かい 3D モデルデータ
• 中間発表メインポスター
Group Report of 2012 SISP
- 71 -
Group Number 18-A
Hakodate Avatar
図 7.2
中間発表メインポスターデザイン
（※文責: 清野裕太）
後期の活動
パンフレットデザイン
後期の活動として, AR 技術を生かすことのできる, 紙媒体としてのパンフレット製作を行った.
ページのデザインには Adobe Illustrator を使用. 個々のページデザインは, パンフレット製作班 3
人で計 6 箇所の観光地をそれぞれ 2 箇所ずつ担当し, 個人的には, 「函館山」「公立はこだて未来大
学」に加えて, 目次や奥付け, 挨拶の部分を担当した. その際の課題として, 個々のページで担当が
分かれているために, デザインに統一感が無くなる, という問題が挙げられ, ページのデザインを行
う前や, 草案を完成させた後等に, 全体のルールやレイアウトの統一等を行った.
各ページのデザインが完了した後は, それぞれが製作したページの統合作業を行った. 両面印刷
し, 本として綴じた時に正しいページ順となるように各ページを配置し, レイヤー分けを行った. 反
省点としては, この作業に伴って, ai ファイルの容量が非常に大きくなり, その後の作業に遅延が発
生したということ, また, それぞれの記事ページで使われた画像ファイルのリンクが, 個々の作業ス
ペースに依存していたために, データの移行が上手くいかなかったこと等が挙げられる. この解決
策としては, Adobe Photoshop や Adobe Fireworks 等による, 画像データの容量削減, 画像を ai
ファイルに埋め込むことによる画像データのリンク切れ回避等が挙げられる.
各ページの統合が完了した後の製本作業は, 両面印刷したページを, トンボに沿って中とじ製本
用ホッチキスで留め, カッティングすることによって行った. その際の課題としては, 両面印刷によ
る裏表でのずれ, 手動でのカッティングによるずれ等が挙げられた. 解決策として, 裏表でのずれを
Group Report of 2012 SISP
- 72 -
Group Number 18-A
Hakodate Avatar
最小限に抑えるために, 印刷時の原点を動かすことで対応した.
（※文責: 清野裕太）
その他の作業
AR パンフレット班のサブポスターデザインを行った. サブポスターでは, 学習の成果を見せる
ため, 成果物の概要や詳細, また, メンバーの役割分担等を掲載した. 今回は, プロジェクトを 2 つ
のグループに分けてそれぞれの成果物の製作を行ったため, それぞれのグループ毎のサブポスター
を作製する必要があった. そのため, もう一方のグループのサブポスターとのデザインの統一を考
え, 作製を行った.
図 7.3 最終発表サブポスターデザイン
（※文責: 清野裕太）
後期成果物のまとめ
• 函館観光 AR パンフレット
‐公立はこだて未来大学ページ
‐函館山ページ
‐目次, 奥付等
• 最終発表サブポスター
（※文責: 清野裕太）
Group Report of 2012 SISP
- 73 -
Group Number 18-A
Hakodate Avatar
プロジェクト全体を通しての反省
約一年間のプロジェクト学習を行なってきて, グループの中の一個人として, 改善するべきであ
るいくつかの反省点が浮かび上がってきた.
1 つは, 作業スケジュールの管理である. 最終的な発表に至るまでに, 残された期限を考え, よ
り効率的な時間配分を行うべきであった. 今回のプロジェクトでは, 期限間近になってからの追い
込みが多く, 余裕を持った進捗管理が必要だと推測される. 複数人で一つの成果物を作り上げると
いったプロジェクトの性質上, スケジュール管理に不備があると, 作業の受け渡しがスムーズに行
われずに, 手持ち無沙汰なメンバーが出てくる等, ワークフローに乱れが出てしまう. また, 個々に
与えられる作業が, 特定の個人に集中することなく, 分散させるためにも, 技術的な部分での知識共
有を行なっていく必要がある.
もう 1 つはグループでディスカッションする際には, 積極的な発言を行うということ. 今回のプ
ロジェクトでは, ディスカッションで積極的に発言するメンバーが限られてしまっていた. 多くの
人が発言し , 議論が活発になるほど, より良いアイディアや方針が生まれてくる. そのため, ディス
カッションを円滑に進め, プロジェクトとして, より良い成果を出すということに貢献するために
も, より積極的なディスカッションへの参加が必要であったと考える.
また, 個人スキルの向上も反省点の 1 つとして挙げられる. プロジェクト学習というものは, グ
ループ単位で活動するものではあるものの, やはり個人の能力が高ければ高いほど, 全体のクオリ
ティや作業スピードが上がる. 今回のプロジェクトでは, 情報デザインを学んだ経験を活かして, ポ
スターやパンフレット等の製作を行なってきたが, 個人のスキルが高ければ, より分かりやすく, 優
れたものが作れたと考えられる. ポスターやパンフレットは, 発表時に外に出るものであり, プロ
ジェクトの印象を左右するものでもあるため, より優れたものを作ることは, プロジェクト全体の
印象を好転させる要因に成りうる.
これらの反省点をふまえて, 今後は, プロジェクト単位での活動に, 一個人として, より貢献して
いけるようになる必要がある.
（※文責: 清野裕太）
7.1.6
藤谷拓哉
自分は前後期通してプログラミングを行う担当として作業を行なってきた. 前期では VR 観光案
内アニメーションの, 後期では AR パンフレットのコンテンツ製作に携わってきた.
まず前期だが, 前期では主に VR システムを解析しプログラムの機能を拡張するプログラム班の
一員として活動をしてきた. 具体的なプログラム拡張の活動としては, 2012 年 5 月の中旬から下旬
まで MQO データの読み込み・表示の解析. 6 月上旬に 3D モデルの当たり判定の導入, 当たり判
定の複数化. 6 月の中旬から 7 月頭まで各 3D モデルの位置座標の検討, アニメーションの一時中
断・再生というようなものに携わってきた. また 6 月下旬頃に一日だけではあるが, グループリー
ダーが不在の時があり, プログラム班のまとめ役として活動した. その際には, プログラム班全体の
知識共有のための勉強会, その時点でのプログラム改善点の作業分担の指揮を主に行った.
次に後期だが, 後期では主に AR パンフレットの Android アプリの開発に携わっていた. 具体的
には, 後期授業が始まった 2012 年 9 月末から 10 月頭まで Android 開発環境の導入, 10 月下旬頃
まで OpenCV の導入とアプリ基盤の導入作業を行った. 11 月は AR マーカーの作製・パターン
Group Report of 2012 SISP
- 74 -
Group Number 18-A
Hakodate Avatar
ファイルの作成, アニメーション再生プログラムの作成の一部分を開発していた. 11 下旬では特に
11 月 23・24 日に行われたワークショップに展示する用の成果物完成に向けて活動をし, それが終
了した時点から最終発表に向けてプログラムや AR マーカーの調整を行なっていた. 後期でやはり
反省点となるのが OpenCV の導入である. この導入の段階で相当な時間を取られてしまい他の作
業を行う期間を減らしてしまっていた. これには, もっと早めにグループ・指導教員に連絡する, 打
開策を検討しあうという点を実行しておくべきだった.
さらに, 班内での活動とは別に週報の提出状況の管理を行なっていた. 週報の提出状況を各週ご
と, 最低でも 2 週間に 1 回は確認をし, 表としてリスト化して管理していた. 週報を提出していな
い生徒には提出を促すというような作業も 2012 年 6 月末頃から 12 月まで行い, 記入漏れがないよ
うに注意を払っていた.
全体的な反省として, リーダーや同じグループの者へのホウ・レン・ソウが足りなかったと推測
される. また, 前後期共に発表担当者として質問の受け答え等をしていたのだが, 後期では特に緊張
してしまい, うまく受け答えができなかった. 事前に回答を準備しておけるような質問だったので,
尚更準備をしっかりしておくべきだったと反省している.
（※文責: 藤谷拓哉）
7.1.7
池上奨
前期の活動
前期プロジェクトではコンテンツ班の中のストーリー班として活動し, キャラクターの制作のた
めに必要な情報, キャラクターのイラストや性格等の細かい設定の他に, 背景や町並みの制作や, ど
のようにして函館を知らない観光者を案内するのかといったことを考えてストーリーの作成も行っ
た. また, VR アニメーションを使用する第 3 者に仮想空間への没入感を与えることを目標に活動
した.
まず最初にどのような内容にするのかをストーリー班内で案をだしあった. そして, 公立はこだ
て未来大学, 室蘭工業大学内をダンジョンに見立てて冒険する内容や函館や室蘭市内をあるキャラ
クターが観光するといった内容の案が出された. それらの中から一番適当だと思われる内容を考え
た結果, 観光をテーマとした内容が採用された. 理由としてはキャラクターの魅力を十分に表現し,
尚且つプロジェクトの目標である函館と室蘭の架け橋となるようなキャラクターを制作を達成する
ことができると考えたからである.
次にどのようなストーリーやアクションを取り入れるかといったコンテンツの部分をブレインス
トーミングを用いて考えた. そしてブレインストーミングによって出された案から他のモデリング
班やプログラム班と話合いをして実装できそうなものとできないものに仕分けをした. この過程の
中でも, 実際に観光すると思われる場所, 知らない人におすすめしたい場所をピックアップした. 仕
分け後に実装できそうなものの中から各観光場所でどのようなアクションを起こせば使用者は関心
を持つかを考えた.
決定後はストーリー班のメンバーがそれぞれ自分で考えた観光スポットのストーリーを絵コンテ
を用いて作成した. そうすることによってグループ内で説明がしやすく, また絵に残すことによっ
て思い出したり, 共有しやすくなるためである. この時にキャラクターの特性を活かしたストー
リー内容にするとキャラクターのことを知ることができ, 親しみやすくなると思い, 案を提案し,
キャラクターの特性を活かしたストーリーにすることに決定した. ストーリー決定後はストーリー
Group Report of 2012 SISP
- 75 -
Group Number 18-A
Hakodate Avatar
班のメンバー全員で決定したストーリーを清書し, 同時進行として各シーン毎のセリフを考えた.
そして各シーン毎に必要な時間を秒単位で細かく設定した.
また, セリフを作成することにより声が必要になり, メインキャラクターであるクラちゃんと
ホーくんの声優をコンテンツ班内で決めた. 決め方は実際に使用するセリフのひとつを読み上げ,
一番イメージに近い声をプロジェクトメンバー全員で決めるといったものである. 投票の結果ホー
くんの声を担当することになった. 声優を担当するにあたり, 設定したキャラクターの特徴である
ゆっくりで低い声を崩さないようにすること, VR アニメーションを使う人に声優がひどい, 聞く
に堪えない等, 声に不満があると言われないことを目標として声をあてた.
（※文責: 池上奨）
前期活動反省
反省点としては函館編のストーリーを作成するのに時間をかけ過ぎたとことだと思われる. プロ
ジェクト学習のような長期間にわたる作業は経験したことがなかったこともあるが時間配分や計画
性を持って行動できなかったことは反省したい. 課題としてはストーリー班はストーリーの作成の
みだったので Metasequoia を用いてモデリングを作ることやプログラムを作成する等といった技
術的な問題に取り組んでいきたい.
（※文責: 池上奨）
後期の活動
後期プロジェクトでは AR パンフレット班として主に観光パンフレットの内容やレイアウト, 観
光地の取材, オリジナル AR マーカーのデザインを行った. レイアウトではパンフレットに載せる
観光スポットの内の函館朝市と金森赤レンガ倉庫, 函館の全体マップを担当した.
まずは全体マップを作製するために Adobe Illustrator を使用した. 全体マップは詳細な地図情
報は記載しないで漠然とした位置情報と写真だけを載せて作製した. 詳細な地図情報を知りたい場
合は AR マーカーを認識すると Google マップが起動し確認することができる. このようにするこ
とによって使用者が自然と AR マーカーを使用することを促すような仕組みになっている.
次に担当する観光スポットを記事を書くにあたって観光スポットのことを知る必要があったので
店で売られている観光雑誌を購入し, 観光雑誌にはどんなレイアウトでどのような内容が書かれて
いるのかを参考にした. はじめは足りない画像をインターネットから所得し作業を行っていたが,
著作権の問題や観光地の文章を記載するのに許可が必要だと知ったため, 観光スポットをより詳し
く知ることを含めて現地に取材をすることにした. 本グループが製作する AR パンフレットに文章
や現地で撮影した写真等の記載のための許可はメールや FAX といった方法を用いて申請した.
取材においては函館朝市では数回にわたり取材に赴き函館朝市加盟店舗の建物を中心に撮影, 取
材を行った. 当初の予定では建物の画像を載せて人気メニューや住所といった情報は文章で記載し
ようとしたが, そうすると建物の画像ばかりで函館朝市の魅力を十分に伝えられなったので函館朝
市には欠かせない海産物, 海鮮丼といった海の幸の写真を撮るために実際に加盟店舗で朝食をとり
その写真をとることにした. その後函館朝市駅二広場にある, いか釣堀で撮影の許可を戴いていか
を釣り上げるまでの撮影をすることができた.
金森赤レンガ倉庫では BAY はこだて, 金森洋物館, 函館ヒストリープラザの中を取材した. 本来
Group Report of 2012 SISP
- 76 -
Group Number 18-A
Hakodate Avatar
図 7.4
完成した全体マップの写真
は金森ホールも取材しパンフレットに記載する予定であったが金森ホールの撮影許可が下りなかっ
たため除外することにした. まず金森洋物館のインフォメーションコーナーへ行き, 取材時の注意
事項等の確認を行った. 注意事項は取材する店舗への挨拶と改めて許可をもらうこと, 他のお客さ
んの邪魔にならないことの 2 点であった. 確認終了後, 金森洋物館ではペイストリースナッフルス
の取材を行った. 休日の昼過ぎということもあり店舗の近くには大勢のお客さんがいてなかなか撮
影が進まなかったが従業員の協力もあり無事に撮影をすることができた. 次は BAY はこだてに行
きパティスリー プティメルヴィーユの取材を行った. ここは丁度良く人がいなかったのでスムー
ズに撮影することができた. 函館ヒストリープラザではカフェレストラン 函館ビヤホールや函館
浪漫館, 手焼きせんべい店等を取材した. 以上金森赤レンガ倉庫では人気の観光お土産スポットを
中心に取材することができた.
取材終了後, 撮影した写真の確認を行い, 取材地のレイアウト作成を Adobe Illustrator と Adobe
Photoshop を使用して行った. 具体的には Adobe Illustrator を使用して文章の作成や写真の配置
等を行い, Adobe Photoshop では取材で撮影した写真の明るさの調整や必要な画像のにを切り抜
くといった加工作業を行った. 反省点としては 1 つの取材地は 2 ページまでに収めないといけな
かったため, 記載したい情報や画像を詰め込み過ぎて見栄えが悪くなってしまった部分があるので
反省し, 次は情報の整理や必要な情報だけを選択し限られたページの中で綺麗にまとめあげたい.
レイアウトの他にパンフレットに付加させる AR マーカーのデザインを担当した. はじめは AR
マーカーを縦 4 マス横 4 マスに 16 分割し, そこからランダムに四角形に黒塗りした AR マーカー
を 9 パターン変えて作製したが, 似たような AR マーカーになり誤認識も多く, AR パンフレット
の見栄えも悪かったのでこれは棄却した. 採用された AR マーカーは AR パンフレットを開いた時
に函館朝市ならイカの AR マーカー, 五稜郭タワーならタワーの後ろに五稜郭を模した AR マー
Group Report of 2012 SISP
- 77 -
Group Number 18-A
Hakodate Avatar
カーといった形で各観光ページの内容に合うように心がけ作製し直した結果, 完成することがで
きた.
図 7.5
完成した函館朝市の写真
（※文責: 池上奨）
最終発表反省
最終発表当日は端末を使い AR パンフレットのデモを行った. 場所はエレクトロニクス工房前で
行ったが照明がついていたこともあり光がパンフレットに反射して思い通りに動作させることが
できなくて十分にデモを楽しんでもらうことができなかった. このことは, 事前に練習を繰り返し
行っていれば認識しやすい角度や認識されない時の対応がとれたと思われる. また事前にデモの動
画を用意しておけば対応できたのでせっかく来ていただいた人を待たせてしまったことは深く反省
している.
（※文責: 池上奨）
7.1.8
織田幸博
前期概要
私はこのプロジェクトにおいて前期はコンテンツ班に所属し, キャラクターラフをメンバーとそ
れぞれ制作した. キャラクター案が決定した後, キャラクターの詳細を記載したキャラクターボー
Group Report of 2012 SISP
- 78 -
Group Number 18-A
Hakodate Avatar
図 7.6
完成した金森赤レンガ倉庫の写真
ドを作製し室蘭工業大学に提出した. キャラクターボードではイカのキャラクターであるクラちゃ
んと, クジラのキャラクターであるホーくんの詳細な設定（性格, 好きなもの, 嫌いなもの等）と正
面, 横, 背面から見た画像と, 喜怒哀楽を表した画像を載せた. これらの画像は Illustrator で制作
し, 詳細な設定はプロジェクトメンバー全員で話し合って決定した. コンテンツ班内でモデリング
班とストーリー班に分け, モデリング班のリーダーを務めた. 函館山から見える夜景を 3D モデリ
ングした.
中間発表ではサブポスター 2 枚を作製し, スライドを使用してプロジェクトの目的と VR,VR シ
ステム, について説明した.
1 枚目のサブポスターでは前期の技術的な説明と物理エンジンの説明, VR システムを構成する
各機材の説明を載せた. 2 枚目のサブポスターではモデリング班とストーリー班の作業プロセスを
写真と共に順番に載せた.
（※文責: 織田幸博）
室蘭遠征
2012 年 6 月 29 日から 6 月 30 日の 2 日間の間で室蘭遠征を行った. 参加したのは川又, 小畑, 織
田の 3 人である. 室蘭工業大学で VR シアターオープニングセレモニーに参加し, 現地 VR システ
ムを使った函館アバターのデモンストレーションを行った. デモンストレーションでは実際に会場
に来た方々にヘッドマウントディスプレイを装着してもらい, スタイラスペンを持ってもらって実
際に VR 観光案内システムを使用してもらった. VR システムの使用が初めての人々にはヘッドマ
Group Report of 2012 SISP
- 79 -
Group Number 18-A
Hakodate Avatar
ウントディスプレイの装着の仕方から, スタイラスペンの操作方法, ボタンを押すタイミングを説
明しなければならないとわかった. また使用者の中には VR コンテンツを上から見ようと椅子の上
に立ち上がる人もいた.
室蘭取材では夜景取材時にタクシーの運転手のご好意で当初の予定であった八丁平ではなく, そ
れより夜景の綺麗な祝津山展望台と測量山展望台へ行くことができた. 翌日の地球岬では霧が濃
かったため現地で撮った写真はほとんど役に立たなかった. 旧室蘭駅舎では鉄道に関する資料を数
多く得ることができた. 白鳥大橋記念館みたらでは白鳥大橋の模型があったため, 白鳥大橋の全貌
をイメージしやすくなった.
（※文責: 織田幸博）
前期反省
キャラクターボード, 函館山から見える夜景とサブポスターは良くできたが, サブポスターは背
景を黒にしてしまったため, ポスターフレームに入れた際に反射してしまった. 室蘭遠征では取材
ルートの計画が少し甘かった. そして発表では緊張で少し早口になってしまった.
図 7.7
コンテンツポスター
（※文責: 織田幸博）
後期概要
後期では AR パンフレット班に所属し, その班の中で紙媒体のパンフレットを製作するグルー
プの中心となって活動した. 池上, 清野と共に函館の観光地を取材し, パンフレットを製作し印刷,
製本作業を行った. その 3 人で作業を進める上で会議の司会進行, 各自の役割分担, 進捗確認を
行った.
取材時には自家用車の運転を努め同乗者であるメンバーの安全と交通規制を守ること最優先し,
安全運転に務めた. 結果無事に全ての取材を完了することができた.
Group Report of 2012 SISP
- 80 -
Group Number 18-A
Hakodate Avatar
図 7.8 VR・物理エンジンポスター
パンフレット製作では表紙と函館ハリストス正教会, 五稜郭タワーを担当した. 表紙では AR
パンフレットを使用する情景を想像できるようにタブレットを AR パンフレットにかざす画像を
Adobe Photoshop で制作し, その上にクラちゃんと五稜郭タワーのモデルの画像をタブレットか
らはみ出すように重ねた. これは AR の効果をより強調するためである. 背景は電車の車窓をイ
メージしていたが, どうしても雰囲気が暗くなるため, 八幡坂の写真を表表紙と裏表紙に続けて載
せその上に上記のタブレットの画像を組み合わせた.
函館ハリストス正教会では普段は撮影できない内部の写真を大きく使い, 外観を AR コンテンツ
として大きく表示することで内部と外観のバランスをとるように心がけた. また, 電話番号, 拝観献
金, 内部見学可能時間, 定休日等を載せることで, 観光客が函館ハリストス正教会にいつ行くことが
できるのかを一目でわかるようにした. また右ページ下部にクラちゃんを表示させ函館ハリストス
正教会について一部説明させた.
五稜郭タワーでは左ページに五稜郭タワーの展望台から撮った五稜郭の全貌の写真と下から見上
げた五稜郭タワーの様子を切り取った画像を重ねた. 五稜郭タワーを切り取る際, 展望台屋上に細
かな突起物があったためその部分を残して切り取ることに時間を要した. 右ページには各階の紹介
文と画像を載せた. 背景には新撰組のはたをイメージした画像を制作した（浅葱色の背景に誠の一
文字）. そのことで観光客に五稜郭が新撰組ゆかりの地であることを示唆させる. また右ページ下
部に電話番号, 展望台チケットの料金, 営業時間を載せることで観光客にいつ行くことができるの
かを一目でわかるようにした. また, 五稜郭タワーでは建物のモデルが AR コンテンツとして表示
され, 上から見下ろすことができる. クラちゃんがパンフレットにない五稜郭の歴史について語る
ことでパンフレットとの情報の差別化を図った.
製本作業では作業の途中で怪我人が出た. 更に貧血も引き起こしたが幸い大事には至らなかった.
メンバーには体調管理の徹底と作業への注意を促すべきだったと反省している. 2012 年 11 月 23
日には洞爺湖のワークショップで公立はこだて未来大学と室蘭工業大学の学生に実機体験をしても
らい, 意見をいただいた.
最終発表準備ではメインポスターを担当し, 前期とほぼ変わらないレイアウトで AR パンフレッ
トとアクアリウムの魅力を少ない文字で伝えることを心がけた. AR パンフレットの項目はポス
Group Report of 2012 SISP
- 81 -
Group Number 18-A
Hakodate Avatar
ターの左側に, アクアリウムの項目はポスターの右側に配置した. 一番上の画像には一目で AR
パンフレットとアクアリウムの概要がわかるような画像を制作した. まず AR パンフレットで
は AR パンフレットを使用している人の目線で AR コンテンツを再生しているシーンを Adobe
Photoshop で合成した. アクアリウムの方ではヘッドマウントディスプレイを装着した人がイカ
漁の様子を観察している様子も Adobe Photoshop で合成した. また AR パンフレットの画像では
AR コンテンツを強調させるためクラちゃんと五稜郭タワーのモデルの画像がタブレットから飛び
出して見えるように合成した.
また, ポスター内のテーマは前期から変わらず「（室蘭工業大学交流企画） 函館アバター VR/AR 技術を使ってキャラクター・アニメーションを作ろう. 」とした. また活動内容は AR パ
ンフレットとアクアリウム共通で「前期で考案したキャラクターを用いて函館に関するコンテン
ツを製作. 」とした. 次に各成果物の概要の文章と画像を載せた. 画像は AR パンフレットは AR
パンフレットの表紙とページを見開いた状態の様子を表したもの, アクアリウムはヘッドマウント
ディスプレイを装着した使用者がイカ漁の様子を楽しんでいる画像を用意した. 一番下にはスケ
ジュールを表示した. 各項目毎に長方形と三角形を組み合わせた図形で表した. そして区切りとな
る部分には赤丸の図形を使用した.
最終発表では発表者を努め, AR と VR の説明, 前期で行ったことである VR システムを使用し
た観光案内アニメーションを説明し, 後期の成果物である AR パンフレットとアクアリウムの説明
へのつなぎ役を果たした. 説明時には VR はコンピュータで作られた仮想空間にあたかも入り混ん
でいるように感じる現象であり, AR はコンピュータの情報をタブレット端末のカメラ等を通して
見ることで現実が拡張されているかのように感じる現象と説明した. AR パンフレットの魅力に関
する質問に対して, 観光名所を普段なら見ることができない角度から自由にみることができると冷
静に答えることはできたが, 質問される前に発表の内容に盛り込むべきであったと反省している.
（※文責: 織田幸博）
後期結果
前期の反省点を考慮し, 後期では少しゆっくりめの発表を心がけることができた. またポスター
では白地の背景に黒文字をしたので, ポスターフレームに入れた際にも反射が少なく済ませること
ができた.
（※文責: 織田幸博）
7.2
グループリーダーのプロジェクト活動総括
前期でもグループを分け活動したがその中で特に目立ったのがグループ間での情報や意見, 要望
の交換が少ないことで情報の齟齬が生まれ後半での修正が大きくなったしまったことであった. 後
期ではその点を注意し, 情報交換を頻繁に行うことで後半での大きな修正はなかった. オリジナル
AR マーカーの作製時には作製初期は認識率の低さや後認識の多さが目立っていたがアプリ開発側
から AR マーカーの作製担当に後認識の起こりやすいパターンでの依頼, またパンフレットの中に
違和感なく AR マーカーを配置するためにこのようなデザインの AR マーカーで認識が行えるの
か等の話し合いが行われており終盤での仕様変更がなかったことは前期の反省が活かせていた.
実機でのアプリのテストや製本したパンフレットの製作を多く行ったことで最終的な完成型での
Group Report of 2012 SISP
- 82 -
Group Number 18-A
Hakodate Avatar
図 7.9
最終発表メインポスター
問題を未然に見つけることができた.
ここからはそれぞれの班での活動の総括を行う.
（※文責: 藤井健太郎）
アプリ班
アプリ班では活動初期の環境構築に一番苦労をしたと感じた. 本格的なアプリ開発をしたこと
があるメンバーがおらず, 前期でも習得していない技術を扱うこともあって作業は難航した. 大学
内のライブラリーから参考書や個人で購入した参考書, ネットで公開されている情報を利用するこ
とで環境構築は完了することができた. 環境もバージョン 2.3 とバージョン 4.0 と構築することで
バージョンの違いで開発の違いが起こるのか, 古いバージョン, または新しいバージョンでは本プ
ロジェクトの目標が実現できない場合での予防策を取れていた.
また, 前述したように OpenCV を使用して画像を AR マーカーとして検出するということを目
標としていたが導入の難しさから断念することになってしまった. しかしそこからの方向転換が早
く AR マーカーでの検出を行う形となった. この時も AR マーカーを使用することが決定すること
でスケジュールの遅れが考えられた. しかし, 比較的導入が簡単であるとはいえ実際に稼働テスト
Group Report of 2012 SISP
- 83 -
Group Number 18-A
Hakodate Avatar
が行える形となるのに時間がかからずに行えたことは素晴らしいことであると考える.
マーカー検出ではテストを多く行うことで様々な環境での認識率の変化を検証することができ
た. まず, カラー画像を AR マーカーの内枠として作製した AR マーカーはマーカー検出を二値化
で認識していることもあって正確な認識が難しかった. この場合はカラーでの認識は断念された.
他に AR マーカーのデザインのパターンが似通っていたり, 二値化を行った時にパターンが似
通っていることから起こる誤認識等があった. この時は多くの AR マーカーのパターンを作製し,
どのパターン同士が誤認識を起こすのか実験を繰り返すことで今回使用した 9 つの AR マーカー
どれも誤認識を起こすことがないように作製できた.
また, 実際にパンフレットに AR マーカーを付加しての稼働テストでは事前に認識できていた
AR マーカーの認識率が極度に低くなる等の問題もあった. これはパンフレットの紙質や印刷した
際のプリンターやインクの関係からパンフレットに当たった蛍光灯等の光の反射によって AR マー
カーの認識率が下がったものである.
このように実装テストを多くこなせたことで AR マーカーでの利便性や認識条件, 環境変化での
認識条件の変化がたくさん出てきた. 解決できた問題も断念しなければならない問題もあったが,
問題点をしっかりと記録できたことは仕様書の作成等を作る時に重要なことであった.
（※文責: 藤井健太郎）
パンフレット班
パンフレット班では取材と撮影が一番苦労していた部分であった. 紹介する場所等は早期に決
まっていたが AR をどのように使用するのか明確に決まっていない中での取材だったので後半で
の記事の修正やそれに伴っての取材, 撮影のやり直し等が起こってしまった. また, 撮影の時の天候
の悪さ, 悪天候の連続から順調に撮影を行うことができなかった. 他にもインターネットからの写
真の無断転載, 許可を取らずに取材を行ってしまっていた. しかし, すぐに取材のやり直しができた
おかげでクオリティを下げることなくパンフレットの製作が行えていた.
ページレイアウトに関しては記事作成前に入念に話し合ったおかげで後半での大きな修正はな
かった. 小さな修正やパンフレットとして統一すべき部分, 特に AR マーカーを設置する部分は入
念に話し合いが行われていた.
製本は全部で 5 回行った. 製本をすることでさまざまな問題が起こった. まずページのずれだが
本として外側にあるページは中心に余白が必要になり, その調整のためにも多く稿数をこなすこと
で調整することができた. また, パンフレットの外側を裁断する際, すべてのページをホチキスでつ
なげる前に個々に裁断を行うと小さいが多少のずれが生まれてしまう, そのためすべてのページの
中心をホチキスで止めてから外枠を裁断するという方法をとった. この場合外側はきれいに揃うの
だが, 本来端をそろえるように印刷していたページまで切れてしまうという問題が新たに出現して
しまった. これらのような多くの問題が起きたがパンフレットの製本を第 5 稿まで行ってたので１
つ１つ解決することができていた.
（※文責: 藤井健太郎）
Group Report of 2012 SISP
- 84 -
Group Number 18-A
Hakodate Avatar
モデリング班
モデリング班では前期で制作していた五稜郭タワー, 公立はこだて未来大学があり, 後期では新
たに金森赤レンガ倉庫と函館ハリストス正教会の制作を行った. 観光をメインとしているので表示
される 3D モデルはできる限り精巧なものとなっていたので制作期間は多く設けていた. しかし,
モデリングの参考となる画像が少なく作業は難航したが, パンフレット班が取材に行く際に必要と
なる建物の角度からの写真の注文等他の班との連携がとれており, 期限どおりに制作できていた.
函館ハリストス正教会では窓のモデリングが難しく作業が難航したが, テクスチャを駆使するこ
とで実物の再現を行っていた.
（※文責: 藤井健太郎）
Group Report of 2012 SISP
- 85 -
Group Number 18-A
Hakodate Avatar
第 8 章 プロジェクト活動報告及びマネジメ
ント
8.1
本章概要
本プロジェクトでは, プロジェクトリーダーを中心として, 「AR パンフレット班（グループ A）
」
「VR アクアリウム班（グループ B）」という 2 つのグループに分けた. そして, それぞれのグルー
プにグループリーダーを設けた. グループリーダーに各班のスケジュール調整や, 小規模なマネジ
メントを行ってもらい, プロジェクト全体としてのマネジメントはプロジェクトリーダーが行うと
いうプロジェクトとの組織体系を構築した.
本章は, プロジェクト全体で執り行ったマネジメントや, 管理体系や共通活動に関して報告する
ものである. 本プロジェクトではプロジェクトリーダーがどちらのグループ A, B のどちらにも所
属せず, プロジェクト全体としてのマネジメントを行い, 前述の各グループの報告とは異なるため,
この章による両グループを含めたプロジェクト全体の報告が必要となる.
（※文責: 川又康平）
8.2
プロジェクトの組織体系
本プロジェクトは前述したように, プロジェクトリーダーを中心にして, 2 つのグループに分かれ
て, それぞれグループリーダーを配置するという組織体系でプロジェクトを組織した. このような
組織体系にした目的として主に 3 つの理由がある.
まず 1 つに, 単純に本プロジェクトで「製作するものが 2 つあった」ということが挙げられる.
今回「AR」
「VR」という 2 つの似たようでその実異なった技術を用いた開発を行った. 共通した
技術を用いる以外, 別々の技術をそれぞれ同一の班として扱うことで発生する混乱を避けるために
班を分けたのだ.
次に「プロジェクト全体としての円滑な統率をするため」ということだ. 本プロジェクトはプロ
ジェクトリーダーを含め 15 名という大人数で構成されていた. この人数をグループ A とグループ
B に人数を分けて, それぞれグループリーダーを設けることで, プロジェクトリーダーからグルー
プリーダーへ, グループリーダーから各メンバーへという流れで末端までうまく指示を飛ばすこと
ができた. また, グループごとに違う作業日程だったが, それぞれをグループリーダーに一任するこ
とでプロジェクトとしての活動を円滑にした.
最後に「問題発生時の対処や作業の分担の円滑化」というものがある. メンバーが作業に何かの
問題が発生した時に, 問題に対応すべき指示を飛ばす人間が複数いることで, 問題に対して素早く
対処が可能だ. また, 1 つのグループが 7 名とメンバーが少人数なため, グループリーダーは各メン
バーの作業状況を詳しく把握できる. その利点を生かし, 作業が滞っていたり, 素早く終わっていた
場合に, スケジュールの調整をし直して, 作業分配をし直したり可能という利点が挙げられる. 作業
が 1 人に集中してしまうという懸念や, 誰かが手空きの状態になり, 作業効率が下がってしまうと
いう状態を未然に防ぐ意味で役立つと言える.
Group Report of 2012 SISP
- 86 -
Group Number 18-A
Hakodate Avatar
上記三点の理由から, 本プロジェクトではこのような組織体系をとった.
（※文責: 川又康平）
図 8.1 プロジェクト組織図
8.3
8.3.1
プロジェクトマネジメント方法
プロジェクトマネジメント概要
本プロジェクトは基本的なマネジメントの流れとして
1. 製作するものを全体の話し合いを通して決定.
2. 前期スケジュールを設定.
3. 毎月, 月別スケジュールの設定.
4. 毎週進捗報告を行い, 両グループの進捗状況の情報共有.
5. 進捗報告会ごとに週別のスケジュールを設定.
6. その他全体集合で細かな情報共有と, スケジュールの調整.
以上のような流れで本プロジェクトは活動を行った. スケジュールをあらかじめ作成しておくこ
とで, 後に起こる問題を対処する際, 時間配分を再考する目安にすることができる. また, プロジェ
クト活動全体の流れをメンバー内で把握し, イメージすることができる. 前期スケジュール作成の
際は, 成果物, 完成期日等具体的な期日を設け, 開発スケジュールを逆算して作成を行った. 上記の
ようなスケジュール作成を行うと, 各メンバーが全体の完成のイメージから, 開発を行う個人とし
ても作業目標や作業状況が把握しやすいので, 各メンバーが全体から見た現在の状況報告がしやす
く, 全体の状況把握が容易に可能であるからである. さらに, 月別, 週別にスケジュールを細かく
設定することで個人やグループの活動内容が明確にすることができ, 短期目標が立てやすい. また
問題が発生し, スケジュールに再調整が必要な際にも, 問題解決に要する時間から短期スケジュー
Group Report of 2012 SISP
- 87 -
Group Number 18-A
Hakodate Avatar
ルを再設定することが可能なので, 長期スケジュールに影響をあまり及ばさずになる. また, 定期的
に情報共有を行うことで, プロジェクト全体で発生した様々な問題や, 状況に全体で対処していく
ことができるという利点がある.
（※文責: 川又康平）
8.3.2
前期プロジェクトマネジメント
前期プロジェクトマネジメントとして, 以下のような様々な Web サイトやツールを用いてマネ
ジメントを行った.
• メーリングリストを用いた連絡
• Skype を用いた会議
• サイボウズ Live を用いた進捗確認, 情報共有やスケジュール管理
• Dropbox を利用したファイル共有や情報共有
この項目では前期に行ったマネジメントや, 使用したマネジメントツールについて解説していく.
（※文責: 川又康平）
メーリングリストを用いた連絡
メーリングリストを用いた連絡を行った目的は, メンバー間及び担当教員メンバーとの間の連絡
を全体で共有するためである. メーリングリストは本プロジェクトメンバー間のみのメーリングリ
ストと, 本プロジェクトメンバーと担当教員を含めたメーリングリストの 2 つ使用した. メーリン
グリストを 2 つに分けた理由として, 整理されていない情報や, 必要以上の情報を担当教員に共有
させないためである. 具体的には, 担当教員とリーダーやメンバー間での連絡はメンバー全体で把
握することで, プロジェクト全体の情報をメンバーが把握できていないという状況をつくらないた
め必要だ. しかし, メンバー間での集合の連絡や開発途中で必要な細かな連絡等は多くのメールを
送ることになるが, 担当教員には定期報告会という形で 1 週間の活動をまとめたものの情報共有を
行うため, 必要以上にメールを送信することになる. そのような事態を回避するためにメーリング
リストを 2 つに分けた.
（※文責: 川又康平）
Skype を用いた会議及び情報共有
Skype はテキストチャットを行うことができるツールである. Skype を用いて会議や情報共有
を行った目的として, メールと異なり, 多人数でチャット会議が可能であり, リアルタイムでやり取
りを行うことができるのでメール以上に濃い内容の情報のやりとりが可能という点. ネット環境が
あれば自宅で会議することが可能である. そのことから, 様々なメンバー個人のスケジュール調整
が行いやすく, 活動時間外の話し合いが行いやすという点. 以上 2 点の優れた利点から Skype を使
用した. 使用用途としては, 主にグループ内のチャットや会議, プロジェクト活動外での予定合わせ
や, 即時に連絡を取りたい時に等使用した. また, ファイルの大きさが小さいものならばファイルの
送信が可能なため, ファイルの共有にも用いた.
Group Report of 2012 SISP
- 88 -
Group Number 18-A
Hakodate Avatar
（※文責: 川又康平）
サイボウズ Live を用いた進歩確認, 情報共有やスケジュール管理
サイボウズ Live とは, クラウド型の無料コラボレーションツールである. メーリングリストのよ
うにメンバーをサイボウズ Live 内で作成したグループスペースに登録することで, 使用すること
のできる Web サービスだ.
• 貸サーバーによる共有フォルダの使用
• 掲示板機能
• ToDo リストの作成
上記 3 点がサイボウズ Live で主に使用した Web サービスだ. 小規模ではあるが, 貸サーバー上
に共有フォルダを作成することができるので, 開発途中のプログラムファイル等をアップロードす
ることで, ネット環境のある場所ならどこでもファイルをダウンロードすることができる. また, 掲
示板機能には, 書き込まれた内容をメンバー全員にメールで送信することからメーリングリストの
ような扱いが可能だ. 今回, サイボウズ Live には本プロジェクトメンバーと担当教員, プロジェク
トアドバイザーの計 20 名を登録した. この 20 名という大人数に一挙に連絡を回す際に多く用いら
れた.ToDo リストが作成可能な点から, プロジェクト作業スケジュールを管理, 共有するのに用い
られた.
（※文責: 川又康平）
Dropbox を利用したファイル共有や情報共有
Dropbox は無料のオンラインストレージで, サイボウズ Live ではアップロードできない程大量
のファイルや, 大きな開発途中のプログラムファイル等のファイル共有を行うことができる. 写真
のデータや, 数が多く, サイズが大きなものが優先的に Dropbox へとアップロードされ, メンバー
間で共有した.
（※文責: 川又康平）
前期スケジュールとマネジメント
両グループとも前期のスケジュールとして
○5月
：開発に必要な基礎技術の習得と学習
○6月
：前期成果物の開発
○7月
：中間発表会の準備及び中間発表
というスケジュールで活動を行った. 2012 年 5 月の前半にプロジェクトの目的や, 活動内容を決
める議論を行い, 目的が明確になり具体的なスケジュールの設定が終えるとすぐさま行動に移った.
活動時間内の主な動きとして
• 今週の週別スケジュールを設定する（週初めのみ）
• その日の作業内容を明確にする
• 作業を行う
Group Report of 2012 SISP
- 89 -
Group Number 18-A
Hakodate Avatar
• 作業時間終了間際に全体での情報共有を行う
以上のような流れで活動を行った. 活動時間終了間際に全体で 1 日に何を行ったか, 何ができた
か, どんな問題が出たか等の情報共有を細かに行うことでプロジェクト全体足並みを整えている.
期日を明確に設定しているため, スケジュールに遅れ等があれば直ぐに対応できるようになってい
る. グループの活動に差が生じている場合にはすぐさま直接的な話し合いの場を儲けることによっ
て, 週別スケジュールの調整等を行った. また, プロジェクトリーダーを両グループに所属させない
組織体系を取ることで, プロジェクト活動時間等両グループとの会議に加わることで, 議論や開発
等に対して, 客観的な発言をすることが可能であるため, 様々な状況にも柔軟に対応することがで
きる. 活動時間外は Skype やサイボウズ Live を用いて情報の管理や, 会議等を行い, 必要であれ
ば集合して活動を行った. 前期のプロジェクトではエレクトロニクス工房のみで使える機材の使用
が必須で, またエレクトロニクス工房の使用が午後 10 時までと規律があったため, 2012 年 6 月上
旬より土日に学校に来て作業を行うということが多く行われた. その際に Skype 等コミュニケー
ションツールは重宝した.
（※文責: 川又康平）
8.3.3
後期プロジェクトマネジメント
後期はプロジェクトマネジメントとして期間が短く, 非常に作業時間が短いため, それに対応し
て開発作業が行えるようなマネジメントを行った. 具体的な内容は前期に行ったスケジュール調整
方法とマネジメント方法をそのまま取り入れて後期に生かした. そして, 後期では前述した前期の
マネジメント内容に加え, 各プロジェクトメンバーが 1 週間どんな作業を行い, どんな問題が生じ
たか等を記述する「週報」を毎週書いてもらう, という手段を用いて情報共有を行った. またスケ
ジュールはプロジェクト全体で設定するスケジュールとは別に, グループごとにもある程度作業の
目標日等を設定するスケジュールの設定を行うことにした.
「週報」やグループごとにスケジュールを設定したことについての説明は 8.3.4 で行う.
（※文責: 川又康平）
後期スケジュールとマネジメント
プロジェクト全体の後期のスケジュールとして
○ 9 月 ：後期成果物の設定
○ 10 月 ：後期成果物の開発や必要機材の購入
○ 11 月 ：洞爺湖ワークショップの参加準備や最終成果発表会準備
○ 12 月 ：最終成果発表会の準備及び最終成果発表会
というスケジュールで活動を行った. 後期スケジュールも基本的な流れとしては前期スケジュー
ルと変更点は少ない. 後期に行ったマネジメントは基本的には前述した内容に, 前期の内容が合わ
せたものになる. しかし, 後期は前期に比べ活動期間が一ヶ月ほど少ないため, 非常に余裕がない
中での活動となった. 短期間の開発では何が足りてなくて, 何が必要となっている作業なのかメン
バー同士で把握することが大事だ. 後期では前期以上にメンバー間のコミュニケーションを密に取
Group Report of 2012 SISP
- 90 -
Group Number 18-A
Hakodate Avatar
れるような配慮を心がけたマネジメントを行った.
洞爺湖ワークショップについては後述の 8.5 に記載した.
（※文責: 川又康平）
8.3.4
前期, 後期マネジメント比較と評価
プロジェクトマネジメントの前期と後期の比較としては,
• 情報共有に用いたツールの優先度が変わった.
• スケジュールをグループ別にも設定して, グループごとに違った進行具合で活動した.
• 後期からメンバーに「週報」を書いてもらった.
• 問題発生時に, メンバーはなるべくリーダーと相談して問題に対処するようにした.
ということが挙げられる.
（※文責: 川又康平）
前期のマネジメントとの変更点‐情報共有に用いたツールの優先度について
前期とは違いデータの容量が大きいファイルを扱うことが多かった. データの共有に使用してい
た「サイボウズ Live」はアップロード上限が定められていて使いにくかったため, プロジェクト
全体で共有するべき内容には「サイボウズ Live」を使用し, グループ内で共有すれば良いものや,
データの容量が大きいが共有しておきたいデータは「Dropbox」を使用するという区別ができた.
そして, ファイル共有には「Skype」を用いることも多かったが, 「Skype」ではファイルの受け渡
しをするユーザーが常にインターネットに繋がった状態でないとファイルの受け渡しができない.
そのため, 非常に使いにくいという声がメンバーからあった. その点も踏まえてメンバー全員で共
有するファイルは「Dropbox」を優先的に使う機会が多かった.
結果として, 終盤まで多くの機会で使われ, 常にメンバー同士でファイルを共有できていた点か
ら「Dropbox」を優先して使ったことは良かったといえる.
（※文責: 川又康平）
前期のマネジメントとの変更点‐グループ別スケジュール
前期では開発を専門的に行う「技術班」, 3D モデルやアニメーション, 音声, ストーリー等を作
る「コンテンツ班」に分かれて活動していた. それぞれ異なった作業だったが, 成果物が 1 つであっ
たため, 足並みを揃えたスケジュールを組んでいた. しかし, 後期では異なった成果物（AR パンフ
レットと VR アクアリウム）の製作を行ったため, 両班で足並みを揃えて作業することは少なかっ
た. なので, 各班がそれぞれ動きやすいようにスケジュールを組んでの活動を行うことにした. プ
ロジェクトとして全体の足並みを揃えなければいけない場面に関しては, プロジェクト全体のスケ
ジュールを設定し, 各班はその全体スケジュールを元にスケジュール設定を行ってもらった.
その結果, 各班がそれぞれの作業ペースで作業を行うことができた. 各班の作業ペースから, 作業
が終わり時間の空いたメンバーはスケジュールを詰めるのではなく, 他班の方へ手伝いをする等で
時間を有意に扱った.
Group Report of 2012 SISP
- 91 -
Group Number 18-A
Hakodate Avatar
（※文責: 川又康平）
前期のマネジメントとの変更点‐週報
前述したように, 各プロジェクトメンバーに 1 週間どんな作業を行い, どんな問題が生じたか等
を記述する「週報」を毎週書いてもらった. 週報には以下のようなことを書いてもらった.
• 1 週間どんな作業をしたか.
• その 1 週間で発生した問題, 解決した問題について.
• 現状なにか問題が発生していないかどうか.
• 今週・来週の予定は何か.
15 名という大きな人数を抱えたプロジェクトなので, 1 人 1 人入念に聞いていると時間が大幅に
かかる. 週報を書いて一度に集めてしまえば, その作業状況を詳しく, 短時間に収集できる. また,
予定についてメンバー自身が再認識することで, メンバーもスケジュールに自ずと詳しくなってい
く. 後々起こりそうな問題について等もリーダーだけではなくメンバーも判断する機会になった.
ここで集めた手法はプロジェクト担当教員への報告や, スケジュール調整の資料として扱われた.
（※文責: 川又康平）
前期のマネジメントとの変更点‐問題発生時の対応
前期では問題が発生した場合それに対して適宜メンバーの判断で問題を処理し, その後の報告を
受けるということをしていたが, それが原因でメンバー間の衝突が起こってしまった. 作業の優先
度が急に変り, それによって変化したメンバーの作業内容が, 他のメンバーとの作業の進行具合と
噛み合わなくなってしまった. 後期ではそれを防ぐために, 問題発生時は常にグループリーダーに
報告し, プロジェクトリーダーと話し合いをした. グループで設定されたスケジュールと, プロジェ
クトで設定されたスケジュールの両方を再調整し, 足並みを揃えながらの活動をすることを目指
した.
結果, 足並みを揃えることができ, 常にリーダーがどんな作業を行っているか把握していられた
ことで, メンバーが時間を無駄なく活動することができた.
（※文責: 川又康平）
8.3.5
プロジェクトマネジメントまとめ
プロジェクトマネジメントのまとめとして, 前期に起こった出来事から学び, 後期のマネジメン
トに活かせただろう. 前期と比べ, 短期間だった後期の時間を有効に使用できたと言える. マネジ
メントにおいて, 「Skype」や「サイボウズ Live」等のコミュニケーションツールを使用したが, そ
れが有効に働き, 何かが起こった時にメンバー同士が即座にコミュニケーションをとって対応する
ことができた. また, 定期的に行われた報告会等にも利用され, うまくプロジェクトの情報をまとめ
ることができていたのではないかと考えられる.
（※文責: 川又康平）
Group Report of 2012 SISP
- 92 -
Group Number 18-A
Hakodate Avatar
8.4
8.4.1
プロジェクト全体を通しての活動報告
年間スケジュール
一年間の活動スケジュールとしてまとめると,
○5月
：開発に必要な基礎技術の習得と学習
○6月
：前期成果物の開発
○7月
：中間発表会の準備及び中間発表
○9月
：後期成果物の設定
○ 10 月
：後期成果物の開発や必要機材の購入
○ 11 月
：洞爺湖ワークショップの参加準備や最終成果発表会準備
○ 12 月
：最終成果発表会の準備及び最終成果発表会
となっている.
（※文責: 川又康平）
8.4.2
通常活動
前期, 後期で違ったものの開発を行ったが, 基本的な活動は変わらない. 活動時間では本大学 3
階にあるエレクトロニクス工房に集合し, そこで開発作業や, 3D モデルの制作を行った. また, 本
大学 3 階にある 363 教室にある MacOS のパソコンを利用し, 中間・最終成果発表会で用いるポス
ターの作製や後期ではパンフレットの製作等を行った. プロジェクトリーダーやグループリーダー
も成果物の制作に携わっているが, その他にメンバーの活動様子の把握作業や, リーダー同士で話
し合い, プロジェクト大まかな流れや, スケジュールの変更について話し合ったりした. 何か問題が
発生した時や, 作業の進捗状況が遅れている場合等に多く行われた. 普段からコミュニケーション
を密に取るように心がけていたため, 問題発生時にはすぐに対応することができた. スケジュール
の再調整を行い, 目標日までに終わらせる要諦だった作業を終わらせることができた. また, 成果物
が未完成になる等の大きなミス等は未然に防ぐことはできた.
課外活動時にはそれぞれメンバーの自宅で開発作業や 3D モデルの制作を行ってもらった. その
際に「Skype」や「サイボウズ Live」等のコミュニケーションツールが役に立った. 問題発生時に
すぐにメンバー間や各リーダーへ連絡することができ, 急なスケジュール変更の連絡やフィールド
ワークの日程調整を行う等, 多種多様な場面で活躍した. ファイル共有には「Dropbox」をメイン
に使うことで, 欲しい時に欲しいファイルをダウンロードすることができたので, メンバーからの
評価は高かった. しかし, ドロップボックスの性質上, 2GB 以上のデータをアップロードすること
はできず, 時折アップロードしたデータを整理し, 使わないデータは削除する等の対策をとって対
応する必要があった. しかし, この削除作業も１度しか行われず, 比較的不便なく使用できたと言
える.
（※文責: 川又康平）
Group Report of 2012 SISP
- 93 -
Group Number 18-A
Hakodate Avatar
8.4.3
中間・最終成果発表会
スケジュール及び準備
中間・最終成果発表会は前期と後期の終わりに行われる, プロジェクトで行ってきたことの成果
を発表するものだ. 本プロジェクトでは成果発表会の 2 週間前から余裕をもって準備を行い, 発表
練習に取り組めるようにスケジュールを組んだ. しかし, 後期には 1 週間ほどしか時間が取れず, 少
ない時間の中で発表の準備を進めた. 成果発表会では展示するものとしてポスターの作製や, プロ
ジェクトでの成果物の準備を行った. そして, 発表をするにあたって, プロジェクターで映すプレゼ
ンテーション用の資料であるスライドと, 成果物を説明するためにデモムービーの制作を行った.
（※文責: 川又康平）
展示物（ポスター・成果物）の準備
成果発表会に来てくださった人達が自由に見ることができる展示物の準備を行った. 本プロジェ
クトでは展示物としてポスターと成果物を用意した. ポスターは 3 枚用意し, 1 枚が本プロジェク
ト全体について記載されたもので, 他 2 枚が開発や成果物について詳しく書かれたものを用意した.
本プロジェクトで行われたことや, メンバーがどのように動き, 成果としてどのようなものが得ら
れたのか等訪れた人が短時間でわかるようなポスター作りを心がけた.
また, 訪れた人が本プロジェクトで制作した成果物に直接触れる場を用意した. 実際に成果物に
触れる機会を設けることで, 本プロジェクトの成果をより深く知ってもらうためだ. そのために成
果物について説明する練習を行った. さらに, 実際に来てくれた人にどのようなデモを行うのかリ
ハーサル等して発表会当日に向けて練習した.
（※文責: 川又康平）
発表資料（スライド・デモムービー・成果物）の準備
発表を行うにあたって, スライド, デモムービー, 成果物の準備を行った. スライドは, プロジェ
クターを通して発表を聴きに来てくれた人へ, プレゼンテーション用の資料として使用するために
作製した. また, 発表の資料として成果物がどんなものか言葉以外でも説明できるように, デモムー
ビーを制作した. 後期製作した「AR パンフレット」は発表中にデモができるような手軽なもの
だったので, 成果物を直接プロジェクターに映し出してデモを行った.
スライドを作るときはなるべく写真を多く取り入れ, 見る人が飽きないような作りを目指した.
また発表中に説明もなるべく簡略化し, 難しい単語は使わず, 伝わりやすいような発表内容にする
ように練習した. 発表は前半後半でそれぞれ三回ずつある. そのため, 前半後半 3 人ずつ発表の担
当をしてもらい, 合計 6 名が発表の練習に取り組んだ. 発表練習ではリハーサルや, 発表内容の推
敲を行うことでより洗練された発表ができるようにした.
デモムービーの制作ではなるべく成果物がどんなものかわかりやすく, 時間がかかりすぎないも
のにするように心がけた.
（※文責: 川又康平）
Group Report of 2012 SISP
- 94 -
Group Number 18-A
Hakodate Avatar
8.5
8.5.1
洞爺湖ワークショップにおける成果物の発表
本項概要
2012 年 11 月 23 日と 24 日に室蘭工業大学と公立はこだて未来大学のお互いの学生交流を目的
とし, 両学学生が集い, 大学・地域の活性化をテーマに, 参加型のワークショップが企画され, 開催
された. そのワークショップの場に, お互いの大学での研究内容理解ということで, 会場内に研究紹
介ブースが設けられることになった. このワークショップに本プロジェクトメンバーの 5 人が参加
し, 研究紹介ブースに本プロジェクトで製作された成果物の展示を行った.
（※文責: 川又康平）
図 8.2
8.5.2
洞爺湖ワークショップの様子
当日の様子と結果
当日には多くの学生と教員が集まり, それぞれ参加者が自由に研究ブースを回ることになった.
本プロジェクトからは AR パンフレット, VR アクアリウムの展示を行った.
（※文責: 川又康平）
AR パンフレットの様子
見に来てくれた人のほとんどは AR については知っている様子だった. その AR を利用して独自
に音声をつけ, アニメーションを再生していたことには驚いていた. また, パンフレットの出来も高
Group Report of 2012 SISP
- 95 -
Group Number 18-A
Hakodate Avatar
評価を得られていた. 室蘭工業大学では, デザインに関して深く関わる機会が少ないため, パンフ
レットを自作したことに対して新鮮味があったようだ. しかし, これを室蘭工業大学の人に「何故
既存のものを元に作らず, 1 から自分たちで作ったのか」という質問に対してうまく返答すること
ができなかった. また, この時期にはまだ AR パンフレットは完成しておらず, 仕様もまだ完全に
完成していない状態だったため, 今回のワークショップで質問されたことや, 修正箇所については
参考になるものが多かった.
（※文責: 川又康平）
VR アクアリウムの様子
VR についても見に来てくれた人は知っている人が多かった. そのため, VR アクアリウムの仕
様の説明は簡単にすんだ. HMD と Web カメラを利用したビデオシースルーと VR 技術を組み合
わせて利用したことに驚いた様子だった. AR マーカーを利用して直接モデルに触れられる技術や,
HMD を通して VR のアニメーションを見ることを楽しんでもらえたように思われる.
この VR アクアリウムの展示にあたって「ビデオシースルーである利点が少ないが, 他に何か考
えているのか」という質問を受けた. この時点では AR マーカーを利用する以上に現実の情報を利
用するアイディアが少なかった. この質問を受けて, 今後 VR アクアリウムをどのように開発する
か等考えさせられた. 他にもこうしたら良いのではないかというアイディア等今後の開発に活かせ
る意見をもらえた. VR アクアリウムについてのアイディアをもう一度見直す良い機会になった.
（※文責: 川又康平）
8.5.3
本章まとめ
プロジェクト活動報告及びマネジメントのまとめとして, プロジェクト学習の目的として「問題
提起から問題解決までのプロセスを実際に体験します」というものがあったが, 授業ではなく自主
的に開発を自分たちで行い, そこで起きた問題の対処や解決, ずれてしまったスケジュール全体を
通して調整する等, 様々な場面でプロジェクトメンバーが活発に活動して前述の目的を果たせてい
たと考えられる. 1 年通しての活動をしていく中で, 様々な問題が発生した. 問題に対して対処を行
う際にももっと良い方法があったのではないかと考え, 反省すべきことが多いと思われるが, 結果
としてメンバー全員が様々な状況で, 様々な活動を行えたことはプロジェクトとして活動する良い
経験ができたのではないかと考えられる.
（※文責: 川又康平）
Group Report of 2012 SISP
- 96 -
Group Number 18-A
Hakodate Avatar
付録 A
新規習得技術
物理演算エンジン
VR/AR
Java（VR システム・Android アプリ開発）
Tex
Group Report of 2012 SISP
- 97 -
Group Number 18-A
Hakodate Avatar
付録 B 活用した講義
Tex 講座
ポスター講習
情報処理演習 I
パターン認識
画像工学
Group Report of 2012 SISP
- 98 -
Group Number 18-A
Hakodate Avatar
参考文献
[1] AndAR - Android Augmented Reality, 「http://code.google.com/p/andar/」 2013 年 1 月
3 日アクセス.
[2] NyARToolkit for Android demo のソースコードと使い方, 「http://nyatla.jp/nyartoolkit/
wp/?p=687」 2013 年 1 月 3 日アクセス.
[3] ARToolKit
Marker
Generator
Online,
「http://flash.tarotaro.org/ar/
MarkerGeneratorOnline.html」 2013 年 1 月 3 日アクセス.
[4] 大口裕美. タビハナ 函館. JTB パブリッシング, 2011.
[5] 前家修二. まっぷる函館’13. 昭文社, 2012.
Group Report of 2012 SISP
- 99 -
Group Number 18-A