公立はこだて未来大学 2012 年度 システム情報科学実習
グループ報告書
Future University Hakodate 2012 System Information Science Practice
Group Report
プロジェクト名
はこだて広域観光情報の多言語発信プロジェクト
Project Name
Hakodate’s sightseeing information site in multiple languages
グループ名
システム班
Group Name
System Group
プロジェクト番号/Project No.
10-A
プロジェクトリーダ/Project Leader
1010138
曽我知央
Tomohisa Soga
グループリーダ/Group Leader
若林恭平
1010042
Kyohei Wakabayashi
グループメンバ/Group Member
1010015
鳴海達朗
Tatsuro Narumi
1010068
柏谷美帆
Miho Kashiwaya
1010090
久保美沙希
Misaki Kubo
指導教員
片桐恭弘 大塚裕子
松原仁
奥野拓
Advisor
Yasuhiro Katagiri Hiroko Otsuka Hitoshi Matsubara Taku Okuno
提出日
2013 年 1 月 16 日
Date of Submission
January 16, 2013
概要
現在、日本への外国人観光客は、日本の観光情報を収集する方法として、ガイドブックを見た
り、旅行代理店や友人に話を聞くという方法よりも、
”Web”を見て情報収集を行なう割合が高
い状況である。このことから日本の観光サイトのニーズが高いと言える。しかし、日本の観光
サイトの現状は、英語は半数以上が対応しているが、アジア圏の言語が対応しているサイトは
少ないため、外国人観光客のニーズに対応しているサイトが少ないと言える。したがって、こ
れらの問題を解決するために、観光サイトの多言語化、観光客の意見の反映が必要である。本
プロジェクトでは、言語グリッドを用いることによる観光情報の多言語化での提供、調査によ
る観光客の実際の声を聞くことによるニーズに合わせたシステムの開発を目指す。今回は前年
度と同様に、私たちは、観光サイトという形でシステムをつくる。
キーワード
観光サイトの現状、ニーズ、言語グリッド、多言語化
（※文責: 若林恭平）
-i-
Abstract
The foreign tourists to Japan is higher rate which how to gather information by seeing
”Web” than how to see guidebooks or to have a listen about story from travel agencies
or friends as how to collect sightseeing information of Japan. Therefore, the needs
of the sightseeing site in Japan are high. But in the sightseeing site in Japan, more
than the half corresponds to English, there are few sites where the language in the
Asian bloc. Therefore, there are few sites corresponding to needs of foreign tourists.
Multilingualization of a sightseeing site, reflection of a tourist’s opinion are required
in order to solve these problems. In this project, we will offer the multilingualization
of the sightseeing information by using langrid and to make the system by a tourist’
s actual needs by investigation. This time, Our system is built with the form of ”the
sightseeing site” like the last fiscal year.
Keyword
gualization
The present condition of the sightseeing site, Needs, Langrid, Multilin（※文責: 若林恭平）
- ii -
目次
第1章
背景
1
1.1
前年度の成果 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2
1.2
現状における問題点 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
3
1.3
課題の概要 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
3
到達目標
4
第2章
2.1
本プロジェクトにおける目的
. . . . . . . . . . . . . . . . . . . . . . . . . . . .
4
通常の授業ではなく、プロジェクト学習で行う利点 . . . . . . . . . . . . .
4
具体的な手順・課題設定 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
4
2.2.1
言語グリッドに関して . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
5
2.2.2
API に関して . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
6
課題の割り当て . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
7
2.3.1
曽我知央 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
7
2.3.2
若林恭平 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
8
2.3.3
鳴海達朗 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
8
2.3.4
柏谷美帆 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
8
2.3.5
久保美沙希 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
9
モックアップの作成 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
9
2.4.1
トップページのモックアップ . . . . . . . . . . . . . . . . . . . . . . . . .
9
2.4.2
第 2 階層のモックアップ . . . . . . . . . . . . . . . . . . . . . . . . . . .
10
2.4.3
第 3 階層のモックアップ . . . . . . . . . . . . . . . . . . . . . . . . . . .
10
2.1.1
2.2
2.3
2.4
第3章
3.1
第4章
課題解決のプロセスの概要
13
Web サイトの階層概要 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
15
課題解決のプロセスの詳細
17
4.1
各人の課題の概要とプロジェクト内における位置づけ
. . . . . . . . . . . . . . .
17
4.2
担当課題解決過程の詳細 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
18
4.2.1
曽我知央 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
18
4.2.2
若林恭平 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
20
4.2.3
鳴海達朗 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
21
4.2.4
柏谷美帆 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
23
4.2.5
久保美沙希 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
27
担当課題と他の課題の連携内容 . . . . . . . . . . . . . . . . . . . . . . . . . . .
29
4.3.1
曽我知央 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
29
4.3.2
若林恭平 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
31
4.3.3
鳴海達朗 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
32
4.3.4
柏谷美帆 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
33
4.3
- iii -
4.3.5
第5章
久保美沙希 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
37
結果
39
5.1
プロジェクトの結果 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
39
5.2
成果の評価 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
40
5.3
担当分担課題の評価 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
41
5.3.1
曽我知央 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
41
5.3.2
若林恭平 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
42
5.3.3
鳴海達朗 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
48
5.3.4
柏谷美帆 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
49
5.3.5
久保美沙希 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
53
成果発表会における発表評価シートの分析 . . . . . . . . . . . . . . . . . . . . .
57
5.4
第6章
5.4.1
発表評価シートのまとめ
. . . . . . . . . . . . . . . . . . . . . . . . . . .
58
5.4.2
発表評価シートの分析 . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
59
今後の課題と展望
61
今後の課題 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
61
6.1.1
言語グリッドに関して . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
61
6.1.2
レイアウトに関して . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
61
6.1.3
データのソートに関して
. . . . . . . . . . . . . . . . . . . . . . . . . . .
63
6.1.4
調査班との連携に関して
. . . . . . . . . . . . . . . . . . . . . . . . . . .
63
今後の展望 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
64
付録 A
新規習得技術
65
付録 B
活用した講義
66
付録 C
相互評価
67
C.1
曽我知央に対する評価 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
67
C.2
若林恭平に対する評価 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
67
C.3
久保美沙希に対する評価 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
68
C.4
柏谷美帆に対する評価 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
69
C.5
鳴海達朗に対する評価 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
69
付録 D
その他製作物
71
付録 E
発表評価シート詳細
72
E.1
発表技術に関しての回答の詳細 . . . . . . . . . . . . . . . . . . . . . . . . . . .
72
E.2
発表内容に関しての回答の詳細 . . . . . . . . . . . . . . . . . . . . . . . . . . .
76
6.1
6.2
参考文献
81
- iv -
Hakodate’s sightseeing information site in multiple languages
第1章
背景
観光サイトの多言語化について調べたところ、図 1.1 を見てわかるように、外国人観光客が日本
に初めて来た時、どのような情報資源を使って函館を観光するのか調べた。すると、現在、日本へ
の外国人観光客は、ガイドブックや旅行代理店を利用する割合が少なく、友人や会社で情報を集め
るという割合はもっと少なかった。６割近くを占めた、”Web”を見て情報収集を行なう割合が一
番高かったという状況である。インターネットも普及してきた現代で、この結果は、日本の観光サ
イトのニーズが高いということを象徴していると言える。特にスマートフォンの普及、３Ｇ回線、
WiMAX や LTE などの高速回線なども普及している上、対応地域も拡大している現代であるの
で、初めて日本に来た外国人観光客にとって、より需要があると考えられる。そのうえ、外国人観
光客はバスや市電の時刻表を読むのは難しく、同時にそれらの時刻表が多言語対応になっている
場合は非常に少ない。そして、あまり日本語が堪能ではないと、旅行代理店にも話しかけづらい、
またそこでもうまく対応されない等の不安が残るという事も考えられる。よって外国人観光客に
とってはインターネットを利用する人が多いのである。そのうえ、楽であり、なにより情報収集が
早く行えるという点からもインターネットを利用するメリットは多い。そこで、どれだけ外国人観
光客がインターネットを利用しているのかを調べた。図 1.2 は一例だが、ホテルでの Web サイト
の多言語状況をグラフ化したものである。図 1.2 を見ると、日本の観光サイトの現状は、英語は半
数以上が対応しているが、韓国語、中国語・簡体、中国語・繁体などのアジア圏の言語が対応して
いるサイトは少ないため、外国人観光客のニーズに対応しているサイトが少ないといえるだろう。
そこで、本プロジェクトでは、もっと外国人観光客の方々がより多く Web サイトを活用していた
だけるように、調査班で実際に調査を行ない、現在の観光客のニーズを知る作業から始める。それ
によって「今」
、外国人観光客が求めているニーズを把握でき、ただ多言語の Web サイトを作るの
ではなく、外国人観光客の方々が使いやすく、情報収集がしやすい環境を整えられるような Web
サイトをつくることができる。その調査結果を、システム斑が「観光サイト」という形でシステム
に組み込む。その組み込み方も斑同士の連携をうまくとりながら、調査結果を十分に反映できるサ
イトをつくる。
図 1.1
Group Report of 2012 SISP
外国人の情報収集方法
-1-
Group Number 10-A
Hakodate’s sightseeing information site in multiple languages
図 1.2
観光情報の言語対応情報
（※文責: 若林恭平）
1.1
前年度の成果
２年前の本プロジェクトでは、言語グリッドというものを理解して、その言語グリッドのシステ
ムそのものを成果物として完成させた。言語グリッドを表現するものとしては非常にシンプルなも
のであった。日本語であれば日本語を入力して対応する言語に切り替わるという仕組みであった。
そして、前年度の本プロジェクトでは、その前のプロジェクトでしようした言語グリッドを用い
て、
「観光サイト」という成果目標を立てて、プロジェクトを行っていた。前年度の本プロジェクト
では、そのサイトの一般公開は行っていないが、調査班が観光施設を訪れたり、実際に飲食店など
を訪れ、データを収集して、観光客に実際に調査していた。その調査結果を分析したものをシステ
ム斑が、そのコンテンツを元にサイト作りを行なっていた。今年度も同様に、「引き継ぎ」という
形を取ることにし、言語グリッドを使って有効なサービスが提供するために、「観光サイト」とい
う形で提供しようと考えた。実際に調査を行い、調査結果をもとに、分析、そしてそれを多言語で
提供するために言語グリッドを用いて観光サイトを作成し、そしてさらなるサイトの利便性の向上
を目指す。前年度までは完成したサイトを学内のみの公開という形をとっていたが、今年は、その
完成したサイトを「一般公開」という形で、学内にとどまらずに、外部に公開することにした。な
ぜなら、せっかく完成した観光情報サイトを学外に発信、つまり「外部公開」しなければプロジェ
クトの目的を達成できないと考えたからである。
（※文責: 若林恭平）
Group Report of 2012 SISP
-2-
Group Number 10-A
Hakodate’s sightseeing information site in multiple languages
1.2
現状における問題点
前述の通り、外国人観光客が日本に訪れる際、インターネットの Web を見て情報収集をしてい
る方が多いのにもかかわらず、アジア圏の多言語に対応したサイトが少ない事により、十分な情報
が得られていないという点である。
実際にプロジェクトを遂行する場合の問題点はいくつかある。まず、前年度のプロジェクトの成
果物である Web サイトを一度洗い直し、問題点を探し出した。そこで見つかった問題点を今年度
のプロジェクトでは改善しようと考えたのである。
まず１つ目に、プロジェクトの進行の仕方である。前年度では、プロジェクトの方向性が決まっ
た段階で、調査班が調査を行い、その間システム斑は技術習得のための勉強に時間を当て、調査が
完了したあとに、システム斑がその調査結果を受けてシステム開発をするという流れであった。し
かし、それでは調査が予定よりずれ込んだ場合に、システム開発が遅れてプロジェクト発表までに
完成しないというおそれもある。その事もあり、今年度ではプロジェクトの方向性を決めてから調
査班が調査を開始するという流れは同じだが、システム斑のシステム開発をひな形の部分だけは終
わらせて、調査結果が出た時期にコンテンツをすぐに実装できる準備ができるようにした。これに
よってシステム開発が遅れる確率が下がったと言える。
２つ目に、去年までは機械翻訳のみであり、店名や施設名などの固有名詞がうまく変換されず
に、外国人にとっても日本人にとっても理解しづらいものとなっている点である。例えば、固有名
詞を日本語で入力した文字を英語で変換したい場合、固有名詞ならローマ字で表示されるのが通常
だが、文字列の一つ一つを英単語として認識してしまい、不自然な英語に変換されてしまう。前年
度の例で言うと、
「赤から」という店名を翻訳したい場合、「赤」と「から」という別々の言葉とし
て英語に翻訳されるため、「From red」というおかしな翻訳がされてしまう。
他にもページの推移がわかりづらいなど、いくつか問題点も見つかったため、改善したいと考
えた。
（※文責: 若林恭平）
1.3
課題の概要
多言語に対応した観光サイト作りを行う。
プロジェクトの進行方法の改善として、ときには調査斑とも協力して、場合によっては調査班に
システム斑のメンバーを送って手助けをしたり、場合によってはシステムの反映の期間が短くなっ
てしまうので、ときにはシステムに調査班のメンバーが加入して行うなどして対策は行う。また、
固有名詞の対策として、完成している固有名詞の辞書（データベース）を用いて、実際の翻訳に反
映させる。具体的には、斑員が固有名詞を翻訳したものをデータベースに格納して、新しくデータ
ベースを作成する。したがって、先に述べた解決策を取り、言語グリッドを用いることによる観光
情報の多言語化での提供、調査による観光客の実際の声を聞くことによるニーズに合わせたシステ
ムの開発を目指す。
（※文責: 若林恭平）
Group Report of 2012 SISP
-3-
Group Number 10-A
Hakodate’s sightseeing information site in multiple languages
第 2 章 到達目標
2.1
本プロジェクトにおける目的
本プロジェクトでは言語グリッドを使用し、外国人観光客に対し多言語で函館広域観光情報を
Web 上で発信することを目的としている。具体的には、多言語に対応した函館の観光サイトの開
発を目指している。
（※文責: 久保美沙希）
2.1.1
通常の授業ではなく、プロジェクト学習で行う利点
通常の授業では基本的に個人の知識・技術について講義・演習形式で行われるため、共同作業で
行うべき作業時間の多いテーマに関しては向かない。また、実地調査などは授業時間内でやりきる
のには向かないと思われる。
（※文責: 久保美沙希）
2.2
具体的な手順・課題設定
初期段階では、班員全員で XAMPP の導入をし、PHP や JavaScript などのサイト構築に関す
る言語の習得を目指した。具体的には書籍を参考にしての学習、サイトでの情報収集を行った。
また、データベースに関しても、班員全員で pgAdmin をダウンロードし、書籍やサイトでの情
報収集も行った。中間発表が近づくと、現段階での Web サイトのデザインの提示をするために、
Adobe Illustrator でモックアップの作成を始めた。また、言語グリッドのデモサイトの構築も平
衡して行った。モックアップに関しては中間発表で、決定しているデザインの提示をわかりやすく
行うためにモックアップの作成を行った。主に、トップページ、第 2 階層、第 3 階層のおおまかな
デザインをモックアップで表現した。また、デザインに関しては、言語選択を国旗で表現し、日本
語表示の段階でも言語選択のアイコンが目に入りやすいようにした。また、トップページに大きく
エリア選択の地図を配置し、初期段階でエリアとジャンルで絞り込めるよう、配慮してトップペー
ジをデザインした。その他、第 2 階層、第 3 階層についてはトップページのデザインと統一するよ
うに、配置などを考えデザインを行った。デモ機に関しては、 一度格納した日本語のデータを多言
語に翻訳して、再格納し、その結果を表示するようなプログラムを作成し、中間発表に使用した。
中間発表後、Web サイトの本格的な構築が始まるため、サイト全体のストリートボードを Adobe
Illustrator で作成した。トップページ、第 2 階層、第 3 階層のデザインはもちろん、そのほかの
ページ、他ページへのリンク、リンク先、アイコンの役割などを事細かに記したストリートボード
をサイトの設計図として作成した。ここでは、モックアップとのデザインと比較して、配色の変更
や、その他ロゴなどの新しいデザインを追加して、ほぼ完成系近いデザインを記載した。そのスト
リートボードをもとに観光サイトを構築していった。最初に、Adobe Dreamweaver を使用し、ス
トリートボードのデザインを参考にして、トップページ、第 2 階層、第 3 階層の雛形を作成した。
Group Report of 2012 SISP
-4-
Group Number 10-A
Hakodate’s sightseeing information site in multiple languages
その後、その雛形を元にページごとに使用する画像やアイコンを整理して作成を始めた。トップ
ページに関しては、メイン画像の地図を日本語、英語、韓国語、中国語簡体字、中国語繁体字ごと
に作成した。また、マウスオーバー時の画像も作成した。その他、メインメニュー（グルメ、宿、
観光、大沼）のアイコンも、同じく日本語、英語、韓国語、中国語簡体字、中国語繁体字とマウス
オーバーに対応した複数枚の画像を作成した。第 2 階層ではエリア選択の画像、ジャンル選択の画
像を、こちらも 5 カ国語とマウスオーバーに対応して複数枚作成した。メインの店舗や、観光情報
については、ホットペッパーとじゃらんの API を使用したデータベースの作成して対応した。主
に、PHP と SQL を用い、ホットペッパーやじゃらんの API からデータを必要な分だけ取り出し
格納するようなプログラムを作成した。
夏休みが終わったあたりから、調査班からの大沼での調査結果があがってきたため、その調査結
果を元に、どのようにコンテンツとして組み込んでいくかを話し合った。その結果、観光客が大沼
の体験や、飲食店などの情報を必要としていることから、大沼の特集ページをコンテンツとして函
館の観光サイトに組み込むことにした。大沼特集では、飲食店、温泉、体験というニーズの高かっ
た３つの項目を情報として掲載した。また、大沼特集ページに関しても、アイコンや、データベー
スを作成し、日本語、英語、韓国語、中国語簡体字、中国語繁体字に対応したページを作成した。
また、データベースに関しては、『まるごと大沼』という大沼の情報サイトに許可を頂き、その上
でその情報をデータベースで使用し、ページに反映させた。
終盤では、データベースの中身を言語別に変換した新たなデータベースの作成、定型文データ
ベースの作成、PHP で雛形をもとにデータベースを呼び出し、必要な分だけ表示させるような
ソースコードの作成、グルメ・ジャンル別のソート、各階層の連結、検索機能の設置を行った。ま
た、中間発表までの課題だった固有名詞の翻訳の対策に関しては、新しいデータベースの固有名詞
修正用の辞書を作成し、そちらを適用させることで解決した。また、スマートフォンへの対応を可
能にするために 階層ごとのスマートフォン用のディレクトリを用意し、表示を最適化させる作業
を行い、より、ニーズに対応した観光情報サイトを目指した。
最終発表では、システム班全体でスライドをまとめ、システム班用のポスターを作製した。ま
た、サイト全体のデザインやシステムの微調整を行い、発表用にスマートフォンとパソコンのデモ
機をそれぞれ用意し、最終発表に備えた。しかし、調査班の空港調査が終了したのが、最終発表間
近だったため、その結果をまだサイトに反映できていない。まだ実装し切れていないコンテンツ
は、お土産ランキング、同行者別のお勧めスポット、バスや電車の時刻表である。今後、これらの
コンテンツを実装し、サイトに繁栄することを目標とし、更に活動を進めていく予定である。ま
た、一般公開の準備も平行して進めていく。
（※文責: 久保美沙希）
2.2.1
言語グリッドに関して
今回、本プロジェクトで多言語化に使用している言語グリッドだが、そもそも何かというと、世
界中の言語資源 (辞書、用例対訳、機械翻訳など) を登録し共有することができるインターネット
上の多言語サービス基盤のことである。もともと、京都大学で発案され、ソフトウェアが独立行政
法人情報通信研究機構言語グリッドプロジェクトによって開発され、世界中の多数の地域で利用実
績が蓄積されている。現在はオープンソフトウェアとして公開されているために本プロジェクトで
採用するに至った。他にも多言語化のツールとして Google 翻訳も案として浮上はしたが、Google
翻訳は無料ではあるがアクセス数に制限があり、システムを開発するにあたって、また、一般公開
Group Report of 2012 SISP
-5-
Group Number 10-A
Hakodate’s sightseeing information site in multiple languages
するに当たって、オープンソフトウェアであり、利用回数制限のない、言語グリッドを用いること
が最善策だと考えた。
その言語グリッドだが、Ｗｅｂサイト作成に当たって使用したのはデータベースの翻訳だけであ
る。意外と使用領域が少ないように感じられるが、人の手でやっていては膨大な量となるデータ
ベース内のデータを翻訳しているので、多言語化をして情報を提供する際には必要不可欠なもので
あるといえる。
では、実際にどのようにデータベース内のデータを翻訳したかというと、まず、翻訳元となる日
本語のデータベースと、他の言語の空のデータベース、今回は英語、韓国語、中国語 (簡体字、繁
体字) の５つを作成した。その後、言語グリッドに接続し、日本語のデータベースを指定した言語
に翻訳し、指定したデータベースに保管する記述がされている PHP プログラムを実行することで
翻訳が可能となっている。
このプログラムは参照元のデータベースのフィールドひとつひとつを参照して翻訳するので結果
が返ってくるまでに時間がかかるが、その代わりにフィールドごとに翻訳をするかしないか選ぶこ
とができるので汎用性に長けているといえる。
また、言語グリッドの長所のひとつとして専門辞書に専門用語や固有名詞を登録することで、固
有名詞対策を行うことができる点にある。固有名詞ごとに辞書ファイルを作る必要があるが、一度
辞書ファイルを作成し専門辞書に登録すれば、翻訳精度の向上だけでなく翻訳精度の維持もでき
る。これにより、固有名詞情報をデータベースを更新するたびに書き直すという手間を省くことが
できる。しかし、これらの機能を使えるようにならなくてはただの機械翻訳と一緒である。その点
で本プロジェクトでは言語グリッドに対する理解を深め、固有名詞対策のための辞書ファイル作成
までできるようにするのも課題のひとつである。
（※文責: 曽我知央）
2.2.2
API に関して
本プロジェクトでは観光情報の取得元としてじゃらん、ホットペッパー、まるごと大沼を選択し
ている。このうちじゃらんとホットペッパーに関しては、施設名、写真、住所といった情報をデー
タベースへ手作業で入力して格納するという作業を簡略化し、全体の作業の効率化を図るため、両
サイトから会員登録者に向けて提供されているウェブ API を利用した。また、サイト内で表示し
ている地図表示機能には Google から提供されている Google Maps API を利用した。他に API
とは異なるがサイト内で天気情報を表示するために Tomoya YAMAMOTO 氏により公開されて
いる Pinpoint Weather Japan というウェブページ用 Google ガジェットも利用している。
そもそも API というのはアプリケーションプログラミングインタフェースのことであり、これ
はオペレーティングシステムやプログラミング言語で用意されているライブラリなどといった機能
の入口となるもので、アプリケーションから利用することができる。アプリケーションをプログラ
ムする際の手間を省くため、もっと簡潔にプログラムできるように設定され、作業の効率化の助け
となるようなインタフェースの事である。その中でも、本プロジェクトで利用したじゃらん、ホッ
トペッパーはウェブ API というものである。一般に利用する側は HTTP 要求メッセージを用いて
必要なデータなどを要求する。本プロジェクトでは指定したカテゴリについての施設名、写真、住
所といった情報を要求するための PHP プログラムがこれにあたる。また、要求された内容につい
て XML または JSON 形式などの応答メッセージとして結果を得ることができる。本プロジェク
トでは要求した内容に関しての情報が XML 形式で得ることができた。
Group Report of 2012 SISP
-6-
Group Number 10-A
Hakodate’s sightseeing information site in multiple languages
じゃらんのウェブ API は宿泊施設情報、観光地情報を取得する際に利用した。この API では指
定したカテゴリについて XML 形式で施設名、写真、住所、電話番号、営業日時、ジャンル、キャッ
チコピー、座標などの情報が取得できるようになっている。ここで取得した情報は私たちが作成し
たデータベースへ格納したのだが、この際に入力等の手間を省くため、XML からデータを抽出し
て自動的に指定したデータベースに格納するという PHP プログラムを作成した。これによりウェ
ブ API によるデータ取得の簡略化とプログラムによるデータベースへのデータ格納作業の簡略化
が実現した。
ホットペッパーのウェブ API は飲食店情報を取得する際に利用した。この API では XML 形式
で店舗名、写真、住所、電話番号、営業日時、ジャンル、キャッチコピー、料金設定、座標などの
情報が取得できるようになっている。じゃらんの API 同様に、ここで取得した情報を XML から
抽出して自動的に指定したデータベースに格納するという PHP プログラムを作成し、ウェブ API
によるデータ取得の簡略化とプログラムによるデータベースへのデータ格納作業の簡略化を実現
した。
Google Maps API は施設の詳細情報ページにて位置情報を表示する地図を作成するために利用
した。今回は JavaScript を使って、Google Maps をウェブページに埋め込むことができる Maps
JavaScript API を選択した。JavaScript のコード上でじゃらん、ホットペッパー API を利用し
て取得した情報のうち、座標情報を取り出して x 座標、y 座標とすることで地図上にポインティン
グを行っている。Web サイト上に表示されるのは埋め込みの機能が限られた小さな地図であるが、
別箇に設置されたボタンを押すと、PC で観覧時には web 版の Google Maps で再表示し、スマー
トフォンで観覧時には web 版 Google Maps か端末内臓の地図アプリで再表示できるような機能も
組み込んでいる。また、表示言語に関しては、私たちが実装した言語切り替え機能とは独立して、
利用者のシステム設定言語に応じて変化するようになっている。
ウェブページ用 Google ガジェット Pinpoint Weather Japan は天気予報を表示したい地域を指
定し、その地域の天気を当日の時間ごとの予報と 1 週間分の週間予報とで表示することができる。
ウェブページにこれを組み込む際は、利用したい条件に合わせた内容でコードを HTML などに追
記することで表示ができる。表示言語は基本的にはコード内で指定する必要があるが、私たちが実
装した言語切り替え機能が動作するようにコードを書き換えたことで、日本語表示と外国人向けの
ローマ字表示が可能となっている。
（※文責: 鳴海達朗）
2.3
課題の割り当て
システム班としては、前期で PHP やデータベースなど、Web サイト作成に関わる言語の習得を
中心に行い、後期ではサイトの構築や、データベースの作成、スマートフォン対応に比重を置いて
活動してきた。システム班の各メンバーの課題の割り当ては以下の通りである。
（※文責: 久保美沙希）
2.3.1
曽我知央
前期では主に、XAMPP を導入した PHP の習得、pgAdmin のサーバーがある MacOS 上の
Windows にアクセスし、サーバーをそうすることを課題とした。また、中間発表に向けて、言語
Group Report of 2012 SISP
-7-
Group Number 10-A
Hakodate’s sightseeing information site in multiple languages
グリッドを用いたサンプルプログラムの作成や、OSS セミナー（サーバー構築へかかわる演習）へ
の参加が割り当てられた。
中間発表後は、報告書の取りまとめ、大沼調査への参加、ホットペッパーとじゃらんの API を
使用したデータベースの作成、言語グリッドを使用し、データベースの中身を言語別に変換した新
たなデータベースの作成、定型文データベースの作成、PHP で雛形をもとにデータベースを呼び
出し、必要な分だけ表示させるようなソースコードの作成、グルメ・ジャンル別のソート、各階層
の連結、検索機能の設置を割り当てられた。
（※文責: 久保美沙希）
2.3.2
若林恭平
前期では主に、XAMPP を導入した PHP の習得、pgAdmin を使用したデータベースの学習、
JavaScript など、サイトの構築に関わる言語の習得を課題とした。また中間発表前には全体スラ
イドの流れを割り当てられた。
中間発表後は、第 2 階層の雛形の作成、大沼特設ページの情報の収集及び、情報収集のためのア
ポイントメント、大沼のページの雛形を用いたデータベースの作成、PHP を用い、データベース
から情報を呼び出しサイトを反映させる、天気、アクセスなどのコンテンツの提供、ブラウザごと
の文字化けの改善などが割り当てられた。
（※文責: 久保美沙希）
2.3.3
鳴海達朗
前期では主に、XAMPP を導入した PHP の習得、pgAdmin を使用したデータベースの学習
など、サイトの構築に関わる言語の習得を課題とした。また、中間発表前には、OSS セミナーへ
の参加、言語グリッドデモページ（一度格納した日本語のデータを多言語に翻訳して再格納するプ
ログラム）の作成を割り当てられた。
中間発表後は、PHP と SQL を用い、ホットペッパーやじゃらんの API からデータを必要な分
だけ取り出し格納するようなプログラムの作成、サーバーダウン時の対応、データベースと PHP
を用いた星評価の機能の実装、JavaScript と PHP を用いた Google マップとの連携機能、スマー
トフォンの対応（階層ごとのスマートフォン用のディレクトリを用意し、表示を最適化させる）な
どの仕事を割り当てられた。
（※文責: 久保美沙希）
2.3.4
柏谷美帆
前期では主に、XAMPP を導入した PHP の習得、pgAdmin を使用したデータベースの学習な
ど、サイトの構築に関わる言語の習得を課題とした。また、中間発表前には、システム班のポス
ターの作成及びポスターに使用する図や表の作成を割り当てられた。
中間発表後は、Adobe Dremaweaver を使用したトップページ雛形の作成、トップページの地図
のマウスオーバーの実装、各言語ごとのトップページの作成、データベースの固有名詞修正用の辞
Group Report of 2012 SISP
-8-
Group Number 10-A
Hakodate’s sightseeing information site in multiple languages
書ファイルの作成、最終発表のシステム班スライド及び全体スライドの取りまとめ、スライドに使
用する図の作成、システム班及び全体ポスターの作成を割り当てられた。
（※文責: 久保美沙希）
2.3.5
久保美沙希
前期では主に、XAMPP を導入した PHP の習得、pgAdmin を使用したデータベースの学習な
ど、サイトの構築に関わる言語の習得を課題とした。また、中間発表前は、全体のスライドのデザ
インや流れの統一化やポスター用の図の作成を割り当てられた。
中間発表後は、Adobe Dreamweaver を使用した第 3 階層の雛形の作成、サイトロゴの作成、各
言語ごとのトップページ画像の作成、各言語ごとのメニューアイコンの作成を課題とした。アイコ
ンに関してはトップメニュー、エリア選択のアイコン、ジャンル選択のアイコン、サブメニューの
デザイン、またそれぞれのアイコンごとに、日本語、英語、中国語 (簡体字、繁体字)、韓国語での
表示のバージョンなど多言語に対応したアイコンの作成を任せられた。その他、大沼特設ページの
雛形の作成、大沼までのアクセスを記した地図の作成、配色など、サイト全体のデザインの微調整
などを割り当てられた。
（※文責: 久保美沙希）
2.4
モックアップの作成
まず、外国人向けの多言語観光サイトを作るにあたって、作成前に Adobe Illustrator でモック
アップを作成した。作成前にモックアップを作ることによって完成後のイメージがしやすく、班員
の間での目標到達点を明確にすることが出来た。また、モックアップを作成する過程で、システム
開発を行う上での段取りや、作業分担、必要な知識などを確認することができ、これからシステム
開発をしていくにあたって効率のよい開発計画を立てることが出来た。
作成したモックアップは 3 種類で、それぞれ、トップページ・第 2 階層・第 3 階層のページの
モックアップである。
（※文責: 曽我知央）
2.4.1
トップページのモックアップ
図 2.1 はトップページのモックアップである。トップページでは、サイト使用者が使いやすいと
いうコンセプトの元に作成した。また、左上の言語切り替え機能は、国旗を選択することで言語切
り替えを出来るようにした。これはサイト利用者が一目見ただけで言語切り替えが出来るようにす
るためである。また、第 2 階層へのページも左側にわかりやすく設置することでよりユーザビリ
ティを向上させることを目指した。第 2 階層へのリンクに体験とあるのは、調査班からの要請によ
る。このモックアップを作成した時期、調査班では大沼調査を計画していたので、大沼の体験活動
に関係する情報を集めたページを作るという前提で設置に至った。また、サイト名はこの段階では
決めていなかったので、昨年度のプロジェクトの成果物である、口コミ情報サイト HAKO-NET
から引用して作成した。また、最初にこのサイトを訪れた人が函館の観光情報サイトだと人目で判
Group Report of 2012 SISP
-9-
Group Number 10-A
Hakodate’s sightseeing information site in multiple languages
図 2.1
トップページのモックアップ
断できるように、トップページには函館の画像 (モックアップの段階では夜景) を設置することに
した。
（※文責: 曽我知央）
2.4.2
第 2 階層のモックアップ
図 2.2 は第 2 階層のモックアップである。第 2 階層は多数の情報を扱うので、表示する情報を絞
ることによりユーザビリティを向上させようと考え作成した。左上の「グルメ」「宿」「観光」「体
験」はそれぞれのジャンルの第 2 階層ページへのリンクである。また、左側のバーでは第 2 階層の
ジャンルごとのカテゴリを選択することができ、その選択した内容によって情報をソートさせるこ
とが出来る。その下の検索はサイト内検索で、その下はさらに詳細なジャンルごとのソートが出来
るようにしようとして作成した。
（※文責: 曽我知央）
2.4.3
第 3 階層のモックアップ
図 2.3 は第 3 階層のモックアップである。詳細ページである第 3 階層は際と利用者がほしい情報
の取りこぼしがあってはならないので、多くの情報を扱いつつ利用者が見やすいレイアウトにする
ことを考え作成した。左上や左側のバーは第 2 階層と同じ使用にすることによって、同一の検索方
Group Report of 2012 SISP
- 10 -
Group Number 10-A
Hakodate’s sightseeing information site in multiple languages
Group Report of 2012 SISP
図 2.2
第 2 階層のモックアップ
図 2.3
第 3 階層のモックアップ
- 11 -
Group Number 10-A
Hakodate’s sightseeing information site in multiple languages
法を提示しユーザビリティを向上させようとした。
（※文責: 曽我知央）
Group Report of 2012 SISP
- 12 -
Group Number 10-A
Hakodate’s sightseeing information site in multiple languages
第3章
課題解決のプロセスの概要
1. PHP によるデータベース、JavaScript 等を組み込んだテストページ作成
解決過程：まずローカルサーバ等の開発環境をどうするかということから話し合った。事前
知識が無かったため、インターネットで調べたり担当教員に相談したりしながら検討したと
ころ、統合開発環境である XAMPP を使用することが決まった。次に PHP に対する理解を
深めるために、昨年度のソースコードを班員で分担して読んで不明な点などを各自で調べ、
ソースコードの要所ごとに説明などを付け加えたものをグループ内で共有し教えあうという
ことをした。これはグループ内での知識量の平均化を図り、後の学習や開発をより効率的に
行えるようにすることを目的としたものである。その後は学習担当を PHP、データベース、
JavaScript に分けて、それぞれの担当者が書籍などで調べたりしながら学習を進め、グルー
プ内で教えあったりしながら知識共有をすることで PHP、データベース、JavaScript の学
習を進めていった。また、学習したことを確かめながらそれぞれの担当に関するサンプルプ
ログラムの作成やそれぞれの技術を結合したプログラムの作成をすることにより基礎的な技
術の習得を図った。
2. OSS セミナーへの参加
解決過程：OSS セミナーの各回のテーマからグループ内で出席希望をとり、それぞれ分担さ
れた回に出席をした。このセミナーに参加し、講義と演習を受けることでサーバに関する実
践的な技術の習得をした。具体的にはサーバの基本的な設定や、リモートアクセスの活用、
インターネットへの接続方法、ログ管理、セキュリティ管理、障害管理、バックアップの方
法、各種コマンドの使い方などを学んだ。
3. 中間発表に向けた準備
解決過程：発表用のプレゼンテーション資料の作成担当、ポスターの作成担当、言語グリッ
ドのデモページの作成担当に作業を分担して準備にあたった。プレゼンテーション資料が完
成した後に調査班とシステム班が合同で発表練習を行った。発表日が近くなると担当教員に
レビューをいただき、最終調整を行っていった。
4. テストページへの言語グリッドの実装
解決過程：言語グリッドに接続するためのプログラムは昨年度の成果物を一部修正すること
により言語グリッドの仕様変更に対応させたものを使用した。その後、テスト用のデータ
ベースと PHP プログラムの作成を行った。このテストページは各言語で文字列を入力する
とそれがデータベースに格納され、表示する際には指定した言語に翻訳されたデータベース
内の文字列を表示するというものである。
5. web サイトのモックアップの作成
解決過程：調査班からの調査結果が得られる前に、システム班内でおおよそのコンテンツ
案や Web サイトのレイアウトなどを話し合った。それを基にしてデザイン担当の班員に
Adobe Illustrator を利用して完成イメージを作成してもらい、これをグループで共有して
目標を明確化させた。
6. 星評価の評価基準の決定
解決過程：昨年度の星評価の評価基準を基にして、グループで他にどんな項目が必要か、ど
Group Report of 2012 SISP
- 13 -
Group Number 10-A
Hakodate’s sightseeing information site in multiple languages
の項目は不要かなどについて、グルメ、ホテル、観光地それぞれに関して話し合った。
7. データベースの作成
解決過程：まずはサーバ上のデータベースにアクセスするために pgAdmin をインストール
した。その後、pgAdmin を利用してサーバ上に新規で空のデータベースを作成した。
8. データベースへの観光情報の挿入
解決過程：じゃらん、ホットペッパーから提供されているウェブ API を利用して観光情報
の取得を行った。具体的には、作成した PHP プログラムによりウェブ API の機能を使っ
て必要な情報を要求し、XML 形式で得られた情報群から名称や写真の URL などの文字列
を抽出してデータベースに格納するということを行った。
9. データベース内の翻訳
解決過程：ウェブ API により得られたデータベースに格納済みの情報は日本語であるため、
これらの情報を言語グリッドに通して英語、韓国語、中国語（簡体・繁体）に翻訳した。具
体的には、日本語の情報が格納されたデータベースから 1 行ずつ文字列を取り出し、言語グ
リッド上で指定した言語に翻訳させる。そして言語グリッドから返ってきた翻訳済みの文字
列を対応した言語用のデータベースに格納するという PHP プログラムの作成を行った。
10. Web サイトの雛形の作成
解決過程：事前に完成させていたモックアップを基にして、担当班員が Adobe Dreamweaver
を利用して主にデザイン部分などの Web サイトの枠組みをした。この際に並行して他の班
員で昨年度の成果物である Web サイト上で今年度作成したデータベースの内容が表示でき
るかのテストを行っていた。
11. コンテンツの実装
解決過程：完成した web サイトの雛形にコンテンツを実装した。具体的には、PHP プログ
ラムの実装や SQL によってレイアウトを調整しながらデータベースの内容を表示できるよ
うにした。また、言語切り替え機能や星評価機能の実装、Google Maps API を利用した地
図表示機能、PC で観覧した際には web 版 Google マップ、スマートフォンで観覧した場合
には web 版 Google マップまたは端末内臓の地図アプリで地図を再表示する機能などの実
装も行った。
12. 大沼特集ページ用のデータ収集
解決過程：大沼の観光情報サイトである「まるごと大沼」の管理者と連絡を取り、本プロ
ジェクトで作成する Web サイトに大沼の情報を掲載することに関しての企画書を作成、提
出することで大沼の観光情報の引用許可をいただいた。
13. 各種絞り込み、検索機能の実装
解決過程：SQL を使用して表示するデータベースの内容を絞り込めるようにした。10 件ず
つのページ制表示機能やジャンル別絞り込み機能、エリア別の検索機能、キーワード検索機
などを実装した。
14. 最終発表に向けた準備
解決過程：発表用のプレゼンテーション資料の作成担当、ポスターの作成担当、残った開発
の継続担当に作業を分担して準備にあたった。プレゼンテーション資料が完成した後に調査
班とシステム班が合同で発表練習を行った。発表日が近くなると担当教員にレビューをいた
だき、最終調整を行っていった。
15. コンテンツのレイアウト調整
解決過程：プログラムを実装していく過程で見つかったレイアウト崩れなどについて PHP
Group Report of 2012 SISP
- 14 -
Group Number 10-A
Hakodate’s sightseeing information site in multiple languages
と CSS の記述を修正し、レイアウトの調整を行った。
16. PC 用サイトの実機テスト
解決過程：Windows、Mac の各種ブラウザにて表示テストを行った。ここで見つかった問
題に関しては適宜修正を行った。
17. スマートフォン用ページの作成
解決過程：スマートフォン用ページを作成するにあたって、まずはユーザの使用端末が PC
かスマートフォンかを判別するための機能を実装した。方法としては各階層の PHP プログ
ラム内で UserAgent を判別できるようにし、使用端末がスマートフォンだった場合には専
用ページに移動させるようにした。スマートフォン用のページは各階層にそれぞれ用意され
ており、これらは PC 用サイトのソースコードを基にするものである。作成手順に関して
は、PC 用サイトで画像データを用いて作成されていたメニュー部分をプルダウン式に変更
するなどしてコンテンツの縮小を図った。次に、コンテンツが縮小されたページの表示幅や
各項目の表示倍率を調整するために、横幅の設定をスマートフォンの画面解像度に対する倍
率に変更した。これらの作業を全階層の前ページに関して同様に行った。
18. スマートフォン用ページのレイアウト調整
解決過程：プログラムを実装していく過程で見つかったレイアウト崩れなどについて PHP
と CSS の記述を修正し、レイアウトの調整を行った。
19. スマートフォン用サイトの実機テスト
解決過程：Android、iOS、Windows Phone 7 の 3 つの OS のスマートフォン、数種類の
解像度の端末計 8 台での表示テストを行った。ここで見つかった問題に関しては適宜修正を
行った。
（※文責: 鳴海達朗）
3.1
Web サイトの階層概要
今回作成した Web サイトはトップページ、第 2 階層（グルメ情報ページ、ホテル情報ペー
ジ、観光地情報ページ、エリア別情報ページ）、第 3 階層（詳細情報ページ）から構成され
ており、これとは別に大沼特集ページが設けられている。
まずトップページであるが、ここでは主に国旗アイコンの選択による表示言語の切り替え、
任意のボタンを押すことでのグルメ情報ページへのリンク、ホテル情報ページへのリンク、
観光地情報ページへのリンク、大沼特集ページへのリンクが可能となっている。また、任意
のエリアを選択できるようになっている地図からのエリア別の情報ページへのリンクも可能
となっている。
次に第 2 階層であるが、グルメ情報、ホテル情報、観光地情報、エリア別情報ともに同じ造
りになっている。ここでは写真と名称、住所、キャッチコピーといった情報が 10 件ずつの
ページ制で表示されており、それぞれの情報について第 3 階層の詳細情報ページへのリンク
が可能となっている。また、メニューバーが設置されており、そこにはジャンル別絞り込み
機能やエリア別の検索機能、キーワード検索機能なども備えている。上部のタブからグルメ
情報ページへのリンク、ホテル情報ページへのリンク、観光地情報ページへのリンクも可能
となっている。
詳細情報ページである第 3 階層もグルメ情報、ホテル情報、観光地情報ともに同じ造りに
Group Report of 2012 SISP
- 15 -
Group Number 10-A
Hakodate’s sightseeing information site in multiple languages
なっている。この階層では写真と名称、星評価の表示・送信機能、紹介文章、住所や営業時
間等の情報、Google Maps API の地図表示による位置情報などが掲載されている。地図は
web 版 Google Maps での再表示も可能となっており、スマートフォンで観覧した場合は端
末内臓の地図アプリでの再表示が可能となっている。また、第 2 階層同様にメニューバーが
設置されており、そこにはジャンル別絞り込み機能やエリア別の検索機能、キーワード検索
機能なども備えている。上部のタブからグルメ情報ページへのリンク、ホテル情報ページへ
のリンク、観光地情報ページへのリンクも可能となっている。いずれの機能も第 2 階層に戻
るようになっている。
最後に大沼特集ページであるが、大沼特集ページは 2 階層で構成されており、第 1 階層で
は大沼のグルメ情報、ホテル情報、体験情報、アクセス情報のページへのリンクが可能であ
る。また、天気や函館から大沼までの地図も掲載されている。第 2 階層では大沼のグルメ情
報、ホテル情報、体験情報それぞれに関して、写真と名称、住所等の情報が掲載されている。
アクセス情報のページでは大沼へ行くための交通機関の情報等が掲載されている。
またスマートフォン用ページは、PC 用ページでは画像データで作られていたメニュ―バー
がプルダウン式のメニューに変更されていたり、コンテンツが縮小されていたりと全体の表
示最適化に伴うレイアウトの違いなどはあるが、階層構造は PC 用サイトと共通のものと
なっている。
（※文責: 鳴海達朗）
Group Report of 2012 SISP
- 16 -
Group Number 10-A
Hakodate’s sightseeing information site in multiple languages
第4章
4.1
課題解決のプロセスの詳細
各人の課題の概要とプロジェクト内における位置づけ
曽我知央の担当課題は以下のとおりである。
5月
開発環境の構築と PHP の学習。
6月
OSS セミナーの受講、PHP・データベースの学習。
7月
言語グリッドのデモ用プログラムの開発。
10 月 サイト用のデータベースの作成。
11∼12 月 サイトの原型を作成。また、原型に手直しを加えた。
若林恭平の担当課題は以下のとおりである。
5月
開発環境の構築と PHP の学習。
6月
PHP・JavaScript の学習。
7月
システム班の中間発表用プレゼンテーション資料の作成。
10 月 第 2 階層のフレームワーク。
11∼12 月 大沼公園サイト用のデータベースの作成、サイトの反映。
鳴海達朗の担当課題は以下のとおりである。
5月
開発環境の構築と PHP の学習。
6月
OSS セミナーの受講、PHP・データベースの学習。
7月
開発環境の見直し、言語グリッドのデモ用プログラムの開発。
10 月 サイト用のデータベース、API 用・翻訳用プログラムの作成。
11∼12 月 コンテンツ実装、レイアウト調整、スマートフォン用ページの作成。
柏谷美帆の担当課題は以下のとおりである。
5月
開発環境の構築と PHP の学習。
6月
PHP・データベースの学習。
7月
システム班の中間発表用ポスターの作成。
10 月 トップページのデザイン作成。
11∼12 月 固有名詞の翻訳データベース、プロジェクトポスター、システム班ポスター、プレゼ
ンスライド作成。
久保美沙希の担当課題は以下のとおりである。
5月
開発環境の構築と PHP の学習。
6月
PHP・JavaScript の学習。
7月
中間発表用プレゼンテーション資料・ポスターのデザイン、Web ページのモックアップの
作成。
10 月 ストリートボード、アイコンなど各種画像の作成。
Group Report of 2012 SISP
- 17 -
Group Number 10-A
Hakodate’s sightseeing information site in multiple languages
11∼12 月 大沼特集ページに組み込むコンテンツの提案、各種画像の作成。
（※文責: 鳴海達朗）
担当課題解決過程の詳細
4.2
4.2.1
5月
曽我知央
観光情報サイトを作成するに当たって、昨年度の成果物である観光情報サイトを利用して学
習することにした。そのためには、PHP とデータベースの知識、そして言語グリッドの知
識が必要であることがわかった。まず、PHP の開発環境には XAMPP を利用し、PHP と
データベースについて書籍などを用いて学習をするとともに、数種類のサンプルプログラ
ムの作成により技術習得を行った。そして、昨年度の観光情報サイトの PHP で記述された
ソースコードを読み取ることで私たちが作ろうとしている観光情報サイトのイメージをつか
むことができた。
その後、システム班のメンバーを担当ごとに割り振って更なる理解を図った。担当は、PHP、
データベース、JavaScript の 3 つにわけてメンバーが各自、理解を深めつつ学習した内容を
共有できるようにした。私は PHP とデータベースを担当し、他の PHP とデータベースを
学習している班員との情報共有に努めた。
6月
OSS セミナーに参加し、サーバ構築に関する演習を行うことでサーバに関する基礎的な技
術の習得をした。また、PHP とデータベースを関連させたプログラム作成練習により理解
度の向上を図った。
6 月の後半より、中間発表に向けた言語グリッドのデモプログラムの作成に着手した。構想
としては、入力フォームに入力した言語を指定した言語に翻訳して表示するというもので
あった。それに伴って、入力した言語を保存しておくデータベースの作成が必要となったた
め、XAMPP のパッケージに含まれている、MySQL を用いてデータベースを作成すると
いったことを行った。
7月
中間発表に使用する言語グリッドのデモ用に、データベースの構築、PHP によるプログラ
ムの作成を行った。その過程で PEAR に関する知識を習得した。
その後、昨年度のサーバにアクセスして開発をする際に、XAMPP のバージョンが昨年度
の開発環境と合わないと開発ができないという問題が起こったため、急遽、メンバー全員に
インストールされている XAMPP のバージョンを下げるということを行った。また、サー
バにアクセスして開発を行うために pgAdmin をダウンロードし、サーバにアクセスできる
ようにした。
10 月 まず、システム班全体で調査班から調査結果が上がってくる前の基本となるサイトの原案
について話し合って決めた。そこでは、昨年度の成果物の観光情報サイトを原型として新た
なコンテンツを埋め込んだよりユーザが使いやすいシステムの開発を目標とした。
また原案を元に、私たちが作成しようとしているサイトのモックアップを作成した。具体的
には、トップページと第 2 階層、第 3 階層のモックアップを班員に作成してもらってそれを
全員で共有した。
同時に、ホットペッパーとじゃらんの API と昨年度のデータベース使用して今年度のサイ
ト用のデータベースの作成した。また、作成したデータベースの中身を言語グリッドを使用
して、英語・韓国語・中国語 (簡体字)・中国語 (繁体字) に変換して新たなデータベースを
Group Report of 2012 SISP
- 18 -
Group Number 10-A
Hakodate’s sightseeing information site in multiple languages
作成した。
その後、モックアップのようなサイトになるように向けてまずは、昨年度のサイトをローカ
ル環境で今年度のデータベースの内容を呼び出せるようにした。そのための SQL 文を昨年
度のサイトのソースから引用し、今年度のサイトにあわせて変更して使用した。それと平行
して、班員にサイトの雛形となるものを Adobe Dreamweaver と Adobe Illustrator で作成
してもらった。
また、サーバの場所と自分のパソコンからサーバにリモートでアクセスできる環境を整え、
最終的に作成したサイトをサーバにアップできるようにした。
11∼12 月 班員が作成したサイトのフレームワークを元にサイトの原型を作成した。具体的に
は、10 月に昨年度のサイト上で今年度のデータベースの内容を呼び出せるようになってい
たので、Adobe Dreamweaver で作成した雛形に、データベースに接続してデータベースの
中身を呼び出す SQL 文を追加し、それを必要な情報だけに絞ってサイトに表示するように
した。接続するデータベースと表示する情報は階層や扱っている情報ごとに変更した。
具体的に説明すると、最初に作成したのは第 2 階層のグルメ情報のページである。グルメ情
報のデータベースから店名や住所、営業時間などの情報を選択してデータベースから呼び出
して表示させた。第 2 階層はグルメに関する情報のすべてを扱っているので、if 文や for 文
を用いて全 201 件のデータを 10 件ずつ表示するようにした。そのようなページをホテルと
観光情報ごとに作成した。また、グルメ、ホテル、観光情報の第 2 階層をエリア別に集約し
てエリア別検索のページを作成した。このエリア別検索のページを元に各第 2 階層のページ
にエリアごとのソートができるようにした。またグルメ情報のみ、グルメジャンル別のソー
トを可能にする SQL 文を作成した。これは、グルメ情報が扱っているデータ数が他の第 2
階層のページより多いため利用者に配慮した結果である。
同様に第 3 階層のページも作成した。第 3 階層は各ジャンルごとの店やホテルの詳細情報
を扱っているので、データベースから呼び出すデータをより多くした。ただし、私が担当し
た部分ではあまり、細部まで行わなかったので、レイアウトや星評価リンク等は他の班員に
任せた。
これらの作成したページとトップページを相互に行き来できるようにつなげた。そのときに
各ページにトップページでユーザが選択した言語の情報を維持する必要があるので、各種
ソートの情報とともに各ページへのリンク情報に付加して飛ばせるようにした。
その後、各ページにサイト内検索を実装した。具体的には、入力フォーラムに打ち込まれた
文章を元にデータベース内を検索し、その条件に合っているものを結果として返すプログラ
ムを作成した。また、それとは別にサイト内で画像が元々データベースにない場合に、「No
image」という画像が表示されるようにした。
以上のことを、まず、ローカルで作成し Windows のリモートデスクトップ接続を用いて
サーバ上にアップし、未来大学の学内ネットワーク上で閲覧が可能になるようにした。
また、ユーザ評価担当者が得たフィードバックから、店名やホテル名等の固有名詞が正しく
翻訳されていないということが分かったので、それに対応するために店名などの情報は日本
語以外はすべてローマ字で作成することにした。日本語のデータベースを参照しローマ字に
直す作業を他の班員が行った後、そのローマ字の固有名詞データをサーバにアップデートす
る作業を行った。
（※文責: 曽我知央）
Group Report of 2012 SISP
- 19 -
Group Number 10-A
Hakodate’s sightseeing information site in multiple languages
4.2.2
5月
若林恭平
開発環境には XAMPP を利用し、PHP とデータベースについて書籍などを用いて学習をす
るとともに、数種類のサンプルプログラムの作成により技術習得を行った。XAMPP の導
入にあたって、対応している SQL のデータベース管理ツールを探した。結果的に pgAdmin
をインストールし、簡単な PHP を編集して、動作を確認した。プロジェクト全体としては
「どのようなものをつくるか」を中心に話し合った。その意見の中で「もの」としてどのよ
うなものをつくるかという意見や外部公開についての議論がなされた。最初はアプリを作る
という意見もあったが、現代のスマートフォンの普及率や、アプリである必要性などという
ことや、どこでどのように提供するのかが明確ではなかったので、批判的な意見を述べた。
外部公開に関しては結果的にのちのち考えることになったが、みんなで意見を言う場では積
極的に発言し、せっかく作ったサイトを去年みたいに学内のみで終わらせてはもったいない
という考えもあったので、外部公開に賛成した。また、議論全体として、他社の意見も取り
入れながら参加していた。そして、全体の進行状況をいつでも確認できるようにサイボウズ
Live という情報共有サイトを利用することにした。
6月
大方のプロジェクトの方向性が決まったところで、実際のサイト作りのための勉強を開始し
た。まず、担当分野を完全に分離するという事になったので、JavaScript、PHP、データ
ベースの SQL などと分け、自分は JavaScript について書籍などを用いて学習をするととも
に、数種類のサンプルプログラムの作成により技術習得を行った。サンプルプログラムに関
しては、情報ライブラリーや去年のプロジェクトで使用した教本を利用した。また、PHP
と JavaScript を関連させたプログラム作成練習により理解度の向上を図った。また、前年
度のプロジェクト成果である観光サイト「HAKONET」のソースコードをもらい、システ
ム斑のメンバーで分担して解読することにした。そこで分かる部分だけ解読して、そのソー
スがどのページでどのような動作をしているのかを調べた。そこで、解読した部分をグルー
プで共有しあって間違っている部分、合っている部分を指摘し合い、理解を深めた。斑員の
解読した部分も意見したりしながら、前年度のプロジェクトの観光サイトがどのように作成
されたのかを概ね理解し、これからのシステム開発の参考にした。また、調査班の調査計画
も把握し、必要な情報を共有しつつ、プロジェクト全体で話し合いを進めた。
7月
観光サイト作成のための勉強をしながらも、中間成果の発表の時期が来たため、勉強と並行
しながら中間成果発表の準備も始めた。システム斑としては、言語グリッドというシステム
を理解してもらうために、言語グリッドを用いた翻訳システムを作り、それを中間発表とし
た。自分は主にシステム班の中間発表用プレゼンテーション資料の作成を行った。その中間
発表で発表するために、班員が作った言語グリッドの翻訳システムを使用して、言語グリッ
ドについての理解を深めた。その言語グリッドシステムを用いた発表の練習も行った。スラ
イドの作成について、まず、背景から目的、現状などをまとめ、システム斑と調査班の流れ
を意識しながらスライドを作成した。システム斑のスライドも斑員と相談しながらまとめあ
げ、全体のスライドも流れよく、担当教員や斑員に指摘してもらいながら作成した。後半で
は、夏休み中の計画と今後の展望について話し合いを行った。夏休みの後半での集まりには
参加できなかったが、その場では後期の役割を決めるという内容だったのでその役割を把握
し、後期からの準備がスムーズに行えるようにした。
10 月 夏休み後半に決めた、班員とディスカッションをしながら第 2 階層のサイトの雛形を作成。
そのフレームワークに付け加えるコンテンツの概要を決めた。また、調査班からの調査結果
Group Report of 2012 SISP
- 20 -
Group Number 10-A
Hakodate’s sightseeing information site in multiple languages
をグラフ化したもの共有し、その調査分析を行い、宿泊施設、飲食店、観光地、天気や交通
などのニーズが高かったことから、宿泊施設、飲食店、観光地のデータを Web サイト「じゃ
らん」や「ホットペッパー」の API を利用し pgAdmin で管理しているデータベースに格
納した。このデータベースに関しては去年作っていたものを利用したものもあるがそのあた
りは必要な情報だけ重視したので、結果的に再アップデートしたものである。交通のアクセ
スについても同様に、Web サイト「じゃらん」「ホットペッパー」の API の情報を利用し
た。また、天気の対応として、Google のフリーのブログパーツを用いてサイトに反映する
ことにした。この天気のコンテンツについて、選ぶポイントとしてはまず、文字や画像の見
やすさ、次にどの言語にするのか、最後にレイアウトがきちんと収まるようなサイズである
こと、というこれらの事柄を考えた。これらを総合した結果、函館のサイトのジャンル、エ
リア検索の箇所に設置、大沼のサイトの画像に見合うだけの大きさのブログパーツを選ぶ事
が出来た。言語は世界共通語である英語を取り入れた。その他の細かいコンテンツ提案も行
い、できるだけユーザーが満足のいくシステム作りをしていきたいと考えた。そして、シス
テムのバックアップのために、主にサイボウズ Live を利用したが、オンラインストレージ
である、Microsoft SkyDrive、Dropbox なども用いて、万が一データの消去が起こった場
合に対応出来るようにした。去年の成果物は Dropbox に入れており、いつでも参考に出来
るようにした。
11∼12 月 急遽、大沼公園の特集サイトを別枠としてつくるということになったので、デザイン
コースの斑員と相談し、全体のイメージを固め、モックアップを作成した。主に大沼公園
のサイトの反映と情報収集を担当した。まず、大沼公園のデータが「じゃらん」と「ホット
ペッパー」にはなかったので、データ収集から始めた。具体的には「まるごと大沼」という
観光サイトのサイト管理者に連絡し、飲食、温泉、娯楽施設のデータの引用をさせてもらっ
た。そのデータを一度まとめ、それをデータベースに格納した。それを PHP を用いてデー
タベースからサイトに反映させた。その他にも天気や交通などのコンテンツ実装も行い、大
沼観光サイトが完成した。その大沼観光サイトを班員が作った函館の観光サイトとリンクし
て全体の観光サイト完成した。
（※文責: 若林恭平）
4.2.3
5月
鳴海達朗
目標とする観光情報サイトを作るために、基礎となる部分から準備を始めた。まずは開発環
境についての話し合いに始まったが、事前知識が無かったため、インターネットで調べたり
担当教員に相談したりしながら検討したところ、統合開発環境である XAMPP を使用する
ことが決まった。このインストール作業は基本的には各自で作業となったが、グループで集
まっての勉強会なども行った。次に PHP とデータベース、JavaScript について担当を分担
し、それぞれの担当部分に関して書籍などを用いて調べながら基礎的な部分を学習した。そ
れらの内容を班員で共有し合ったり、サンプルプログラムの作成をしたりすることで、グ
ループ内での知識の補足のし合いと基礎的な技術習得を行った。
また、昨年度のソースコードを班員で分担して読んで不明な点を調べ、要所ごとに説明など
を付け加えたものをグループ内で共有し教えあうということをした。これはグループ内で
の知識量の平均化を図り、より効率的な開発を行えるようにすることを目的としたもので
ある。
Group Report of 2012 SISP
- 21 -
Group Number 10-A
Hakodate’s sightseeing information site in multiple languages
6月
グループ、個人での PHP やデータベースに関する学習は前月から継続しているが、これと
は別にプロジェクト活動時間内に開催された OSS セミナーに参加し、サーバ構築に関する
講義を受け、演習を行うことでサーバに関する基礎的な技術の習得をした。具体的にはサー
バの基本的な設定や、リモートアクセスの活用、インターネットへの接続方法、ログ管理、
セキュリティ管理、障害管理、バックアップの方法、各種コマンドの使い方などを学んだ。
また、前月から継続している学習に関しては、PHP 上でデータベースを扱うようなプログ
ラムの作成練習をし、不明点などはグループ内で補い合うことで Web サイト作成のための
理解を深めた。
OSS セミナーで得た知識は、サーバの構築や調整といった作業をする際に役立ち、後の開発
の基盤作りに貢献することができた。また、プログラム作成練習も言語グリッドを組み込ん
だプログラムを作るためのベース作りとして位置づけ、中間成果物や実際の Web サイトを
作成するための土台となった。
7月
中間発表に使用する言語グリッドのデモ用として、データベースの構築、PHP によるプロ
グラムの作成を行った。このデモは各言語で文字列を入力するとそれがデータベースに格納
され、表示する際には指定した言語に翻訳されたデータベース内の文字列を表示するという
ものである。またその過程で開発環境に依存した言語グリッドとの接続エラーが発生し、一
時的に作業ができなくなった。そのエラー解消のため、開発環境の見直しと言語グリッドと
接続部分のプログラムの修正を行った。
10 月 まずはシステム班内でおおよそのコンテンツ概要やデザインについてなどを話し合った。
トップページ、第 2 階層、第 3 階層それぞれのデザインとコンテンツ案をまとめ、班員に
モックアップを作成してもらった。そのモックアップを班内で共有し、明確な目標を定めて
作業分担を行った。
私は web サイトの基盤となるデータベースの作成をした。ここで作成したデータベースは、
じゃらん、ホットペッパーの API を利用して取得した店舗情報や観光情報、サイト上に表
示する文字列などを格納するために利用した。同時に API で取得したデータをデータベー
スに格納するための PHP も作成した。また、データベースに格納した情報を言語グリッド
を通して英語、韓国語、中国語（簡体、繁体）に翻訳し、それぞれの言語用データベースに
再格納するための PHP の作成も行った。
その後、班員に Adobe Dreamweaver にて Web サイトの雛形を作成してもらっている間
に、昨年度の Web サイトを基にして SQL 文を今年度のデータベースと対応させることで
データベースの内容が正常に表示されるかのテストを行った。また学内ネットワーク上に存
在するサーバへのアクセスの利便性を向上させるためにリモートデスクトップ接続するため
の環境を整えた。
11∼12 月 班員が Adobe Dreamweaver にて作成した web サイトの雛形に PHP のプログラム
を組み込み、コンテンツの実装を行った。昨年度の成果物である web サイト上に今年度作
成したデータベースを表示することはできていたので、作成された雛形にあわせて PHP を
組み込むことで対応させた。
私は観光地などの場所を Google Maps API を使って地図上に表示する部分や星評価機能の
実装を担当した。Google Maps は JavaScript で実装し、データベースに格納された座標情
報から地図上にポインティングするようにした。またスマートフォンで観覧した際に、地図
の下部にあるボタンを押すと端末に内蔵の地図アプリが起動するようにし、観光客の利便性
を向上できるような作りにしてある。
Group Report of 2012 SISP
- 22 -
Group Number 10-A
Hakodate’s sightseeing information site in multiple languages
また、星評価はユーザがお店などを 5 項目について星評価できるような機能であるが、これ
はユーザにより送信された点数をデータベースに蓄積し、その合計から平均点を算出して対
応した個数分の星の画像を観光地詳細情報ページに表示するという仕組みである。これらの
機能を実装する際に合わせて細かいレイアウト修正なども行った。
最後に今年度からの新機能であるスマートフォン用サイトの構築を行った。すべての階層に
おいて PHP で UserAgent から使用端末を判別できるようにし、使用端末がスマートフォ
ンだった場合には専用ページが表示されるようにした。専用ページは PC 用ページで画像
だったメニュー部分などをプルダウン方式にして簡素化し、主に HTML タグでの表示倍率
の調整や画面解像度に対するコンテンツ幅の調整などで最適化を図った。作業日数の関係上
CSS での更なる調整はできなかったため、端末によっては表示が崩れる場合があるという
問題が残っている。
スマートフォン用ページの作成と並行して実機での表示テストも行った。使用した端末の
OS は Android、iOS、Windows Phone 7 で、それぞれの OS について数種類の解像度の違
う端末を使用した。その結果、Android の一部端末と iOS 端末で表示倍率に問題が見られ
たが、端末のピンチイン機能で一時的に対応してある。
（※文責: 鳴海達朗）
4.2.4
5月
柏谷美帆
プロジェクトが始まってすぐに、昨年度の成果物のプログラムを班員で分担し読み解くとい
う作業を行った。それぞれがどのようなプログラムが書いてあるかを勉強し、それを班員の
前で発表して理解を深める目的である。その勉強会と、これから作る成果物の内容などを踏
まえて、XAMPP を用いて主に PHP を使って成果物を作成することとした。開発環境が
XAMPP であることが決まっていたので、まずはシステム班全員で XAMPP のインストー
ルと基本的な使い方の勉強会を行い、理解を深めた。インストールや初期設定に少し手間
取ってしまったが、班員に教えてもらいながらそれらの作業を終えることができた。また、
数種類のサンプルプログラムを作成・実行し、技術習得を行った。各自でライブラリーで関
連図書を借りて勉強したり、班員同士でわからないところを解決し合うなどして、基本的な
使い方や PHP についても勉強することができた。私は XAMPP にも PHP にも触れたこ
とがなかったが、班員とともに作業することで無事インストールができたり、基本的な知識
を得ることができた。特に、このような分野に長けた班員がいて、持っている知識を積極的
に他のメンバーに教えてくれたので、とても助かった。本などを用いた自主学習でも、すで
に知識を持っている班員に遅れを取っていたので勉強量が多く大変に思ったが、関連のある
データベースについて書いてある簡単な本を見つけたので、その本から読み進め、PHP や
XAMPP の学習も進めた。HTML は過去に使用したことがあったので、PHP などに比べ
ると前提知識が会ったので、それほど勉強には苦労しなかった。やはり、今まで触れたこと
のないデータベースや PHP、XAMPP の使用方法などに苦労した。しかし、これらの作業
が後に効率的に作業を進めることの手助けとなったので、ここで努力してよかったと感じて
いる。また、システム班としての年間スケジュールを立て、最終発表に向けてどのような作
業をし、いつまでにタスクを処理する、といったような細かい目標を決めることで作業の効
率化や管理を行うこととした。プロジェクトが始まった段階から、様々なことにおいて協力
的に作業をすすめることができたので、よかったと思う。しかし、この時点でまだプロジェ
Group Report of 2012 SISP
- 23 -
Group Number 10-A
Hakodate’s sightseeing information site in multiple languages
クト学習がどのようなものかわからなかったので、スケジュール管理もどのように行なっ
ていいかわからない部分もあり、少しスケジュール管理にも時間を要してしまった気もす
る。先生方からもスケジュール管理は重要だし、ひとつひとつのタスクを終えるごとに適宜
行ったほうがよいとのアドバイスを受けていたので、それに習ってわからないなりにもスケ
ジュール管理をするという作業に移ったことはよかったと感じている。
6月
本プロジェクトの成果物であるホームページにはデータベースを使うことが決まっていたの
で、５月に行った XAMPP を用いた PHP の技術習得に加え、データベースを関連付けて
プログラムの理解度の向上を図った。データベース自体についても関連図書や関連ページを
読んで各自で勉強を進めた。去年の成果物である観光サイトのプログラムの一部を皆で読み
解いたり、お互いのわからないところを教えあったりして、着実に知識の向上ができたと思
う。PHP についても、簡単なサンプルプログラムから少し複雑なサンプルプログラムを用
いて勉強することで、すこしずつではあったが PHP でプログラムを作るという作業に慣れ
ることができたと感じている。他の班員はプログラムもよくできる、PHP についても自分
で勉強を進めてどんどん複雑で実践的なプログラムを作っていたので、遅れを取っているよ
うにも思えた。しかし、基礎的な知識がなければ複雑なものなど作れないと思い、すこしず
つ着実に勉強を進めた。他の班員も自分の作業や勉強がある中で、私が困っていたり勉強に
つまずいているようだと声をかけてくれ、時間をかけて教えてくれたので、班員の手助けも
あって着実に勉強を進めることができたし、知識をみにつけることもできた。また、調査班
や担当の教員とともに、大沼へ視察に訪れた。これは、今年の成果物の観光サイトでは、大
沼への新幹線延伸にともなって、JR 北海道と連携して大沼の観光を発展させる活動を行う
ためである。結果、具体的には成果物の観光サイトに大沼特集ページを設置することとなっ
たが、この大沼特集ページを作るにあたり、大沼のことについて観光センターの方などにお
話を伺ったりすることで、実際にイメージをつかむことができた。システム班が調査班の活
動に携わったのは実質この１件のみだが、システム班としてはこの活動はユーザやサービス
依頼者の話を直接伺うといった意味では貴重な経験となった。プロジェクトが始まって１ヶ
月少しが経った時ではあったが、まだ初期段階だったことあり、具体的なゴールや目的など
が少し曖昧であったかもしれない。しかし、この大沼への視察で、サービス依頼者である
JR 北海道と大沼の方は、どのようなサービス・成果物を私達に期待していて、その成果物
によってどのような結果を私達に期待しているのかを直接ひしひしと感じることができた。
今までわかっていたつもりであった成果物の完成形や内容、成果物に込められる私達班員・
メンバー以外の思いなどを知ることで、またこれからのプロジェクト活動におけるモチベー
ションの向上にもつながった。また、OSS セミナーに出席し、講義や演習を経験して技術
習得を行った班員から情報共有をしてもらいサーバ構築や PHP のプログラミングについて
学ぶことができた。OSS セミナーでは、講義を受けた後に演習を用いて実践的にプログラ
ムを作成し、わからないところは一緒に参加した班員や、TA の方などに聞くことができた
ので、内容の深いものを早いスピードで身につけることができたと感じている。OSS セミ
ナーで他のプロジェクトのメンバーの真面目な姿や、私たちの勉強ではまだまだ足りず、不
十分であることも感じたので、ここからまた一念発起してより勉強に取り組むことができ
た。５月よりさらに実践的で内容の濃い活動が多かったため、よりやる気が出たし、作りた
いものの理想像を描くことができた。理想を持つことで、今の私に足りないものは何かとい
うことに直面し現実的に考えることでより勉強に励むことができ、班員同士で刺激し合うこ
ともできた。
Group Report of 2012 SISP
- 24 -
Group Number 10-A
Hakodate’s sightseeing information site in multiple languages
7月
主に、システム班の中間発表用ポスターの作成を行った。システム班の中間発表スライドの
内容にそって、シンプルかつ見やすいポスター作成を心がけた。担当の教員に何度か添削を
していただき、よりよいポスターを作ろうと努力した。初めての Adobe Illustrator の使用、
発表ポスターの作成だったため、戸惑うことやわからないことも多かった。私は知能システ
ムコースに所属しているので、Adobe Illustrator を使用したことが全くなく、デザインコー
スの班員に教えてもらいながらの作業となった。結果として、Adobe Illustrator の使い方
を学ぶとともに、発表ポスターをいかに見やすく、伝えやすいものを作成するかということ
も実際に作りながら学ぶことができたので、これもまたひとつ私にとって大きな収穫となっ
た。反省点としては、担当の教員に指導・添削を受ける時期が、発表の数日前であったため、
余裕を持って修正、さらに添削を受けることができず、慌ただしい作業となってしまったこ
とが挙げられる。発表の数日前に、リーダーに担当教員から指導・添削を仰ぐようにと指示
があったのでこのように慌ただしくなってしまったが、自分で作業しながら、担当教員から
指示や添削を仰がなくていいのか、班員やメンバーには確認してもらわなくていいのか、な
どは十分に予想できたことなので、自分のタスクに追われるだけでなく、視野を広く持って
柔軟に作業できればもっとよかったと思った。私は、他の班員のタスクがどれくらい進んで
いるのか、どこにつまずいているのかなどを適宜確認し、私が出せるアドバイスを伝えるな
どして、班員のタスクを少しでも手伝うことができたかと思っている。７月はすでに調査班
とシステム版で場所を別に設けて作業していたので、システム班の班員には十分に私が作成
したポスターについてアドバイスや指摘をしてもらっていたが、調査班の班員にはそれらを
してもらっていなかった。もちろん、システム班の中間発表用ポスターではあるのだが、同
じプロジェクトとして、ポスターのアドバイスや指導を受けても良かったのではないかと今
振り返って思っている。中間発表を聞いていただいた方に記入していただいたフィードバッ
クを見ると、発表用スライドやポスターについてもいくつかのコメントが寄せられていた。
私がひとりで作成したポスターを、システム班の班員４名と担当教員１名に確認してもらっ
たので、発表会前にポスターを事前に見た人は６名であった。しかし、発表を聞いてくださ
る方はもちろんそれ以上いて、聞いてくださる方ひとりひとりポスターや発表内容、発表の
仕方に思うことも異なるだろう。ということを考えて、もっと目先のことを考えて、内向的
にならず、もっと外に、先に目を向けてできるだけ反省点のないような作業をしていきたい
と感じた。主な活動はシステム班の中間発表用ポスターの作成だったが、他には、余った時
間で発表用スライドのデザインや内容にアドバイスや意見を主張し、担当の班員と一緒に作
業をしたり、当時他の班員によって作成されていた言語グリッドのデモページに発表を聞く
立場として意見を出したりなどしていた。この時期は中間発表前で忙しかったが、班員同士
協力し合い、それぞれがなにをするべきかを把握し、時には班員同士でアドバイスなども出
し合いながら、よい雰囲気とモチベーションの中で活動することができたと感じている。
10 月 本格的なホームページ作成が始まるため、システム班でコンテンツ案の洗い出しを行った。
前期にもコンテンツ案は出していたので、調査班の調査内容やシステム班での話し合いの意
見を反映し、より実用性のある案を洗い出した。班員が作ってくれたホームページのモック
アップに沿って、トップページのデザインを行った。また、AdobeDreamweaver を用いて
トップページのフレームワークを作成し、マウスオン時のアクションなども搭載した。前期
に班員でだしたとコンテンツ案と、調査班により調査内容を配慮した新たなコンテンツ案と
では、やはりあらゆる面において違いが出てきたので、前期と後期のコンテンツ案を比較し
ながら改めて考えなおしたのは良かった。プロジェクト開始時の目標や入れたいコンテン
Group Report of 2012 SISP
- 25 -
Group Number 10-A
Hakodate’s sightseeing information site in multiple languages
ツを忘れずによりニーズのあるコンテンツの意見を出すことができたと感じるからである。
Adobe Illustrator と同じく、AdobeDreamweaver の使用も初めてだったため、こちらも少
し技術習得に時間をとられてしまった。デザインコースの班員に教えてもらいながらの作業
となったが、もう少し自己学習の時間をとって自発的に作業するべきだったと思う。また、
モックアップの時点からトップページのデザインについて意見したい点があったが発言する
ことができず今に至るので、コンテンツ案洗い出しやモックアップ作成の時点でも班員同士
の意見交換の場を設ければよかったと思う。モックアップは大方作成が終了した時点で班員
に確認や意見を募っていたし、コンテンツ案洗い出しの場面でもあまり自分の意見を主張す
ることができなかった。他の班員もそれぞれの得意分野で知識を持っているし、反論される
だろうとネガティブになってしまい意見することができなかったのだが、自分でも何か得意
分野を持って、自信を持って意見を主張することが出来ればよかったと思う。コンテンツ案
の意見出しの時も、モップアップ作成時も、10 月に入ってからは当初に比べると積極的に意
見を出しにくくなってきたしまったと今振り返ってみると感じる。このあたりからプロジェ
クト自体も佳境に入り、少し緊迫した雰囲気も出てきつつあったので、反論されるのを恐れ
てあまり意見出しをできなかったのではないかと考える。５人でひとつのものを作る上で、
もちろん全員が同じことを考え、同じ物を作りたいとは考えていないはずなので、反論され
ることももちろんあるだろうが、今後このような意見出しの場があったら、反論することを
恐れずに、皆を納得させられるような理由とともに意見を出したいと感じる。
11∼12 月 ホームページ完成後に行ったユーザテストで得られた、「固有名詞の翻訳結果が正し
くない」という指摘を解決するため、固有名詞の翻訳データベースを作成した。簡単な単語
はローマ字ではなくなるべく英単語で表示するなどの工夫を加え、一目見ただけで固有名詞
を把握できるようにした。また、同時に最終発表のプレゼン資料とポスター作成も行った。
プレゼン資料作成では、中間発表時の聴衆者からのフィードバックやプロジェクトメンバー
の反省点などを踏まえ、要点だけをシンプルに載せた、見やすいスライドを作るよう心がけ
た。グラフや図も作り直し、どうしたら見やすいか・伝わりやすいかという点に特に注意し
て作成した。ポスター作成は、全体のものとシステム班のもの２種類をメンバーと協力して
作成した。担当の教員に添削をしていただいたり、よりよいポスターにするためメンバー間
で話し合いを重ね、簡潔かつ内容の濃いポスターを作ることができた。その後、メンバー全
員でプレゼン練習をし、担当の教員にもプレゼンを見ていただき、フィードバックをしてい
ただいた。当日によい最終発表ができるよう練習を重ねた。最終発表後は、最終発表時の
フィードバックの整理・分析や最終報告書の作成などを行った。反省点として、発表スライ
ドの作成をひとりで行い、完成後に他の班員やメンバーに共有し全体のスライドとして完成
させたことをあげたい。他の班員やメンバーも忙しく、意見交換などができなかったのも理
由のひとつであるが、時間がない中でも班員やメンバーの意見も尊重した発表スライド作り
ができればいいと思った。私が１番いいと思う形で発表スライドを作成したが、中間発表時
のフィードバックを反省によりよいスライドを作っても、最終発表時にはスライドや発表に
ついて様々な意見が聴衆者より寄せられた。これは、私が発表スライドのテンプレートや書
き方をひとりで決めず、他の班員やメンバーにその都度細かく確認を取っていれば、ひと通
りではなく 12 通りの考えが出されてよりよいものを作ることができたと思うからだ。時間
がないなかでも、5 人のシステム班でひとつのものを作っているということ、12 人のひと
つのプロジェクトとしてひとつの成果物を作っているということを意識して、自分がその時
どのように動けばよりよいものができるかを考え行動するべきだった。しかし、班員・メン
Group Report of 2012 SISP
- 26 -
Group Number 10-A
Hakodate’s sightseeing information site in multiple languages
バーそれぞれやるべきことが数多くあり、お互いをフォローしあえないような忙しさの中
で、自分の担当の仕事に全うし、役割を終えて、時には班員のことも気にかけることが出来
た点はよかったと感じている。中間発表時の反省点を踏まえることができたし、中間発表の
準備期間よりはさらに多くの時間を咲いて担当教員からのフィードバックを得ることができ
たのもよかった。中間発表時は１回しか発表練習を見ていただくことができなかったが、今
回は２回見ていただくことができたので、１回目に指摘された部分を直してさらに発表スラ
イドや内容、ポスターなどの確認や添削を受けることができた。
（※文責: 柏谷美帆）
4.2.5
5月
久保美沙希
まず XAMPP を推奨機にインストールし、自宅や学校で気軽に PHP の学習や構築ができ
るように環境を整えた。その後、図書館などで PHP に関連する書籍を借り、例題や今後必
要になるであろう機能や関数を抽出しながら PHP の学習を進めた。また、サイトを構築す
る上での知識や、サイトデザインの知識を得るために、ネットや本などで情報を収集した。
その他、現在運営している観光情報サイトや、情報の提示やデザインがまとまっているわか
りやすいサイトを Web で研究し、その結果を今回作成する函館の観光情報サイトに行かせ
るよう勤めた。その他、全体の話し合いでは大まかなサイトの全体像のデザインやトップ
ページの具体的な配置を考案した。さらに、サイトのデザインやインタフェースデザインに
関する書籍に目を通し、更なるデザインスキルのアップを図った。また、デザインの良い
サイト、見やすいサイト、情報の提示がわかりやすいサイトなど、さまざまな特徴を持っ
た Web サイトを参考にし、初期段階でサイトデザインのおおまかな空想を練った。その他、
Adobe Dreamweaver を使用し、基本的な Web サイトのテーブルデザインのスキルをつけ
た。また、Adobe Dreamweaver を使って雛形のサンプルを作成した。
6月
５月に導入した開発環境を使用して、さらに PHP、JavaScript など、サイト構築に関わる
言語の学習を行った。また、pgAdmin を導入し、データベースに関する知識をつけるため、
本やネットを使用して学習を進めた。また、本格的なサイトの全体像やトップページの細か
なデザイン案を班員に提案し、グループワークを重ねてデザインを洗練する作業を行った。
サイトの全体像に関しては簡易的なストリートボードを Adobe Illustrator で作成し、紙媒
体で班員に提示した。その後、情報のまとまりや、ページ間の移動のしやすさなどを配慮し
て、大まかなサイトの全体像を練り上げた。また、デザインに関してはトップページのデザ
インを中心に行い、トップ画面の地図の配置や配色、その他言語選択の国旗など細かな部分
までデザインを決定し、その後トップ画面に合った形で第 2 階層、第 3 階層などの詳細ペー
ジのデザインも決定した。第 2 階層については、ジャンルごとのお店やスポットをランキン
グ形式で掲載し、第 3 階層でその詳細の情報を掲載するようなデザインを考案した。
7月
中間発表に使用するサイトのデザインの全体像をモックアップとして Adobe Illustrator で
作成した。モックアップの目的としてはデザインの提示をわかりやすく行うことである。主
に、トップページ、第 2 階層、第 3 階層のおおまかなデザインをモックアップで表現した。
また、デザインに関しては、言語選択を国旗で表現し、日本語表示の段階でも言語選択のア
イコンが目に入りやすいようにした。また、トップページに大きくエリア選択の地図を配置
し、初期段階でエリアとジャンルで絞り込めるよう、配慮してトップページをデザインし
た。その他、第 2 階層、第 3 階層についてはトップページのデザインと統一するように、配
Group Report of 2012 SISP
- 27 -
Group Number 10-A
Hakodate’s sightseeing information site in multiple languages
置などを考えデザインを行った。モックアップに関しては中間発表のスライドやポスターな
どで使用された。また、サイトのデザインの詳しい全体像を Adobe Illustrator で作成し、
定期的に班員に提案し、意見や情報を取り入れながら、全体の詳細のデザインを固めていく
作業も並行して進めた。モックアップで提示した機能としては、エリア選択機能、検索機
能、言語選択機能（言語グリッド）、ジャンル別の表示、ランキング表示である。また、中
間発表のスライドに関しては、システム班と調査班それぞれで作成した内容を、まとめて情
報をわかりやすく提示し、また両方でばらばらだったデザインを統一させ、スライドを見や
すく作り直す作業を請け負った。その他、ポスターやスライドに使用する図や絵を Adobe
Illustrator で作成した。
10 月 Web サイトの本格的な構築が始まるため、サイト全体のストリートボードを Adobe
Illustrator で作成した。トップページ、第 2 階層、第 3 階層のデザインはもちろん、その
ほかのページ、他ページへのリンク、リンク先、アイコンの役割などを事細かに記したスト
リートボードをサイトの設計図として作成した。そのストリートボードを元にサイトの構築
を進めた。ストリートボードでは、モックアップで掲載していた、エリア選択機能、検索機
能、言語選択機能（言語グリッド）、ジャンル別の表示、ランキング表示に加えて、お店や
スポットに対する評価ページ、また評価の閲覧、大沼のアイコンの追加、ランキング別や値
段順の情報の掲示が追加された。また、サイト内で使うアイコンのデザインの提案、作成
を行った。主に、地域選択のアイコン、トップページ地図の作成、ジャンル選択のアイコ
ン、メインメニューのアイコンなどを作成した。また、それぞれのアイコンにおいて、中国
語 (簡体字、繁体字)、韓国語、英語、日本語の全５種類のアイコンを１つずつ作成した。そ
の他、Adobe Dreamweaver を使用し、第 3 階層（詳細ページ）の雛形を作成した。また、
トップページやその他のページで使用する画像すべてのデザインと作成を請け負った。
11∼12 月 Adobe Dreamweaver を使用し、大沼特集ページの製作に携わった。査班からあがっ
てきた調査結果を元に大沼の特集ページをコンテンツとして組み込んだ。調査結果から、大
沼に訪れている観光客が必要としている情報としてグルメ、体験、温泉、アクセスの４つの
項目が上位を占めていることがわかった。そのため、大沼特集ページにはこの４つの項目を
主としてコンテンツ化することを決めた。まず、大沼特集ページのメインページの雛形を作
成した。メインページには、シンプルに先ほどのグルメ、体験、温泉、アクセスの４つのメイ
ンメニューを配置し、マウスオーバーなどの動作も構築し、より動作を促すようデザインし
た。また、追加コンテンツとして大沼の天気もメインページに組み込んだ。その後、メイン
メニューの詳細ページを班員と話し合い、大沼のグルメ、体験、温泉、アクセスの情報を『ま
るごと大沼』という大沼の観光情報サイトから引用することに決定した。引用許可のアポイ
ントメントを班員にとってもらい、その後デザインのアドバイスを行いながら、詳細ページ
の構築を、データベースなどを利用して行ってもらった。また、その後、大沼の特集ページ
を作成したことで、大本の観光情報サイトのトップページに変化が生じた（大沼特集ページ
のリンクの配置による）ため、トップページの画像をすべて Adobe Illustrator で作り直
す作業を行った。その他、トップページやそのほかのページのメニューやマウスオーバー時
の画像、言語ごとの画像など何枚もの画像を Adobe Illustrator や Adobe Photoshop を駆
使して作成した。また、最終発表に向けて、サイトのデザインの微調整や、足りない画像の
作成などを行った。また、ポスターやスライドで使用する画像の編集、作成を行った。その
他、システム班のスライドの内容や情報を班員で話し合い、スライドを作成した。その他、
サイトの配色や、サイズ、画像のずれ等、デザインに関する最終確認を行った。
Group Report of 2012 SISP
- 28 -
Group Number 10-A
Hakodate’s sightseeing information site in multiple languages
（※文責: 久保美沙希）
4.3
4.3.1
担当課題と他の課題の連携内容
曽我知央
プロジェクトリーダーとして、全体の流れのとりまとめを行った。開発の主な流れとしては、ま
ず前期は、昨年度の成果物である観光情報サイトを利用してプログラミング言語や開発に関して学
習することにした。その後、中間発表に向けた言語グリッドのデモプログラムの作成に着手した。
後期に入り、学習した内容を踏まえてサイトの作成に取り掛かった。
前期は前述のとおり、昨年度の成果物である観光情報サイトを利用して学習することにした。そ
のためには、PHP とデータベースの知識、そして言語グリッドの知識が必要であることがわかっ
た。まず、PHP の開発環境を整え、PHP とデータベースについて書籍などを用いて学習をすると
ともに、サンプルプログラムの作成により技術習得を行った。そして、学習内容を踏まえて昨年度
の観光情報サイトの PHP で記述されたソースコードを読み取ることで私たちが作ろうとしている
観光情報サイトのイメージをつかむことができた。
その後、システム班のメンバーを開発担当ごとに割り振って更なる理解を図った。担当は、PHP、
データベース、JavaScript の 3 つにわけてメンバーが各自、理解を深めつつ学習した内容を共有で
きるようにした。私は PHP とデータベースを担当し、他の PHP とデータベースを学習している
班員との情報共有に努めた。
また、OSS セミナーに参加し、サーバ構築に関する演習を行うことでサーバに関する基礎的な技
術の習得をした。また、PHP とデータベースを関連させたプログラム作成練習により理解度の向
上を図った。その後、中間発表に向けた言語グリッドのデモプログラムの作成に着手した。構想と
しては、入力フォームに入力した言語を指定した言語に翻訳して表示するというものであった。そ
れに伴って、入力した言語を保存しておくデータベースの作成が必要となったため、MySQL を用
いてデータベースを作成するといったことを行った。
その後、昨年度のサーバにアクセスして開発をする際に、XAMPP のバージョンが昨年度の開
発環境と合わないと開発ができないという問題が起こったため、急遽、メンバー全員にインストー
ルされている XAMPP のバージョンを下げるということを行った。また、サーバにアクセスして
開発を行うために pgAdmin をダウンロードし、サーバにアクセスできるようにした。
後期に入り、実際にサイトを作っていく過程に入った。まず、システム班全体で調査班から調査
結果が上がってくる前の基本となるサイトの原案について話し合って決めた。そこでは、昨年度の
成果物の観光情報サイトを原型として新たなコンテンツを埋め込んだよりユーザが使いやすいシス
テムの開発を目標とした。また原案を元に、私たちが作成しようとしているサイトのモックアップ
を作成した。具体的には、トップページと第 2 階層、第 3 階層のモックアップを班員に作成しても
らってそれを全員で共有した。
同時に、ホットペッパーとじゃらんの API と昨年度のデータベース使用して今年度のサイト用
のデータベースの作成した。また、作成したデータベースの中身を言語グリッドを使用して、英
語・韓国語・中国語 (簡体字)・中国語 (繁体字) に変換して新たなデータベースを作成した。
その後、モックアップのようなサイトになるように向けてまずは、昨年度のサイトをローカル環
境で今年度のデータベースの内容を呼び出せるようにした。そのための SQL 文を昨年度のサイト
のソースから引用し、今年度のサイトにあわせて変更して使用した。それと平行して、班員にサイ
Group Report of 2012 SISP
- 29 -
Group Number 10-A
Hakodate’s sightseeing information site in multiple languages
トの雛形となるものを Adobe Dreamweaver と Adobe Illustrator で作成してもらった。
班員が作成したサイトのフレームワークを元にサイトの原型を作成した。最初に作成したのは第
2 階層のグルメ情報のページである。グルメ情報のデータベースから店名や住所、営業時間などの
情報を選択してデータベースから呼び出して表示させた。第 2 階層はグルメに関する情報のすべて
を扱っているので、全 201 件のデータを 10 件ずつ表示するようにした。そのようなページをホテ
ルと観光情報ごとに作成した。また、グルメ、ホテル、観光情報の第 2 階層をエリア別に集約して
エリア別検索のページを作成した。このエリア別検索のページを元に各第 2 階層のページに図 4.1
のようにエリアごとのソートができるようにした。またグルメ情報のみ、図 4.2 のグルメジャンル
別のソートの実装を可能にする SQL 文を作成した。これは、グルメ情報が扱っているデータ数が
他の第 2 階層のページより多いため利用者に配慮した結果である。
図 4.1
図 4.2
エリア別検索バー
ジャンル別検索バー
同様に第 3 階層のページも作成した。第 3 階層は各ジャンルごとの店やホテルの詳細情報を扱っ
ているので、データベースから呼び出すデータをより多くした。ただし、私が担当した部分ではあ
まり、細部まで行わなかったので、レイアウトや星評価リンク等は他の班員に任せた。
これらの作成したページとトップページを相互に行き来できるようにつなげた。そのときに各
ページにトップページでユーザが選択した言語の情報を維持する必要があるので、各種ソートの情
報とともに各ページへのリンク情報に付加して飛ばせるようにした。
その後、各ページにサイト内検索を実装した。具体的には、入力フォーラムに打ち込まれた文章
Group Report of 2012 SISP
- 30 -
Group Number 10-A
Hakodate’s sightseeing information site in multiple languages
を元にデータベース内を検索し、その条件に合っているものを結果として返すプログラムを作成し
た。また、それとは別にサイト内で画像が元々データベースにない場合に、「No image」という画
像が表示されるようにするなど、微調整を行った。
また、ユーザ評価担当者が得たフィードバックから、店名やホテル名等の固有名詞が正しく翻訳
されていないということが分かったので、それに対応するために店名などの情報は日本語以外はす
べてローマ字で作成することにした。日本語のデータベースを参照しローマ字に直す作業を他の班
員が行った後、そのローマ字の固有名詞データをサーバにアップデートする作業を行った。
（※文責: 曽我知央）
4.3.2
若林恭平
システム班リーダーとして、調査班とシステム班の連携に重点を置いて活動した。システム班の
ほかのメンバーにはシステム中核の開発、デザインなどをまかせ、自分はマネジメントに力を注い
だ。調査分析からはじまり、調査班のコンテンツ提案の共有、実現可能なコンテンツの提案を行
い、ニーズに沿ったサイトづくりを目指した。
大沼公園の観光情報のデータの引用の為の管理者への連絡、データ収集を行った。データを引用
させてもらう許可にあたって、まず、サイト管理者の連絡先を探そうとしたが、具体的な連絡先は
書いておらず、渡島支庁に問い合わせた。
そこから連絡先を聞き、「まるごと大沼」のサイト管理者の「一般社団法人七飯大沼国際観光コ
ンベンション協会」の方に電話をかけることができた。そしてそこから E-mail アドレスを取得し、
自分たちがそのお大沼の情報をどのように活用してサイトに反映するのかをドキュメントで作成
し、それを添付してメールを送った。そしてその返信から許可が得られた。サイトの引用にあたっ
て、調査結果から、必要なコンテンツを絞りこんで引用することにした。具体的には、「和食を扱
う飲食店」
、
「洋食を扱う飲食店」
、
「温泉施設」、「体験施設」である。宿泊施設を引用していないの
は、大沼には温泉施設自体があまりに少なすぎる上、大沼に訪れる方々も、体験施設や温泉に入っ
て日帰りで帰るという人が多いという調査結果からである。これらのデータも全て引用したわけで
はなく、複数のジャンルに被っている施設については一つに取りまとめて、重複が起こらないよう
にした。
情報収集の中身としては、その店、施設の「施設名」、「画像」、「営業時間」、「定休日」、「サー
ビス内容」である。画像に関しては、画像のＵＲＬをコピーしデータベースに格納した。この時、
データベースは既に作られた状態だったので、列を追加してアップデートという形でデータを挿入
した。サービス内容については、非常に情報量が多かったので、なるべく情報を割愛して、必要な
箇所のみを判断して引用した。こうして得られたデータをデータベースに格納した。
具体的にはエクセルファイルを csv ファイル に変換し、データベースに翻訳をかけ、直接格納
した。また、そのデータに ID を付け、ID を取得して並び替えや、データの削除や更新などデー
タ操作を容易に行えるようにした。店や施設の画像については URL を追加し対応した。
それから実際に大沼観光サイト反映行った。データを引用し、反映、フリーのブログパーツを用
いた天気のコンテンツ、大沼の地図やコンテンツの追加、レイアウトの調整、文字化け防止などを
行い、より見やすく、ニーズに沿った観光サイトづくりを行った。
また、固有名詞対策として、固有名詞を翻訳した文字列をデータベースに格納する作業も行っ
た。これについては、班員が作成した固有名詞を翻訳したテキストをデータベースに一つ一つ入力
していった。大沼、函館関わらず、データベースの誤ったデータ入力の修正も行った。それから、
Group Report of 2012 SISP
- 31 -
Group Number 10-A
Hakodate’s sightseeing information site in multiple languages
プロジェクトの進行具合を確認しながら班員との話し合いの取りまとめ、効率よく作業が進むよう
に、タスクの振り分けも行った。
定期的にサイボウズ Live を用いて、掲示板、共有フォルダの更新を行った。掲示板では飲み会
の幹事他、進行状況の確認、システム斑専用のサイボウズ Live ではシステムのソースのアップロー
ド、画像、進行状況とこれからの予定など随時更新を行った。
（※文責: 若林恭平）
4.3.3
鳴海達朗
システム班の開発全般を担当し、班員のサポートにも徹した活動をした。主に開発環境の構築か
ら必要な知識習得、言語グリッドのデモ用プログラム作成、web サイト開発、スマートフォン用
ページの作成などを行ってきた。
前期は開発環境についての話し合いから活動が始まった。事前知識が無かったため、インター
ネットで調べたり担当教員に相談したりしながら検討したところ、ローカル上で作業ができるよう
に統合開発環境である XAMPP を使用することが決まった。続いて技術的な学習であるが、昨年
度の成果物であるソースコードを読み取って学習することから始めた。班員がそれぞれ分担して
ソースコードを読み、不明点を調べて後に班員で共有するという方法をとった。このときに要点ご
とに詳細な説明を記載したスライドを作成し、班員により理解を深めてもらえるよう工夫した。次
に実際に開発環境を整える作業を行った。個人での作業ということだったが、グループ内で進行に
差が生じていたため、インストールのための学習会も行った。そして開発環境が整ったため本格的
な学習を始めた。班員の中で PHP、データベース JavaScript に担当を分け、それぞれ学習を行っ
た。私は PHP とデータベースを担当し、サンプルプログラムなどを作成することでより理解を深
め、それを他の担当者と共有した。
また、OSS セミナーに参加しサーバ構築に関する演習を行い、技術の習得をした。具体的には
サーバの基本的な設定や、リモートアクセスの活用、インターネットへの接続方法、ログ管理、セ
キュリティ管理、障害管理、バックアップの方法、各種コマンドの使い方などである。その後 PHP
上でデータベースを扱うようなプログラムの作成練習をし、サイト作りの基盤となる技術習得も
行った。それらをベースとして中間発表で使用する言語グリッドのデモ用プログラムの作成に取り
掛かった。このプログラムは各言語で文字列を入力するとそれがデータベースに格納され、表示す
る際には指定した言語に翻訳されたデータベース内の文字列を表示するというものである。その開
発過程で開発環境に依存した言語グリッドとの接続エラーが発生したため、言語グリッドとの接続
用プログラムの修正を行い、班員の開発環境にも反映してもらった。
その後の作業環境として昨年度設置したサーバを利用することが多くなると想定されたため、そ
のための準備を行った。この時点でのローカル上の開発環境では昨年度の成果物を利用した開発が
できないという問題が発生したため、XAMPP のバージョンダウンと pgAdmin インストールによ
り対処した。
後期からは本格的な web サイトの開発に取り掛かった。調査班から調査結果が上がってくるま
でにシステム班内でおおまかなコンテンツ案とサイトデザインについて話し合った。ここで昨年度
の成果物を基にデザインの一新と新規コンテンツの実装をしていくという方向性が決まった。そし
て話し合いを基にトップページ、第 2 階層、第 3 階層のモックアップをデザイン担当の班員に作成
してもらった。
その後は実際の開発工程となったが、まずは新規データベースの作成を行った。ここで作成した
Group Report of 2012 SISP
- 32 -
Group Number 10-A
Hakodate’s sightseeing information site in multiple languages
データベースは、じゃらん、ホットペッパーの API を利用して取得した店舗情報や観光情報、サ
イト上に表示する文字列などを格納するために利用したものである。同時にじゃらん、ホットペッ
パーの API で取得したデータをデータベースに格納するための PHP も作成した。また、データ
ベースに格納した情報を言語グリッドを通して英語、韓国語、中国語（簡体、繁体）に翻訳し、そ
れぞれの言語用データベースに再格納するための PHP の作成も行った。
他の班員に Adobe Dreamweaver にて web サイトの雛形を作成してもらうのと並行して、昨年
度の web サイト上で今年度作成したデータベースの内容を表示できるかのテストを行った。SQL
文を今年度のデータベースと対応させることで可能であった。また学内ネットワーク上に存在する
サーバへのアクセスの利便性を向上させるためにリモートデスクトップ接続するための環境を整
え、効率的な開発が進められるようにした。
web サイトの雛形が完成してからは、雛形に PHP や SQL 文を組み込みを行い、データベース
の内容が表示できるようにした。SQL 文での細かい作業は他の班員が担当してくれたため、私は
星評価機能と Google Maps API の実装を行った。星評価はユーザにより送信された点数をデータ
ベースに蓄積し、PHP 上で対応したデータベース内の点数の合計と平均点を算出するものである。
その計算結果から対応した個数分の星の画像を詳細情報ページに表示させ、ユーザの参考にしても
らうことを目的とした。また、Google Maps API は JavaScript で実装し、観光地の場所を地図
上に表示できるようにした。これらの機能を実装する際に合わせて細かいレイアウト修正なども
行った。
最後にスマートフォン用サイトの構築を全て行った。全階層において PHP で UserAgent から
使用端末を判別できるようにすることで、端末がスマートフォンだった場合には専用ページが表示
されるようになっている。図 4.3 のように、スマートフォン用の第 2 階層では PC 用ページで画像
表示だったメニュー部分をプルダウン方式にして簡素化し、HTML タグでの表示倍率の調整や画
面解像度に対するコンテンツ幅の調整などで最適化を図った。また、図 4.4 にあるスマートフォン
用の第 3 階層の地図の表示部分では、押すとスマートフォンに内蔵された地図アプリが起動するよ
うなボタンを設置しており、観光客がスマートフォンのナビゲーション機能を有効活用できるよう
配慮した。
スマートフォン用ページの作成と並行して実機での表示テストも行った。また必要に応じて、そ
の都度レイアウト修正も行った。テストに使用した端末の OS は Android、iOS、Windows Phone
7 で、それぞれの OS について数種類の解像度の違う端末を使用した。端末名を挙げると、HTC
Desire、HTC EVO 3D、HTC ChaCha、Samsung Galaxy Nexus、SHARP IS03、富士通モバイ
ルコミュニケーションズ ARROWS X LTE、iPhone 4S、iPhone 5、HTC HD7 である。その結
果、作業日数の関係上 CSS でのレイアウトの詳細な調整はできなかったため、Android の一部端
末と iOS 端末で表示倍率に問題が見られる場合があった。
（※文責: 鳴海達朗）
4.3.4
柏谷美帆
プロジェクトサブリーダーとして、プロジェクトリーダーの補佐や調査班・システム班間の連携
の補佐などを行った。プロジェクトリーダーが困っている時に意見やアドバイスをしたり、全体の
スケジュールの修正など、プロジェクト全体のためになっているという実感を得ることができた。
調査班・システム班間の連携についても、意見やアドバイスを行い、プロジェクト全体、各班が円
滑に活動できるよう配慮を行なってきた。もう少しサブリーダーとしての仕事を自分の中で明確に
Group Report of 2012 SISP
- 33 -
Group Number 10-A
Hakodate’s sightseeing information site in multiple languages
Group Report of 2012 SISP
図 4.3
スマートフォン用第 2 階層
図 4.4
スマートフォン用第 3 階層
- 34 -
Group Number 10-A
Hakodate’s sightseeing information site in multiple languages
し、より積極的に行動すべきだったと思っている。しかし、システム班の活動についてはプロジェ
クトリーダーと問題がある度に細かく相談をして解決方法を考えることができたので、その点は非
常に良かったと思っている。また、システム班の班員がなにをやっているのかを常に把握し、自分
は今何をすべきか、誰の作業が滞っていて誰が何を手伝うべきか、スケジュールの立て直しは必要
かなどを、システム班での自分の立ち位置を理解した上で行動することができたので、その点もよ
かった。
システム班の一員としては、主にトップページのデザイン作成、固有名詞の翻訳データベースの
作成、中間・最終発表のシステム版ポスター作成、最終発表の発表スライド・全体ポスターの作成
などを行なってきた。またそれらの前身として、XAMPP のインストールや基本的な使い方を勉
強するための勉強会を開いたり、昨年の成果物のプログラムを分担して読みこみ、知識を共有する
ということも行った。また、データベースの基本的な知識の習得も行った。活動自体は自分のでき
ないことにも積極的に挑戦して、班やプロジェクトの進捗によい影響をもたらすことができたと思
う。しかし、細かいところで多くの反省点も残った。
まず、前期の最初の時期は XAMPP のインストール、基本的な知識の習得、データベースにつ
いての勉強、昨年の成果物を用いての勉強会などが主だった。システム班内に XAMPP や PHP、
データベースなどの知識を持っているメンバーが複数いたため、得意分野の知識をみんなで共有し
ながら、効率的に技術習得をすることができたと思っている。具体的には去年の成果物のプログラ
ムを班員で分担し、どのようなプログラムなのかをそれぞれで勉強し発表することで知識を共有す
るという意味合いで、勉強会を行った。これは非常に効率的な方法だったと思うし、実際に自己の
知識の向上にも大きな効果があった。しかし、この時期は最終発表までのスケジューリングがまだ
明確にはなっておらず、もう少しプロジェクトの年間スケジュールを踏まえた上で活動をするべき
だった。しかし、これらの勉強会はホームページ作成に非常に役立ち、またメンバー間の交流にも
大きな役割を果たしたので、よい活動だったと思う。逆に捉えれば、プロジェクトが始まった段階
でプロジェクトがどのようなものかわからない時に、勉強会など実際の行動にすぐに移り作業して
いたことはよかったと思う。
次に、さらにデータベースや PHP、HTML、CSS など、成果物のホームページ作成に欠かせな
い言語や仕組みについての自学自習のために多く時間を割いた。ここでの反省点は、自学自習とい
うことで各自が目標などを決めずただただ勉強するという形態になってしまったため、効率的には
行えなかったように思う。ここでももう少しスケジューリングをしっかりと行うべきだった。しか
し、各自が各々の担当分野を把握し、それにあわせた勉強をしていた点はよかったと思う。前期で
の反省点は、スケジュール管理をしっかりかつ細かくできなかった点である。プロジェクト学習が
どういうものかわからないなりにもう少し意見を出し合い、時には去年の先輩や担当教員からアド
バイスを頂きながらスケジュール管理にも力を注ぐべきだった。スケジュール管理をしっかりと行
えば、自学自習や勉強会などもさらに目的意識を持って行えたと思うので、改めて今振り返ってみ
るとスケジュール管理の大事さを認識している。
後期に入ると、それぞれの担当範囲の作成などに取り掛かった。私はトップページのデザインと
基本的なフレームワークの作成を行った。他のメンバーが作ってくれたモックアップをもとにし、
シンプルかつわかりやすいトップページの作成を目標とした。デザインコースに所属しているメン
バーのアドバイスや、他のシステム班のメンバーからの意見を常に汲み取りながら、班員の意見を
多く反映したトップページのデザインができたと思っている。しかし、調査班との連携がうまくと
れなかったことが反省点として挙げられる。システム班の意見だけでなく、調査班のメンバーの意
見、また、この時点でユーザにあたる外国人観光客の意見なども取り入れてよりユーザに密接した
Group Report of 2012 SISP
- 35 -
Group Number 10-A
Hakodate’s sightseeing information site in multiple languages
ホームページデザインを行いたかった。調査班も大沼や空港の調査などで忙しかったという点も
あるが、時間管理をうまく行なってホームページ作成についてもよりよい活動をすべきだった。ま
た、調査班の調査も、JR 北海道と連携した大沼の観光発展にかなり重きを置いていたように思う。
私はここに疑問を強く感じており、しかし調査班のメンバーに対してこの疑問を伝えることができ
なかったので、プロジェクト全体のことも考えて、システム班の一員としても、サブリーダーとし
ても、意見することが出来ればよりスムーズに、より連携をとって活動することができたと思う。
また、ユーザテストによって得られた「固有名詞の翻訳結果が正しくない」という意見をもと
に、固有名詞の翻訳データベースの作成も行った。ここでは、簡単な単語はなるべくローマ字では
なく英単語で表示することで、一目で固有名詞を判断できるような工夫をこらしてデータベースを
作成した。プログラム構築を担当したメンバーと意見を交わし、効率的で簡単な方法でデータベー
スを作ることができたため、ユーザテストによる意見を素早く反映させることができたのは非常に
よかった。これは、私の実力だけでできたことではなく、高い知識を持った班員あってのことだっ
たので、その班員にも感謝するとともに、私もユーザテストの意見を反映したコンテンツの作成に
携わることができて光栄に思う。反省点としては、ユーザテストをもっと多くの被験者に受けても
らい、様々な国籍、年齢、性別などの被験者のデータを得たかったことである。しかし、成果物の
完成が遅れてしまったのは私にも原因があると思うので、スケジュール管理をしっかり行うととも
に、自分のタスクを把握して、締め切りを意識して活動するべきだった。
最後に、中間発表・最終発表時のシステム班ポスター、最終発表時の発表スライド・プロジェク
トポスターの作成を行った。これは、常に担当教員からのフィードバックをいただきながらよりよ
いポスターにしようと直結した活動ができたし、システム班のメンバーからの意見をたくさんもら
い、ひとりの価値観だけでなくいろんな視点から持つ意見を反映させたポスターを作ることができ
た。発表スライドについても、時間に余裕を持って全体のひな形や発表構成を作成した点がよかっ
たと思っている。担当教員にスライドや発表内容を確認してもらう時期をもう少し早めることが出
来ればなおよかった。スライドや発表内容の最終完成版ができたのは、最終発表当日の朝だったの
で、修正などの時間も含めスケジューリングをしっかりするべきだった。中間発表時での聴衆者か
らのフィードバックを受けて、全体のスライドデザインを統一し、図や表なども数値を大きく表示
したり、注目して欲しいところを強調するなど、シンプルで見やすく、伝えたいことが伝えられる
スライドを作ることができた。中間発表での反省点やフィードバックの結果を大きく盛り込むこと
ができたことは非常によかったと思っている。
全体の活動を通して反省点として挙げたいのは、その時々にあわせたスケジューリングを行うこ
と、サブリーダーとして、システム班の一員としての自覚を持ってもっと積極的に行動すべきだっ
たことである。他の班員に何を言われるか、他のメンバーに何を言われるかということを気にした
あまりに、ある分野に関してはあまり意見を出したりすることができなかった。プロジェクト内の
雰囲気をよく保つことはいいことかもしれないが、よりよいプロジェトにするために、よりよい成
果物を作るために、自分の意見に自信を持ってもっと主張していけばよかったと思っている。
こうしてプロジェクト学習を振り返りながら文章にしてみると、反省点ばかりが目立ってしまっ
ているように思えるが、もちろん得たもの、よい経験となったもの、元々持っていた自分の長所を
更に伸ばすこともできたと思っている。もともと興味があった UI にさらに興味を持ち勉強したこ
とや、自分のタスクに追われていても他の班員に目を向けて私が出せる限りのアドバイスを出した
り、プロジェクトリーダーと話し合ってタスクの分担を決め直したりと、システム班のなかのサブ
リーダーという位置では何かしらのアクションを起こすことができたのではないおかと思ってい
る。大沼への視察調査は、実際のサービス依頼者の方の生の声を聞くことができたので、そこから
Group Report of 2012 SISP
- 36 -
Group Number 10-A
Hakodate’s sightseeing information site in multiple languages
実際の観光サイトのイメージをつかめたり、観光サイト作成のモチベーション向上にもつながっ
た。元々は調査班として活動したかったので、少しでも調査班の活動を体験できたことも個人的に
嬉しい部分だった。
（※文責: 柏谷美帆）
4.3.5
久保美沙希
デザインコースに所属しているため、主に Web サイトやポスター、発表スライドのデザイン全
般を担当した。また、プロジェクトが始まった初期段階では、まずサイト構築に必要となる言語
である PHP の学習を行った。その中でまず XAMPP を推奨機にインストールし、自宅や学校で
気軽に PHP の学習や構築ができるように環境を整えた。その後、図書館などで PHP に関連する
書籍を借り、例題や今後必要になるであろう機能や関数を抽出しながら PHP の学習を進めた。ま
た、その後データベースについても学習するために pgAdmin をインストールし、データベースが
学べる環境を整えた。その後、同じように図書館などで借りた書籍を参考にして、データベースに
関する知識を深めた。サイトを構築する上での知識や、サイトデザインの知識を得るために、ネッ
トや本などで情報を収集した。その他、現在運営している観光情報サイトや、情報の提示やデザイ
ンがまとまっているわかりやすいサイトを Web で研究し、その結果を今回作成する函館の観光情
報サイトに行かせるよう勤めた。その他、全体の話し合いでは大まかなサイトの全体像のデザイン
やトップページの具体的な配置を考案し、その後の班員や教員の意見や、その他の情報などを取り
入れながら、大まかなデザインを決定していった。
中間発表前には Adobe Illustrator を駆使し、モックアップを主にトップページ、第 2 階層、第
3 階層の大まかなデザインを中心に作成した。作成したモックアップは主に中間発表用のスライド
やポスターなどに使用された。また、中間発表用スライドに関しては、調査班とシステム班、それ
ぞれが作成したスライドをまとめた。主に、それぞれのスライドを合わせたときに情報をどのよう
に提示していけばわかり易いかを考慮し、スライドの順序を考えたり、それぞれのグループでばら
ばらだったスライドのデザインを統一させ、全体の情報とデザインをまとめる作業を行った。
また、その後サイトの構築が始まるにあたって、全体のストリートボードを Adobe Illustrator
で作成した。そのストリートボードを元にサイトの構築を進めた。また、サイト内で使うアイコン
のデザイン（トップメニュー、エリア選択のアイコン、ジャンル選択のアイコン、サブメニュー）の
提案、作成を行った。その他 Adobe Dreamweaver を使用し、第 3 階層（詳細ページ）の雛形を作
成した。また、トップページやその他のページで使用する画像すべてのデザインと作成を行った。
また、調査班の調査結果を元に大沼特集ページに組み込むコンテンツの提案を行い、特集ページ
全体の情報やコンテンツを決定した。調査結果から、大沼に訪れている観光客が必要としている情
報としてグルメ、体験、温泉、アクセスの４つの項目が上位を占めていることがわかった。そのた
め、大沼特集ページにはこの４つの項目を主としてコンテンツ化することを決めた。まず、大沼特
集ページのメインページの雛形を作成した。メインページには、シンプルに先ほどのグルメ、体
験、温泉、アクセスの４つのメインメニューを配置し、マウスオーバーなどの動作も構築し、より
動作を促すようデザインした。また、追加コンテンツとして大沼の天気もメインページに組み込ん
だ。その後、メインメニューの詳細ページを班員と話し合い、大沼のグルメ、体験、温泉、アクセ
スの情報を『まるごと大沼』という大沼の観光情報サイトから引用することに決定した。引用許可
のアポイントメントを班員にとってもらい、その後デザインのアドバイスを行いながら、詳細ペー
ジの構築を、データベースなどを利用して行ってもらった。また、その後、大沼の特集ページを作
Group Report of 2012 SISP
- 37 -
Group Number 10-A
Hakodate’s sightseeing information site in multiple languages
成したことで、大元の観光情報サイトのトップページに変化が生じた（大沼特集ページのリンクの
配置による）ため、トップページの画像をすべて Adobe Illustrator で作り直す作業を行った。
最終発表前には、トップページのわずかなずれがあったため、一度作ったメインの地図を新たに
作成しなおし、最新版の地図を班員に提供した。また、新しく作った地図に関しても日本語、英
語、韓国語、中国語 (簡体字・繁体字)、それぞれに対応した画像と、マウスオーバー時の画像を
作成し、全部で数十枚もの画像を短い時間で仕上げた。また、サイトロゴに関しては『Hakodate
Sightseeing』というサイト名の H と S を頭文字に取り、デザインした。サイトの色に合った茶色
を基調とし、旅行のトレードマークを意味する飛行機、またサイドにある星は函館の五稜郭の星を
イメージしてデザインした。幾つかのロゴデザインの候補の中から、一番班員の支持を集めたデザ
インを採用した。その他、観光情報サイトのデザインや配色の微調整、その他最終発表用のスライ
ドや、ポスターに使用する画像や図を Adobe Illustrator で作成し、それらのデザインや情報の最
終確認と微調整を行った。
（※文責: 久保美沙希）
Group Report of 2012 SISP
- 38 -
Group Number 10-A
Hakodate’s sightseeing information site in multiple languages
第5章
5.1
結果
プロジェクトの結果
前期期間中は、成果物の中心となる言語グリッドのシステムを作った。そのシステムの構成は、
文字入力をするフォーラムの部分、入力された文字列とその文字列が何語であるかを格納するデー
タベース、言語グリッドによって返された文字列を表示する部分、以上３つである。 また、想定
されるページのデザインをモックアップにした。これは、調査班の調査によるユーザのニーズがま
だわからないため、あくまでもニーズとして想定される機能を搭載したものである。さらに、発表
の際用いるシステム班のポスター・発表スライドを制作した。
後期期間中は、実際のホームページ作成を主に行った。詳しい作業内容はサイト用のデータベー
ス作成、サイトの原型作成、サイトの各階層のフレームワーク作成、大沼公園サイト用のデータ
ベースの作成とサイトへの反映などである。当初の予定通り、言語グリッドを用いた函館の観光情
報（レストラン・観光地・宿の情報）サイトを作成した。また、今年の試みとして、調査班が大沼で
行った調査をもとに大沼特集ページも作成した。私達が作成したこの観光サイトの大きな特徴は、
店名などの固有名詞の正しい翻訳にも対応していること、地図の絵から情報を検索できること、ス
マートフォンに対応したページも設けていること、星評価でランキング表示していることである。
まず一点目の「固有名詞の正しい翻訳にも対応していること」は、ユーザテストでの意見を反映
したものである。当初、店名などの固有名詞も言語グリッドを用いていたが、例えば「赤から」と
いう店名が言語グリッドにより「From Red」と翻訳されるなど、全く違う店名になってしまって
いた。外国人観光客は「From Red」という英語での店名を見て、日本語だと「赤から」という店
名になるだろうとは予測しがたいだろう。このような間違った翻訳による店名を見て、ユーザテス
トの被験者である本学の外国人教員から「店名がわからない」という指摘を受けていた。そこで、
私たちは固有名詞の正しい翻訳結果のデータベースを作成し、日本語以外の言語（英語、中国語、
韓国語）が選択された場合に、正しく翻訳された店名（など）を表示することとした。また、なる
べく易しい単語は英単語で表すようにし、ひと目で視覚的に店名がわかるような工夫を凝らした。
また、二点目の「地図の絵から情報を検索できること」は、ただ単に文字で表示された地名を選
んで情報を検索するのではなく、函館全体の地図をトップページに掲載し、視覚的におおまかな地
図の場所から観光情報を検索できるようにした。また、地図の指定した場所をクリックするとその
場所のレストラン・観光地・宿情報の３種類全てが表示されるが、そこからそのうちどれか１種類
が選べるよう、２段階での検索システムも設置した。これにより、地図情報だけ、カテゴリだけな
どどれかに偏った検索にならないよう、ユーザに配慮した使いやすいサービスの提供を心がけた。
他にも、レストランのカテゴリ内でも更に様々なジャンル別検索機能を搭載した（ラーメン、焼肉、
和食など）。
次に、三点目の「スマートフォンに対応したページも設けていること」は、近頃スマートフォン
ユーザが増加していることを配慮し、旅先でもスマートフォンを用いて手軽に観光情報を手に入れ
られるよう、スマートフォンに最適化したレイアウトのページを用意した。ユーザがスマートフォ
ンを利用していることを確認すると、自動的にスマートフォン対応のページが表示される。トップ
ページ、検索結果ページ、詳細ページ、大沼特集ページの全てにおいて、スマートフォンで見やす
いよう細かくレイアウトを調整したものであり、フォントサイズや行間も変更することで全体とし
Group Report of 2012 SISP
- 39 -
Group Number 10-A
Hakodate’s sightseeing information site in multiple languages
て非常に見やすいページになっている。現在、ブラウザや機種によって見やすさが異なるため、今
後の改善したい。
最後に、四点目の「星評価でランキング表示していること」は、ユーザが地図やカテゴリで検索
した際に、最も星評価が高い順からソートして表示することで、ユーザからの人気という保証もあ
る情報を優先的に見てもらおうという目的である。もちろんユーザが星評価を行うこともできるの
で、日々ランキングは変動する。
これら四点の大きな特徴を持った本サイトを完成させた。
また、レストラン・宿・宿泊情報はそれぞれホットペッパー・じゃらんが提供する API を利用し
た。これらの必要な情報をデータベースに格納し、検索条件によって引き出してくる方法である。
トップページで英語を意味するアメリカ国旗を選択すればその作業の後は英語で内容を表示、同様
に、韓国の国旗を選択すれば韓国語で内容を表示、中国の国旗を選択すれば中国語で内容を表示す
ることができる。
（※文責: 柏谷美帆）
5.2
成果の評価
前期期間中に制作した言語グリッドのデモシステムは、当初想定したとおりのものができた。
モックアップは、聴衆者によるアンケートで、まだニーズがわかっていないのにモックアップを制
作する必要はあったのかという指摘があった。後期末に行われる発表会では、データに基づく成果
物の材料作りをしたい。ポスターは当初想定したとおりのものができた。担当教員に確認してもら
い、指示を仰ぐタイミングが遅かったので、これも同様に後期末に行われる発表会に向けて注意し
たい。発表スライドについては、発表会当日まで変更が重ねられメンバーを困惑させたと感じたの
で、早めに最終完成物を仕上げたい。
後期期間中の成果物は、作成したホームページである。まず、最終発表の際に寄せられた質問や
意見をもとに、成果の評価を行う。
まず、ホームページのデザインに関して、
「なぜホームページの全体の配色を茶色にしたのか」と
いう意見があった。全体の配色に茶色を選んだ理由は、老若男女が見やすく、何にも依存しない色
だからだった。しかし、これはあくまでも主観的な意見だけで決めてしまったので、ユーザにとっ
て何色だと見やすいのか、親しみやすいかなど調べるなどすればよかったと思った。老若男女が見
やすく、何にも依存しない色というのはあくまでもデザインした我々システム班の主観的な意見だ
と思うからだ。
また、
「調査班とシステム班の連携がよくわからない」というフィードバックもあった。これは、
おそらくメンバー全員が反省点として抱える点であり、プロジェクト活動中になにか解決案を出し
合ってより連携した活動をするべきだった。
今後の課題として、ブラウザの種類やスマートフォンの機種によってレイアウトが崩れてしまう
こと、データの表示順が変えられないこと、実装しきれなかったコンテンツなどがある。
ブラウザの種類やスマートフォンの機種によるレイアウト崩れは、最終発表までできる限りの手
を尽くしてきたが、ブラウザひとつをとっても、スマートフォンの機種によって微妙な表示のずれ
が生じるため、あらゆる場合に対して対応することができなかった。
データの表示順が変えられないことは、評価が高い順・低い順、新着順など、様々な表示順を作
り対応させたかったが、現時点では星評価順のみに対応している。
Group Report of 2012 SISP
- 40 -
Group Number 10-A
Hakodate’s sightseeing information site in multiple languages
実装しきれなかったコンテンツがあることは、調査班のニーズ調査の分析結果が出る時期が遅
かったことや、調査班との連携がうまくできなかった点があることが原因と考えている。
具体的に実装したかったコンテンツは、おみやげランキング、人気体験・活動ランキング、交通
機関についての情報、函館旅行プランなどである。交通機関についての情報は、バス・市電ともに
情報が膨大で、どのようにすればユーザが必要な情報を簡単に調べることができるか、またこのサ
イトを見る人の交通機関のニーズはどのあたりかわからないなどの問題点により実装することが
できなかった。大沼公園へのアクセスは掲載しているが、函館全域の交通機関情報には対応できな
かったのが現状だ。また、他のおみやげランキング、人気体験・活動ランキング、函館旅行プラン
などは、それらの情報を欲しいという情報は調査班による調査結果の分析から得ることができた
が、具体的にどのおみやげが売れているか、人気がある体験・活動は何か、どのような函館旅行プ
ランが人気かなどの情報は得られなかったことが原因である。実装したかったコンテンツを実際に
実装できなかった問題点として、一括していることにスケジュール管理があると考えている。たと
えば、おみやげランキングが欲しい、人気体験・活動ランキングが欲しいというニーズが出るよう
な質問をしたのなら、ではそれらについて函館や大沼での実際の売れ行きや人気度を図るための時
間などを設けるべきだったと思う。もう少し先を見たスケジュール管理が必要だったように思う。
最終発表時には、発表の最中に実際のスライドを用いて成果物の動作実行は行わなかった。パソ
コンで表示した際の観光サイトの各画面のスクリーンショットと機能の説明、同様にスマートフォ
ンで表示した際の各画面のスクリーンショットと機能の説明、という形で発表を行った。これは、
発表内容に相違が出ないように、また、ネットワーク環境によって動作に時間がかかることなどを
考慮した結果採用した方法である。しかし、最終発表時の聴衆者によるフィードバックシートか
ら、
「実際にサイトの動きを見てみたかった。」、「なぜ実際のサイトの動作を見せなかったのか」な
どの意見が多く寄せられた。中間発表時には、言語グリッドの動作を見せるために試用ページを実
際にスクリーン上で動作させたため、もちろん実際の動作を発表時に見せたほうが聴衆者にとって
はよいということに気づくことができなかった。
（※文責: 柏谷美帆）
担当分担課題の評価
5.3
5.3.1
曽我知央
プロジェクトの統括 プロジェクトリーダーとして、プロジェクト全体のとりまとめを行った。シ
ステム班と調査班にわかれて作業を行う前は全体での話し合いで全員が話しやすい雰囲気を
作ることに尽力した。また、各班にわかれて作業を進めているときは、プロジェクトのサブ
リーダーやシステム班リーダー、調査班リーダーと連携し情報共有やより良いプロジェクト
の進行を図った。同時に調査班の調査に参加することによって、実際の調査の感じや外国人
観光客の雰囲気を味わうことができた。
開発環境の導入
システム開発を行うために開発環境を整えた。具体的には XAMPP や pgAdmin
をインストールしシステム開発ができるようにした。XAMPP は PHP で書いたプログラ
ムをローカルで動作させるのに使用した。これにより、各自が担当分のプログラムをやる
ことで同時進行が可能となり作業の効率化を図ることができた。pgAdmin は GUI による
PostgreSQL の管理ツールである。これによりデータベースの作業を行った。
言語グリッドのシステムの構築 昨年度リーダーに教わりながら、もう一人の班員と協力して言語
Group Report of 2012 SISP
- 41 -
Group Number 10-A
Hakodate’s sightseeing information site in multiple languages
グリッドシステムの構築を行い、余裕を持って完成させていた。プロジェクトリーダーの仕
事もあり、もう一人の班員に仕事が偏っていたように思ったので、後期の活動でその点を解
決できればもっとよいと思う。
API を利用したデータベースの作成 班員と協力してホットペッパーとじゃらんの API と昨年度
のデータベース使用して今年度のサイト用のデータベースの作成した。また、作成したデー
タベースの中身を言語グリッドを使用して、英語・韓国語・中国語 (簡体字)・中国語 (繁体
字) に変換して新たなデータベースを作成した。変換するプログラムは昨年度のソースを参
考に作成した。
データベースの呼び出し
モックアップのようなサイトになるように向けてまずは、昨年度のサ
イトをローカル環境で今年度のデータベースの内容を呼び出せるようにした。そのための
SQL 文を昨年度のサイトのソースから引用し、今年度のサイトにあわせて変更して使用し
た。その後、Adobe Dreamweaver で作成した雛形に、データベースに接続してデータベー
スの中身を呼び出す SQL 文を追加し、それを必要な情報だけに絞ってサイトに表示するよ
うにした。接続するデータベースと表示する情報は階層や扱っている情報ごとに変更した。
最初は第 2 階層のグルメ情報のページでグルメ情報のデータベースから店名や住所、営業時
間などの情報を選択してデータベースから呼び出して表示させた。グルメ情報が扱っている
データ数が他の第 2 階層のページより多いため、グルメ情報のみ、グルメジャンル別のソー
トを可能にする SQL 文を作成した。
サイト内検索の実装
サイト内検索入力フォーラムに打ち込まれた単語を元にデータベース内を検
索し、その条件に合っているものを結果として返すプログラムを作成した。具体的には、入
力フォーラムに打ち込まれた単語をデータベースの内容と一致するかどうか一件一件ソート
をかけ、条件に一致したものだけを表示するようにした。
固有名詞対策 ユーザ評価担当者が得たフィードバックから、店名やホテル名等の固有名詞が正し
く翻訳されていないということが分かったので、それに対応するために店名などの情報は日
本語以外はすべてローマ字で作成することにした。日本語のデータベースを参照しローマ字
に直す作業を他の班員が行った後、そのローマ字の固有名詞データをサーバにアップデート
する作業を行った。
言語情報の維持
作成したページとトップページを相互に行き来できるようにつなげた。そのとき
に各ページにトップページでユーザが選択した言語の情報を維持する必要があるので、各種
ソートの情報とともに各ページへのリンク情報に付加して飛ばせるようにした。
（※文責: 曽我知央）
5.3.2
若林恭平
開発環境の構築と PHP の学習
開発環境には XAMPP を使用し、インストールからスタート
し、手順に沿いながら環境を整えた。まず、インストーラをダウンロードする。それを解
凍してインストールを行う。そして XAMPP のツールである phpMyAdmin が動作するの
かを確かめた。これは実際にデータベースの内容を管理して、削除したり順序を変えたり、
内容を変更する事も可能である。中間成果発表の時に使用した言語グリッドの翻訳システ
ムを動かすためのツールでもあった。実際にデータベースの内容を変更したり、文字列を
削除したりなど、多方面で利用したツールである。XAMPP のインストールが終了したら、
必要に応じて php.ini の設定を行った。インストール後からデフォルトの状態から変更しな
Group Report of 2012 SISP
- 42 -
Group Number 10-A
Hakodate’s sightseeing information site in multiple languages
ければならない点があった。まず、文字コード、出力を utf-8 にするために、php.ini ファ
イルをテキストエディタで開く。自分はサクラエディタを用いて、mbstring.language の言
語選択を japanese にして日本語に設定する。それから mbstring.internal encoding の文字
コードの設定を utf-8 に変更し、文字化けを防止した。mbstring.http input = auto に変
更、mbsring.http output = utf-8 に変更、mbstring.encoding translation = On に変更、
mbstring.detect order = auto に変更、mbstring.substitute character = none; と変更し、
作業を終えた。
必 要 に な る 可 能 性 も あ っ た の で 、XAMPP で cURL と openSSL を 使 え る よ う に す
る た め に 、デ フ ォ ル ト で「C:/xampp/php/php.ini」の 位 置 に あ る フ ァ イ ル の 変 更 を
行 っ た 。php.ini フ ァ イ ル 内 の「php curl.dll」を 有 効 に し 、「php openssl.dll」を 追 加
に し た 。ま た 、host フ ァ イ ル を 書 き 換 え て 、バ ー チ ャ ル ホ ス ト で ア ク セ ス で き る よ
う に す る た め に 、標 準 で「C:/xampp/apache/conf/httpd.conf」の 位 置 に あ る フ ァ イ
ル を 書 き 変 え 、DocumentRoot「”C:/xampp/htdocs/xampp/フ ォ ル ダ 名/”を 指 定 し 、
「C:/Windows/System32/drivers/etc/host」の host ファイルを「www.test.com」を追加
し Apache を再起動させて変更を完了した。XAMPP を用いて、実際に去年のプロジェク
トで作成した成果物である、
「HAKONET」をローカルで動作させた。そしてその去年の成
果物を分析し、不便な箇所や、改良点を洗い出し、メンバーとディスカッションをしなが
ら、ビジョンを設定した。そして、その去年の成果物のソースコードを分析して、このペー
ジがどのソースの部分で動作しているのかを確認した。また、そのための勉強会も行い、自
分の担当部分のソースコードを解読した。解読したものも全体で共有し問題点を指摘し合っ
た。斑員の中で一番システムに詳しい人からの助言や勉強会によって自分の分からない部分
を確認し、システム開発に大きく役立てた。
グループの総括
グループリーダーとして、斑員それぞれの進捗状態を把握し、プロジェクトリー
ダーと調査班リーダーとうまく連携し、プロジェクトの進行に大きな手助けをしていた。特
に調査斑の調査結果を分析して、その結果からシステムとして何が提供できるのかを考え、
メンバーとディスカッションをしながらシステム提案を行った。具体的に言うと、空港調査
分析では、１つ目に「年齢」の項目からは年代別にどのような人々が訪れているのか、また、
調査班の分析からは、「台湾は老後の生活が安定しないらしいことから働き盛りの若い世代
が多くなったのではないか」、「飛行機だと韓国と台湾では移動距離に倍ぐらいの差がある
(台湾の方が遠い) ことから移動の時に体に負担がかかるので台湾は若い世代の人が多めな
のではないか」「韓国は若い世代が少ないことから竹島問題などの関係で来日が少なくなっ
ているのではないだろうか」などという分析が出た。これをシステム反映するために、「年
代別の人気ランキング」なども検討したが項目が多くなってしまう事や、需要があるのかわ
からなかったので遠慮した。２つ目に「出身国」の項目からは、台湾人が多いなどという事
が分かったが、調査班の分析からは「韓国は台湾よりも震災の影響が響いているのではない
だろうか」「また竹島問題などで来日が減っていることも予測される」などという分析結果
からシステム反映を考えたが、多言語で発信していく上で台湾に重点を置くわけにもいかな
いので特に意識しなかった。３つ目に「今回函館に来るにあたって、どのような旅行形態で
来たか」という項目から団体旅行が圧倒的に多い事が分かった。調査分析では「まず、飛行
機の利用者であることと、チャーター便利用者を対象に調査を行ったので自然と団体旅行客
が多くなったと考えられる。少数意見の個人旅行客、その他に関しては、チャーター便に空
席があったことから旅行会社が他の観光客、または一般客に座席を割り当てたことから出た
Group Report of 2012 SISP
- 43 -
Group Number 10-A
Hakodate’s sightseeing information site in multiple languages
ものと予測する。ちなみに、その他の回答者は「留学生」とのことだった。また、個人旅行
では旅行の下準備を１からしなければいけないが、団体旅行 (ツアー) では多少の手間が省
けるので、「手軽さ」という面から団体旅行を選ぶ人が多いのではないだろうか。費用が抑
えられるということもあるだろうという結果から、団体旅行プランも検討した。だが、団体
旅行では大体が観光ツアーの方が利用するのではないかと考え、それなら観光サイトの需要
は無いと考えた。４つ目に「今回函館に来るにあたって誰と函館に来たのか」の質問から、
家族、団体観光客が多い事が分かったが、調査分析は家族ならここに行った人が多い、「友
人・知人」ならここに行った人が多い、などを調査し、同行者別オススメスポットといった
ようなコンテンツに繋げようとおもい作成したが、今回、「函館のどこを観光したか」とい
う質問が抜けているので活用しにくい質問内容となってしまった。対策として、同行者別で
各質問の相関を出し、何らかの傾向が出せたらと思っている。」という分析で、前述の質問
と同様の理由で見送った。５つ目に「函館の観光情報はいつ入手しましたか？」という問い
から、「函館に来る前」が圧倒的に多かった。分析では「普通に考えれば旅行に行く前に旅
行先の観光情報を調べるのは当たり前のことである。しかし、「函館に来た後」や「してい
ない」といった回答も見られた。
この結果に対する予測は一つ目に、家族で来て、家族全員が情報を入手しているとは限らな
いということがあげられる。父親と母親は情報を入手しているが子供は入手していないな
ど。これはその他の同行者のときもあげられるのではないだろうか。二つ目は、ツアーの
種類によって情報の調べ方が違うのではないかということだ。例を挙げてみると例１：「空
港 (または観光地のどこか指定の場所) まで送ってくれて、そこからは自由行動」というパ
ターンだった場合。送り届けてもらったあとは自由行動となり自分たちの行きたい場所に行
ける。そのためには計画的に行動するためにも事前に観光地の情報を入手しておく必要が
ある。つまり函館に来る前に情報を入手する人が多くなるのではないかと予測する。例２：
「ガイドさんが案内しながら観光」というパターンだった場合。ガイドさんが案内してくれ
て、「それではここで 1 時間休憩 (自由時間) です」となることがあると予測する。そうなっ
た場合、その休憩場所 (自由時間を与えられた場所) ごとに観光情報を調べ、自分の行きた
い場所、興味のあるものなどを探すことになるのではないかと予測する。その結果、「函館
に来た後」「していない」といった結果になるのではないだろうか。これらの例から「函館
に来た後」や「していない」などの結果が得られたことを予測できるのではないだろうか。」
という結果であった。これは事前調査での調べから、函館に来てからではなく、来る前にイ
ンターネットなどで調べ物をしているということである。よってこれまでの背景は現在も通
用するものになっている事が分かる。６つ目に「函館の観光情報はどのように入手しました
か」という質問で、「インターネット」「ガイドブック」が多いことがわかった。分析として
は「まずネット上で函館の観光情報が調べやすい状況にあるのではないかということが考え
られる。また、大沼調査では台湾に限って言えば「旅行会社」が一番多いという結果になっ
ている。これは、大沼の情報を旅行会社から得て情報入手がそこで止まってしまっているこ
とになる。その結果、大沼に関してはあまり興味を引かれず、自分から情報を入手するまで
にいたらないのではないかと予測する。それに対し、空港調査では「インターネット」「ガ
イドブック」が多いという結果になっている。これは旅行会社だけでなく、自分たちでも情
報を入手していることになる。
つまり、「函館は観光客にとって興味深い場所ではないのだろうか。」という結果であった。
これも前述の問題と同様に背景で述べた内容を付加するものであった。７つ目に「どのよう
Group Report of 2012 SISP
- 44 -
Group Number 10-A
Hakodate’s sightseeing information site in multiple languages
な情報を調べたか」という質問からは、全体では観光地、お土産、天気が多いという結果が
得られ、分析では「交通手段が少ないという結果だった。これは団体観光客が多いというと
ころにバス移動が多く、自分が調べる必要がないと感じているのではないだろうか。」とい
う結果が出て、国別では台湾では観光地、お土産、天気が多い、韓国では観光地、宿泊施設、
天気が多いという結果が出た。これから国別でコンテンツを変えようか考えたが、それだと
分かりづらくなる上、たまたまそこに居合わせた人々がそのコンテンツを欲していただけの
可能性もあるので遠慮した。８つ目に「函館にどのような情報が欲しいか」という質問から
全体では観光地、天気、飲食店、宿泊施設が多かったことがわかった。分析では「観光客は
もっと詳しく函館の観光施設や、観光スポットの情報を知りたいようだ。「はこぶら」など
は駅周辺や元町などの観光情報を多く発信していたので、もっと他の場所も発信していくべ
きだと考える。」という結果から、観光地と天気、飲食店、宿泊施設のコンテンツを掲載す
ることにした。最後に「函館の何に興味があるか」という質問から分析は「全体では温泉、
グルメ、(文化、交通機関) が多かった。空港調査、大沼調査ともに文化に興味がある人が多
いように感じた。そのことから文化に関する情報を発信しても良いのかもしれない。台湾で
は温泉、グルメ、(建造物、文化、宿泊・ホテル) が多かった。台湾は温泉が多く温泉の国と
呼ばれているらしい。日本でも温泉がかなり有名なので、興味があり比較しているのかもし
れない。台湾は温泉をぬるま湯でゆったりとするところと考えている人が多いらしい。韓国
では温泉、交通機関、グルメ、文化が多かった。韓国では温泉が圧倒的に多い。韓国は温泉
にあまり恵まれていない。特に露天風呂は少ないらしい。韓国では交通機関も多かった。函
館に限らず様々なところの観光に興味があると考えられる。我々の観光サイトでも交通情報
を発信するべきではないかと考える。」となった。システム的にも温泉、グルメ、文化、交
通機関を入れようと考えたが、概ね実装出来たが、温泉に関しては湯の川などにある宿泊施
設にあるものが多かったので、省略し、文化に関しても「観光施設」の情報を載せる事で同
時に文化も知る事が出来ると考えた。そのシステム提案を調査斑と共有しながら、実現可能
なシステムを決定し、プロジェクトを進めた。結果的には、函館のサイトでは、星評価ラン
キング、飲食、観光施設、宿泊施設が主なコンテンツであった。
大沼公園の調査も行い分析した。まず１つ目に、「年齢」について。全体では 40 歳∼59 歳
まで、60 歳以上が多かった。国別では台湾が一番多かった。分析としては、「若い年齢層が
少なく感じた。そこから、日本人にとって大沼は少しマイナーな観光地なので、若い観光客
は函館に集中しているのではないだろうかと予測する。」となった。マイナーな観光地であ
る故、大沼公園の特設のパージも作ろうという事に議論が落ち着いた。２つ目に「出身国」
であるが、「台湾人が意外にも多く、(ツアー 6 組以上は確認)、日本では関西の観光客が多
く見られた。地元の北海道の観光客が意外にも少なかった上、北海道に近い東北が多いと予
想したが、一番多かったのは関東の観光客だった。」となった。分析としては、「関東は自然
を楽しめる場所が少ない。そこから、大沼なら様々な体験ができるので人気があるのではな
いのだろうか。さらに大沼は函館にも近いので函館観光も兼ねてやってくるのではないだろ
うか。」ということで、大沼特設ページの作成の可能性が高まった。
３つ目に「使用言語」について調査した。「外国人はほぼ日本語を使えない。前期でやった
市内探索の看板は、日本語と英語のものがほとんどだった。台湾で英語を使用できる人は約
30% であった。看板を英語で書かれても 70% の人は情報を受け取ることができない。」と
いう結果が出たので、外国人観光客には日本語では無く、英語、もしくはその多言語で提供
すべきだという事がわかった。日本語で看板で書かれても分からないということは、ホーム
Group Report of 2012 SISP
- 45 -
Group Number 10-A
Hakodate’s sightseeing information site in multiple languages
ページ上でも多言語提供が重要だとわかった。４つ目に、「今回大沼に来るにあたってどの
ような旅行形態で来たか」。全体的には個人旅行者が多いとわかった。台湾では団体旅行が
多かったが、個人客が多いという事で、個人向けのプランなどを検討したが、ページにまと
まりがなくなるという事で、今回は未実装である。５つ目に、「今回大沼に来るにあたって
誰と大沼に来たか」ということを調べた。「全体的に家族が多く、大沼は自然と自然を生か
した体験が売りだと考える。」ということで、自然を売り出す大沼にもっと自然を強調する
ためのコンテンツも重要だということで、自然を感じられる体験施設を強調するために、体
験施設の紹介ページも作成することにした。６つ目に、「情報入手」について。大沼の情報
はいつ入手したか調査したところ、日本は大沼に到着する前が圧倒的に多い、台湾は来日前
が圧倒的に多いとわかった。分析としては「 観光する上で観光地の情報を調査することは
ごく一般的なことである。しかし、大沼に到着した後や情報は入手していないと言った人も
数人いた。(台湾の方が多い) そのことから、大沼の情報発信がまだ十分ではないというこ
とが言えるのではないだろうか。」という結果から、大沼の情報発信ももっとするべきだと
考えた。７つ目に「大沼の観光情報をどのように入手したか」という調査を行い、全体的に
はガイドブックが多かった。インターネットは 2 位だった。「インターネットが普及してい
る中で、日本ではガイドブックの方が多く、台湾では旅行会社や友人・知人の方が多いとい
う結果になった。このことから大沼から観光客への情報発信の不足 (ネット) が伺える。」と
いう結果であった。台湾では 1 位旅行会社、2 位友人・知人が多かった。台湾はツアー客も
多いことから旅行会社で大沼の情報を得て終わり、というのが多いのかもしれない。このこ
とから大沼はあくまでツアーの一環であり、メインではないという考えなのではないのだろ
うか。８つ目に「大沼のどんな情報を調べたか」について。全体的には体験・活動が圧倒的
に多い。1 位は体験・活動、2 位は天気、3 位は飲食店、交通手段であり、大自然に恵まれ
て様々なことを体験できる環境があまりないと思うので、そういった面で体験・活動という
ところが注目を浴びてるのではないのだろうか。という分析結果が出た。この調査結果によ
り、実際に実装予定のコンテンツが決定し、実際にサイトに反映することにした。「飲食店
やお土産より、天気や交通手段を調べた人が多かった。「交通手段という面では大沼までの
交通手段がわかりにくいや、大沼国定公園内の地図をもっと詳しく、且つわかりやすくして
欲しいという意見があった。天気に関しては、観光する上で重要な要素となってくるが、体
験・活動が注目されていることから天気もより注目されると考える。」と分析し、天気のブ
ログパーツを加えることにした。９つ目に、「大沼で何を体験したか」という調査で、「全体
的には 1 位サイクリング、2 位温泉が圧倒的に多く、思ったよりも遊覧船の人気が少ないよ
うに感じた。遊覧船は乗れる時間帯が決まっているので、ツアー客などは時間が合わず乗ら
ない、というケースが多いのかもしれない。このことから、短時間で自然を楽しめるサイク
リングや、観光で疲れた体を癒すための温泉を利用する観光客が多いのではないだろうかと
予測する。」この分析結果から、体験の施設別にＰＲしようかと考えたが、大沼のすべてを
ＰＲした方が大沼活性化には良いと考えた。また、「実際に大沼に来て、どのような情報が
欲しいと思ったか」という調査で、全体的には体験・活動が圧倒的に多く、2 番目は交通手
段だった。日本では１位は交通手段、2 位は体験・活動、3 位は飲食店であった。日本人は
体験・活動よりも交通手段の方が多いという結果になった。これは大沼周辺の交通手段が分
かりづらい、また大沼国定公園内の地図が分かりにくいということが考えられる。体験・活
動の情報がもっと知りたいということは観光客に対する情報発信が不足している、または調
べにくい状態になっているのではないだろうか。台湾では 1 位は体験・活動、2 位は天気 (1
Group Report of 2012 SISP
- 46 -
Group Number 10-A
Hakodate’s sightseeing information site in multiple languages
票) であった。台湾人は体験・活動が 99% を占めていた。「台湾人はツアーが多いため交通
手段に関しては情報がなくてもガイドさんが説明してくれるのであまり情報をほしがる傾向
にないのではないだろうか。」と分析し、最後の「北海道の何に興味があるのか」という調
査にも連動して、全体的には 1 位はグルメ、2 位は温泉、3 位はアウトドアが多かった。日
本では 1 位はグルメ、2 位は温泉、3 位は宿泊・ホテルであった。日本では交通手段に興味
がある人が割と多かった。日本人は個人旅行者が多いことからこの結果が得られたのではな
いだろうか。台湾では 1 位は文化、2 位はアウトドア、3 位は建造物であった。「台湾人はグ
ルメや温泉より、その観光地の文化や建造物に興味があるようだ。また、大沼でも自然を生
かした体験・活動が多いことからアウトドアに関しても興味があるようだ。日本では宿泊・
ホテルについで僅差で交通手段アウトドアが多かった。台湾では建造物についで温泉アウト
ドアが多かった。これらの結果からそれぞれのニーズに合わせた情報発信が必要であること
が改めて分かった。」という分析で大沼の調査を終了した。これらをまとめると、得られた
調査結果を分析して、大沼のサイトに関しては、飲食、温泉、体験施設、アクセス方法のコ
ンテンツを実装することにした。これはすべて調査結果から得られたものである。特にサイ
ボウズ Live での更新によって進捗管理を頻繁に行い、斑員の進行度も確認しながら進めて
いった。
発表スライドの草案作成
プロジェクトの進行に影響が出ないように、また、添削期間も設けられ
るように、発表スライドを早めに制作した。また、調査斑のスライドとは分離して作業を
行っていたので、調査斑とも情報共有しながら内容にかぶりが無いように制作した。全体と
システム斑部分の内容を主に担当した。その後デザインコースの斑員に修正してもらい、ス
ライドのデザイン、発表の流れ、つじつまがあっているかどうかを担当教員や斑員にチェッ
クしてもらい、スライドを完成させた。
大沼観光サイトの制作
後期では急遽、大沼公園の観光サイトも制作するという事になり、大沼の
ページのモックアップを依頼したり、ページのデザインを考えた。その完成図を基にページ
制作を行ったのだが、まずはじめは情報収集からスタートした。大沼観光サイトのページ管
理者に連絡を取りデータ引用の手続きを行った。また、そのデータをデータベースに格納
し、その内容をページに反映するようにした。また、斑員が作成した画像を用いてリンクを
作り、飲食、温泉、体験のコンテンツを作成した。また、アクセス方法として、これも斑員
が作成した地図を用いて、英語、韓国語、中国語（簡体字、繁体字）
、日本語の５種類全て翻
訳し、アクセス方法を記述し、言語ごとに切り替えられるようにした。文字化けを防止する
記述も行い、どんなブラウザでも文字化けが起こらずに見れるようにした。天気のコンテン
ツに関してはフリーのブログパーツを探し、より見やすく世界共通語である英語を用いたも
のを探した。そして、全体のレイアウトの調整を行い、バランス良く、全体がきれいに収ま
るようにページを調整した。
固有名詞対策
ユーザ評価担当者が得たフィードバックから、店名やホテル名等の固有名詞が正し
く翻訳されていないということが分かったので、それに対応するために店名などの情報は日
本語以外はすべてローマ字で作成することにした。日本語のデータベースを参照しローマ字
に直す作業を他の班員が行った後、そのローマ字の固有名詞データをサーバにアップデート
する作業を行った。アップデートの手順は、挿入したいデータをＳＱＬ文で一つずつ順に
アップデートして入れていく作業であり、かなり時間を要した。
（※文責: 若林恭平）
Group Report of 2012 SISP
- 47 -
Group Number 10-A
Hakodate’s sightseeing information site in multiple languages
5.3.3
鳴海達朗
開発環境の構築と PHP の学習
開発環境の構築に関して話し合って検討したところ、ローカル
上で作業ができるように統合開発環境である XAMPP を採用することとなった。基本的に
は各自インストールを行うことになったが、早めに作業が終わっていたので他の班員のサ
ポートをすることができた。具体的には、個別にインストールの手伝いをしたり、全員で集
まった際に手順を確認しながらの勉強会のようなものを行ったりした。
また、PHP の学習に関しては、昨年度のソースコードを分担して理解しグループ内で共有
するという方式だったが、このときに要点ごとに詳細な説明を記載したスライドを作成し、
他の班員にも理解を深めてもらえるようにするなど工夫した学習ができた。その後は書籍な
どを活用しての学習となったが、グループ内で教えあったりしながら学習を進めることがで
きた。
OSS セミナーの受講、PHP・データベースの学習 OSS セミナーではサーバ構築などに関して
演習を通して学ぶことができ、その知識は後の開発にも役立てることができた。具体的には
サーバの基本的な設定や、リモートアクセスの活用、インターネットへの接続方法、ログ管
理、セキュリティ管理、障害管理、バックアップの方法、各種コマンドの使い方などを学ん
だ。しかし全セミナーに参加したわけではなかったため、知識が不足している部分もあり、
全セミナーに参加するべきであったと感じた。
また、PHP・データベースの学習に関してはほとんど個人での学習であったため、あまり深
く勉強はせずに数種類のサンプルプログラムを作ってみた程度だったため、少し学習不足に
なっていたように思う。しかし同じ担当箇所の班員と情報を共有するなど、グループとして
の協力した学習も進めることができたと思う。
開発環境の見直し、言語グリッドのデモ用プログラムの開発
言語グリッドを利用したプログラ
ム作成の際に、開発環境に依存した接続エラーが発生していたが、この改善に努めた。昨年
度のプロジェクトリーダーの協力を仰ぐなどしたが、解決までに時間が掛かってしまった。
結果として開発環境と接続用プログラムの修正ということを行うことで無事解決したのだ
が、他の班員には修正済みのプログラムなどを配布するにとどまり、どんな問題だったのか
などの詳細な情報に関しては共有していなかったため、グループとしてその点は共有すべき
だったと思う。
また、言語グリッドのデモ用プログラムの開発に関しては、もう一人の担当班員と協力して
開発を進め、データベースの作成から PHP の作成まで全てを行った。プログラムは中間発
表に間に合わせて完成させることができ、発表時にデモを披露することもできた。しかし、
前述ように開発環境の見直しに時間を割きすぎたために、開発期間が短くなってしまい、ス
ケジュールが押してしまったのは反省点である。
サイト用のデータベース、API 用・翻訳用プログラムの作成
サイト用のデータベースの作成に
関しては、昨年度のデータベースを基にして新たなデータベースを作成し、web サイトの基
盤作りに貢献できた。
また、API 用・翻訳用プログラムの作成に関しては、他の担当班員と協力してじゃらん、
ホットペッパー API を利用して観光情報を取得してデータベースに自動格納するプログラ
ム、データベースに格納された日本語の情報を各言語に変換して、専用のデータベースに自
動で再格納するプログラムの作成に努めた。ここで API やデータベースに関する学習不足
から、調べながらの開発になってしまい時間が掛かってしまった。基礎的な部分以外に関し
Group Report of 2012 SISP
- 48 -
Group Number 10-A
Hakodate’s sightseeing information site in multiple languages
ても事前に学習しておくべきだったと思う。
コンテンツ実装、レイアウト調整、スマートフォン用ページの作成
コンテンツ実装に関しては他
の班員が作成してくれた雛形に PHP を組み込むことから始まったが、担当班員と分担して
の作業となった。担当した部分の大体のデータ表示は終えることができたが、SQL に関す
る勉強不足から SQL エラーの修正などは他の班員に受け渡してしまったため、やはり初期
の段階でもう少し勉強しておくべきだったと感じた。
その後 SQL に関する部分はそのまま引き継ぎとなり、私は星評価機能と Google Maps API
の JavaScript による実装に努めた。星評価は昨年度あったものをベースに今年度向けに作
り直す形となった。データベースの作成と SQL を含んだ PHP の実装により、機能を実現
させることができた。Google Maps API は web サイトなど参考に JavaScript で実装し、
データベースに格納された座標情報を地図上に表示させることができた。また、独自に web
版 Google Maps との連携機能の追加も行った。これらの作業過程で気付いたレイアウトの
誤りや表示の問題等の改善も行うことができた。
また、スマートフォン用のページの作成は私が全行程を担当することになった。基本的には
PC 用ページのソースを基にコンテンツの削減や最適化、レイアウトの調整を行うことで専
用ページの開発を行った。Google Maps の表示部分はスマートフォンで観覧した場合には、
端末に内蔵された地図アプリと連動させる機能も盛り込み、よりユーザが使いやすいサイト
作りに貢献できたと思う。これらの作業と並行してスマートフォン実機での表示テストも行
い、徹底した開発をすることができた。1 人で全行程を担当したため、スマートフォン用の
ページ開発に関する知識は多く身につけることができた。
プロジェクト全体を通して、若干学習不足だった部分もあったが、他の班員のサポートなど
を行うこともでき、システム班の活動に貢献できたように思う。ただ、反省点としてスケ
ジュール管理等は他人任せになりがちだったたということが挙げられる。もう少し余裕を
持った開発をするべきであった。
（※文責: 鳴海達朗）
5.3.4
柏谷美帆
発表ポスターの制作 中間発表用のシステム班ポスター、最終発表用の全体ポスター・システム
班ポスターを作成した。今まで使ったことがなかった Adobe Illustrator を使い、デザイン
コースのメンバーに教えてもらいながら作成した。伝えたい情報をいかにシンプルに一目見
ただけで伝えることができるか、という点に考慮して毎回作成し、班員の意見やアドバイス
を汲み取りながら、シンプルかつ見やすい、伝わりやすいポスターを作ることができたと思
う。毎回担当教員にも添削をしていただき、学生目線だけではなく教員目線からの指摘を受
けることで、よりよいポスターを作ることができた。個人的には、Adobe Illustrator の技
術を修得することもできたし、ポスターデザインを毎回考えることで、今まで興味があった
デザインにも微力ながら携わることができたので大きな収穫となった。ポスターを作成して
いる私は、実際に本プロジェクトで活動してきたので何をしてきたのかわかっているが、ポ
スターはもちろんプロジェクトのメンバーが見るわけではない。なので、初めて私たちのプ
ロジェクトを知る人に対して、どのようにポスターを書けば伝えたいことをできるだけ多く
伝えることができるかということを常に考え、工夫しながらポスターを作成した。班員や担
当教員に作成途中のポスターを見せたり、完成したポスターを見せるなどして意見やアドバ
Group Report of 2012 SISP
- 49 -
Group Number 10-A
Hakodate’s sightseeing information site in multiple languages
イスを募ってきたが、それでも意見などをもらえるのは５人と限られている。万人にわかり
やすく伝わりやすい「モノ」を作るのは難しいんだと強く感じた。
プロジェクトサブリーダーとしての仕事
プロジェクトリーダーと連携し、プロジェクトの全体の
スケジュールなどを決めたり、全体の議論の際にメンバーに発言を促したり、書記を努めた
り、疑問点がある場合は積極的に解決しようとした。前期は自ら仕事を見つけサブリーダー
として動くことができなかったので、前期の反省点として積極的に動くことを挙げていた。
後期は班に分かれての活動が主だったので、プロジェクト全体として活動する上でのサブ
リーダーとしての目立った仕事はあまりなかった。なので、システム班内でのディスカッ
ションの際に班員として積極的に意見を出したり、みんなの作業内容を把握して、自分が今
するべきことを考えて作業するよう心がけていた。しかし、後期の反省点としても、各班の
間での連携がうまくとれていなかったと思うし、プロジェクト全体としてもそのような反省
点が挙がっているので、後期の活動中にそのことにもう少し危機感を持ち、サブリーダーと
してできることをするべきだった。しかし、システム班内で皆が作業しやすいよう、活動し
やすいようたくさん意見を出したり、皆の進捗状況を気にして把握し、プロジェクトリー
ダーと適宜話し合ったことはよかったと思うし、システム班、プロジェクトにとってもよい
結果をもたらしたと思う。
開発環境の導入
システム開発を行うために開発環境を整えた。具体的には XAMPP や pgAdmin
をインストールし設定などを整え、実際にシステム開発ができるようにした。 全員で同時
にやったことで、私を含めわからない班員に対しても知識共有ができたので効率的だったと
思う。開発環境の導入は、プロジェクト学習をどのように進め、どのようにメンバーや班員
と連携をするなどわからないことが多い中でも、すぐに開発環境の導入として行動に起こし
たのは良かったと思っている。知識が豊富な班員や昨年のリーダーの手助けもあって、早い
段階で開発環境を導入でき、良いスタートを切ることができた。
トップページの画面デザイン作成 班 員 が あ ら か じ め 作 っ て お い て く れ た モ ッ ク ア ッ プ を も
と に 、ト ッ プ ペ ー ジ の 画 面 デ ザ イ ン 作 成 を 行 っ た 。私 は Adobe Illustrator も Adove
Dreamweaver も使用したことがなかったが、デザインコースの班員から教えてもらい
ながら、トップページのデザイン画面の作成から、マウスオン時の動作や画面遷移のリンク
付けなどの基本的な動作の付加を行った。特に、マウスオン時の動作の作成にとても苦労し
たが、少し時間はかかったものの大方ひとりで作成することができた。また、マウスオン時
の動作は 40 枚ほどの画像を切り替えるような形でシンプルに作成した。マウスオフ時とマ
ウスオン時で画像のそれぞれの部品の位置が少しでもずれると画面に変化が出てしまうの
で、少しもずれないように作成する点が難しかった。他のページの画像や観光サイトのアイ
コン、レイアウトなどは他の班員にまかせてしまい、私はデザインや基本的なサイト構成に
ついては少しの部分しか携わることができなかったので、もう少しやったことがないソフト
を使ったり、あまりデザインをやったことがないなりに、このような部分に携わるべきだっ
たかと思う。
固有名詞の翻訳データベース作成 サイト完成後に行ったユーザテストで、店名などの固有名詞が
正しく翻訳されておらず、肝心の店名やホテルの名前、観光地の名前がわからないという指
摘があった。これを受け、固有名詞を言語グリッドを用いずに正しく翻訳するシステムを開
発することとした。ここで、私は固有名詞の翻訳データベースの作成を担当した。レストラ
ン・宿・観光地の名前を、全てローマ字、または英語で表記し、外国人観光客が一目見ただ
けで店名を理解できるようにした。ここで工夫した点は、前述した通り一目見ただけで理解
Group Report of 2012 SISP
- 50 -
Group Number 10-A
Hakodate’s sightseeing information site in multiple languages
図 5.1 日本語トップページ
図 5.2
Group Report of 2012 SISP
英語トップページ
- 51 -
Group Number 10-A
Hakodate’s sightseeing information site in multiple languages
Group Report of 2012 SISP
図 5.3
第二階層
図 5.4
第三階層
- 52 -
Group Number 10-A
Hakodate’s sightseeing information site in multiple languages
できるようにすることである。なるべく簡単な単語は英語で表記することで、見やすさにこ
だわった。例えば「公園」は「kouen」と翻訳するよりも「park」と英語で表記した。そし
て私が作成した正しく翻訳された店名リストを他の班員がデータベースに格納し、日本語以
外の言語が選択された時にこのデータベースから参照するようなシステムにした。
最終発表のプレゼンスライド作成
最終発表の際は、全体のプレゼンスライドのテンプレートと、
調査班以外のスライドを作成した。中間発表の際はプレゼンスライドについて、聴衆者の評
価シートによりたくさんの意見があったので、デザインを統一する、見やすい色を使う、文
字の量を少なめにするなど頂いた意見を参考にしながらスライド作成を行った。文章や箇条
書きの部分はもちろん、グラフや表の見やすさにもこだわり、注目して欲しいところの色を
変えたり、まるで囲うなどした。軸のタイトルや目盛、項目などの文字も聴衆者に見えやす
いのを考慮して作成した。担当の教員に添削していただき、プロジェクトメンバーでも意見
を出し合い修正を重ねて見やすく伝わりやすいスライドができた。
PHP、データベースの学習 開発環境を導入した際に、PHP の学習を行った。具体的には、去年
の成果物のプログラムをメンバーで役割分担をし、どのプログラムがどのように動いている
かなどを調べて皆に発表するという勉強会を行った。これは、プロジェクトを行なっていく
上でのモチベーションの向上にもつながり、また技術的にもとても勉強になった。PHP は
私にとって初めて触れる言語だったので、他のメンバーに教えてもらったり、自らライブラ
リーで関連図書を借りて勉強したりなどした。データベースの学習も同様に関連図書を読
み、基礎的な知識をつけた。データベースについて講義を受けていたシステムコースのメン
バーの知識が活躍し、教えてもらったことが大変ためになった。PHP もデータベースも、
初めて触れる分野ではあったが、自己学習やメンバーとの勉強などで知識の基盤を作ること
ができたのでよかった。
（※文責: 柏谷美帆）
5.3.5
久保美沙希
開発環境の構築と PHP の学習
プロジェクトが始まった初期段階では、まずサイト構築に必要と
なる言語である PHP の学習を行った。その中でまず XAMPP を推奨機にインストールし、
自宅や学校で気軽に PHP の学習や構築ができるように環境を整えた。その後、図書館など
で PHP に関連する書籍を借り、例題や今後必要になるであろう機能や関数を抽出しながら
PHP の学習を進めた。また、その後データベースについても学習するために pgAdmin を
インストールし、データベースが学べる環境を整えた。その後、同じように図書館などで借
りた書籍を参考にして、データベースに関する知識を深めた。これらの学習について、夏休
み以降の本格的な函館の観光情報サイトを構築する上で、私は特にデザインコースであるた
め、主にアイコンの作成や、雛形の作成など、主にサイトのデザインに関する作業を多く請
け負っていたため、本格的に PHP やデータベースに触れることは少なかったが、これらの
知識を少しでもつけておいたおかげで、雛形やデザインを班員に提案する上で、構築のしや
すさや、反映のしやすさを、PHP などの言語に関する視点で考え、デザイン案を提案でき
たため、結果的にプロジェクトを円滑に進める上での、大きな役割になったと考えている。
モックアップの制作 中間発表で、決定しているデザインの提示をわかりやすく行うためにモック
アップの作成を行った。主に、トップページ、第 2 階層、第 3 階層のおおまかなデザイン
をモックアップで表現した。また、デザインに関しては、言語選択を国旗で表現し、日本語
Group Report of 2012 SISP
- 53 -
Group Number 10-A
Hakodate’s sightseeing information site in multiple languages
表示の段階でも言語選択のアイコンが目に入りやすいようにした。また、トップページに大
きくエリア選択の地図を配置し、初期段階でエリアとジャンルで絞り込めるよう、配慮して
トップページをデザインした。その他、第 2 階層、第 3 階層についてはトップページのデザ
インと統一するように、配置などを考えデザインを行った。これらに関しては最善だったと
思う。しかし、モックアップの段階で他ページの詳細のデザインも完成しており、なおかつ
雛形のモックアップも作成していれば、その後の作業がもっと捗ったと感じる。
ポスター・発表スライドのデザイン確認・訂正・補助
ポスターやスライドでは、主にデザイン
の確認や修正を行った。ポスターに関しては、一部使用している図や絵の作成を Adobe
Illustrator で行った。また、中間発表用スライドに関しては、調査班とシステム班、それぞ
れが作成したスライドをまとめた。主に、それぞれのスライドを合わせたときに情報をどの
ように提示していけばわかり易いかを考慮し、スライドの順序を考えたり、それぞれのグ
ループでばらばらだったスライドのデザインを統一させ、全体の情報とデザインをまとめる
作業を行った。デザインを統一させる作業に関しては、うまく両者の情報やデザインを統一
できたと感じるが、中間発表後の評価で、言語グリッドのページの配置がおかしいという指
摘があり、もうすこしプレゼンテーションにストーリー性を持たせて、スライドの構想を練
るべきだったと思う。
ストリートボードの作成
中間発表後、Web サイトの本格的な構築が始まるため、サイト全体の
ストリートボードを Adobe Illustrator で作成した。トップページ、第 2 階層、第 3 階層の
デザインはもちろん、そのほかのページ、他ページへのリンク、リンク先、アイコンの役割
などを事細かに記したストリートボードをサイトの設計図として作成した。ここでは、モッ
クアップとのデザインと比較して、配色の変更や、その他ロゴなどの新しいデザインを追加
して、ほぼ完成系近いデザインを記載した。そのストリートボードを元にサイトの構築を進
めた。 ストリートボードに関しては、かなり細かいデザインまで表記し、ほぼ原型に近い形
のものを作成できたので、良かったと思うが、最終的に完成した Web サイトと多少の誤差
があった。これは、実装の可能不可能を無視してデザインを進めてきたことに原因がある。
そのため、ストリートボード作成の時点で、もっとサイト構築に関わる知識を身につけ、そ
の上でデザインを進めていくべきだったと感じる。
ページ雛形の作成
ページ雛形に関しては Adobe Dreamweaver を使用し、作成を進めた。前に記
述したストリートボードのデザインをもとにして、サイト全体の枠組みを作っていった。主
にテーブルを使って画像や文字、アイコンなどの配置を決定し、また、Adobe Dreamweaver
の機能を使ってマウスオーバー時の画像の変更や、リンクの作成を行った。雛形を作ったこ
とに関しては、後の作業がとても捗ったため、良い選択だったと思うが、テーブルを使って
のデザインに絞ったため、ブラウザごとの表示の崩れなどに対応しきれていなかったため、
もっと後のことを考えたデザインで雛形を作成するべきだったと感じる。
アイコンの作成
アイコンに関してはトップメニュー、エリア選択のアイコン、ジャンル選択のア
イコン、サブメニューのデザインを行った。それぞれのアイコンごとに、日本語、英語、中
国語 (簡体字・繁体字)、韓国語での表示のバージョンも一枚ずつ作成し、多言語に対応した
アイコンを目指した。また、マウスオーバーの動作を構築する際に使用するアイコンも同じ
だけ作成し、膨大な量のアイコンを Adobe Illustrator で作成した。これらのアイコンは膨
大な量をほぼ 1 人で作り上げることができたので、良かったが、作成の段階で、多少のずれ
や、言語の違い、わずかな色の違いが発生し、感性までに多大な時間を要したため、膨大な
量ではあるが、もっと１つ１つ丁寧に仕上げていくべきだったと感じでいる。
Group Report of 2012 SISP
- 54 -
Group Number 10-A
Hakodate’s sightseeing information site in multiple languages
トップページのデザイン
トップページのデザインに関しては、ほぼ１人ですべてのコンテンツの
配置やデザインを請け負った。近年の一般に公開されている既存の観光情報サイトの特徴と
して、トップページに情報量が多いことがあげられる。実際に自分で何度も観光サイトを使
用したことはあるが、自分が必要としている情報をトップページから探し出すまでに、少し
時間を要してしまうという経験が何度もあった。その経験や、ほかの観光サイトの研究か
ら、本プロジェクトで構築する観光情報サイトのトップページをデザインした。まず、真ん
中に配置するメイン画像には、函館の地図を配置し、その地図から自分が調べたいエリアを
選択できるよう、マウスオーバー機能を搭載した。また、言語選択のアイコンに関しては、
目立つよう、色とりどりの国旗で各国の言語を表現し、一目で自分の国が選択できるように
配慮した。メインメニューに関しては、メイン画像のすぐ下に目立つように配置し、そこに
もマウスオーバー機能を搭載した。そのほかの機能としては天気の機能を付け加えた。トッ
プページに掲載されている情報は、メインの宿、観光、グルメといった基本的な情報と、エ
リア選択、函館の天気、言語選択のみである。一見少ない情報に見えるが、観光客が函館に
ついて調べる上に真っ先に必要となるであろう情報をとにかく目立つように配置したため、
ネットやパソコンの経験が少ないユーザーでも迷わず、欲しい情報のページにたどり着くこ
とができると考えている。図 5.1 が、最終的なトップページのデザイン画である。
図 5.5
トップページのデザイン
図のように、シンプルで必要な情報が一目でわかるような、無駄の無いデザインを心がけた。
そのため、このプロジェクトで作成したトップページのデザインについては満足のいくもの
ができたといえるが、最終発表にてトップページの配色がアイコンと同化してしまいわかり
難いという指摘を受けた。これは、マウスオーバーでアイコンとトップページの配色の差別
Group Report of 2012 SISP
- 55 -
Group Number 10-A
Hakodate’s sightseeing information site in multiple languages
化を図っていたのだが、マウスが乗らない時点でも、色の差別化は必要であったと考えられ
る。そのため、今後トップページの配色について考え直していく必要があると考えている。
サイトロゴの作成
サイトロゴに関しては『Hakodate Sightseeing』というサイト名の H と S を
頭文字に取り、デザインした。デザインは図 5.2 のとおりである。
図 5.6 サイトロゴのデザイン
サイトの色に合った茶色を基調とし、旅行のトレードマークを意味する飛行機、またサイド
にある星は函館の五稜郭の星をイメージしてデザインした。幾つかのロゴデザインの候補の
中から、一番班員の支持を集めたデザインを採用した。サイトロゴについてはサイトの雰囲
気に合ったデザインのロゴが作成できたと思う。
大沼特集ページのデザイン及び雛形の作成
調査班からあがってきた調査結果を元に大沼の特集
ページをコンテンツとして組み込んだ。調査結果から、大沼に訪れている観光客が必要とし
ている情報としてグルメ、体験、温泉、アクセスの４つの項目が上位を占めていることがわ
かった。そのため、大沼特集ページにはこの４つの項目を主としてコンテンツ化することを
決めた。まず、大沼特集ページのメインページの雛形を作成した。メインページには、シン
プルに先ほどのグルメ、体験、温泉、アクセスの４つのメインメニューを配置し、マウス
オーバーなどの動作も構築し、より動作を促すようデザインした。また、追加コンテンツと
して大沼の天気もメインページに組み込んだ。その後、メインメニューの詳細ページを班員
と話し合い、大沼のグルメ、体験、温泉、アクセスの情報を『まるごと大沼』という大沼の
観光情報サイトから引用することに決定した。引用許可のアポイントメントを班員にとって
もらい、その後デザインのアドバイスを行いながら、詳細ページの構築を、データベースな
どを利用して行ってもらった。また、その後、大沼の特集ページを作成したことで、大元の
観光情報サイトのトップページに変化が生じた（大沼特集ページのリンクの配置による）た
め、トップページの画像をすべて Adobe Illustrator で作り直す作業を行った。図 5.3 が、
大沼特集ページの最終的なデザインの一部である。
図のように、グルメ、体験、温泉、交通をメインのメニューとし、下のほうに大沼の天気、函
館から大沼までの簡単なアクセス地図を掲載した。大沼特集サイトの全体の評価としては、
Group Report of 2012 SISP
- 56 -
Group Number 10-A
Hakodate’s sightseeing information site in multiple languages
図 5.7
大沼特集ページのデザイン
調査班の調査結果があがってきたのが、９月ごろと、最終発表までの時間も少なく、ほぼサ
イトの枠組みが完成している中、それを少し崩して組み込んだコンテンツであるにもかかわ
らず、コンテンツの情報量や、インタフェースとしては大変満足のいくものができたと考え
ている。しかし、調査班が提示してくれた、大沼のページに関するコンテンツの提案で、ま
だ実装し切れていないものが幾つか存在する。そのため、今後そのコンテンツの実装も進め
ていくべきだと考えている。
（※文責: 久保美沙希）
5.4
成果発表会における発表評価シートの分析
本プロジェクトでは、平成 24 年 12 月 7 日に行われたプロジェクト学習の成果発表会にて、私
たちの発表を見に来てくださった方々に発表者の発表技術と、発表内容に関するアンケートを行っ
た。それが発表評価シートである。発表評価シートを使ってアンケートを行うことにより客観的な
視点から自分たちの発表を見ることが出来る。
本項では発表評価シートについてのまとめと分析について述べる。
（※文責: 曽我知央）
Group Report of 2012 SISP
- 57 -
Group Number 10-A
Hakodate’s sightseeing information site in multiple languages
5.4.1
発表評価シートのまとめ
まず、評価項目について述べる。評価項目は、発表技術に関する評価と発表内容に関する評価の
2 つがあり、それぞれ 10 段階評価とコメントを残してもらえるようになっている。発表技術に関
する評価の基準はプロジェクトの内容を伝えるために、効果的な発表が行われているかである。ま
た、発表内容に関する評価の基準はプロジェクトの目標設定と計画は十分なものであるかである。
これらの基準を元に評価者は 1(非常に悪い) から 10(非常に優秀) までの 10 段階評価をし、評価の
理由やアドバイスなどを、項目に分けて出来るだけ詳細にコメントしてもらった。発表評価シート
は図 5.1 のようになっており、学内関係者である、教職員と学生だけでなく、学外の一般の方も評
価が出来るようになっている。
図 5.8
発表評価シート
発表会後にこの評価シートを集計したところ、47 件の回答を得ることが出来た。有効な回答の
詳細は、表 5.1 のようになっている。
表 5.1 評価項目の有効回答数
Group Report of 2012 SISP
項目
有効回答数
発表技術評価
45
発表技術コメント
44
発表内容評価
42
発表内容コメント
46
- 58 -
Group Number 10-A
Hakodate’s sightseeing information site in multiple languages
この回答の中から各 10 段階評価の平均と標準偏差、そして普遍分散を求めた結果が表 5.2 で
ある。
表 5.2
評価項目の有効回答数
項目
平均
標準偏差
普遍分散
発表技術評価
7.38
1.52
2.38
発表内容評価
7.45
1.90
3.72
また、各コメントを大まかに分類すると次のようになる。
【発表技術に関するコメント】
・声が小さい、聞き取りにくい
・聞き取りやすい、わかりやすい
・スライドのほうを見ないで発表したほうがよかった
・言葉が詰まっているときがあった
・発表者は名乗れ
・スライドが見やすかった、分かりやすかった
・スライドが分かりづらい、長い、情報量が多い、見づらい
・グラフが見づらい
・写真やグラフでの説明が良かった
・吹き出しが見づらい
・図や写真の説明がない
・箇条書きなら文頭に点がいる
【発表内容に関するコメント】
・調査班とシステム班の連携性が良く分からない
・プロセスや実施体制などの内容が分かりやすかった
・サイトについてもっと知りたかった
・アンケートの説明・分析がもっとほしい
・ニーズ調査が良かった
・スマートフォンのレイアウトに対応したのは良かった
・言語グリッドの説明が足りなかった
・言語グリッドに目をつけたのは良かった
・サイトの独自性が分からない
・調査の内容説明が長いように感じた
・スマートフォンに対応した理由の説明が無かった
（※文責: 曽我知央）
5.4.2
発表評価シートの分析
5.4.1 を踏まえて今後につなげていくためにアンケートの分析を行った結果が以下の通りである。
【発表技術に関する分析】
1. 声が小さい、聞き取りにくい、聞き取りやすい、わかりやすい
Group Report of 2012 SISP
- 59 -
Group Number 10-A
Hakodate’s sightseeing information site in multiple languages
分析結果:発表者によって差があった。事前に大きな声で発表することを確認するべき
だった。
2. スライドのほうを見ないで発表したほうがよかった、言葉が詰まっているときがあった
分析結果:スライドを見ながら対応させて発表するのは良いが、それが多くなりすぎてしまっ
たために聞き手にこのような印象を与えてしまったと考えられる。また、言葉の詰まりが指
摘されたことについては、許容範囲だと答えてる人もいたがもう少し練習が必要だったかも
しれない。
3. 発表者は名乗れ
分析結果:名乗りましょう。
4. スライドが見やすかった、分かりやすかった、スライドが分かりづらい、長い、情報量が多
い、見づらい
分析結果:スライドが見やすいという意見のほうが多かったが、情報量の多さがかえって見
づらさを与えてしまったと考えられる。
5. グラフが見づらい、吹き出しが見づらい、写真やグラフでの説明が良かった
分析結果:グラフを取り入れることでよい発表ができていたのは事実なので、聞き手がより
見やすいモノを作成するべきだった。
6. 図や写真の説明がない、箇条書きなら文頭に点がいる
分析結果:細かい点で、スライドの校正ができていなかった。
【発表内容に関する分析】
1. 調査班とシステム班の連携性が良く分からない
分析結果:実際にうまく連携はできていなかった。プロジェクトの時間の進捗確認やリー
ダー同士の進捗の確認、今後の予定の把握ができていなかった。2 つの班を連携させるよう
に毎回、合同会議を開く等すれば回避できたかもしれない。
2. プロセスや実施体制などの内容が分かりやすかった、ニーズ調査が良かった、言語グリッド
に目をつけたのは良かった、スマートフォンのレイアウトに対応したのは良かった
分析結果:これらの点は良かった。
3. サイトについてもっと知りたかった
分析結果:もう少し、デモ機を使用してもらえるように促すべきだった。
4. アンケートの説明・分析がもっとほしい、言語グリッドの説明が足りなかった、スマート
フォンに対応した理由の説明が無かった、サイトの独自性が分からない、調査の内容説明が
長いように感じた
分析結果:説明不足だった。限られた時間内で提供する情報を厳選していくべきだった。
（※文責: 曽我知央）
Group Report of 2012 SISP
- 60 -
Group Number 10-A
Hakodate’s sightseeing information site in multiple languages
第6章
6.1
6.1.1
今後の課題と展望
今後の課題
言語グリッドに関して
前期はシステム班として、言語グリッドを理解する過程のひとつとして言語グリッドを実装した
プログラムを作成したが、作成当時では機械翻訳しかできておらず、完全に web ページとして使
用できる言語グリッドを実装できているとは言いがたい状況であった。観光サイトとして提供する
にあたり、店名や一部の地名等の固有名詞が正しく翻訳されないのは致命的なので、それらを解決
するために固有名詞の翻訳文を格納した辞書ファイルを作成し、固有名詞の入った文書を翻訳する
際はその辞書ファイルを参照して正しい翻訳結果が返されるようなプログラムを作ることを前期は
課題としていたが、後期に作成したサイトは辞書ファイルを作ることなく、手動で固有名詞対策を
していた。それでは、その場しのぎの固有名詞対策しかできていないことになる。それでは、デー
タベースの中身をアップデートする際に毎回、手動で固有名詞対策をする必要が出てくる。外部公
開を目指しているサイトとしてはそれでは良いとは言いがたいので、辞書ファイルを作る必要があ
る。また、言語グリッド自体の翻訳精度に問題があるので、形態素解析を用いたより精度の高い翻
訳を目指す等、実際に外部公開を目指すのならばより外国人が使いやすいサイト作りをやっていく
必要があると考えられる。
（※文責: 曽我知央）
6.1.2
レイアウトに関して
次にスマートフォンとブラウザの種類によってサイトのレイアウトが崩れてしまう問題がある。
図 6.1 は FireFox で見ることで正常なレイアウトになっているのを示している。図 6.2 は表示が崩
れるブラウザで見た場合である。ブラウザ毎の表示の差異は小さいものなので、ブラウザを判別し
てそれに対応した表示に切り替わるように記述を追加することで対応できる。
スマートフォンのレイアウトが崩れる問題に関しては、機種によって差があるために対応が難
しいのが現状である。iPhone と Android でレイアウトの問題を比べると、iPhone は、現状では
若干レイアウトが崩れるものの表示は問題なくでき、微調整のみでいいと考えられる。しかし、
Android の場合、メーカー別に OS に手が加えられていることがあり、スマートフォンのデフォル
トのブラウザで閲覧したときにメーカーごとにレイアウトが崩れてしまうことがある。また、画面
サイズによってもレイアウトが崩れることがあり、難題のひとつとなっている。Android の OS の
バージョンによってレイアウトが崩れるかどうかは判別していないが、可能性が無いとは言い切れ
ない。これらを踏まえてスマートフォンに完全に対応するのは中々、難しいものがあると考えられ
る。スマートフォンのレイアウトの対応は、現状の知識以外にもスマートフォンのサイトを作る場
合の知識を得る必要がある。その上でスマートフォンに対応させていけるようにしたい。
（※文責: 曽我知央）
Group Report of 2012 SISP
- 61 -
Group Number 10-A
Hakodate’s sightseeing information site in multiple languages
図 6.1
図 6.2
Group Report of 2012 SISP
正常なレイアウト
ブラウザによるレイアウトの崩れ
- 62 -
Group Number 10-A
Hakodate’s sightseeing information site in multiple languages
6.1.3
データのソートに関して
また、課題として、データの表示順が変えられない点があげられる。星評価は実装したものの、
その星評価が高い順に自動で並び替えることや、ユーザの指定によって、表示順序を変更すること
ができていないので、ユーザビリティが高いとはいえない。そこで、ユーザの指定と星評価によっ
て並び順がソートできるような SQL 文を追加することで、対応を目指していく。
（※文責: 曽我知央）
6.1.4
調査班との連携に関して
最後の課題として、調査班の調査結果から得たコンテンツ案を実装し切れなかった点が挙げられ
る。調査班からあがってきたコンテンツ案は、大沼の人気体験・活動ランキング、大沼までの詳し
いアクセス方法、大沼国定公園内の地図、年代別・同行者別オススメスポット、お土産ランキング、
バス・電車の時刻表、函館旅行プランがあった。その中で実装できたのは、大沼までのアクセス方
法と大沼国定公園内の地図だけであった。他のコンテンツ案が採用できなかった理由としては、開
発が遅れたために実装するコンテンツに優先順位を付けた結果、実装ができなかったというのが大
きな理由としてある。また、個々のコンテンツ案について、実装できなかった理由としては、まず
大沼の人気体験・活動ランキングについては、何を基準に体験・活動ランキングをとるのかという
問題が発生したためである。実際に自分たちで現地に行き、ランキングを調査する方法では、デー
タを更新する際に再びランキング調査をする必要があるため現実的ではなかった。また、大沼の各
店舗に協力を仰ぐ場合でも、全店舗に許可を得てランキングを作成する必要が出てくるため、短期
間では難しかったことも原因のひとつといえる。しかし、ユーザが評価をしてランキングを作成す
ることにした場合は、すでに実装済みの星評価機能を流用してコンテンツを実装することは可能
だと考える。今後、どのようなランキングにするかといったことをもう少し煮詰める必要がある。
次に、年代別・同行者別オススメスポットについては、そもそもデータ無いために作成できなかっ
た。年代別・同行者別オススメスポットを提供するためには年代別・同行者別に訪問回数が多い観
光スポットの調査結果が必要不可欠だがそれが無いため、一から調査をしていると時間がかかり、
短期間では無理だと判断したため実装できなかった。お土産ランキングは、人気体験・活動ランキ
ングのときと状況としては一緒であるが、一番問題なのは、お土産のデータベースをどこから入手
するかということである。函館のお土産を網羅的に収集しデータベースを作成する必要があるた
め、労力がそれなりにかかることが予想される。時間の都合上、そのようなお土産情報を網羅的に
取り扱っているサイトがあるかは調べられていないが、今後、調査しサイト管理者から使用許可が
下りた場合はコンテンツとして実装できうるものであると考える。次に、バス・電車の時刻表を提
供することだが、これは函館バスと連携することで実装可能性が高まると考えられる。私たちが提
供している店やホテルの情報とバス停の情報をリンクすることで、函館バスが提供している時刻表
やバスのランドマーク情報である、バスロケーションシステムの導入ができ得ると考えられる。函
館バスとの連携の調整や店やホテルの位置とバス停の位置をリンクさせる必要があるが、特に連携
の面で時間が割けなかったために実装にいたらなかった。最後に、函館旅行プランであるが、函館
の旅行プランはまず、誰がプランを制定するということから問題がある。私たちがプランを制定す
るということであれば、そもそもの観光情報を多言語で発信するというプロジェクトの趣旨から
ずれてしまい、観光サイトの作成プロジェクトになってしまう。また、外部の委託を考えた場合で
Group Report of 2012 SISP
- 63 -
Group Number 10-A
Hakodate’s sightseeing information site in multiple languages
も、旅行会社と連携し函館旅行プランを委託する場合、まずどの旅行会社に頼むのか、そもそも公
立大学で行われているプロジェクト学習が官公庁以外の民間企業と連携をしていいのか、またはで
きるのかがまだわかっていない。このような状況から、プロジェクト学習の時間内では実装ができ
なかった。また、今後も導入は見込みがたいと考えられる。
（※文責: 曽我知央）
6.2
今後の展望
今後の展望について、最終的には、web ページの一般公開を目指す。具体的にははこだて未来大
学の学外向けサーバに本プロジェクトで作成した成果物であるサイトを置くことで公開したいと考
えている。また、公開後は主に、サイトの運営と保守を行う必要が出てくる。運営としては、定期
的にデータベースの内容をアップデートし、そのデータベースを元に多言語化したデータベースを
作成するという作業がまずひとつ。次に、ブラウザやスマートフォンの OS のアップデート状況に
よりサイトのレイアウトが崩れていないかチェックし、適時修正箇所を直す必要がある。また、大
沼のデータベースは他サイトから情報提供を受けているので、定期的にサイト管理者の方に連絡を
とる必要性があると感じている。また、ユーザ評価は行ったが、実際の観光客ではないので、サイ
トのユーザの意見をサイト上で聞けるような仕組みを作ることで、より良い多言語観光情報サイ
トの運営ができるのではないかと思う。たとえば、ユーザがサイトに対する意見を入力することが
できるようなフォーラムと、その意見を入れるデータベースを作ることによって実現できる。最後
にサイトの保守に関してだが、これはあまり無いように思える、今年度の成果物は昨年度の成果物
を参考にしているが、今年度は昨年度と違い、ユーザの口コミ機能は実装しておらず、それによっ
て、サイトの保守にかける労力も減っている。あえて言うなら、星評価機能であるが、これは同一
のユーザが評価を何度も下していることや、短時間にいくつもの低評価があった場合にその評価を
削除することで対応できると考える。
（※文責: 曽我知央）
Group Report of 2012 SISP
- 64 -
Group Number 10-A
Hakodate’s sightseeing information site in multiple languages
付録 A
新規習得技術
主に PHP、HTML、PostgreSQL を学習した。班員それぞれの担当により学習状況にバラつき
があるが、全員でこれらのことを学習してプロジェクト学習に臨んだ。これらの 3 つは、お互いに
関連性があるので、一つのことだけを学習するのではなく連動して学習を進めていった。
PHP は HTML で作ったサイトの雛形に PHP の記述を加えるという形で学習した。PHP の記
述では、HTML 内で SQL の記述を書き呼び出したデータベースの内容を制御するといったことを
主に行った。
HTML は 前 述 の PHP や SQL 文 を 書 き 込 む 前 の サ イ ト の 雛 形 を 作 成 す る 目 的 で Adobe
Dreamweaver を使用して作成した。
PostgreSQL はデータベースに関する部分で学習した。データベースの内容を呼び出す際の
SQL 文を作るときに利用した。
Group Report of 2012 SISP
- 65 -
Group Number 10-A
Hakodate’s sightseeing information site in multiple languages
付録 B 活用した講義
「データベース工学」を活用して、入力した文字列を格納するデータベースの構築、データベー
スと言語グリッドの接続を行なった。また、「OSS セミナー」を活用して、サーバーの構築のため
の演習を行なった。
Group Report of 2012 SISP
- 66 -
Group Number 10-A
Hakodate’s sightseeing information site in multiple languages
付録 C
C.1
相互評価
曽我知央に対する評価
若林恭平 前期: 曽我君はシステム班の役割分担をしっかり行い、スライド作成の修正を行なって
くれた。また、担当教員との連絡や全員にアナウンスを積極的に行ってくれた。
後期: プロジェクトリーダーとして全体の話し合いの中心になり、まとめてくれた。また、
システムの面も大きく関わり、DB の呼び出し、DB つくりに大幅に貢献してくれた。
鳴海達朗 前期: 自分の仕事に責任を持ち、確実な仕事をしてくれた。時にはムードメーカーとし
て場の空気を和ませてくれたりもしていた。
後期: プロジェクトリーダーとして全体を仕切るだけではなく、システム班での作業進行の
管理などもグループリーダーと協力して行ってくれた。システム構築では主にデータベース
を担当し、ウェブページの基盤作りに徹してくれた。システム班には欠かせない存在だった。
久保美沙希 前期: 曽我君はプロジェクトリーダーとして率先して情報をまとめたり、グループ内
での指揮をとったりと、全体の支柱となってプロジェクトを支えてくれた。また、中間発表
の成果物である言語グリッドの構築にも携わったりと、多くの作業をこなしていた。
後期: プロジェクトのリーダーとして、全体をまとめたり最終発表に向けた準備などを行い
つつ、システムでは、主にサーバーに比重を置いて開発をしてくれた。プロジェクトのリー
ダーとしての仕事をする傍らで開発を行うというハードスケジュールの中頑張ってくれた。
柏谷美帆 前期: 昨年度リーダーに教わりながら、もう一人の班員と協力して言語グリッドシステ
ムの構築を行い、余裕を持って完成させていた。プロジェクトリーダーの仕事もあり、もう
一人の班員に仕事が偏っていたように思ったので、後期の活動でその点を解決できればもっ
とよいと思う。
後期: プロジェクトリーダーとして、プロジェクト全体を総括し、各班とも連携をとりなが
ら、個人の仕事も的確にこなしていた。サイト作成においては、データベースの呼び出しや
SQL など大きな役割を果たしていた。メンバー全員にやるべきことを支持し、困っている
時にはアドバイスをくれるなど、プロジェクトには欠かせない人でだった。
C.2
若林恭平に対する評価
曽我知央 前期: 若林君はシステム班のリーダーとして、自分の役割を理解し、率先して、活動を
していた。また、プロジェクト全体で話し合いをするときに進んで発言していた。
後期: グループリーダーとしてシステム班のみんなをまとめてくれた。また、大沼のページ
をサイトの中身を他のサイトから、サイト管理者から許可を得てほとんど作成してくれた。
また、大沼に関するデータベースの作成も行ってくれて、サイトの完成に貢献してくれた。
鳴海達朗 前期: 若林君はグループリーダーとして、的確な状況把握をしみんなをまとめてくれた。
自分の担当部分にはしっかりと責任を持ち、確実に仕事をこなしてくれた。
後期: グループリーダーとして進捗管理などを行ってくれた。また、大沼特集ページの作成
を担当し、そのための情報引用に伴う各方面との交渉などからコンテンツの作成まで行って
Group Report of 2012 SISP
- 67 -
Group Number 10-A
Hakodate’s sightseeing information site in multiple languages
くれた。
久保美沙希 前期: 若林君は、主にスライドの作成に携わっていた。早い段階で仕事をこなし、効
率的に作業を行っていたのが印象的。また、そのほかの部分でも冷静な意見や指摘をし、プ
ロジェクト全体を支えてくれた。
後期: 主に、大沼の特集ページなどのシステムの開発を行っていた。調査班と積極的に連携
をとり、調査結果を生かした WEB コンテンツを企画、実装してくれた。システム班の皆が
開発で手一杯になっている中、冷静に状況を判断して軌道修正を行ってくれた。
柏谷美帆 前期: グループリーダーとして、班員それぞれの進捗状態を把握し、プロジェクトリー
ダーや調査班リーダーとうまく連携しプロジェクトの進行に大きな手助けをしていた。発表
スライドの草案作成を行い、早い段階でスライドを制作し終えていた。
後期: システム班のリーダーとして、班のスケジュール管理やメンバーへの指示出し、ア
ドバイスなどをしてくれた。また、大沼の特集ページの作成や書類作成なども行なってく
れた。
C.3
久保美沙希に対する評価
曽我知央 前期: 久保さんはプロジェクト全体を通して唯一のデザインコースとして、スライド・
ポスター・web ページのデザインと、ほぼすべての作業に関わり、中間発表を支えてくれた。
後期: システム班で唯一のデザインコースとして、サイト全体のデザインや、各種画像を作
成してくれた。また、画像も今回サイトで使用した 5 言語に対応するように作ってくれたの
で、大変な貢献をしてくれた。また、ページのフレームワークの作成を行ってくれたおかげ
で、サイトの作成が大幅に楽になった。
鳴海達朗 前期: 久保さんはデザインコースということもあり、ウェブページのデザインとその
モックアップ作成や、プロジェクトチーム全体の中間発表用スライド、ポスターのデザイン
などを担当してくれた。デザインは開発過程の中でも大きな役割を担っているので、デザイ
ンの知識があまりないシステム班の支えとなってくれた。
後 期: 主 に ウ ェ ブ ペ ー ジ の デ ザ イ ン を 担 当 し て く れ た 。シ ス テ ム モ ッ ク ア ッ プ か ら
Dreamwaver によるウェブページのベース部分、アイコン等の作成を行ってくれた。唯
一のデザインコースとして頑張ってくれた。
若林恭平 前期: 久保さんは、デザインコースということで、デザイン関係の仕事をこなしてくれ
た。中間発表のためのサイトのモックのデザインやスライドのデザイン、ポスターのデザイ
ンを行なってくれた。
後期: 久保さんはデザインコースということもあり、観光サイトやロゴのデザインをこなし
てくれた。ほぼすべての「デザイン」をまかせていたので、かなり貢献してくれた。
柏谷美帆 前期: 本プロジェクト唯一のデザインコースのメンバーであるため、成果物のデザイン
面を全て任せることとなった。上述の通り、仕事が大きく偏ってしまったように思うので、
今後は補助できることは他の班員・メンバーでも行いたい。彼女のこの仕事により、成果物
にまとまりが出て、非常に大切な役割であった。
後期: プロジェクト唯一のデザインコースのメンバーとして、サイト作成のデザインに携わ
る部分をほぼ全て担当してくれた。ページデザイン、ボタンやアイコンのデザイン、大沼
ページの作成など、たくさんの担当部分をこなしてくれた。
Group Report of 2012 SISP
- 68 -
Group Number 10-A
Hakodate’s sightseeing information site in multiple languages
C.4
柏谷美帆に対する評価
曽我知央 前期: 柏谷さんはプロジェクトの副リーダーとして、プロジェクト全体を引っ張り積極
的に議事進行をしたりしていた。
後期: まず、プロジェクトの副リーダーとして、リーダーを支えてくれた。また、作成した
ウェブページのトップページのデザインとフレームワークを作成してくれた。また、ユーザ
評価後の固有名詞の書き換え作業では、データベースの内容をひとつひとつ直してくれた。
また、スライドやポスターも人員が割けない中、作ってくれた。
久保美沙希 前期: 柏谷さんは主に中間発表に向けてシステム班のポスターの製作をしてくれた。
また、サブリーダーとして時にはみんなの意見や話し合いの軌道修正をしたり、的確な意見
を述べているのが印象的だった。全体を通し、プロジェクト内、グループ内を支えてくれた。
後期: トップページの実装や、新しい固有名詞のデーターベース辞書を作成してくれた。ま
た、最終発表前には、積極的に全体のスライドやポスターを作成、手直しを頑張ってくれた。
また、全体の話し合いでの軌道修正や意見出しを積極的に行い、プロジェクトのサブリー
ダーとしての役割もしっかり果たしてくれた。
鳴海達朗 前期: 柏谷さんはスケジュール確認を促したりなど、システム班の縁の下の力持ち的存
在として頑張ってくれた。中間発表用ポスターの作成などの面においては、分担された役割
を的確にこなしてくれた。
後期: 主にトップページのデザイン作成や、発表用のプレゼン資料、ポスターの作成をひと
りで担当くれた。また、データベースの固有名詞修正用の辞書ファイルの作成など、様々な
面でサポートをしシステム班の活動を支えてくれた。
若林恭平 前期: 柏谷さんは、副リーダーとしてみんなの意見をまとめ、リーダーを補佐しながら
も、書記としての役割も担っていた。また、システム班のポスターを中心的に作成した。
後期: 柏谷さんは、トップページのデザイン、固有名詞の対策として翻訳を主に頑張ってく
れた。リーダーが困っているときのサポートも行なってくれた。
C.5
鳴海達朗に対する評価
曽我知央 前期: 鳴海君はシステム開発の中心として、自らプログラムやデータベースを作成し、
システム班を引っ張っていってくれた。
後期: 鳴海くんはスマートフォン対応を一人で完成させていた。また、全体的に広くシステ
ムの開発を行っていた。特にプロジェクト学習の序盤はシステムへの理解の深さからメン
バーへのシステムの内容を発信する重要な役目を行ってくれた。最終的にはシステムの全体
に関わって大変な功労者となってくれた。
若林恭平 前期: 鳴海君は言語グリッドとデータベースの接続など、言語グリッドシステムの仕事
を中心的に行なってくれた。
後期: 鳴海君はシステム班の軸となってほぼ全てのシステムのサポートをしてくれた。ま
た、スマートフォン対応に関しては一人で完成させてくれるなど、欠かせない存在だった。
柏谷美帆 前期: 昨年度のリーダーに教わりながらも、本人の知識や技術があったのでスムーズに
作業が進んでいるようだった。発表会の直前まで、余裕を持ちながらシステムの改良を行っ
ていたし、他の班員にも使い方やシステムの構成などを教えていた。
Group Report of 2012 SISP
- 69 -
Group Number 10-A
Hakodate’s sightseeing information site in multiple languages
後期: サイトのスマートフォン対応のページをひとりで作成してくれた。他にも、システム
班のメンバーに既存のプログラムの説明をしてくれたり、いろいろな意見を汲み取りよりよ
いサイトを作ろうとがんばってくれた。担当外のシステムについてもアドバイスをし、シス
テム班全体を支えてくれた。
久保美沙希 前期: 鳴海君は主に中間発表に向けての成果物である言語グリッドの構築に携わり、
前年度のプロジェクトリーダーと連携し、知識を生かして開発を進めてくれた。また、スラ
イドの作成にも携わり、プログラムの知識を生かしてプロジェクトを支えてくれた。
後期: サーバーなど、システムの全般において開発を頑張ってくれた。スマートフォン対応
については、ほぼ１人で開発を進めるなど、幅広い知識を生かしてシステムの開発に大きく
貢献してくれた。
Group Report of 2012 SISP
- 70 -
Group Number 10-A
Hakodate’s sightseeing information site in multiple languages
付録 D
その他製作物
特になし。
Group Report of 2012 SISP
- 71 -
Group Number 10-A
Hakodate’s sightseeing information site in multiple languages
付録 E
発表評価シート詳細
発表評価シートの詳細情報を載せる。ここの付録は
1. (評価者)
評価:(評価値)
(コメント)
となっている。
E.1
発表技術に関しての回答の詳細
1. 教員
評価:7
調査班の調査結果がシステム班の提案にどのように結びついているのか、もっと明確にして
ほしい
2. 学生
評価:6
もう少し声が大きいほうがいいと思った。スライドを見ないで前を向いたほうがいいと
思う。
3. 学生
評価:8
スライドの情報量に対して切り替えが早かった
4. 学生
評価:8
調査結果ではグラフが何回も出てきたので、もう少しコンパクトにまとめて発表したほうが
良い。
5. 学生
評価:6
２つのアンケート内容が離れすぎててわかりづらい。
6. 学生
評価:5
声が小さく周りにまぎれて聞き取りづらかった。
7. 学生
評価:4
スライドを見ているので、もう少し聞き手に話しかけるようにした方が良い
8. 学生
評価:8
スライドが見やすくて良いです。
9. 学生
評価:5
Group Report of 2012 SISP
- 72 -
Group Number 10-A
Hakodate’s sightseeing information site in multiple languages
発表内容が聞こえない。
10. 学生
評価:8
声が小さい。グラフの字がもう少し大きいほうがいいと思う。
11. 学生
評価:7
ふきだしの色とタイトルの色などが少し見づらくて、すべてのふきだしの色を一緒にするだ
けでなく、大切なことやいいたい事などで色を分けたほうが見やすいと思いました。
12. 学生
評価:4
スライドを見て発表していた。声が小さかった。
13. 学生
評価:7
大体わかったが、何を話すのかわからなくなっている時があるように感じた。
14. 学生
評価:8
声が小さくてきこえにくかったがスライドがわかりやすかった
15. 学生
評価:6
スライドが見やすかった、声が少し小さいと感じた
16. 学生
評価:9
グラフなどがとてもわかりやすかった。スライドがわかりやすかった。
17. 学生
評価:10
スライドが見やすかったです。いろが好きでした。要点がわかりやすかったです。ロゴがか
わいかったです。
18. 学生
評価:10
声の大きさ、話すスピードともに、聞き取りやすいと感じました。
19. 学生
評価:6
声はそこそこ聞けました。
20. 学生
評価:8
聞き取りやすかったが、手に字を書いておくのはやめたほうがいいと思う。
21. 学生
評価:7
スライドが少しわかりづらいと思いました。発表はわかりやすかったです。
22. 一般
評価:7
ハキハキしてわかりやすかった。
Group Report of 2012 SISP
- 73 -
Group Number 10-A
Hakodate’s sightseeing information site in multiple languages
23. 学生
評価:8
スライドが見やすかったです。一部、図や写真に説明がない箇所があったので気になりまし
た。棒グラフは多い順にした方がわかりやすいと思いました。箇条書きにするなら文頭に点
などの印がほしかった。
24. 一般
評価:6
(コメントなし)
25. 学生
評価:7
項目が多くて大変だけど、もう少しグラフを見やすくできればと思いました。声が大きく聞
き取りやすかったです。
26. 学生
評価:8
2,3 ページ矢印の使い方、全体的にグラフの字が小さい。グラフの丸がずれてる。グラフの
丸の形がバラバラ
27. 一般
評価:7
写真を使って説明をしていたので、何をやっているのかがわかりやすくてよかったです。グ
ラフで結果が一目でわかるので、話が入ってきやすくてよかったです。
28. 一般
評価:10
前を向いていることが多かったので声が良く聞こえてよかった。手元でページが変えられる
のがパソコンまで行かなくてよいと思った。
29. 一般
評価:10
とてもわかりやすかったです。声がとても聞こえていて、何を話しているのかわかったので
良かったと思います。
30. 学生
評価:7
全員、ちょっと声聞き取りにくい。スライドは見易くて良い。暗唱かわからないが、言葉が
詰まっているのが気になった。ちょっと長い。
31. 教員
評価:8
きちんと発表練習している様子が伝わって来ました。スライドの字が少し小さいところがあ
りました。
32. 学生
評価:6
声が通っていない (聞き取りにくい)1 人目、3 人目。スライドに情報量が多い (ちょっと読
みにくい)
33. 一般
評価:(評価なし)
Group Report of 2012 SISP
- 74 -
Group Number 10-A
Hakodate’s sightseeing information site in multiple languages
(コメントなし)
34. 学生
評価:8
スライドの色が統一されていて良かったグラフの字がぼやけて見にくい
35. 学生
評価:(評価なし)
発表者は名乗ったほうが良いと思います。
36. 学生
評価:8
3 人とも落ち着いて発表できていてわかりやすかった。
37. 学生
評価:10
声が聞き取りやすかった
38. 学生
評価:7
聞き取りやすかったです
39. 学生
評価:(評価なし)
便利だとはおもう。少し UI が地味？
40. 学生
評価:9
殆ど文句なし。若干、声量の足らない部分、発表にまごついていた部分があったが、気にな
らない程度だった。
41. 学生
評価:7
実施体制やプロセスを発表してくれるのは良かった。別言語の画像も見たかった。
42. 学生
評価:7
声が小さくて聞こえにくい。アンケート調査の分析で、割合が高かった理由についてもう少
し説明をして欲しい。
43. 学生
評価:8
よく練習していますね (カンペなし) でもスライドを見ることが多かった
44. 学生
評価:7
調査班グラフが多く、客観的に現状がわかった
システム班実際にどんな動きがあるのか、見てみたかった
45. 学生
評価:10
スライドが見やすく、伝わりやすかった。
46. 学生
評価:7
Group Report of 2012 SISP
- 75 -
Group Number 10-A
Hakodate’s sightseeing information site in multiple languages
すごく聞き取りやすく、いい発表でした。
47. 学生
評価:8
(コメントなし)
E.2
発表内容に関しての回答の詳細
1. 教員
評価:6
調査班/システム班と分断せずに進めたほうがより良いものが提案できたのではないかと
思う
2. 学生
評価:6
調査をして実際に観光客のニーズに答えてよりよいものを作ろうとしているのはいいと
思った
3. 学生
評価:9
他のサイトでは見られないツールが良くわからない
4. 学生
評価:9
目標設定や計画がわかりやすくまとめられていて良かった。
5. 学生
評価:6
サイトの内容が他の観光サイトとの違いがわからない。
6. 学生
評価:6
グルメなどは外からアクセスすることもあると思うので、スマートフォンで見た場合のレイ
アウトも考えたのは良かったと思う。
7. 学生
評価:6
調査をたくさんしていて情報収集力が高いと感じましたが、サイトへの展開がグルメを中心
にしているのか、それとも違う何を主張したいのかが不十分だと思った。
8. 学生
評価:(評価なし)
計画的に活動が出来ているのがわかりました。
9. 学生
評価:8
アンケートの集計結果をすぐに反映できている点が良いと思った。多言語化することで多く
の人が使えるようになっているところがいいと思った。
10. 学生
評価:8
資料がわかりやすかった。
Group Report of 2012 SISP
- 76 -
Group Number 10-A
Hakodate’s sightseeing information site in multiple languages
11. 学生
評価:8
アンケート調査だけでまとめずに、もう一つ調査を行い、結論づけした方がいいと思いまし
た。既存のものがあることが分かっていて、少し多言語化されただけでは、少しもの足りな
い気がする。
12. 学生
評価:4
スライドが、調査班はページ数なし、システム班はページ数ありだったと思うが、全ページ
にページ数は付けるべき
13. 学生
評価:9
よく調査をしているのがわかった。作られたサイトも使いやすそう。
14. 学生
評価:10
グラフなどを使っていたので、データが見れたので良かった。
15. 学生
評価:4
調査結果がシステムに活かされていないと感じた。実装しきれていないコンテンツとは何か
具体的に聞きたかった。
16. 学生
評価:10
調査がこまかい所まで分析されていて、結果、とても計画的なシステムが出来ていると思い
ました。
17. 学生
評価:10
ニーズにあっているもので、かつ、説明が対応していたのでわかりやすかったです。
18. 学生
評価:10
データに基づいた発表でした。目標設定、計画は十分だと発表から感じました
19. 学生
評価:5
・アンケート実施した場所⇒なぜか？、期間 (３日間)
・調査班-２日間以外の活動比率 (タスクの割合) の問題
20. 学生
評価:(評価なし)
実際に観光地に行きアンケートで調査をとることにより、観光客のニーズを調べるのはいい
ことだと思った。言語切替のボタンが各国の国旗になっているのはわかりやすくていいと
思う
21. 学生
評価:7
たくさん調査をしていてすごいと思いました。サイトはありそうなかんじでした。もっとな
にか独自のものがあればいいと思いました。
Group Report of 2012 SISP
- 77 -
Group Number 10-A
Hakodate’s sightseeing information site in multiple languages
22. 一般
評価:5
現在ある多言語観光サイトを検証されるといいと思いました。
23. 学生
評価:7
アンケート結果をシステムのどの部分に活かしたのかがわかりにくかったです。
24. 一般
評価:6
アンケート結果について、統計学的な分析のより細かい説明が欲しかった
25. 学生
評価:6
web の翻訳サイトでは分からない言語があったりと言語グリッドの問題点の目のつけどころ
は良い
26. 学生
評価:9
サンプル人数の割合 (国籍) がバラバラでいいのか。
27. 一般
評価:7
外国人の観光客が多いからこそのテーマでよかったです。アンケートなどの一般の人の意見
を取り入れているところもいいなと思いました。
28. 一般
評価:10
しっかりと調査していて良かったと思う。1 つ 1 つに理由をしっかりのべられていてわかり
やすかった。声がたまに聞こえなくてもスクリーンで補えていた。
29. 一般
評価:10
１つ１つのことをしっかり調査していてよかったと思います。お客様にアンケートをとって
まで調べているから、リアルな情報が聞けてよかった
30. 学生
評価:(評価なし)
めっちゃ実用的、すごいなと思った。
31. 教員
評価:8
調査とその分析が良くできていたなと思います。言語グリッドの説明がちょっとあやしかっ
たような気がします。調査にもとづく提案と、実際に実装した機能との対応付けがちょっと
わかりにくかったと思いました。
32. 学生
評価:8
翻訳精度などもちゃんと考えていて良かった。
33. 一般
評価:(評価なし)
(コメントなし)
Group Report of 2012 SISP
- 78 -
Group Number 10-A
Hakodate’s sightseeing information site in multiple languages
34. 学生
評価:8
内容が具体的に示されていて良かったサイトの中の情報の提供の仕方が丁寧だと思った。
35. 学生
評価:3
背景がしっかりしているのに調査の内容の説明が長い。調査が長い。ユーザ調査がプロジェ
クト学習でならったこと？大沼と空港との選んだ理由は納得した。
36. 学生
評価:5
調査班によって得られた調査結果をシステム班が活かしてないように感じた。
37. 学生
評価:10
一通り完成しているようですので、使ってみたい
38. 学生
評価:6
他のサイトには無いコンテンツ⇒独自誠意がある観光サイトにするということでしたが、ど
こに独自性があるのかわからなかったです。(ランキングとかは他サイトにもありそうだと
思いました)
39. 学生
評価:(評価なし)
もう少し声が大きいと良いと思う。アクセントを付けて、伝えたいところを強調するとか
40. 学生
評価:9
大沼の理由？⇒新幹線とか、ラムサールとかアジア？よくまとまっていると思いました
41. 学生
評価:7
機械翻訳の精度についてのまとめをもっと説明が欲しかった
42. 学生
評価:9
システムの説明でなぜその機能を付けたのか理由を述べて欲しい。なぜポータブル機器でス
マートフォンのみを用いたのかがわからない。携帯サイトでも作成しても良いのではないか
と思いました。
43. 学生
評価:7
スライドが見づらかった。特にフキダシが見づらい
44. 学生
評価:6
言語グリッドをどこで使っているのかわかりにくかった
45. 学生
評価:10
何をしてきたのか、活動内容などが簡潔だった
46. 学生
Group Report of 2012 SISP
- 79 -
Group Number 10-A
Hakodate’s sightseeing information site in multiple languages
評価:9
スライドも見やすくなにをやっているのかを理解することが出来た
47. 学生
評価:7
他の観光サイトに無いようなコンテンツについては最終発表のときに確定していることを期
待しています。
Group Report of 2012 SISP
- 80 -
Group Number 10-A
Hakodate’s sightseeing information site in multiple languages
参考文献
[1] 訪日外国人が滞在中に利用するホテルの Web サイトの多言語状況についての調査（2008 年度,
MarkeZine 調べ）http://markezine.jp/article/detail/8980
[2] 訪日外国人のホテル・レストラン・観光地に関する意識および行動調査レポート（2008 年度,
MarkeZine 調べ）http://markezine.jp/article/detail/8980
Group Report of 2012 SISP
- 81 -
Group Number 10-A