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

プロジェクト名
船舶の位置を表示する「Boat Map」の開発

Project Name
Development of Boat map to display the position of boats

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

14-A

プロジェクトリーダ/Project Leader矢野颯太

1013061

Sota Yano

グループリーダ/Group Leader矢野颯太

1013061

Sota Yano

グループメンバ/Group Member
1013061矢野颯太

Sota Yano

1013074

木藤成汰

Syota Kido

1013036

橋詰春菜

Haruna Hashizume1013060

森Tomohiro Mori

寅嘉

指導教員
長崎 健

和田雅昭

高

博昭

AdvisorTakeshi Nagasaki Masaaki Wada Hiroaki Taka

提出日2016 年 1 月 20 日

Date of Submission
Janualy 20, 2016

概要
函館湾では、4 隻のタグボートが活動している。それらの主な仕事として、大型船舶の離着岸の支援や動力のない船舶の牽引があげられる。タグボートで仕事をする際、タグボートと大型船舶の位置情報が必要とされる。現在、大型船舶の位置情報は「Marine Traﬃc」と呼ばれる既存の Web アプリケーションで確認されている。しかし、タグボートの位置情報は無線で連絡しているため、タグボートと大型船舶の両方の位置を把握するのに時間がかかっていた。
そこで、本プロジェクトでは、タグボートと大型船舶の位置を一度に表示する Web アプリケー
ションを開発した。このアプリケーションを用いることで、大型船舶の正確な位置の把握に時間がかかるという問題の解決を目指した。これにより、タグボートの配船がよりスムーズになることが期待される。
キーワード

タグボート, 大型船舶, 位置情報, 可視化, Web アプリケーション（※文責: 橋詰春菜）-i-

Abstract
In Hakodate Bay, tugboats work for helping berthing/leaving of large ship. On working
tugboats, position information of tugboat and large ship is needed by people who doship allocation task. The position information of tugboat and large ship need to doship allocation task eﬀectively more. Now, the staﬀ informs the position of large shipby using an existing web application Marine Traﬃc. But, the position of tugboat is
informed by radio communication. So, it took a little longer time for the staﬀ to confirm
an accurate position of both tugboat and large ship. Then, in our project, we developed
web application that the staﬀ can look the position of tugboat and large ship. By using
this application, we aimed to solve the problem that it took a little longer time for the
staﬀ to confirm an accurate position of large ship. From this, we think that the staﬀ
can do ship allocation task smoothly more.
Keywordtugboat, large ship, position information, visualize, Web application（※文責: Haruna Hashizume）- ii -

目次
第1章

背景

1

1.1

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

1

1.2

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

1

1.3

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

1

到達目標

2

第2章

2.1

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

2

2.1.1

通常の授業ではなく、プロジェクト学習で行う利点 . . . . . . . . . . . . .

2

2.1.2

地域との関連性 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

2

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

2

2.2.1

具体的な手順 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

2

2.2.2

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

3

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

3

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

53.1

函館湾におけるタグボートの業務の理解 . . . . . . . . . . . . . . . . . . . . . . .

5

3.2

提案にむけた準備. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

5

3.2.1

本プロジェクトで取り組む問題 . . . . . . . . . . . . . . . . . . . . . . . .

5

3.2.2

機能の考案 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

6

3.2.3

イメージ図の作成 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

6

3.2.4

提案資料の作成 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

7

3.3

函館ポートサービス株式会社に提案 . . . . . . . . . . . . . . . . . . . . . . . . .

7

3.4

開発に向けた準備. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

8

3.4.1

開発環境の選定 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

8

3.4.2

システム全体の構成を定義 . . . . . . . . . . . . . . . . . . . . . . . . . .

8

3.4.3

技術習得 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

93.5前期実装 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

93.6

中間報告 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

10

3.6.1

成果物の報告と夏季休業中の試用の依頼 . . . . . . . . . . . . . . . . . . .

10

3.6.2

試用後の結果 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

10

3.7

後期実装 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

10

3.8

成果物の報告 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

11

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

12

2.2

2.3
第3章

第4章

4.1

各人の課題の概要とプロジェクト内における位置づけ. . . . . . . . . . . . . . .

12

4.2

担当課題解決過程の詳細 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

13

4.2.1

矢野颯太 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

13

4.2.2

木藤成汰 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

14- iii -

4.3

第5章

4.2.3

橋詰春菜 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

15

4.2.4

森

寅嘉 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

16

担当課題と他の課題の連携内容 . . . . . . . . . . . . . . . . . . . . . . . . . . .

17

4.3.1

矢野颯太 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

17

4.3.2

木藤成汰 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

17

4.3.3

橋詰春菜 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

17

4.3.4

森

17

寅嘉 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

結果

18

5.1

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

18

5.2

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

19

5.3

担当分担課題の評価 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

20

5.3.1

矢野颯太 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

20

5.3.2

木藤成汰 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

21

5.3.3

橋詰春菜 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

21

5.3.4

森

21

寅嘉 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

第6章

今後の課題と展望

22

付録 A

新規習得技術23

付録 B

活用した講義24

付録 C

その他製作物

25

参考文献

26

- iv -

Development of Boat map to display the position of boats

第1章
1.1

背景

該当分野の現状と従来例

函館湾にはフェリーや貨物船等の大型船舶が往来している。それらの中には、自力での離着岸が難しい船舶があり、その場合にタグボートが支援を行う。事務所にいるタグボート配船者がタグボートを配船する際に、タグボートと大型船舶の位置情報が必要となる。現在、タグボートの位置情報を無線連絡で、大型船舶の位置情報を既存の Web アプリケーションで把握している。
（※文責: 木藤成汰）

1.2

現状における問題点

タグボート配船者は無線による聴覚からの情報と、Web アプリケーションによる視覚からの情報を頭の中で比較している。そのため、タグボートと大型船舶の位置関係が把握しづらく、配船に時間がかかっていた。
（※文責: 木藤成汰）

1.3

課題の概要

本プロジェクトでは、タグボートと大型船舶の位置関係が把握しづらいという問題を解決するために、タグボートの配船業務を情報システムを使って効率よく行えるようにしようと考えた。対象者は事務所にいるタグボート配船者とした。基本的なシステムとしてタグボートと大型船舶の位
置情報、速度、軌跡などを表示することを目的とし、タグボートと大型船舶の相対位置を把握できるように目指した。
（※文責: 木藤成汰）

Group Report of 2015 SISP

-1-Group Number 14-A

Development of Boat map to display the position of boats

第 2 章 到達目標
2.1

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

本プロジェクトでは、事務所でタグボートの配船を行う配船者のために、タグボートと大型船
舶の位置情報を表示する Web アプリケーションを開発して、タグボートの配船業務をより効率的にすることを目的とする。
（※文責: 木藤成汰）

2.1.1

通常の授業ではなく、プロジェクト学習で行う利点

通常の授業ではシラバスの通りに授業が進み、教員が決めた課題をこなしていくものになるが、プロジェクト学習では自ら課題を設定しそれに対して解決方法を考えるので自主的な行動力が養われる。本プロジェクトでも実際にタグボート配船者のためにどのような機能が必要か考え、提案
し、実装するというプロセスをたどっている。また、プロジェクト学習では企業の人達とかかわり
プロジェクトとして活動していくことができる。これは通常の授業では行うことができず、自分たちの成長につながる。
（※文責: 木藤成汰）

2.1.2

地域との関連性

本プロジェクトでタグボートの配船業務を支援することで、タグボートがより効率的に仕事できるようになる。これにより函館地域と関連の深い貨物船の安全な運行や、フェリーの定時運行が可能となる。貨物船の安全な運行は我々の日常で使用する生活必需品の供給につながり、フェリーの定時運行は函館・青森間を行き来する人々が計画通りに行動するのに必要となる。これらより、
タグボートの業務は函館地域で過ごす人々に密接に関係していることが分かる。
（※文責: 木藤成汰）

2.2

具体的な手順・課題設定

上記の目的を達成するため、以下のように手順を設定した。

2.2.1

具体的な手順

上記の目的を達成するため、以下のように手順を設定した。

1. 業務見学
2. 問題解決方法の提案
3. 前期実装Group Report of 2015 SISP

-2-Group Number 14-A

Development of Boat map to display the position of boats
4. 前期成果物の報告
5. 後期実装
6. 後期成果物の報告

2.2.2

課題の設定

1. 業務見学• タグボート見学と業務内容の確認
2. 問題解決方法の提案• 問題を解決するための機能の考案• イメージ図の作成• 提案資料の作成
3. 前期実装• 技術習得
クライアントサイド (HTML, CSS, JavaScript, Google Maps API, Git)
サーバサイド (PHP, SQL, Linux, Apache, MySQL, Git)

• 開発環境の整備開発者パソコンに必要なソフトの導入
サーバの構築ローカル開発環境の構築

4. 前期成果物の報告• 夏季休業中の試用を依頼• 夏季休業終了後にヒアリングを行う。
5. 後期実装• クライアントサイドの実装
ヒアリングを元にした機能の追加と修正

Web カメラを用いて函館湾内を監視できる機能• サーバサイドの実装
データをデータベースに保存
データの保存処理の定時実行

6. 後期成果物の報告（※文責: 橋詰春菜）

2.3

課題の割り当て各人の習得したい技術の希望、得意分野を考慮して以下のように割り当てた。

• タグボート見学と業務内容の確認

・・・

全員

• 問題を解決するための機能の考案

・・・

矢野、森、橋詰• イメージ図の作成• 提案資料の作成

・・・
・・・• Web カメラの設置
Group Report of 2015 SISP

・・・

矢野、森、橋詰
全員
全員-3-Group Number 14-A

Development of Boat map to display the position of boats• 技術習得・・・

全員

クライアントサイド
サーバサイド• 開発環境の整備

・・・

・・・

矢野、森

木藤、橋詰

・・・

全員

開発者パソコンに必要なソフトの導入
サーバの構築

・・・

・・・

全員

ローカル開発環境の構築

矢野、木藤、橋詰
・・・• 前期クライアントサイドの実装

矢野
・・・

森、矢野

タグボートと大型船舶の位置をマップ上に表示

・・・

矢野

タグボートと大型船舶の詳細情報を一覧で表示

・・・

矢野

タグボートと大型船舶の航跡の表示

矢野• 夏季休業中の試用を依頼

・・・

・・・

• 前期クライアントサイドの実装

全員
・・・

森、矢野

タグボートと大型船舶の位置をマップ上に表示

・・・

矢野

タグボートと大型船舶の詳細情報を一覧で表示

・・・

矢野

タグボートと大型船舶の航跡の表示

矢野

・・・

• 夏季休業中の試用を依頼

・・・

全員

• 後期サーバサイドの実装

・・・

木藤、橋詰

データをデータベースの保存

・・・

木藤

データの保存処理の定時実行

・・・

橋詰

• システムの改善点の発見

・・・

全員（※文責: 木藤成汰）

Group Report of 2015 SISP

-4-Group Number 14-A

Development of Boat map to display the position of boats

第3章
3.1

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

函館湾におけるタグボートの業務の理解

函館湾では、タグボートが多くの大型船舶の支援を行っているが、我々はタグボートの業務の内
容の詳細について把握していなかった。そこで、函館ポートサービス株式会社を訪問し、タグボー
トの業務内容の詳細や現在の問題点などに関するヒアリングを実施した。またタグボートの船内を見学させていただいた。この見学を通して我々が取り組む問題を見つけることができた。詳細については次に示す。
（※文責: 矢野颯太）

3.2

提案にむけた準備

3.2.1

本プロジェクトで取り組む問題

ヒアリングから、配船業務においてタグボートと大型船舶の位置情報はそれぞれ別の方法で確認されていることがわかった。タグボートの位置情報は無線を用いて確認しており、大型船舶の位
置情報は「Marine Traﬃc」と呼ばれる既存の Web アプリケーションを用いて確認していた。配船業務はタグボートと大型船舶の相対位置を確認して行っている。しかし、現在の確認方法では別々の情報を頭のなかで整理する必要があり、タグボートと大型船舶の相対位置を把握しづらい。
そのため図 1 のように、支援要請をうけた大型船舶の近くに帰港中のタグボートがいる場合でも、港からタグボートを出向させてしまうことがあり、乗組員の労力や燃料コストが余分にかかっていた。そこで本プロジェクトでは位置把握の困難さを改善することで業務の効率化を目指した。

図1

理想的な配船例と現状の配船例（※文責: 矢野颯太）

Group Report of 2015 SISP

-5-Group Number 14-A

Development of Boat map to display the position of boats

3.2.2

機能の考案

本プロジェクトでは、問題解決につながる機能の考案をおこない、考案された機能に優先順位をつけた。考案された機能は以下の通りである。

• タグボートと大型船舶の位置をマップ上に表示する機能• タグボートと大型船舶の詳細情報 (船舶名・速度・更新時刻) を一覧で表示する機能• タグボートの航跡とプロットの表示する機能• 過去のタグボートの航跡を閲覧する機能• Web カメラを用いて函館湾内を監視する機能• 指定した位置を Web カメラで表示する機能• 無線でのやり取りをテキストでするためのチャット機能• 函館湾の風向きや波の高さなどの気象情報を表示する機能（※文責: 矢野颯太）

3.2.3

イメージ図の作成

成果物についてメンバー全員が共通のイメージを持つためにシステムのイメージ図を作成した。
まず始めに、ホワイトボードに考案されたシステムのイメージを描画した。その後ホワイトボードのイメージを Adobe Illustrator を用いて清書した。その際に描画されたイメージを図 2 に示す。

図2

イメージ図
（※文責: 矢野颯太）

Group Report of 2015 SISP

-6-Group Number 14-A

Development of Boat map to display the position of boats

3.2.4

提案資料の作成

函館ポートサービス株式会社に提案するシステムを説明するために資料の作成を行った。資料にはプロジェクト内で考案された機能の一覧とイメージ図を掲載した。
（※文責: 矢野颯太）

3.3

函館ポートサービス株式会社に提案

プロジェクト内で相談してできあがったイメージ図を持参して函館ポートサービス株式会社を訪問した。プロジェクト内で提案した機能についてイメージ図を示しながら説明を行った。その結果、もっとも必要な機能はタグボートと大型船舶の位置情報が表示されることで、函館湾近郊の気象情報や無線で行っていたやりとりをチャットで行う機能については必要ないという意見をいただ
いた。ここで実装する機能と不要な機能が明確になった。ヒアリングを通して実装が決定した機能を下記に示す。

1. タグボートと大型船舶の位置をマップ上に表示
タグボートと大型船舶の位置関係の把握のしづらさを解決する機能である。これは、ヒアリングの際に函館ポートサービス株式会社から伺った要望の一つである。

2. タグボートと大型船舶の詳細情報を一覧で表示
地図上に表示された大型船舶ごとの区別をつけるために、詳細情報の表示機能が挙げられた。

3. タグボートの 24 時間分の航跡とプロットの表示
これは函館ポートサービス株式会社からの要望の二つ目であり、いつ頃にその位置を通過したのかをわかりやすくするために必要な機能である。

4. タグボートと大型船舶の検索機能
第 4 回ヒアリングをもとに、実装予定に追加された機能である。狭い地図上に、多数の船舶アイコンが表示されているため、目的の大型船舶を見つけにくいことから要望として出された

5. Web カメラを用いて函館湾内を監視する機能
函館市国際水産・海洋総合研究センターに設置した Web カメラと、開発した Web アプリ
ケーションの連携機能を設けた。Web カメラを用いて、函館湾内を監視できる機能である。
これにより、函館湾内の様子を確認することができる。

6. 指定した位置を Web カメラで表示する機能
函館湾内にて、指定した海域の様子を確認するために挙げられた機能である。

7. タグボートの航跡の表示非表示を切り替えられる機能
タグボートの航跡が直近 24 時間と長いため、地図上に航跡が大量に表示されてしまい、画面が見づらくなってしまっていた。それを解決するために航跡の表示非表示機能が挙げられた。
また、不要となった機能が下記である。

1. 過去のタグボートの航跡を閲覧する機能
2. 無線でのやり取りをテキストでするためのチャット機能Group Report of 2015 SISP

-7-Group Number 14-A

Development of Boat map to display the position of boats
3. 函館湾の風向きや波の高さなどの気象情報を表示する機能（※文責: 矢野颯太）

3.4

開発に向けた準備

3.4.1

開発環境の選定

1. プラットフォームの選定 本プロジェクトでは Web アプリケーションを開発プラットフォー
ムに採用した。その採用理由は、利用が想定されるユーザーは函館ポートサービス株式会社の事務所におり、常時安定した通信ができる。そしてユーザーは、スマートフォンやデスク
トップパソコンなど様々な端末での利用が想定され、Android, iOS, Windows などの様々な OS からのアクセス想定される。Web アプリケーションであれば、クライアントサイドのレイアウトを端末に応じて変化させることで全ての端末に対応させることができ、幅広い要望を短時間かつ少人数で叶えることができ、今回のプロジェクトに最適であると考えたためである。

2. 言語の選定 Web アプリケーションのクライアントサイドを実装するために HTML, CSS,JavaScript の使用が決定した。サーバーサイドは Java, PHP, Ruby, JavaScript などが挙げられたが、レンタルサーバーでもっとも普及しており、本学の講義でも学ぶ機会があることから、PHP を採用した。また、PHP のフレームワークとして本学の OSS セミナーで学ぶことができる CakePHP を採用した。

3. サーバー環境の選定 本プロジェクトでは、OS に最も普及している CentOS を採用した。Web
サーバには最も普及している Apache を採用した。データベースには CakePHP でもっとも利用されている MySQL を採用した。開発中のデータ消失や上書きといったトラブルを防ぐためにバージョン管理ツールを使用した。バージョン管理ツールは Subversion と Gitがあげられたが、現在シェアを伸ばしており、分散型のシステムであることから Git を採用した。また、各自がローカルでデバッグするために仮想 OS ソフトとして、本学でも利用する機会があった VirtualBox を採用し、サーバー設定を共有するために Vagrant を合わせて採用した。また、全員のローカル環境を本番環境に近づけ、同期がとれる必要があったた
め、ソースコードでサーバ内の環境を管理することができる Chef を採用した。
（※文責: 矢野颯太）

3.4.2

システム全体の構成を定義

函館ポートサービス株式会社の訪問で得た情報をもとにシステムの構成を定義した。技術的な仕様については、ユーザーのレビューや開発を通じて定義していった。システム全体の構成は図 3 にGroup Report of 2015 SISP

-8-Group Number 14-A

Development of Boat map to display the position of boats

信号解析

AIS信号

大型船舶

AIS受信器
デコード
サーバ

タグボート

project14
サーバ
ユーザー

Webカメラ

GPS情報をサーバーへ送信

示す。

図3

システム全体の構成（※文責: 矢野颯太）

3.4.3

技術習得

開発を始めるために技術習得を行った。まずはじめに、全員で開発に必要な技術について学習した。ここでは各技術の詳細については触れず、開発に必要な言語やソフトウェアの概要について学んだ。次に、クライアントサイド担当とサーバサイド担当に分かれ、それぞれで必要になる技術の詳細について学んだ。クライアントサイド担当は実際に Web アプリケーションを開発する過程で必要な知識の学習を進めた。サーバサイド担当は OSS セミナーに参加することで、システムの開発に必要な言語やソフトウェアについて学習を進めた。
（※文責: 矢野颯太）

3.5

前期実装

前期はクライアントサイドの実装のみをおこなった。クライアントサイドが前期中に実装した機能の過程について下記に示す。

1. タグボートと大型船舶の情報を取得する
クライアントサイドでタグボートと大型船舶の位置情報を表示するためには、タグボートと大型船舶の情報をサーバから取得する必要があった。しかし、サーバサイド担当は学習段階だったため、クライアントサイド担当がタグボートと大型船舶の情報を決め打ちで出力する
簡単な PHP のスクリプトを書き、そこにリクエストを送ることでこの問題を解決した。

2. 地図上にタグボートと大型船舶の位置情報を表示する機能
まずはじめに、地図を表示するためにレイアウトの実装から行った。レイアウトの実装では、HTML と CSS を用いて地図を設置するための余白や船舶一覧を設置するための余白をGroup Report of 2015 SISP

-9-Group Number 14-A

Development of Boat map to display the position of boats
定義した。次に、定義した余白に地図を埋め込んだ。地図は、Google Maps API を用いて表示した、Google Maps API を使用する際に JavaScript を用いた。

3. タグボートと大型船舶の詳細情報を一覧で表示する機能
サーバから取得したタグボートと大型船舶の情報をもとに、JavaScript 上でデータの分解を行い、それぞれの情報をテンプレートにあてはめて一覧に出力した。また、タグボートと大型船舶の詳細情報一覧のセル一つ一つをオブジェクトとして配列に保存することで、データの更新を容易に行えるようにした。

4. タグボートと大型船舶の詳細情報をクリックすることでクリックした船舶の位置にジャンプする機能
タグボートと大型船舶の詳細情報一覧をクリックするとクリックした船舶にジャンプすることができる機能を実装した。この機能は、地図上に表示されたタグボートと大型船舶のアイ
コンの見分けをつけるためである。タグボートと大型船舶の詳細情報一覧のセルのクリック
状況を監視し、地図上に表示されているクリックされた船舶の場所を中心に、地図が移動するようにした。
（※文責: 矢野颯太）

3.6

中間報告

3.6.1

成果物の報告と夏季休業中の試用の依頼

前期実装で作成した成果物を夏季休業中に函館ポートサービス株式会社での業務の中で試用してもらいたいと考えた。前期成果物の報告において成果物をお渡しし、函館ポートサービス株式会社のユーザーに成果物の機能の説明を行った。

3.6.2

試用後の結果試用後のレビューを伺うために函館ポートサービス株式会社へ訪問し、ヒアリングを行った。その結果、大型船舶の区別がつかないことや目的の大型船舶を探しづらいなどの理由から業務の中では使えないとの評価を受けた。また実用化にあたって、地図のアイコンから詳細情報が表示できるようにすることや、大型船舶の詳細情報を船名で検索し、検索結果からその大型船舶のアイコンを探せるようにとの要望を受けた。
（※文責: 森

3.7

寅嘉）

後期実装

中間報告で受けた要望を元に後期の実装に入った。後期はクライアントサイドに加えサーバーサ
イドも実装を行った。機能の過程を下記に示す。
クライアントサイド担当

1. 地図上のアイコンからタグボートと大型船舶の詳細情報を表示する機能
大型船舶の区別がつかないとの評価を受けたので改善した部分である。船舶の位置情報と詳細情報をリンクさせるため、地図上の船舶をクリックした時、その船の詳細情報がGroup Report of 2015 SISP

- 10 -

Group Number 14-A

Development of Boat map to display the position of boats
吹き出しで表示されるようにした。

2. 検索機能目的の大型船舶を探しづらいという評価を受けたので改善した部分である。船舶の詳細情報の中から目的の船舶を探し出すための検索機能を実装した。正規表現で配列を検索することができる関数を jQuery から呼び出すことで検索機能を実装した。
サーバーサイド担当

1. データをデータベースに保存する機能
必要なデータをデータベースに保存できるよう PHPMyAdmin を用いてテーブルを作成した。CakePHP を用いて、タグボートと大型船舶の名前、時刻、緯度経度、船の向き、速度をデータベースに格納した。これにより、前期に使っていた決め打ちで出力する PHP のスクリプトを使う必要がなくなった。

2. データを取得しデータベースに保存する処理を定時実行する機能
要望にあった 24 時間分の航跡を表示できるように改善した部分である。この機能が実装される前では１日分の航跡は 0 時で１度すべて消えてしまっていた。データをデータベースに保存する処理を定時に実行できるよう CakePHP を用いて機能を作成した。

Web カメラ担当
1. Web カメラで函館湾内を確認することができる機能
前期に設置した Web カメラを使って、函館湾内の画像データを定期的に取得し、表示できるようにした。これは自衛艦等の地図上に表示されないシステムを見るためのものである。
（※文責: 木藤成汰）

3.8

成果物の報告本プロジェクトでは、開発した成果物を函館ポートサービス株式会社に使っていただくために、成果物の報告を 3 回行った。各報告の内容は下記に示す。

• 前期成果物の報告
前期成果物を函館ポートサービス株式会社に渡し、夏季休業中に試用していただくことを依頼した。この依頼は、前期成果物の問題を見つけるためである。

• 夏季休業後のヒアリング
夏季休業中に試用していただいた前期成果物のレビューをいただいた。前期成果物の問題
点をまとめ、後期の実装に向けてシステムの機能の見直しを行った。

• 後期成果物の報告
函館ポートサービス株式会社を訪問し、後期成果物をお渡しした。この際、後期実装時に追加した新機能の報告を行い、各機能に関するレビューを受けた。
（※文責: 橋詰春菜）

Group Report of 2015 SISP

- 11 -

Group Number 14-A

Development of Boat map to display the position of boats

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

各人の課題の概要とプロジェクト内における位置づけ

矢野颯太の担当課題は以下のとおりである。

5月

タグボートの見学、および見学結果から問題発見と解決方法の提案

6月

クライアントサイドの技術習得と実装

7月

ポスターの素材作成、発表練習8月開発したシステムの試用期間

9月

Git の勉強会

10 月 ローカル開発環境の整備、前期のシステムレビューと実装、フレームワークの環境整備と組み込み、モバイル端末向けの CSS の作成

11 月 サーバから取得したデータの保存、実装報告、サブポスターの作成、ポスター素材の作成、最終発表前の実装報告

12 月 最終成果発表にむけて発表練習、最終成果発表（※文責: 矢野颯太）
木藤成汰の担当課題は以下のとおりである。

5月

タグボートの見学、および見学結果から問題発見と解決方法の提案

6月

実装に必要な知識の把握、サーバーサイドの構築方法の学習

7月

中間発表用メインポスターの作成、発表練習、中間報告書作成

8月

開発したシステムの試用期間9月

試用してもらったシステムのレビュー受け、改善点の発見

10 月 航跡データを保存するためのデータベースの環境構築、学習
11 月 航跡データ保存のシステム作成
12 月 最終発表メインポスター作成（※文責: 木藤成汰）
橋詰春菜の担当課題は以下のとおりである。

5月

タグボートの業務を理解、見学結果から問題発見と解決方法の提案

6月

実装に必要な知識や技術の習得、サーバーサイドの構築方法の学習

7月

メインポスターの作成

8月

前期成果物の試用期間

9月

サーバーサイドの学習

10 月 9 月に引き続きサーバーサイドの学習、サーバーサイドの実装開始
11 月 24 時間分の航跡データの表示機能の実装、定時更新機能の実装
12 月 最終成果発表（※文責: 橋詰春菜）

Group Report of 2015 SISP

- 12 -

Group Number 14-A

Development of Boat map to display the position of boats
森寅嘉の担当課題は以下のとおりである。

5月

タグボートの見学、および見学結果から問題発見と解決方法の提案

6月

クライアントサイドの技術習得と実装

7月

中間発表のスライド作成と発表練習8月

前期成果物試用期間

9月

前期成果物のレビュー

10 月 検索機能実装、バグ修正
11 月 地図レイアウトの修正、Web カメラを用いた機能実装
12 月 最終成果発表でのスライド作成、発表（※文責: 森4.2

担当課題解決過程の詳細

4.2.1

矢野颯太

5月

タグボートの見学、および見学結果から問題発見と解決方法の提案寅嘉）

タグボート「さくら」の船内を見学した。船内の構造とどのような環境で業務を行っているのかを函館ポート
サービス株式会社の中村様にお話を伺った。この活動を通して、函館湾付近の大型船舶の運航にまた、業務の現状からどのようなシステムが必要なのかを伺った。ヒアリングを通して理解した内容をメンバー内で話し合い、問題発見と解決方法の提案を行った。
システムの機能の提案 タグボートの見学をもとに、システムの機能をポストイットにまとめ優先順位をつけ、具体的な画面のイメージをホワイトボードに書き出し、Adobe

Illustrator で清書した。また、実装するプラットフォームを Web アプリケーションに
決定した。

6月

クライアントサイドの技術習得と実装

円滑な開発を行うために、HTML, CSS, JavaScript,

PHP の言語の概要についてプロジェクトメンバー全員が把握する必要があったため、それぞれの概要と基本的な構文について具体的な Web ページのソースコードを表示するなどして解説を行った。実装では、プロジェクトメンバーと一緒にクライアントサイドの実装をおこなった。HTML と CSS の調整、GoogleMap の埋め込みを行った。

7月

中間成果発表にむけた準備

中間成果発表では、サブポスターの作成を行った。サブポス

ターは Adobe Illustrator を用いて作成し、素材の作成は他のメンバーと協力して行った。また、中間成果発表では発表を担当したため発表練習を行った。
前期実装報告 前期分の成果物を函館ポートサービス株式会社にご報告した。夏季休業中に実装したシステムの試用していただくことを依頼した。

8月

タグボートの業務見学 タグボートの業務内容を理解するため、実際に仕事を行っているタ
グボートに乗船させていただいた。見学を通して、業務に関わる人や業務中の様子を知ることができた。参加できなかったメンバーのために見学中に写真や動画の撮影を
行った。

9月

Git の勉強会 サーバーサイドの学習期間を終えたため、本格的な実装に入る前にバージョン管理ツールの使用方法について復習を行った。リポジトリを一つ作り、テキストファ
イルのバージョン管理を行うことで、開発において必要なコマンドについて復習をした。

Group Report of 2015 SISP

- 13 -

Group Number 14-A

Development of Boat map to display the position of boats
10 月 ローカル開発環境の整備 本番環境とは別に実装したものをデバッグする環境を整えた。
環境には VirtualBox と Vagrant を用い、OS は CentOS 6.7 を使用した。OS 内の環境構築に Chef を用いた。Chef を用いて、Apache、PHP5.6、MySQL、Vim、Git などのインストールと各種ソフトウェアの設定を行った。作成した環境を Git を用いて
メンバー内で配布し、動作確認をしつつ、随時環境の修正、各メンバーの環境の同期を行った。
前期のシステムレビューと実装

前期に実装したシステムの試用していただいて、見つかった問題点や気がついた点について函館ポートサービス様の意見をいただいた。その結果、地図の位置情報と船舶の詳細情報が紐付いていないということだった。レビュー後、アイコンをクリックすると詳細情報が表示される部分の実装を行った。
フレームワークの環境整備と組み込み

後期よりフレームワークを用いてサーバーサイド側の実装を行うことが決定したため、用意した開発環境と本番環境で CakePHPv3.x が利用できる環境を整えた。また、フレームワークが動く環境にするために PHP のバー
ジョンアップを行った。導入したフレームワークに今まで実装していたクライアントサ
イドの部分を組み込み、各ファイルのリンクをはりなおした。
モバイル端末向けの CSS の作成

スマートフォンなどで本システムを利用することを想定して、モバイル端末でログインした場合に、最適化された見た目が表示されるように

CSS の修正を行った。
11 月 サーバから取得したデータの保存 取得したデータを保存する部分の調査を行った。
成果物報告

後期中に実装してきた機能の報告をおこなった。

ポスターの作成

サブポスターの作成を行うための素材を Adobe Illustrator を用いて作成した。メインポスターで完結することができたため、サブポスターの素材は全てメイン
ポスターに移植した。

12 月 最終成果発表にむけて発表練習 最終成果発表に向けて発表練習を行った。発表の練習を行いつつスライドの修正点の提案をおこなった。
（※文責: 矢野颯太）

4.2.2
5月

木藤成汰

タグボートの見学、現在の問題点の確認、システムの提案

函館ポートサービス株式会社を訪問し、タグボートの見学を行った。タグボートの業務内容を聞いて、現在の問題点を把握した。Adobe Illustrator でシステム案を作成し、提案を行った。

6月

実装に必要な知識の把握、サーバーサイドの構築方法の学習システムの実装に必要なHTML、CSS の学習を行った。OSS セミナーに参加し、サーバ構築、データ管理の方法を学んだ。また、システム提案のための書類作成、web カメラの設置も行った。

7月

中間発表用メインポスターの作成、発表練習、中間報告書作成

中間発表のためのメインポ

スターを Adobe Illustrator で作成した。中間発表の練習、発表を行った。中間報告書を作成した。

8月

開発したシステムの試用期間

タグボートの業務内容を具体的に理解するため、実際に仕事を行っているタグボートに乗船させてもらった。そこでタグボートの実際の仕事内容について深い理解を得た。

9月

試用してもらったシステムのレビュー受け、改善点の発見

Group Report of 2015 SISP

- 14 -

前期に試用してもらったシステ

Group Number 14-A

Development of Boat map to display the position of boats
ムのレビューを受け、改善点をグループ内で話し合った。Git の使い方を学び、バージョン管理をできるようにした。

10 月 航跡データを保存するためのデータベースの環境構築、学習 MySQL、CakePHP を学んだ。Vagrant を用いて仮想環境での実装を行った。サーバを動かすための環境構築について学んだ。テーブルを作成してデータを保存する形式を決め、作業を行った。

CakePHP の Model 部分を担当し、船舶データを保存できるようにした。
11 月 航跡データ保存のシステム作成 配信されているタグボートの航跡データを取得するプログラムを CakePHP を用いて実装した。また、最終発表のメインポスターを Adobe

Illustrator を用いて作成した。
12 月 最終成果発表メインポスター作成、発表 最終成果発表のポスターを作成し、発表練習、発表を行った。最終報告書を書いた。
（※文責: 木藤成汰）

4.2.3
5月

橋詰春菜

タグボートの見学と業務内容の確認

函館ポートサービス株式会社を訪問し、タグボートの見学をした。さらにタグボートの業務の確認を行い、業務における課題の詳細を聞いた。ヒアリング後にグループで話し合い、課題を解決するための web アプリケーションの開発を決定した。さらに、クライアントサイドとサーバーサイドの役割分担を行い、自分はサーバーサイドを担当した。

6月

実装に必要な技術の学習 グループ全体で実装に必要な言語として、HTML と CSS の学習を行った。OSS セミナーに参加し実装に必要な技術の習得を行った。セミナーでは
主に、サーバー構築とデータベースの利用に関する学習を行った。これらの学習から、データベースを利用した web アプリケーションに関する勉強を行うことができた。また、簡単なデータベースのテーブル設計を学んだ。

7月

中間発表

中間発表用のポスター作成の補助を行った。ポスター全体の英語訳の担当を行

い、ポスターで使用するスケジュールの図を作成した。

8月

前期成果物試用期間 前期の成果物を、函館ポートサービス株式会社に夏季休暇中に試用していただいた。

9月

後期活動内容の決定 前期までの活動から、後期の活動内容を決定した。また、後期の実装に備えて Git について学んだ。

10 月 サーバーサイドの実装 前期の成果物についてのレビューを受け、前期中のシステムの課
題を確認した。それをもとに、システムの改善についてグループで話し合った。決定したシステムの機能を実装するために、CakePHP の学習を行った。phpMyAdmin を利用し、データベースを作成、テーブルの設計を行った。

11 月 機能の完成 データベースの構築ができたので、直近 24 時間分の航跡データを表示する機能の実装を行った。また、定期的にシステムの更新を行う必要があったので、定時更新の設定を行った。この設定を行う際に、crontab を用いることで毎時午前 0 時前にシステムを更新することが可能になった。

12 月 最終成果発表 最終成果発表の資料作成の際に、グループで話し合い、スライドの構成を決定した。その後、スライド作成の補助をした。

Group Report of 2015 SISP

- 15 -

Group Number 14-A

Development of Boat map to display the position of boats（※文責: 橋詰春菜）

4.2.4
5月

森 寅嘉

タグボートの見学、および見学結果から問題発見と解決方法の提案

函館ポートサービス株

式会社を訪問し、タグボートを見学、業務内容の説明や現状での課題を聞いた。その後グループでの話し合いに参加し、課題の解決方法として Web アプリケーションを用いたシステムを作成することを決めた。

6月

クライアントサイドの技術習得と実装

シ ス テ ム の 実 装 に あ た り 必 要 な HTML、CSS、

JavaScript の勉強を行った。また実際に簡単なコーディングを矢野君と行い、システ
ムの大まかなレイアウトを決めた。その後 GoogleMapsAPI の使い方などを調査し、GoogleMap をシステムに埋め込む作業を行った。
7月

中間発表のスライド作成と発表、報告書の作成

中間発表に伴い、スライド作成を担当した。教員の方々のレビューを受けスライドの流れを決定。各スライドを作成し、教員のレビューを受け、スライドごとの修正を行った。その後発表練習を行い、中間発表当日
は発表者としてプロジェクト活動の発表を行った。中間発表後は報告書作成に着手し、分担された部分の報告書の作成や、全体のチェックを行った。

8月

前期成果物試用期間

前期成果物について函館ポートサービス株式会社へプレゼンを行い、夏季休業期間中に試用していただいた。

9月

前期成果物のレビュー

夏季休業中の試用期間で浮かび上がった課題を調査するため函館

ポートサービス株式会社を訪問しヒアリングを行った。その結果、大型船舶のアイコンがどの大型船舶を指すのかがわからない問題や、大型船舶の情報が多く目的の船が探せないという問題があった。

10 月 検索機能実装、バグ修正 前期成果物のレビューを受け、システムに検索機能を追加することを決定し、実装を行った。検索機能の実装に行い、システムの動作確認を行っていたところ吹き出し内の情報が更新されていない問題を発見した。そのため検索機能実装
後、発見した不具合の修正を行った。

11 月 地図レイアウトの修正、Web カメラを用いた機能実装 ヒアリングの中でグリッド線の表示を要望されていたため、地図上にグリッド線を表示する機能の実装を行った。今回は地図上の座標を指定してラインを引く方式ではなく、地図を表示する際のタイルの書式を変更する形での方法で実現した。その後 Web カメラの回線が開通したため、Web
カメラを用いた機能の実装と調査に着手した。

12 月 最終成果発表でのスライド作成、発表 最終成果発表において中間発表同様にスライド作成を担当、スライドの流れを決定し、スライドデザインなどの指摘を受け、スライドを完成させた。当日は発表者としてプロジェクト活動の発表を行った。その後、成果発表の反省を行い、報告書作成に着手した。
（※文責: 森Group Report of 2015 SISP

- 16 -寅嘉）

Group Number 14-A

Development of Boat map to display the position of boats

4.3

担当課題と他の課題の連携内容

4.3.1

矢野颯太

私はプロジェクト全体の進捗管理と環境構築を行った。進捗管理は、メンバーの実装の進み具合を確認する他に、実装中の問題について、解決方法の提案やメンバーと共に問題の解決方法を模索した。環境構築では、サーバの設定とソフトウェアの導入を行い、本番環境に近いローカル環境を用意した。これによって、メンバー個人がデバックできる領域が増え、デバッグしやすくした。
（※文責: 矢野颯太）

4.3.2

木藤成汰

自分はシステムのサーバーサイドの実装を行い、船舶データの保存、呼び出しを行った。これはクライアントサイドに表示する船舶データのもととなるものである。
（※文責: 木藤成汰）

4.3.3

橋詰春菜

自分はシステムのクライアントサイドとサーバーサイドの実装の内、サーバーサイドの実装を担当した。サーバーサイドでは、主に船舶データの取得、データベースの構築、テーブル設計に関する作業を行った。これは、クライアントサイドに船舶データを渡すためである。取得した船舶デー
タをデータベースに保存していくことで、クライアント側で 24 時間分の航跡を表示することを可能にした。また、システムの定時更新の設定作業を担当した。
（※文責: 橋詰春菜）

4.3.4

森

寅嘉

自分はシステムのクライアントサイドの実装を行い、画面レイアウトの決定や、検索機能実装、
地図レイアウトの改善、Web カメラの実装を行った。これはサーバーサイドから得た情報を効果的に表示するためのものである。
（※文責: 森Group Report of 2015 SISP

- 17 -寅嘉）

Group Number 14-A

Development of Boat map to display the position of boats

第 5 章 結果
5.1

プロジェクトの結果

本プロジェクトでは、タグボートと大型船舶の位置情報と航跡、船舶名などの情報を表示しタグ
ボートの配船を支援する Web アプリケーションを開発した。開発した Web アプリケーションの機能、およびその詳細を以下に示す。

1. タグボートと大型船舶の位置情報と進行方位の表示機能
携帯回線を用いてタグボートの位置情報と進行方位を、AIS 受信機を用いて大型船舶の位
置情報と進行方位を収集し、地図上に表示した。地図には Google Map を利用し、Google

Maps API を用いて Web アプリケーションに実装した。位置情報の可視化にはアイコンを用意し、タグボートと大型船舶の位置と進行方位が一目で判別できるようにした。

2. タグボートと大型船舶の航跡の表示機能
タグボートと大型船舶の位置情報をサーバーに保存し呼び出すことで、タグボートの直近

24 時間の航跡、および大型船舶の直近 10 分の航跡を地図上に表示した。タグボートの航跡
はアイコンの色と同色にすることによってどのタグボートの航跡か区別できるようにした。

3. タグボートと大型船舶の詳細情報の表示機能
タグボートと大型船舶の位置情報を収集する際に船舶名と航行速度を収集し、それらを図

2 の右側のように表示した。表示しきれていない部分についてはスクロールで表示するようにしている。また、詳細情報をクリックすることでクリックしたタグボートおよび大型船舶
が地図の中央になるように移動する。この詳細情報は地図上のアイコンをクリックすること
で吹き出しに表示されるようになっている。

4. 大型船舶の検索機能
3 で示したタグボートと大型船舶の詳細情報の表示機能について、大型船舶の詳細情報を
船舶名で検索する機能をつけた。これにより函館湾付近に多くの大型船舶が停泊している場
合でも、目的の船を船舶名から位置を把握できるようにした。

5. Web カメラによる映像の表示機能
函館市国際水産・海洋総合研究センターの屋上に設置した Web カメラの映像を Web アプ
リケーションの画面上に表示した。通常は図 4 の右下のように表示しており、この画像をクリックすることで Web カメラのページに移行し、Web カメラの操作が可能となっている。

Group Report of 2015 SISP

- 18 -

Group Number 14-A

Development of Boat map to display the position of boats

図4開発した Web アプリケーション（※文責: 森

5.2

寅嘉）

成果の評価

本 プ ロ ジ ェ ク ト で 開 発 し た Web ア プ リ ケ ー シ ョ ン を 成 果 物 と し て 函 館 ポ ー ト サ ー ビ ス
株 式 会 社 へ お 渡 し し た 。図 3 は そ の と き の 様 子 を 写 し た 写 真 で あ る 。実 際 に 函 館 ポ ー ト
サ ー ビ ス 株 式 会 社 に 訪 問 し レ ビ ュ ー を 受 け た 結 果 、地 図 の グ リ ッ ド 線 の 交 点 に 表 示 し ている緯度経度が多すぎることなどのレイアウトの問題を指摘されたが、航跡の表示を消した
りできれば良いなどのさらなる要望もあり、全体としては十分な実用性があるという評価を受けた。

Group Report of 2015 SISP

- 19 -

Group Number 14-A

Development of Boat map to display the position of boats

図5

11/27 のレビュー時の様子（※文責: 森寅嘉）

5.3

担当分担課題の評価

5.3.1

矢野颯太

タグボートの見学

現在の業務を改善する案をメンバー内で提案を行った。具体的には、従来のタグボートの位置情報を表示する機能に加えて AIS を搭載している大型船舶の位置情報を表示する機能や、連絡事項をウェブシステムで完結するためにメッセージのやりとりを行える機能などの提案をまとめた。この相談を通してシステムの提案内容をまとめる方法を理解した。
システムの機能の提案

システムの提案を行った結果、必要な機能とそこまで必要な機能などが具体的になった。そこで、うけとった意見をもとに実装する機能の優先順位をポストイットを用いておこなった。とくに位置情報や船舶の函館湾の状況を把握するための機能を優先して実装することになった。また、実装するプラットフォームがウェブアプリケーションに決定した。
ローカル開発環境の整備

環境構築を通して Vagrant や Chef の利用方法について理解することができた。また、Linux の仕組みや構造についても理解することができた。
前期のシステムレビューと実装 試用していただいた結果、船舶の詳細情報と船舶の位置情報の把握が難しく、システムとして利用するには改善が必要なことがわかった。具体的な改善としGroup Report of 2015 SISP

- 20 -

Group Number 14-A

Development of Boat map to display the position of boatsては、船舶の詳細情報と位置情報の結びつきを強くするというもので、船舶の詳細情報をクリックすることで位置情報を把握できるように、位置情報から船舶の詳細情報を取得できるように改装した。
フレームワークの環境整備と組み込み

前期中に実装することができた部分を CakePHP 3.x に組み込んだ。この作業を通して、CakePHP3.x と 2.x の仕様変更を理解することができた。
（※文責: 矢野颯太）

5.3.2

木藤成汰

データベースの構築

phpMyAdmin を利用してテーブル設計を行った。直感的に操作することができたので、素早くテーブルを作成することができた。
航跡データの保存

cakephp を用いて航跡データを分割し、データごとに配列に格納した。クライ

アントサイドで利用しやすい配列の形にするのに時間がかかってしまった。
航跡データの呼び出し

保存したデータを呼び出せるように実装した。
（※文責: 木藤成汰）

5.3.3

橋詰春菜

データベースの構築 phpMyAdmin を利用してデータベースの構築、テーブル設計を行った。
データベースの構築により、船舶データの保存が可能になった。テーブル設計ではどのデー
タが収納されたか、分かりやすい名前をつけることで、実装時に混乱しないように工夫した。

24 時間分の航跡データの表示機能の実装 取得したデータをデータベースに保存することで、航跡データを保存することが可能になった。24 時間分の航跡データが表示されなかった課題に関して、システムの定時更新を行うことでその問題を解決した。
（※文責: 橋詰春菜）

5.3.4

森

寅嘉

GoogleMap の埋め込み 位置情報の可視化に伴い、システムに GoogleMap を埋め込むことにより、地図を表示するだけでなく、位置情報をアイコンとして表示することを可能とした。
また、グリッド線の表示も GoogleMap のタイルの書式変更によって実現した。
検索機能の実装

従来では多くの船舶情報の中から目的の大型船舶を探さなければならなかったが、検索機能の実装により目的の大型船舶を探しやすくすることができた。

Web カメラを用いた機能の実装 現状ではシステム上に Web カメラの映像を表示し、その映像からカメラのデフォルトで設定してあるページに移動できるようになっている。しかし実装の時間不足や調査に時間がかかったことにより、地図上で Web カメラの操作を行う機能が未実装となっているため、見通しを持った実装計画が必要であったと考える。
（※文責: 森Group Report of 2015 SISP

- 21 -寅嘉）

Group Number 14-A

Development of Boat map to display the position of boats

第 6 章 今後の課題と展望
Web カメラの実装が現状では映像を表示しているだけになっている。当初の計画では、Google
Map と連動させて指定した地点の映像が表示できる仕様であったことから、さらなる開発が必要である。今後の展望としては保存した航跡データを活用すれば、安全な航路の可視化や移動時間の予測などに利用できる可能性がある。また、函館以外の地域での本システムの利用が挙げられる。
すでに、苫小牧でも本システムを利用したいとの要望があるので、実現したいと考えている。
（※文責: 木藤成汰）

Group Report of 2015 SISP

- 22 -

Group Number 14-A

Development of Boat map to display the position of boats

付録 A

新規習得技術• HTML• CSS• JavaScript
• PHP
• SQL
• jQuery• CakePHP• Google Maps API• Apache• MySQL• Chef• Vagrant• Git• LinuxGroup Report of 2015 SISP

- 23 -

Group Number 14-A

Development of Boat map to display the position of boats

付録 B 活用した講義• OSS セミナー
• 情報機器概論• データベース工学

Group Report of 2015 SISP

- 24 -

Group Number 14-A

Development of Boat map to display the position of boats

付録 C

その他製作物Group Report of 2015 SISP

- 25 -

Group Number 14-A

Development of Boat map to display the position of boats

参考文献[1] MarineTraﬃchttps://www.marinetraﬃc.com/jp/（2016 年 1 月 20 日）

Group Report of 2015 SISP

- 26 -

Group Number 14-A