4 Marine Traffic Web Web,,,, Web - i -

2015 Future University Hakodate 2015 System Information Science Practice Group Report Boat Map Project Name Development of Boat map to display the position of boats A Group Name Group 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 Hashizume 1013060 Tomohiro Mori Advisor Takeshi Nagasaki Masaaki Wada Hiroaki Taka 2016 1 20 Date of Submission Janualy 20, 2016

4 Marine Traffic 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 do ship allocation task. The position information of tugboat and large ship need to do ship allocation task effectively more. Now, the staff informs the position of large ship by using an existing web application Marine Traffic. But, the position of tugboat is informed by radio communication. So, it took a little longer time for the staff to confirm an accurate position of both tugboat and large ship. Then, in our project, we developed web application that the staff 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 staff to confirm an accurate position of large ship. From this, we think that the staff can do ship allocation task smoothly more. Keyword tugboat, 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 2.2.1................................. 2 2.2.2................................... 3 2.3.................................... 3 3 5 3.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.................................... 9 3.5....................................... 9 3.6....................................... 10 3.6.1................... 10 3.6.2................................. 10 3.7....................................... 10 3.8..................................... 11 4 12 4.1............... 12 4.2............................... 13 4.2.1.................................... 13 4.2.2.................................... 14 - iii -

4.2.3.................................... 15 4.2.4.................................... 16 4.3........................... 17 4.3.1.................................... 17 4.3.2.................................... 17 4.3.3.................................... 17 4.3.4.................................... 17 5 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 -

1 1.1 Web 1.2 Web 1.3 Group Report of 2015 SISP - 1 - Group Number 14-A

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

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

Group Report of 2015 SISP - 4 - Group Number 14-A

3 3.1 3.2 3.2.1 Marine Traffic 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

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

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

AIS AIS Web project14 GPS 3 3.4.3 Web OSS 3.5 1. PHP 2. HTML CSS Group Report of 2015 SISP - 9 - Group Number 14-A

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

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

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

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

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

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

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

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

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

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

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

6 Web Google Map Group Report of 2015 SISP - 22 - Group Number 14-A

A HTML CSS JavaScript PHP SQL jquery CakePHP Google Maps API Apache MySQL Chef Vagrant Git Linux Group Report of 2015 SISP - 23 - Group Number 14-A

B OSS Group Report of 2015 SISP - 24 - Group Number 14-A

C Group Report of 2015 SISP - 25 - Group Number 14-A

[1] MarineTraffic https://www.marinetraffic.com/jp/ 2016 1 20 Group Report of 2015 SISP - 26 - Group Number 14-A