プロジェクト報告書（最終） Project Final Report

提出日(Date)

2016/01/20

船舶の位置を表示する「Boat Map」の開発
Development of Boat Map to display the position of boats
グループ(A)Group (A)b1013061 矢野 颯太
1. 背景
函館湾では、4 隻のタグボートが活動している。タグボ

Sota Yano

フロントエンド担当は、タグボートと大型船舶の情報を表示するために、以下の 3 つが課題となった。

ートの主な仕事として、大型船舶の離着岸の支援、動力の1. タグボートと大型船舶の情報を取得ない船の牽引があげられる。タグボートの配船業務では、

2. タグボートと大型船舶の情報の表示

大型船舶の AIS を活用した「Marine Traffic」という既存

3. Web カメラ機能の実装の Web アプリケーションで確認しており、タグボートのバックエンド担当は、Web アプリケーションの公開と実位置情報は無線によってやりとりされている。そのため、装のために、以下の 3 つが課題となった。

タグボートの位置と大型船舶の位置を照らし合わせて配船

1. Web アプリケーションを公開するサーバの構築を行っており、タグボートと大型船舶の位置情報を把握す

2. 船舶情報を保存するデータベースの構築るのに時間がかかっている。また、大型船舶の中でも自衛3. サーバの安全対策としてセキュリティの強化艦などは例外的に AIS を発信していないため位置情報を取得することができず、位置を把握するには目視するほかな

3. 課題解決のプロセスとその結果

い。

3.1

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

函館湾のタグボートの運用をしている函館ポートサービ

2. 課題の設定と到達目標

ス株式会社様に対してヒアリングを行った。このヒアリン

タグボートの配船業務を効率化するために、本プロジェ

グは、函館ポートサービス株式会社様の配船業務を理解し、クトではタグボートと大型船舶の位置情報を Web アプリ業務の効率化を図るためのアイデアを得るために行われケーション上の地図に表示し、タグボートの配船業務を支た。

援し、配船業務を効率化することを到達目標とした。シス
テム開発にあたり、船舶データの収集、サーバの構築、タグボートと大型船舶の情報を表示する Web アプリケーシ
ョンの実装を課題とした。これらの課題を解決するために、
本プロジェクトではプロジェクトメンバー全員でヒアリングと Web アプリケーションの設計を行った後に、フロントエンド担当とバックエンド担当の 2 つ班に分かれて課題

図 1 理想的な配船例（左）と現状の配船例(右)解決を行った。

3.2

チーム全体では活動の方針を決めるために、以下の 4 つが3.2.1 本プロジェクトで取り組む問題課題となった。

ヒアリングから、配船業務においてタグボートと大型船舶1. 開発するシステムについてヒアリングの位置情報はそれぞれ別の方法で確認していることがわか

2. 実装環境の選定った。タグボートの位置情報は無線を用いて確認しており、3. 開発するシステムの設計大型船舶の位置情報は「Marine Traffic」と呼ばれる既存4. 技術習得の Web アプリケーションを用いて確認していた。配船業

提案に向けた準備

務はタグボートと大型船舶の位置情報を比較して行っており、タグボートと大型船舶の相対位置を把握しづらい。そめの資料を作成した。資料にはプロジェクト内で考案したのため図 1 のように、支援要請をうけた大型船舶の近くに機能の一覧とイメージ図を掲載した。

帰港中のタグボートがいる場合でも、港からタグボートを出向させてしまうことがあり、乗組員の労力や燃料コスト3.3 函館ポートサービス株式会社様への提案が余分にかかっていた。そこで本プロジェクトでは位置把

プロジェクト内で相談してできあがった完成図を持参し握の困難さを改善することで業務の効率化を目指した。て函館ポートサービス株式会社様を訪問した。プロジェク
ト内で提案した機能について完成図を示しながら説明を行

3.2.2 実装機能の考案った。その結果、もっとも必要な機能はタグボートと大型

本プロジェクトでは、問題解決につながる機能の考案を船舶の位置情報が表示されることで、函館湾近郊の気象情おこない、考案された機能に優先順位をつけた。考案され報や無線でおこなっていたやりとりをチャットで行う機能た機能は以下の通りである。

については必要ないという意見をいただいた。ここで必要

1. タグボートと大型船舶の位置をマップ上に表示な機能の優先順位と不要な機能が明確になった。この訪問

2. タグボートと大型船舶の詳細情報(船舶名・速度・更新を通じて明確になった機能の優先順位は下記の通りである。

時刻)を一覧で表示

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

3. タグボートの航跡とプロットの表示

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

4. 過去のタグボートの航跡を閲覧する機能

3. タグボートの 24 時間分の航跡とプロットの表示

5. Web カメラを用いて函館湾内を監視する機能

4. Web カメラを用いて函館湾内を監視する機能

6. 指定した位置を Web カメラで表示する機能

5. 指定した位置を Web カメラで表示する機能

7. 無線でのやり取りをテキストでするためのチャット機

6. タグボートの航跡の表示非表示を切り替えられる機能

能

また、不要になった機能は下記の通り

8. 函館湾の風向きや波の高さなどの気象情報を表示する

・過去のタグボートの航跡を閲覧する機能

機能

・無線でのやり取りをテキストでするためのチャット機能

3.2.3 イメージ図の作成

・函館湾の風向きや波の高さなどの気象情報を表示する機

成果物についてメンバー全員が共通のイメージを持つた

能めにシステムのイメージ図を作成した。まず始めに、ホワイトボードに考案されたシステムのイメージを描画した。

3.4 開発に向けた準備

その後ホワイトボードのイメージを Adobe Illustrator を3.4.1 開発環境の選定用いて清書した。その際に作成されたイメージ図を下記に示す。

Web アプリケーションの実装で必要な技術としてフロントエンドは HTML, CSS, JavaScript を使用することが決定した。バックエンドは PHP や Ruby などが挙げられたが、レンタルサーバーで最も普及していることから PHPを使用することが決定し、さらに OSS セミナーを通してCakePHP の学習をすることができることから、フレーム
ワー ク として CakePHP を採 用 した。 デ ータベ ー スはMySQL を使用することが決定した。また、各自がローカル で デ バ ッ グ で き る よ う に す る た め に VirtualBox とVagrant を使用した。全員のサーバ環境を同期するために

図 2 完成イメージ図

Chef を用いることが決定した。各自が実装したコードは3.1.4 提案資料の作成

Git を用いてバージョン管理を行った。

函館ポートサービス株式会社様にシステムを提案するた

ートと大型船舶の情報を決め打ちで出力する簡単な PHP
3.4.2 システム全体の構成の定義のスクリプトを書き、そこにリクエストを送ることでこの函館ポートサービス株式会社様への訪問で得た情報をもと問題を解決した。にシステムの構成を定義した。技術的な仕様については、ユーザーのレビューや開発を通じて定義した。システム全2. 地図上にタグボートと大型船舶の位置を表示する機能体の構成を図 3 に示す。

はじめに、地図を表示するためにレイアウトの実装を行った。レイアウトの実装では、HTML と CSS を用いて地図を設置するための余白や船舶一覧を設置するための余白を定義した。次に、定義した余白に地図を埋め込んだ。地図は、Google Maps API を用いて表示した。Google Maps
API を使用する際に JavaScript を用いた。

3. タグボートと大型船舶の詳細情報を一覧で表示する機
能
図3

システム全体の構成図

サーバから取得したタグボートと大型船舶の情報をもとに、JavaScript 上でデータの分解を行い、それぞれの情報

3.4.3 技術習得をテンプレートにあてはめて一覧に出力した。また、タグシステムの実装に必要となる知識を全員で共有し、担当ボートと大型船舶の詳細情報一覧のセル一つ一つをオブジに別に詳細な学習をおこなった。フロントエンド担当は

ェクトとして配列に保存することで、データの更新を容易Web アプリケーションのフロントエンドの実装に必要なに行えるようにした。

言語の習得を行った。習得を行った技術は HTML, CSS,JavaScript で、習得方法は動画サイトを閲覧した後に、4. タグボートと大型船舶の詳細情報をクリックすること

Web アプリケーション実際に開発しながら学習を進めた。

でクリックした船舶の位置に移動する機能

バックエンド担当は Web アプリケーションのバックエン

タグボートと大型船舶の詳細情報一覧をクリックするとドの実装に必要な言語とソフトウェアの習得を行った。習クリックした船舶に移動することができる機能を実装した。

得した言語は HTML と CSS と PHP と SQL で、MySQL

この機能は、地図上に表示されたタグボートと大型船舶のや Apache について OSS セミナーに参加することで使用アイコンを見分けるためである。タグボートと大型船舶の方法を身につけた。

詳細情報一覧のセルのクリック状況を監視し、地図上に表示されているクリックされた船舶の場所を中心に、地図が3.5 開発移動するようにした。

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

3.5.2 後期実装
後期からクライアントサイドの実装と並行して、サーバサイドの実装が開始した。クライアントサイドの実装は以下の通りである。

1. タグボートと大型船舶の情報の取得

1. 船舶の情報の表示

クライアントサイドでタグボートと大型船舶の位置情報取得したタグボートと大型船舶の位置情報は Googleを表示するためには、タグボートと大型船舶の情報をサー

Maps API を用いて地図上にアイコンを表示した。船舶のバから取得する必要があった。しかし、サーバサイド担当

詳細情報は右側に船舶一覧に配置した。船舶一覧と船舶のは学習段階だったため、クライアントサイド担当がタグボ位置情報をリンクさせるために、船舶一覧の船舶名を押下することで地図上の中心に押下した船舶の位置を表示する

格納するテーブルの構造は表 1 のようにした。

機能を実装した。また、地図上に表示されている船舶のアイコンをクリックすることで、ふきだしに船舶の詳細情報

表 1 テーブルの構造を表示することにした。詳細情報には、大型船舶の船舶名と速度と進行方位が表示される。

2. 大型船舶の検索機能「船舶の情報の表示」で示したタグボートと大型船舶のデータを保存は、23 時 59 分に毎日保存されるように設定した。

詳細情報の表示機能について、大型船舶の詳細情報を船舶3.6 成果物の報告名で検索する機能をつけた。これにより函館湾付近に多く

本プロジェクトでは成果物に関する報告を 3 回行った。各の大型船舶が停泊している場合でも、目的の船を船舶名か報告の内容は下記に示す。

ら位置を把握できるようにした。

・前期成果物の報告
この報告では、前期に実装したシステムを函館ポートサ

3. Web カメラ機能の実装
函館市国際水産・海洋総合研究センターの屋上に Webカメラを設置し、Web カメラをインターネットを経由しービス株式会社様に渡し、夏季休業中に試用していただくことをお願いした。
・夏季休業後のヒアリングて遠隔操作できるようにした。操作は、Web アプリケー

夏季休業中に試用していただいた前期成果物のレビュー

ションのクライアントサイドから Web カメラ側で用意さをいただいた。試用の結果、機能が不足しており、まだ実れている API を呼び出すことで操作を行った。さらに、用的ではないという意見をいただいた。

Web アプリケーションから Web カメラを操作することが・後期成果物の報告できるようにすることが決定した。

夏季休業後のヒアリングをもとに実装した新機能の報告を行った。さらに、システム改善のための意見をいただいまた、サーバサイドは以下の実装を行った。

た。

1. Web アプリケーションを公開するサーバの構築
Web アプリケーションを公開するために、仮想サーバ

4. 今後の課題を借り、サーバの OS として CentOS をインストールした。

Web カメラの実装が現在では映像を表示しているだけ

Web アプリケーションの公開には Apache を用い、デーになってしまっている。当初の計画では、Google Map

タベースは MySQL を用いた。また Git を導入し、リポジと連動させて指定した地点の映像が表示できる仕様であっトリを設置することで、バージョン管理を行った。Webたことから改善が必要である。また、今後の展望としては、

アプリケーションは CakePHP を用いて開発した。

保存した航跡データを活用すれば、安全な航路の可視化や移動時間の予測などに利用できる可能性がある。また、開2. 船舶情報を保存するデータベースの構築取得した情報を保存するために、データベースの構築とテーブルの設計をおこなった。サ ーバから取得した情報

発したシステムは函館以外の地域での利用できる可能性があげられる。すでに、苫小牧でも本システムを利用したいとの要望があるので、実現したいと考えている。

は図 4 のようになっており、参考文献

図 4 サーバから取得した情報[1]

Marine Traffichttps://www.marinetraffic.com/

この情報を分解し、データベースに格納するようにした。

2016 年 01 月 13 日