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

プロジェクト名バーチャルダイビング

Project Name
Virtual Diving

グループ名
アプリ開発班Group Name
Application Developing Group
プロジェクト番号/Project No.

18-C

プロジェクトリーダ/Project Leader
1014196

川戸春磨

Haruma Kawato

グループリーダ/Group Leader
1014183

田中友菜

Yuna Tanaka

グループメンバ/Group Member
1014183

田中友菜

Yuna Tanaka

1014157

斉川聡基

Toshiki Saikawa

1014159

佐藤唯人

Yuito Sato1014248

永田りか

Rika Nagata

1014100

深谷健太

Kenta Fukaya

1014169

芳野洸太

Kota Yoshino

指導教員
長崎健

高博昭

和田雅昭

AdvisorTakeshi Nagasaki Hiroak Taka Masaaki Wada

提出日2017 年 1 月 18 日

Date of Submission
Jan 18, 2017

概要
国土交通省によると、年々若者の海への関心は高まっている。しかし、現在 8 割の学校が教科書記載の範囲にとどまった内容しか海洋教育を実施しておらず、現状では不十分であるという声も上がっている。そのため、教科書以外に気軽に海の知識を学べるようなコンテンツが必要だと考えた。そこで、本プロジェクトでは、若年層の中から小中学生を対象に、実際の海中映像を用いて海に関する知識を身に付けてもらうことを目的とし、撮影班、解析班、アプリ開発班に分かれて、気軽に利用できるスマートフォン向けのアプリケーションを開発した。
アプリ開発班では 360 度カメラで撮影された動画を用いて、海に関する知識を身に付けることのできるアプリケーションの開発を担当した。なお、開発するアプリケーションは、気軽に使うことができる Android アプリケーションにした。前期では、360 度動画再生機能、クイズ機能、図鑑機能の 3 つを実装した。また、後期では、中間発表のフィードバックをもとに、デザインの改善、実装済みの機能の改良、他アプリケーションとの差別化の 3 つを課題として取り組んだ。さらに、完成したアプリケーションへのアンケートを行った結果、ユーザへのフィードバックがなかったこと、アプリケーションの操作方法がわかりにくいという意見をもらった。その 2 つを改善するために、チュートリアル機能と実績機能を追加した。最終的に、マップ機能、360 度動画再生機能、通常動画再生機能、図鑑機能、クイズ機能、チュートリア
ル機能、実績機能の 7 つの機能を実装することができた。この完成したアプリケーションの評
価結果から、アプリ開発班としての目的を達成できたと考える。
キーワード

Android アプリケーション、海、教育、360 度カメラ（※文責: 芳野洸太）-i-Abstract
According to the Ministry of Land, Infrastructure and Transport, young people’s interest in the sea is increasing year by year. However, there are opinions that the marine
education has not been carried out suﬃciently, because 80We took charge of applicationgroup and developed an application that can instruct knowledge about the sea using
movies taken with the omnidirectional camera. We decided to develop Android application which can be used easily. In the first term, we implemented three functions,the omnidirectional movie playback function, the quiz function and the picture bookfunction. In the second term, we worked on a solution of three problems, improvementof design, implemented functions and diﬀerentiation from other applications, based on
feedback from the interim announcement. As a result of conducting a questionnaire
to the completed application, we got an opinion that there was no feedback from theapplication to the user and it was diﬃcult to understand the operation of the application. To improve these problems, we added two functions, the tutorial function and theachievement function. Finally, we implemented seven functions, the map function, theomnidirectional movie playback function, the normal movie playback function, the picture book function, the quiz function, the tutorial function, the achievement function.
We thought that we were able to achieve the purpose of application group, based on theevaluation of this application.
KeywordAndroid application, sea, education, omnidirectional camera（※文責: 芳野洸太）- ii -

目次
第1章

はじめに

1

第2章

アプリ開発班の概要

2

問題の設定 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

2

2.1.1

海洋教育の現状 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

2

2.1.2

問題の設定 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

2

具体的な手順、課題の設定 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

2

2.2.1

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

2

2.2.2

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

3

到達レベル . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

4

課題解決のプロセス

5

3.1

目的の実現方法の検討 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

5

3.2

実装機能の提案 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

53.3

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

5

3.3.1

開発環境の整備 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

5

3.3.2

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

6

3.3.3

プロトタイプの開発 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

6

2.1

2.2

2.3
第3章

3.4

プロトタイプの修正点の検討. . . . . . . . . . . . . . . . . . . . . . . . . . . .

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

7

3.5.1

アプリ開発班内のグループ分け . . . . . . . . . . . . . . . . . . . . . . . .

7

3.5.2

アンケートの準備 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

7

3.5.3

後期成果物の開発 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

8

3.5.4

デザイングループ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

8

3.5.5

実装グループ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

10

アンケートの実施及び後期成果物の改善 . . . . . . . . . . . . . . . . . . . . . . .

10

3.6.1

アンケートの実施 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

10

3.6.2

後期成果物の改善 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

10

3.6

第4章

4.1

4.2

4.3

班内のインターワーキング12

田中友菜 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

12

4.1.1

インターワーキングの月別の概要 . . . . . . . . . . . . . . . . . . . . . . .

12

4.1.2

インターワーキングの詳細 . . . . . . . . . . . . . . . . . . . . . . . . . .

12

斉川聡基 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

13

4.2.1

インターワーキングの月別の概要 . . . . . . . . . . . . . . . . . . . . . . .

13

4.2.2

インターワーキングの詳細 . . . . . . . . . . . . . . . . . . . . . . . . . .

14

佐藤唯人 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

15

インターワーキングの月別の概要 . . . . . . . . . . . . . . . . . . . . . . .

15

4.3.1

- iii -

インターワーキングの詳細 . . . . . . . . . . . . . . . . . . . . . . . . . .

15

永田りか . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

16

4.4.1

インターワーキングの月別の概要 . . . . . . . . . . . . . . . . . . . . . . .

16

4.4.2

インターワーキングの詳細 . . . . . . . . . . . . . . . . . . . . . . . . . .

17深谷健太 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

18

4.5.1

インターワーキングの月別の概要 . . . . . . . . . . . . . . . . . . . . . . .

18

4.5.2

インターワーキングの詳細 . . . . . . . . . . . . . . . . . . . . . . . . . .

18

芳野洸太 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

20

4.6.1

インターワーキングの月別の概要 . . . . . . . . . . . . . . . . . . . . . . .

20

4.6.2

インターワーキングの詳細 . . . . . . . . . . . . . . . . . . . . . . . . . .

21

4.3.2
4.4

4.5

4.6

第5章

5.1

5.2

5.3

5.4

付録 A

結果

22

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

22

5.1.1

プロトタイプの画面遷移図 . . . . . . . . . . . . . . . . . . . . . . . . . .

22

5.1.2

プロトタイプの画面詳細. . . . . . . . . . . . . . . . . . . . . . . . . . .

23

5.1.3

最終成果物の画面遷移図. . . . . . . . . . . . . . . . . . . . . . . . . . .

26

5.1.4

最終成果物の画面詳細 . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

27

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

31

5.2.1

前期の評価 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

31

5.2.2

後期の評価 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

32

プロジェクトの反省点 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

33

5.3.1

班としての反省点 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

33

5.3.2

アンケートグループ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

33

5.3.3

デザイングループ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

34

5.3.4

実装グループ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

35

今後の課題 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

36

5.4.1

前期の課題 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

36

5.4.2

後期の課題 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

36

新規習得技術38

A.1

Android Studio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

38

A.2

GitHub . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

38

活用した講義39

情報処理演習 I . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

39

付録 B

B.1
参考文献

40

- iv -

Virtual Diving

第 1 章 はじめに年々若者の海への関心は高まっている。国土交通省によると、日本海事センターが行った「海に関する国民意識調査」において、10 代で「海が好きである」と回答した人は、2013 年で 56.9%、

2014 年で 69.2% と増加している [1]。しかし、現在 8 割の学校が教科書記載の範囲にとどまった内
容しか海洋教育を実施しておらず、現状では不十分であるという声も上がっている。そのため、教科書以外に気軽に海の知識を学べるようなコンテンツが必要だと考えた。そこで、本プロジェクト
では、若年層の中から小中学生を対象に、実際の海中映像を用いて海に関する知識を身に付けてもらうことを目的とし、撮影班、解析班、アプリ開発班に分かれて、気軽に利用できるスマートフォン向けのアプリケーションを開発した。
アプリ開発班では 360 度カメラで撮影された動画を用いて、海に関する知識を身に付けることのできるアプリケーションの開発を担当した。開発するアプリケーションは、身近である Android
アプリケーションにした。前期では、360 度動画再生機能、図鑑機能、クイズ機能の 3 つを実装したアプリケーションのプロトタイプを作成した。
後期では、中間発表のフィードバックをもとに、デザインの改善、実装済みの機能の改良、他ア
プリケーションとの差別化の 3 つを課題として取り組んだ。その際、アプリ開発班内で、アンケー
トグループ、デザイングループ、実装グループの 3 つに分かれた。グループを分けた理由として、タスクを細分化し、知識の共有をスムーズに行うことが挙げられる。アンケートグループの活動内
容は、完成したアプリケーションへのフィードバックをもらうためのアンケートを作成、実施することである。デザイングループの活動内容は、アプリケーションのデザイン案やアプリケーションのアイコンを作成することである。実装グループの活動内容は、デザイングループが作成したデザイン案をアプリケーション上に再現し、必要な機能を実装することである。
アプリケーションの開発後、アンケートを行った結果、ユーザへのフィードバックがなかったこと、アプリケーションの操作方法がわかりにくいという意見をもらった。以上の 2 つの問題点を改善するために、実績機能とチュートリアル機能を追加した。
（※文責: 深谷健太）

Group Report of 2016 SISP

-1-Group Number 18-C

Virtual Diving

第2章

アプリ開発班の概要

2.1

問題の設定

2.1.1

海洋教育の現状

我が国では長年にわたり、海洋教育の推進のための取り組みが行われてきた。2007 年には海洋基本法が制定され、その中の第 28 条「海洋に関する国民の理解の増進等」において学校教育及び社会教育における海洋に関する教育の推進が明記され、学校での海洋教育の普及が飛躍的に進むことが期待された。しかし、「小中学校の海洋教育実施状況に関する全国調査」[2] によると、2012 年に全国の国公立及び私立の小中学校 32,010 校を対象に、海洋教育の実施状況や認識度合いについて調査を行い、そのうちの 20.9% の 6,706 校から得られた回答によると、小中学校において海洋
教育はほとんど行われていない状況が明らかとなった。海洋教育の実施状況については「教科書の範囲内での実施」と回答した学校が 62.8% と過半数を占め、「実施していない」との回答と併せると、全体の約 8 割が教科書に記載された内容以外には海洋教育に触れていないことが判明した。この問題の大きな原因としては、学校教育の教育課程に海洋教育の内容が位置付いておらず、学習指導要領への反映も困難であるからだと考えられる。
（※文責: 斉川聡基）

2.1.2

問題の設定

本プロジェクトでは若者への海洋教育が教科書記載の範囲にとどまり、現状では不十分であるという問題を解決することを目的とした。そのための手段として、実際の海中映像を用いて、海に関する知識を身に付けることができるコンテンツを作成した。また対象ユーザは、小中学生とした。
（※文責: 斉川聡基）

2.2

具体的な手順、課題の設定

2.2.1

具体的な手順

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

1. 目的の実現方法の検討
2. 実装機能の提案
3. 前期実装
4. 前期成果物の修正点の検討
5. 後期実装
6. 後期成果物の改善（※文責: 斉川聡基）

Group Report of 2016 SISP

-2-Group Number 18-C

Virtual Diving

2.2.2

課題の設定

1. 目的の実現方法の検討
・目的を実現することが出来るコンテンツの考案
・既存のコンテンツの調査

2. 実装機能の提案
・既存のアプリの調査・目的を実現できる機能の考案

3. 前期実装
・開発環境の整備

Android Studio の導入
GitHub の導入
・技術習得
教科書を用いた Java の復習

Android Studio を用いた Android アプリケーション開発方法の学習
GitHub の使用方法の習得
4. プロトタイプの修正点の検討
・中間発表のアンケート内容をもとに改善案の考案

5. 後期実装・アプリ開発班内のグループ分け
・アンケートの準備：アンケートグループ
・アンケートグループ
アンケートの作成
アンケート実施日程の設定
本学の椿本先生へアポイントメントの取り付け・後期成果物の開発
・デザイングループ

MediBang Paint Pro の導入
画面デザインに関する情報収集
各画面のデザイン案の作成
アプリケーションのアイコンの作成
・実装グループ
前期の改善案をもとに機能の改善、追加

6. アンケートの実施及び後期成果物の改善
・アンケートの実施
・アンケートグループ

Group Report of 2016 SISP

-3-Group Number 18-C

Virtual Diving
アンケートの実施
アンケート結果の集計、共有
・後期成果物の改善
・デザイングループ
アンケート結果をもとに画面のデザイン案の変更、追加
・実装グループ
アンケート結果をもとに機能の考案、追加（※文責: 斉川聡基）

2.3

到達レベル

前期は、アプリケーションの対象ユーザを函館に住んでいる人や函館を訪れる人に設定した。課題を達成するためには、開発したアプリケーションを使うことで対象ユーザが海や魚についての知識を身に付けられ、加えて何度も使いたいと感じるアプリケーションを開発することが必要だと考えた。そこで、実際の海中映像を用いて、魚や海の知識を得ることができ、日常的に使用したいと感じるようなアプリケーションを開発することを目標に設定した。
後期は、対象ユーザを再検討した結果、函館に住む人や函館に訪れる人から小中学生に変更することにした。そこで後期からは、小中学生に向けたアプリケーションを開発した。また、目標を対象ユーザが実際の海中映像を用いて、海に関する知識を身に付けることができるアプリケーションの完成とした。目標達成の確認方法として、被験者にアンケートを実施し、評価してもらう方法をとった。
（※文責: 斉川聡基）

Group Report of 2016 SISP

-4-Group Number 18-C

Virtual Diving

第 3 章 課題解決のプロセス
3.1

目的の実現方法の検討

前期では全員でアプリケーションの開発を行ったが、後期では、アプリ開発班内で、アンケート
グループ、デザイングループ、実装グループに分かれて、活動を行った。理由として、作業を細分化することで、進捗管理を容易にし、知識の共有を行いやすくするためである。
アンケートグループは、完成したアプリケーションのフィードバックをもらうために、アンケー
トの作成や、アンケート結果を整理する作業を行った。デザイングループは、アプリケーションの対象ユーザに合わせたデザインを考え、デザイン案やアプリケーションのアイコンを作成する作業を行った。実装グループは、デザイングループが作成したデザイン案をもとにアプリケーションの画面を作成し、アプリケーションが動くように実装をする作業を行った。
（※文責: 佐藤唯人）

3.2

実装機能の提案

前期は、最初にプロジェクトメンバー全員で実装する機能についてのアイデアを提案した。次にアプリ開発班の中でアイデアの提案や検討を重ね、実装する機能を決定した。決定した機能は、

360 度動画再生機能、図鑑機能、クイズ機能、画像共有機能の 4 つである。
また、後期の初めに機能を再検討した。前期では、函館に住んでいる人や函館を訪れる人としていたが、後期では変更し対象ユーザを小中学生に定めた。その結果、マップ機能、360 度動画再生
機能、通常動画再生機能、図鑑機能、クイズ機能の 5 つの機能に決定した。画像共有機能を外した
理由は技術的な理由である。
また、5 つの機能が完成した後に実施したアンケートにより、チュートリアル機能と実績機能を追加することになった。最終成果物の機能としては、マップ機能、360 度動画再生機能、通常動画再生機能、図鑑機能、クイズ機能、チュートリアル機能、実績機能の 7 つである。
（※文責: 佐藤唯人）

3.3

前期実装

3.3.1

開発環境の整備

Android アプリケーションの開発環境として Android Studio を導入した。また、開発するアプ
リケーションの共同開発とバージョン管理のために GitHub を導入した。さらに Android Studioと GitHub を連携させ、バージョン管理の効率化を図った。
（※文責: 斉川聡基）

Group Report of 2016 SISP

-5-Group Number 18-C

Virtual Diving

3.3.2

技術習得

開発言語には Java を採用したため、開発に取り掛かる前に全員で Java 言語の復習と Android

Studio を用いた開発の学習をした。また、Git、GitHub の操作方法を習得した。
（※文責: 斉川聡基）

3.3.3

プロトタイプの開発

前期では 360 度動画再生機能、クイズ機能、図鑑機能、画像共有機能の実装を行った。実装過程を下記に示す。

1. 360 度動画再生機能
360 度動画を再生できる機能を、ライブラリを用いて実装した。
2. 図鑑機能
図鑑選択画面と図鑑詳細画面を作成した。

3. クイズ機能
クイズ出題画面とクイズ結果画面を作成した。クイズ形式は 3 つの選択肢から正解だと思う
物を選ぶ方法とし、正解、不正解に対応したアニメーションを表示した。

4. 画像共有機能
動画のスクリーンショットとその感想をユーザ同士で共有できる機能である。サーバ上の画
像の読み込みの仮実装は出来たが、アプリケーション内でスクリーンショットを扱うことが難しく完成させることは出来なかった。
（※文責: 佐藤唯人）

3.4

プロトタイプの修正点の検討

中間発表のアンケートからプロトタイプの修正点の検討を行った。アンケートの意見を参考にした結果、画面やアイコンのデザインの改善、動画上での魚の情報の表示、新機能による既存のアプ
リケーションとの差別化などの改善案が挙げられた。改善案の中で、動画上での魚の情報の表示は技術的な問題で断念した。アプリケーションの画面やアイコンのデザインの改善に関しては、アプリ開発班内で新たに画面のデザインを検討するグループを作り、解決を目指すこととした。また、新機能として海中映像の撮影地点を地図上に表示する機能を実装することで、既存のアプリケー
ションとの差別化を図った。
（※文責: 斉川聡基）

Group Report of 2016 SISP

-6-Group Number 18-C

Virtual Diving

3.5

後期実装

3.5.1

アプリ開発班内のグループ分け

作業を細分化することで、進捗管理を容易にし、知識の共有を行いやすくするため、アプリ開発
班内でさらにグループ分けを行った。アンケートの準備、実施を担当するアンケートグループ、ア
プリの画面デザインを担当するデザイングループ、デザイングループが作成した画面デザイン案をもとに機能の実装を行う実装グループに分かれた。
（※文責: 斉川聡基）

3.5.2

アンケートの準備

1. 高校生向けのアンケート集計
本プロジェクトの視察のために高校生が訪れる機会があったため、本学教員に対してアン
ケートを行う前に、高校生に対してアンケートを行った。質問内容は、選択式のものと自由
記述式の 2 種類であった。選択式のものは、「（高校生の視察が行われた時点で）アプリケー
ションを使いたいと思いましたか」、に対して「はい」もしくは「いいえ」で答えるものであった。自由記述式のものは、「アプリケーションに対して要望はありますか」というものである。また、匿名であるが、回答者の性別を選択する項目も用意した。以上 2 つの質問と回答者の性別から、今後のアプリ開発の参考となるように結果を集計した。
「アプリケーションを使いたいと思いましたか」という質問に対しては、36 人中 33 人からは「はい」、それ以外の 3 人からは「いいえ」という結果が得られた。
「アプリケーション
に対して要望はありますか」という質問に対しては、「図鑑に加えて、料理のレシピの情報も欲しい」、「音声で解説する機能が欲しい」など、アプリ開発班の話し合いでは出なかった
意見を得た。

2. アンケートの作成
アンケート作成にあたって調べた事項を参考にしながら、本学教員を対象にアンケートを作成した。
調べた事項は、アンケートを行う上での知識である。適切な質問数やアンケート方式、どのような内容にすると回答者が答えやすいかについてであった。
質問内容は、選択式のものと自由記述式の 2 種類である。選択式のものは、「操作は容易であったか」、「画面は見やすかったか」、「このアプリケーションは小中学生向けのものとして適切だと思ったか」などのアプリケーションの使い心地や内容にについて「はい」
、
「いい
え」
、
「どちらともない」の 3 つの中から選択する質問であった。選択式の質問に対して「いいえ」と答えた場合については、その理由を記述するよう求めた。自由記述式のものは、「海を身近に感じる瞬間はいつですか」という問のみであった。

（※文責: 田中友菜）

Group Report of 2016 SISP

-7-Group Number 18-C

Virtual Diving

3.5.3

後期成果物の開発

前期の反省を生かし、小中学生向けのデザインの作成と、機能の改善を行った。アンケートグ
ループは、アンケートの作成と実施計画を担当した。デザイングループは、アイコンの作成と画面のデザイン案の作成を担当した。実装グループは、アプリケーションの実装を担当した。前期との比較を下記に示す。

1. マップ機能
Google Maps API を使用し、地図上から場所ごとの動画を選択できるようにした。
2. 360 度動画再生機能
再生ボタンを廃止し選択されると自動で再生されるようにした。

3. 通常動画再生機能
通常の動画を再生できるようにした。それ以外は 360 度動画再生機能の仕様と同じである。

4. 図鑑機能魚の名前の 50 音別、季節別、科目別の 3 つから検索することができるようにした。

5. クイズ機能問題の解説を追加した。

（※文責: 佐藤唯人）

3.5.4

デザイングループ

1. MediBang Paint Pro の導入
画面デザインの作成ツールとしてフリーソフトである MediBang Paint Pro を導入した。

2. 各画面のデザインの検討
アプリケーションの開発にあたって必要なタイトル画面、マップ画面、図鑑選択画面、図鑑
詳細画面、クイズ出題画面、クイズ解説画面のデザイン案をデザイングループ内で検討した。

3. 各画面のデザインの担当分けと作成
出されたデザイン案をもとにそれぞれの画面のデザインを行った。デザインの担当は以下のようになった。
永田：タイトル画面、図鑑選択画面、図鑑詳細画面
斉川：マップ画面、クイズ出題画面、クイズ解説画面

Group Report of 2016 SISP

-8-Group Number 18-C

Virtual Diving

4. アプリケーションのアイコン作成
アプリケーションのアイコンを永田、斉川がそれぞれ 3 案ずつ作成した。合計 6 つのデザイン案は図 3.1 の通りである。アイコンデザイン案 2,4,5 は永田、1,3,6 は斉川が作成した。
これらからアプリ開発班内で投票を行い、正式なアイコンを決定した。

図 3.1 アイコンデザイン案

投票では、アプリケーションのアイコンに相応しいものと考えるものに 1 人 2 票入れ、多数決によって決定した。アプリケーションのタイトルである「バーチャルダイビング」の「バーチャル」部分を最も彷彿させるデザインがデザイン案 6 であったため、デザイン案 6
を正式なアイコンにした。これを図 3.2 に示す。

図 3.2

アプリケーションのアイコン（※文責: 永田りか）

Group Report of 2016 SISP

-9-Group Number 18-C

Virtual Diving

3.5.5

実装グループ

1. 仕様の検討
画面ごとの仕様を決定し、デザイングループにデザイン案の作成を依頼した。

2. 画面の作成
デザイングループが作成したデザイン案からアプリケーションの画面を作成した。ボタンや背景の画像を配置し、レイアウトファイルの作成を行った。担当は以下のようになった。
深谷：タイトル画面、マップ画面、動画再生画面、チュートリアル画面、実績画面
佐藤：図鑑選択画面、図鑑詳細画面
芳野：クイズ出題画面、クイズ解説画面

3. 機能の実装
本やインターネットの情報を参考に試行錯誤で実装を行った。担当は以下のようになった。
深谷：マップ機能、360 度動画再生機能、通常動画再生機能
佐藤：図鑑機能
芳野：クイズ機能（※文責: 佐藤唯人）

3.6

アンケートの実施及び後期成果物の改善

3.6.1

アンケートの実施

アンケートグループ

1. アンケートの実施、集計
デザイングループ、実装グループが開発したアプリケーションを本学の椿本先生に実際に操作してもらい、意見と感想を求めた。用意したアンケート以外にも詳細な意見を頂いたため、それらも含めて結果をまとめた。

2. 集計結果の共有
まとめたアンケート結果をデザイングループ、実装グループにも共有し、アプリケーションの改善について話し合いを行った。
（※文責: 田中友菜）

3.6.2

後期成果物の改善

椿本先生へ行ったアンケートの結果、「アプリケーションを使用した際に、マップ画面で最初に何をしてよいかわからない」、「ユーザに何らかのフィードバックが必要ではないか」という意見を頂いた。この 2 つの問題に対して、マップ画面のレイアウトの改善、新たにチュートリアル機能、Group Report of 2016 SISP

- 10 -

Group Number 18-C

Virtual Diving
実績機能を実装することで解決を試みた。アンケート前との比較を下記に示す。

1. マップ画面の改善
マップ機能は変更せず、マップ画面のみを改善した。

2. チュートリアル機能
新しく実装した機能である。アプリケーションの使い方を学ぶことができるようにした。

3. 実績機能
新しく実装した機能である。動画の視聴履歴、図鑑の閲覧履歴、クイズの正解数を使用した
回数などによって称号が得られるようにした。

デザイングループ

1. デザインの修正
椿本先生へ行ったアンケートでの意見の 1 つとして、アプリケーションを使用した際に、マップ画面で最初に何をしてよいかわからないという意見より、スムーズに操作できるようにマップ画面のデザインを修正した。

2. 新機能の画面デザイン案の考案
上記の修正に加え、操作方法の説明としてチュートリアル画面を作成した。また、アンケー
トの意見として、ユーザに何らかのフィードバックが必要ではないかという意見から、どこまでアプリケーションを使用したかを可視化した実績画面の作成を行った。それぞれの担当は以下のようになった。
永田：実績画面
斉川：マップ画面、チュートリアル画面実装グループ

1. 画面の編集と追加
デザイン案から画面の編集と追加を行った。マップ画面を編集し、チュートリアル画面と実績画面を新しく作成した。担当は以下のようになった。
深谷：マップ画面、チュートリアル画面、実績画面

2. 機能の実装
新機能として、チュートリアル機能と実績機能を実装した。担当は以下のようになった。
深谷：チュートリアル機能
佐藤：実績機能（※文責: 佐藤唯人）

Group Report of 2016 SISP

- 11 -

Group Number 18-C

Virtual Diving

第4章

班内のインターワーキング

4.1

田中友菜

4.1.1

インターワーキングの月別の概要

6月
・ホーム画面、ホーム画面からの画面遷移の実装
・クイズ機能の正解、不正解時のアニメーションの作成
・図鑑機能、クイズ機能のアイコンの作成

7月・発表に使用するサンプル動画の編集

9月
・前期の反省点について話し合い・アンケート実施のための事前知識集め

10 月
・高校生からのアンケート結果の集計
・アンケートの準備

11 月
・本学教員へアンケート実施
・アンケートの結果を共有し、改善案を話し合い

12 月
・発表準備

4.1.2

インターワーキングの詳細

6月
・ホーム画面、ホーム画面からの画面遷移の作成
ホーム画面から、各アクティビティに遷移するためのプログラムを作成した。
・クイズ機能の正解、不正解時のアニメーションの作成
クイズ機能で正解時は丸印、不正解時はバツ印のアニメーションを表示するプログラムを作成した。
・図鑑機能、クイズ機能のアイコンの作成
図鑑及びクイズのアクティビティへ遷移する際にタップするのアイコンを作成した。タップしている間は背景色を変えるなど、アイコンごとに 2 パターンを用意した。

7月・発表に使用するサンプル動画の編集
成果発表に使用する、サンプル用の動画を編集した。サンプルに使用した動画は、撮影班が 360

Group Report of 2016 SISP

- 12 -

Group Number 18-C

Virtual Diving
度カメラで撮影してきたものである。Kodak 社が無料で配布している動画編集ソフトを用いて編集を行った。この動画をはじめ、発表のために練習や調整を行った。

9月
・前期の反省点についての話し合い
前期末の発表会の感想や評価シート、更にプロジェクト内で問題に挙がっていたことについて話し合った。話し合いを受けて、後期はアプリ開発班を「アンケートグループ」、「デザイングルー
プ」、「実装グループ」に分けて活動を行った。
・アンケート実施のための事前知識集め
アンケートを実施するにあたって、必要な知識を集めた。主な調査項目は、アンケート作成時の質問の考え方や、アンケートの集計方法であった。

10 月
・高校生からのアンケート結果の集計
市内の高校生がプロジェクトを視察しに来たため、高校生に向けてのアンケートの作成及び結果の集計を行った。アンケート内容はアプリケーション作成にあたってのコンセプトや、前期時点でのアプリケーションに対する印象についてであった。
・アンケートの準備
アンケート実施に向けてアンケート用紙の作成や、集計表の作成を行った。アンケート項目は同
じグループ内のメンバーに確認を取りながら、なるべく作成者と被験者にとって公平な質問になるように作成した。

11 月
・本学教員へアンケート実施
アプリケーションの完成に伴い、本学の教員に実際にアプリケーションを使用してもらい、意見を求めた。
・アンケートの結果を共有し、改善案を検討
ユーザへのフィードバックや、開発者がその場にいなくても使用にあたっての理解が容易なアプ
リケーションへ向けて改善する方向へ決まった。

12 月
・発表準備
最終成果発表会に向けて発表の準備や練習を行った。
（※文責: 田中友菜）

4.2

斉川聡基

4.2.1

インターワーキングの月別の概要

6月
・画像共有機能の作成

7月Group Report of 2016 SISP

- 13 -

Group Number 18-C

Virtual Diving
・中間発表のポスター及びスライドに用いる図、イラストの作成

9月
・アプリ画面のデザインに関する情報収集、デザイン案の検討

10 月
・マップ画面、クイズ出題画面、クイズ解説画面のデザイン

11 月
・マップ画面のデザインの修正、チュートリアル画面の作成
・スライド、ポスターの図、イラストの作成

12 月
・最終発表の準備

4.2.2

インターワーキングの詳細

6月
・画像共有機能の作成
ユーザ間で動画のスクリーンショットとその画像に関する感想の共有機能の開発を芳野と共に行った。その中で、個々の画像をタップした後に表示されるコメント付き画像の画面の作成と画像一覧を表示する画像選択画面から画像詳細画面への遷移を担当した。

7月
・中間発表のポスター及びスライドに用いる図、イラストの作成
中間発表の際のポスター作成および、発表用スライド作成の際に用いる図やイラストを作成した。図は、課題解決へのプロセスを表し、アプリケーションの機能（360 度動画再生機能、図鑑機
能、クイズ機能、画像共有機能）の発表をより理解しやすくするために作成した。イラストの一部にはフリーのイラストを使用した。

9月
・画面のデザインに関する情報収集
対象ユーザが小中学生ということから子供向けのデザインや配色に関する書籍、Web ページを用いて学習を行った。また、海や海洋生物に関する図鑑、クイズなどの既存のアプリケーション、

Web サービスを調査し、どのようなデザインが用いられているか調べた。
・デザイン案の検討
画面のデザインについて得た情報をもとに各画面のデザイン案を検討した。

10 月
・マップ画面、クイズ出題画面、クイズ解説画面のデザイン
後期に実装する機能の内、マップ画面、クイズ出題画面、クイズ解説画面のデザインを担当した。
フォントに丸みのある文字を使用し、クイズ出題画面、クイズ解説画面にキャラクターを登場させるなど、情報収集によって得た知識をもとに子供向けのデザインを意識し取り組んだ。

11 月Group Report of 2016 SISP

- 14 -

Group Number 18-C

Virtual Diving
・マップ画面のデザインの修正、チュートリアル画面の作成
アンケート班が行ったアンケートの結果をもとに、画面のデザインの修正と新たな画面の作成を行った。アンケートを踏まえた改善案として「操作方法のわかりづらいマップ画面の修正」、「ユー
ザの操作の指標となるものが必要」という案が挙げられた。これをもとにマップ画面は画面上のボタンのデザインを統一し、ボタン自体も文字のほかにアイコンを追加することで、わかりやすいデ
ザインを目指した。また、初めて本アプリケーションを使うユーザでも使用方法を理解できるように、チュートリアル画面を新たに作成した。
・スライド、ポスターで用いるイラストの作成
各班の役割を表すイラストを作成した。

12 月
・最終発表の準備
最終発表に向けて発表練習を行った。それに並行して、現行の修正点の提案やスライドの修正点の提案を行った。
（※文責: 斉川聡基）

4.3

佐藤唯人

4.3.1

インターワーキングの月別の概要

6月・Android Studio の事前準備
・クイズ機能の実装

7月
・中間発表の準備

9月
・機能の仕様を検討

10 月
・図鑑機能を実装

11 月
・実績機能を実装

12 月
・最終発表の準備

4.3.2

インターワーキングの詳細

6月
・Android Studio の事前準備

Android Studio をインストールして開発環境を整えた。最初に、Android Studio で使用する言語である、Java の復習をした。次に、Android Studio の使い方を学んだ。
・クイズ機能の実装

Group Report of 2016 SISP

- 15 -

Group Number 18-C

Virtual Diving
アプリケーション内のクイズ機能を担当した。アプリケーション内データベースから、問題を表示し、正解を判定する機能を実装した。データベースの知識が少なかったため、Android アプリ
ケーションで用いることができる SQLite の使い方を学んだ。

7月
・中間発表の準備発表スライドのまとめのページを作成した。

9月
・機能の仕様を検討
後期では、前期の反省とアプリケーションの機能の再検討を行った。

10 月
・図鑑機能の実装
デザイングループのデザイン案を用いて図鑑機能の実装を行った。前期で学んだデータベースの知識を用いて、フィルタ機能を実装した。図鑑のデータは Web サイトのものを使用した。

11 月
・実績機能の実装
実績機能の実装を行った。主に動画の視聴履歴、図鑑の使用履歴、クイズの正解数の判定を作成
した。

12 月
・最終発表の準備
発表の流れや原稿の確認を行った。
（※文責: 佐藤唯人）

4.4

永田りか

4.4.1

インターワーキングの月別の概要

6月
・Java の復習
・Android Studio を使用したアプリケーション開発の練習
・図鑑選択画面の作成

7月
・ホーム画面からの各機能への遷移アニメーションの実装
・中間発表準備9月
・デザインに関する情報収集、勉強

10 月Group Report of 2016 SISP

- 16 -

Group Number 18-C

Virtual Diving
・図鑑選択画面、図鑑詳細画面のデザイン作成
・タイトル画面のデザイン作成

11 月・アンケートの結果をもとに、実績画面のデザイン作成
・デザインの修正

12 月
・発表準備

4.4.2

インターワーキングの詳細

6月
・Java の復習
今回、Android のアプリケーション開発をするため、開発言語の Java を復習した。以前講義で学んだ内容でもあったが、開発するにあたり改めて復習し、アプリ開発班内で Java の使用方法を再確認した。
・Android Studio を使用しアプリケーション開発の練習

Android Studio を使用し、Java 言語でアプリケーションの試作を開発した。試作として、動画再生をするアプリケーションを開発した。
・図鑑選択画面の作成
試作開発が終わり、実際に開発するアプリケーションに実装する機能をアプリ開発班で議論した。その中で、図鑑選択画面の開発にたった。3 種類の魚が均等に表示されるよう、各デバイスの画面サイズに対応したレイアウトへ整えた。

7月
・ホーム画面からの各機能への遷移アニメーションの実装
ホーム画面から各機能へ遷移時のアニメーションを作成した。Android Studio の参考書と Web
ページを参考に、XML を使用して作成した。360 度動画再生画面へ遷移する際は、実際に海に潜るイメージを持たせ、図鑑選択画面では海中から上がって図鑑を広げるイメージを持たせた。
・中間発表準備
中間発表の準備を開始し、原稿などの確認をした。

9月
・デザインに関する情報収集、勉強
デザイングループに所属し、UI やデザインについて勉強を行った。当初マテリアルデザインを利用しようと試み、青を基調としていたデザインだったが、対象ユーザが小中学生だったので多彩色に変更した。

10 月
・図鑑選択画面、図鑑詳細画面のデザイン作成
図鑑選択画面、図鑑詳細画面のデザイン作成では対象ユーザが敬遠しないために堅苦しくないデザインを意識して作成した。魚の図鑑を探しやすいように並べかえできるようにした。
・タイトル画面のデザイン作成

Group Report of 2016 SISP

- 17 -

Group Number 18-C

Virtual Diving
タイトル画面では、海と魚をイメージし、クレジット表記をした。

11 月
・アンケートの結果をもとに、実績画面のデザイン作成
アンケートの結果より、ユーザがアプリケーションの使用履歴を確認できる実績画面のデザインを作成した。

12 月
・発表準備
発表準備をし、原稿などの確認をした。

（※文責: 永田りか）

4.5

深谷健太

4.5.1

インターワーキングの月別の概要

6月
・Java の復習
・Android Studio を使用したアプリケーション開発の練習・360 度動画再生機能の実装

7月
・GitHub の導入

9月
・機能の仕様を検討

10 月
・タイトル画面、360 度動画再生機能、通常動画再生機能、マップ機能の実装
・デザインパターンの学習

11 月
・チュートリアル、実績機能のフロントの実装

4.5.2

インターワーキングの詳細

6月
・Java の復習

2 年前期の講義「情報処理演習 1」で用いた、スッキリわかる Java 入門 第 2 版を使い復習した。
カプセル化や継承などのオブジェクト指向の内容をグループ内で輪読した。
・Android Studio を使用したアプリ開発の練習
ボタンを用いた画面の遷移や、リストとして文字列を表示する機能を Web サイトを参考にして開発した。また、Android Studio では、xml を用いて画面のレイアウトを作成するため、xml の学習もした。

Group Report of 2016 SISP

- 18 -

Group Number 18-C

Virtual Diving
・360 度動画再生機能の実装
動画再生画面について、Web サーバ上にある動画と Android 端末内にある動画の 2 つを再生できるようにした。Web サーバ上の動画をストリーミング再生する機能を実装することで、インターネット環境がある場所での動画再生を可能にした。さらに、端末内にある動画を再生することができるようにすることで、オフラインの環境でも再生できるようにした。

7月
・GitHub の導入

GitHub を導入するために必要な知識をあらかじめ習得し、メンバー内に共有することで、グループ内でのバージョン管理を可能にした。具体的な手順として、メンバーそれぞれに Git をインストールさせ、add、commit、push、pull をするためのコマンドとそれぞれがどういう動作をするかを伝えた。その後あらかじめ作っておいた、GitHub 上のレポジトリをクローンし、push できるまでを口頭で指示した。また、Android Studio にも GitHub と連携するための機能がもとからあり、それを使って push、pull をする手順もメンバー内で共有した。

9月
・機能の仕様を検討開発するアプリケーションの方向性について再検討するとともに、前期に実装した機能の見直し、新たに実装する機能 の検討を行った。

10 月
・タイトル画面、360 度動画再生機能、通常動画再生機能、マップ機能の実装
タイトル画面は、デザイン班が作成したデザイン案をもとに作成した。また、ボタンを設置しタップしたときにマップ画面に遷移するように実装した。

360 度動画再生機能は、前期と同様にして Panframe ライブラリを用い実装した。前期作った機能にランダムで動画が再生される機能を追加した。ランダム機能では、再生した動画の名前を保存することで、すべての動画を見るまで、一度見たことのある動画が再生されないように実装した。
通常動画再生機能は、360 度用に変換できない動画がいくつかあったため、通常動画の再生をできる機能も実装した。通常動画の再生機能は、視点が変更できないこと以外は、360 度動画と同じ挙動をするように実装した。通常動画も 360 度動画と同様に、ランダムに動画を再生されるようにした。

360 度動画再生機能、通常動画再生機能で再生される動画は、撮影班から提供されたものを使った。また、動画のファイルは、サーバを立てていないため Android デバイスのローカルストレー
ジに保存し、その動画をアプリケーション側から呼び出すことで再生した。アプリケーション内に動画を入れなかった理由としては、動画のファイルサイズが大きすぎるため、動画を入れれば入れるほどアプリケーションのサイズも大きくなり、インストールに時間がかかることが挙げられる。
マップ機能は、動画の撮影場所を一目でわかりやすくするために実装した。Google Maps API
を用いて実装した。あらかじめ撮影個所の緯度経度を登録しておくことで、撮影個所にマッピングをし、ユーザが見たい個所の動画を直感的に選ぶことが可能になった。マッピング用のアイコンは2 つ用意し、360 度動画、通常動画のどちらであるか分かるようにした。また、地域ボタンをタップすることで、動画が撮影された場所の地域名がリストとして表示される。表示された地域名をタップすることで、マップの視点がタップされた地域周辺に切り替わるように実装した。また、地Group Report of 2016 SISP

- 19 -

Group Number 18-C

Virtual Diving
域周辺に視点が切り替わっている状態で、地域ボタンをタップするとその地域で動画が撮影された場所の名前がリストとして表示される。リストの名前をタップすることで、対応したマッピングのアイコンの上に名前が表示されるように実装した。
・デザインパターンの学習

Android アプリケーションを実装する際に、バグの少ない実装をするためにデザインパターンを学習した。学習後に、マップ機能の座標の読み込みや再生した動画の履歴の保存などに、イテ
レータのデザインパターンを使って実装し直した。

11 月
・チュートリアル機能、実績画面の実装
チュートリアル機能は、アプリケーションの使い方がわかりにくいというアンケート結果から、実装に至った。デザイングループの作ったデザイン案をもとに、アプリケーションの使い方が書かれたスライドを表示する機能を実装した。チュートリアルは、初めてアプリケーションを起動した際に、タイトル画面からマップ画面に遷移する前に表示される。
また、実績機能では、データベースから得られた情報をもとに情報を画面に表示する機能を実装した。表示する内容は、あらかじめ設定した目標が達成されているかと現在達成している目標が、目標の総数に対してどのくらいの割合かの 2 つである。
あらかじめ設定している目標を達成しているかの表示には、データベースから達成状況を受け取り、達成前と達成後に異なった画像、文字、背景の色をリストで表示することで実装した。達成前には、暗い背景とその目標を達成するための条件を表示した。達成後には、明るい背景とあらかじめ設定しておいた目標のレベルに応じた画像と目標の名前を表示した。また、目標を動画、図鑑、クイズに分けそれぞれに対応したタブを作った。それぞれのタブをタップすることで、目標をフィルタリングして表示することができる。
目標達成の割合については、データべースから目標の達成度の情報を受け取り、その状況に合わ
せて、画像と文字を変えて表示することで、実装した。
（※文責: 深谷健太）

4.6

芳野洸太

4.6.1

インターワーキングの月別の概要

6月
・画像共有機能の実装
・SQLite データベースを利用するプログラムの作成

7月
・中間発表のスライド、原稿の作成

9月
・機能の仕様を検討

10 月
・クイズ機能の実装
・クイズデータベースの作成

Group Report of 2016 SISP

- 20 -

Group Number 18-C

Virtual Diving
11 月-12 月
・ポスターの作成

4.6.2

インターワーキングの詳細

6月
・画像共有機能の作成
ユーザ間で 360 度動画のスクリーンショットとその画像に関する感想の共有機能の開発を斉川と共に行った。その中で、サーバから画像とコメントを受信する機能とスクリーンショットをリストで表示する画像選択画面を担当した。サーバにアップロードした画像を取得し、画像選択画面に表示することはできたが、360 度動画のスクリーンショットについては実装できなかった。
・SQLite データベースを利用するプログラムの作成
アプリケーション内データベースの作成に取り組んだ。データベースの利用法について、Web
ページを参考にプログラムを作成した。

7月
・中間発表のスライドと原稿の作成
中間発表に使用するアプリ開発班のスライドを作成した。その際、グループメンバーに確認しても らい、アドバイスを受けながら取り組んだ。また、発表に用いる原稿の作成も行った。

9月
・機能の仕様を検討開発するアプリケーションの方向性について再検討するとともに、前期に実装した機能の見直し、新たに実装する機能 の検討を行った。

10 月
・クイズ機能の実装
図鑑詳細画面からクイズボタンをタップすることで、クイズ出題画面に遷移できるよう実装した。クイズ出題画面では、クイズに対して 3 つの選択肢を表示した。そして、ユーザを飽きさせな
いため、正解の場合と不正解の場合、それぞれに対応したアニメーションを組み込んだ。また、解答後に遷移するクイズ解説画面では、正解の選択肢とそれに付随する情報を解説として表示した。
・クイズデータベースの作成
クイズ機能に使用するクイズを作成し、データベースにまとめた。クイズは図鑑に対応している
ため、合計 63 問作成した。クイズを作成する際には、Web ページを利用し情報を調べた [2]。対象ユーザが小中学生であることを考慮し、漢字の量やクイズの難易度を調整しながら作成した。

11 月-12 月
・ポスターの作成
最終発表に用いたポスターについては、開発したアプリケーションを説明する部分の作成のほか、全体の英訳や文章校正、細かいレイアウトの調整を行った。
（※文責: 芳野洸太）

Group Report of 2016 SISP

- 21 -

Group Number 18-C

Virtual Diving

第5章

結果

5.1

プロジェクトの結果

5.1.1

プロトタイプの画面遷移図

アプリ開発班では 360 度カメラで撮影された動画を用いて、海に関する知識を身に付けることのできるアプリケーションを開発した。前期に開発したプロトタイプの画面は全部で 9 つある。初めにアプリケーションを起動すると、ホーム画面が表示される。ホーム画面からは動画選択画面、図
鑑選択画面、画像選択画面に遷移することができる。
初めに、動画選択画面へは、「Lets Diving!」と表示されたボタンをタップすることができる。

また、遷移する際に、アニメーションを付加することで、海中に潜っているようなイメージを持たせた。動画選択画面に表示された動画リスト内から一つ選択することで、360 度動画再生画面に遷移することができる。360 度動画再生画面では、戻るボタンを押す、または、動画再生が終了する
ことで動画選択画面に戻ることができる。
次に、図鑑選択画面へは、図鑑ボタンをタップすることで遷移することができる。図鑑選択画面
では、表示されている画像をタップすることで図鑑詳細画面に遷移することができる。図鑑詳細画
面では、クイズボタンを押すことでクイズ出題画面へ遷移することができる。クイズ出題画面では、クイズと 3 つの選択肢が表示され、選択肢をタップすると次の問題が表示される。クイズは全部で 3 問あり、3 問目のクイズに解答した後、クイズ結果画面に遷移する。クイズ結果画面から戻るボタンをタップすることで、図鑑詳細画面に戻ることができる。
最後に、画像選択画面へは、画像ボタンをタップすることで遷移することができる。画像選択画
面では、サーバ上にアップロードされている画像が複数表示され、そのうち一つの画像をタップすることで、画像詳細画面に遷移する。画像詳細画面からは、戻るボタンを押すことで、画像選択画面に遷移することができる。
以上をまとめたものを図 5.1 に示す。

（※文責: 芳野洸太）

Group Report of 2016 SISP

- 22 -

Group Number 18-C

Virtual Diving

図 5.1 プロトタイプの画面遷移図

5.1.2

プロトタイプの画面詳細

1. ホーム画面
アプリケーションを起動した際に最初に表示される画面である。動画選択画面、図鑑選択
画面、画像選択画面の 3 つの画面に対応したボタンをタップすることで遷移することができる。ホーム画面を図 5.2 に示す。

図 5.2 ホーム画面

2. 動画選択画面
アプリケーションに登録されている動画のタイトル、サブタイトル、サムネイル、画像再生数をリストとして表示する画面である。リストの各項目をタップすることで、対応した動画を再生する動画再生画面に遷移することができる。また、画面上部をスワイプすること
で、動画リストの表示順を名前順、再生数順に切り替えることができる機能も実装した。
リストを表示するためのデータは、mobile backend 上のデータベースに保存し、読み込
み、書き込みを行っている。mobile backend は NIFTY が提供している mBaaS である。

mBaaS は、mobile back as a Service の略称で、スマートフォンアプリケーションでよく利用される汎用的な機能をクラウドで提供するサービスである。クラウド上に用意された機能を API で呼び出すだけで利用できるため、スマートフォンアプリケーションのバックエGroup Report of 2016 SISP

- 23 -

Group Number 18-C

Virtual Diving
ンド機能が開発不要になった [3]。動画選択画面を図 5.3 に示す。

図 5.3 動画選択画面

3. 360 度動画再生画面
360 度動画を再生するための画面である。動画再生時に戻るボタンをタップする、または、動画の再生が終了したときに動画選択画面に遷移する。360 度動画の再生には Panframe ラ
イブラリを用いた。Panframe ライブラリとは、Mindlight 社から提供されている、スーパー
ハイビジョンや 360 度対応動画などを再生するためのライブラリである [4]。また、ローカ
ルストレージに保存された動画を再生する機能と、Web サーバ上に保存されている動画をストリーミング再生する機能の 2 つを実装した。これにより、オフラインの環境でもいくつかの動画は再生することができるようになった。
また、この画面で 360 度動画を再生するためには、撮影班が撮影した動画を編集する必要があった。そこで、Kodak 社が無料で配布している、Kodak PIXPRO SP360 専用の動画編集ソフトを利用して、必要な部分だけ抜き出した。しかし、動画の一部が切れてしまうな
どの問題があり、アプリケーションで再生する際には、ユーザのニーズを満たすには不十分なクオリティになってしまった。360 度動画再生画面を図 5.4 に示す。

図 5.4 360 度動画再生画面

4. 図鑑選択画面
アプリケーション上に登録されている図鑑の情報を一覧で見るための画面である。画面には、魚の画像と名前が 3 種類表示され、画面をスワイプすることで、次の 3 種類の魚の画像と名前の一覧を表示することができる。また、3 種類の魚の画像が均等に表示されるよう、各デバイスの画面サイズに対応することができるレイアウトを採用した。表示されている魚の画像をタップすることで、図鑑詳細画面に遷移することができる。魚の情報はアプリケー
ション内のデータベースに保存し、読み込むことで表示されるよう実装した。図鑑選択画面
を図 5.5 に示す。

Group Report of 2016 SISP

- 24 -

Group Number 18-C

Virtual Diving

図 5.5

図鑑選択画面

5. 図鑑詳細画面
魚の情報を表示するための画面である。画面には魚の画像、名前、科目名、詳しい情報が表示される。魚の詳しい情報は、図鑑選択画面のデータベースを共有して使っており、画面下部をスワイプすることで、次の情報に切り替えることができるように実装した。図鑑ボタ
ンをタップすることでクイズ出題画面に遷移することができる。図鑑詳細画面を図 5.6 に
示す。

図 5.6

図鑑詳細画面

6. クイズ出題画面及びクイズ結果画面
クイズ出題画面は、魚の図鑑に対応したクイズを出題し、選択肢から答えを選ぶための画面である。クイズ結果画面は、クイズに正解、不正解を表示するための画面である。
クイズ出題画面では、魚の画像とクイズの内容、クイズの答えとなる 3 つの選択肢が表示される。選択肢をタップすると、次の問題が表示される。3 問目に解答するとクイズ結果画面に遷移し、正解数を知ることが出来る。戻るボタンを押すことで、図鑑詳細画面に戻ることができる。クイズ出題画面を図 5.7、クイズ結果画面を図 5.8 に示す。

Group Report of 2016 SISP

- 25 -

Group Number 18-C

Virtual Diving

図 5.7 クイズ出題画面

図 5.8 クイズ結果画面

7. 画像選択画面および画像詳細画面
画像選択画面は、動画再生中に撮ったスクリーンショットを一覧で表示するための画面である。画像詳細画面は、スクリーンショットとそれに対するコメントを表示する画面である。
画像選択画面に表示されている画像をタップすることで、それに対応する画像詳細画面に遷移することができる。画像選択画面、画像詳細画面ともに、mobile backend 上に保存されたデータを読み込んでいる。
しかし、360 度動画再生中にスクリーンショットをとる機能を実装することができず、実現できなかった。画像選択画面を図 5.9、画像詳細画面を図 5.10 に示す。

図 5.9

画像選択画面図 5.10 画像詳細画面（※文責: 田中友菜）

5.1.3

最終成果物の画面遷移図

最終成果物の画面は全部で 10 個ある。初めにアプリケーションを起動すると、タイトル画面が表示される。タイトル画面に表示されている「Let’s Diving」というボタンをタップすると、チュー
トリアル画面に遷移する。チュートリアルを最後まで確認し、終了ボタンをタップするとマップ画面に遷移する。マップ画面からは 360 度動画再生画面及び通常動画再生画面、図鑑選択画面、実績
画面に遷移することができる。
初めに、360 度動画再生画面及び通常動画再生画面へはマップ画面上のマーカーをタップすると表示される動画再生ボタンをタップすることで遷移する。
次に、図鑑選択画面へは、マップ画面上の図鑑ボタンをタップすることで、遷移する。図鑑選択
画面には、図鑑の詳細に対応した魚の画像と名前がセットで表示される。表示されている画像の中から 1 つをタップすることで、図鑑詳細画面に遷移し、その魚の詳細な情報を見ることができる。

Group Report of 2016 SISP

- 26 -

Group Number 18-C

Virtual Diving
図鑑詳細画面上のクイズボタンをタップすることで、その魚に対応したクイズ出題画面に遷移する。クイズ出題画面の中に表示されている 3 つの選択肢から解答を選ぶと、クイズ解説画面に遷移
し、結果と解説を確認することができる。
最後に、実績画面へは、マップ画面上の実績ボタンをタップすることで遷移する。
以上をまとめたものを図 5.11 に示す。

図 5.11 画面遷移（※文責: 芳野洸太）

5.1.4

最終成果物の画面詳細

1. タイトル画面
アプリケーションを開始した際に最初に表示される画面である。このページには、クレジットとマップ画面への遷移ボタンがある。クレジットは、アプリケーション内で再生される動画の提供会社、図鑑の情報と画像の参照元、クイズの参照元の 3 つの会社名と URL が書いてある。
この画面の背景は、海と魚をイメージしたものにしている。また、対象ユーザが小中学生なので、対象ユーザにとって親しみやすいようポップなデザインを意識した。タイトル画面を以下の図 5.12 に示す。

Group Report of 2016 SISP

- 27 -

Group Number 18-C

Virtual Diving

図 5.12 タイトル画面

2. マップ画面
Google Maps API を用いて、動画の撮影個所をマッピングし、その個所をタップすることで、動画を再生することができるように実装した。この機能には、動画の撮影個所を直感的に理解させる狙いがある。また、表示されるアイコンを統一することで、ユーザにとってわかりやすいデザインにした。
また、マップ内に地域ボタンを配置し、そのボタンを押すことで地域名の一覧をリストとして表示するようにした。表示された地域名をタップすることで、その地域にカメラがズー
ムされるよう実装した。また、カメラが地域にズームしている状態で地域ボタンを押すとその地域内の動画の撮影個所の一覧が表示されるようにした。撮影個所をタップすることで、マッピング用のアイコンの上に撮影個所名が表示されるように実装した。カメラのズームの位置を変更することで、多くの撮影個所から、見たい動画の位置を探すことを容易にする狙いがある。
さらに、この画面上には、図鑑選択画面、実績画面のそれぞれに遷移するためのボタンを設置した。この 2 つのボタンのデザインを統一することで、対象ユーザがほかの画面への遷移ボタンであることがわかりやすくなることを目指して作成した。通常のマップ画面を図

5.13、地域ボタンをタップした場合のマップ画面を図 5.14 に示す。

図 5.13 通常のマップ画面

図 5.14 地域ボタンをタップした場合のマップ画面

3. 360 度動画および通常の動画再生機能
Panframe ライブラリを用いることで、Android の動きに連動して、動画の視点が変わる
ように実装した。また、アプリケーション内で再生される動画は、撮影班が用意したものを利用している。動画の時間は 30 秒にした。また、動画がランダムに再生されるようにした。
ただし、登録されている動画を完全にランダムに再生するわけではなく、登録されている動画をすべて見終わるまでは、一度見た動画は再生されないよう、履歴を元にランダムに再生している。短い動画をランダムに再生することで、ユーザが飽きにくくなるような狙いがあGroup Report of 2016 SISP

- 28 -

Group Number 18-C

Virtual Diving
る。動画再生終了時には、マップ画面に戻るか、もう一度動画を見るかを選べるように実装した。
さらに、360 度動画再生画面、通常動画再生画面を全く同じレイアウトにすることで、対象ユーザにとって認知的負荷が少なくなるようなデザインを目指した。360 度動画再生画面を図 5.15、通常動画再生画面を図 5.16 に示す。

図 5.15 360 度動画再生機能

図 5.16 通常の動画再生機能

4. 図鑑選択画面および図鑑詳細画面
魚の知識をユーザが獲得できるようにするために実装した。図鑑選択画面には、魚の名前と画像がセットで表示される。表示された画像をタップすることで、図鑑の詳細画面に遷移することができるよう実装した。また、魚の情報をデータベースにまとめることで、図鑑の一覧を五十音、種類、季節などでフィルタリングして表示できるよう実装した。この画面では、小学校の机をイメージしたデザインを用いることで、ユーザが図鑑を開いてみたいと思うようなデザインを目指した。図鑑選択画面を図 5.17 に示す。
また、図鑑詳細画面は、魚の内容の情報として画像、科、体長、詳しい説明の 4 つが表示されるように実装した。また、この画面に、クイズ出題画面に遷移するためのボタンを設置した。
図鑑の魚の情報は、地方独立行政法人北海道総合研究機構 [4] のホームページをもとに作成した。総数は 63 個である。図鑑詳細画面を図 5.18 に示す。

図 5.17 図鑑選択画面

Group Report of 2016 SISP

図 5.18 図鑑詳細画面- 29 -

Group Number 18-C

Virtual Diving
5. クイズ出題画面およびクイズ解説画面
図鑑に対応したクイズを出題するために実装した。クイズ出題画面は、クイズの問題とあらかじめ設定した 3 つの選択肢が表示されている。選択肢の中から 1 つを選ぶことで、正解、不正解に合わせたアニメーションのあとに、クイズ解説画面に遷移するように実装した。クイズ解説画面では、正解の選択肢とクイズの解説が表示される。クイズ出題画面、ク
イズ解説画面ともに、背景を授業風景にし、キャラクターを登場させることで、対象ユーザである小中学生が親しみやすいデザインにした。また、クイズ解説画面では、クイズの正解、不正解によってキャラクターがリアクションを取るようにし、画面内で動きをつけることで、対象ユーザが飽きにくくなるようにした。クイズは、図鑑の情報とぼうずコンニャク株式会社の市場魚介類図鑑をもとに作成した [5]。クイズの問題の総数は、図鑑の情報の総数と同じ 63 問である。クイズ出題画面を図 5.19、クイズの解説画面を図 5.20 に示す。

図 5.19 クイズ出題画面

図 5.20 クイズ解説画面

6. チュートリアル機能
アプリケーションの使い方がわかりにくいというアンケート結果を受けたため、それを改善するために作成した。この機能は、マップ機能の使い方や 360 度動画の再生方法など、ア
プリケーションの操作方法を説明するために実装した。全 8 ページのスライド形式で、アプ
リケーションの使い方の説明をしている。1 ページ目は、マップ画面への遷移方法を説明している。2 ページ目は、マップ画面から動画再生画面への遷移方法と、動画がランダムで再生されていることを説明している。3 ページ目は、動画再生終了時に、もう一度動画を再生するか、マップ画面に戻るか選択できることを説明している。4 ページ目は、マップ画面のアイコンには 2 種類あり、それぞれが 360 度動画と通常動画に対応していることを説明している。5 ページ目は、地域ボタンをタップすると地域名の一覧が表示され、地域名を選ぶことで、その地域にマップのカメラがズームすることを説明している。6 ページ目は、マップ
画面から、図鑑選択画面へ遷移する方法が説明されている。7 ページ目は、図鑑詳細画面から、クイズ画面へ遷移する方法が書かれている。8 ページ目は、マップ画面から、実績画面への遷移方法と、実績画面の説明が書かれている。スライド全体において、説明に文章だけ
ではなく画像を多く用いることで、ユーザが飽きづらく、短時間で操作方法の確認を終了できるようなデザインを目指した。実際のチュートリアル機能の画面を以下の図 5.21 に示す。

7. 実績画面
アプリケーションの使用履歴をユーザへフィードバックすることで、ユーザーの学習効果が上がるというアンケート結果を受けたため実装した。
実績画面では、データベースから得られた情報をもとに表示する内容を変更している。表Group Report of 2016 SISP

- 30 -

Group Number 18-C

Virtual Diving

図 5.21 チュートリアル機能

示する内容は、あらかじめ設定した目標が達成されているかどうかと、現在の目標の総数に対しての目標達成率の 2 つである。また、アプリケーション内では、あらかじめ設定した目標を実績と呼んでいる。
あらかじめ設定している目標を達成しているかどうかは、データベースから受け取った進捗状況に合わせて、アプリケーションの表示を変えることで実装している。アプリケーショ
ンの表示には、達成前と達成後に異なった画像、文字、背景の色を表示している。目標達成
前には、暗い背景とその目標を達成するための条件を表示した。目標達成後には、明るい背景とあらかじめ設定しておいた目標のレベルに応じた画像と目標の名前を表示した。
また、目標の内容を動画、図鑑、クイズに分け、それぞれに対応したタブを作った。それ
ぞれのタブをタップすることで、目標をフィルタリングして表示することができる。目標の達成率については、データべースから割合の情報を受け取りその状況に合わせて、画像と文字を変え表示することで、実装した。実績機能の画面を以下の図 5.22 に示す。

図 5.22 実績画面（※文責: 深谷健太）

5.2

成果の評価

5.2.1

前期の評価

アプリ開発班の目標は海を身近に感じられるコンテンツの開発であった。身近に感じられるよう、気軽に使うことができる Android のアプリケーションとして開発した。

Group Report of 2016 SISP

- 31 -

Group Number 18-C

Virtual Diving
前期末では、目標としていた 4 つの機能実装のうち 3 つを達成できた。また、中間発表時にデモムービーを用意することができた。これらは、アプリケーション開発のスケジューリングがうまくいった結果である。しかし、アプリケーションのデザインについては、「アプリケーション内のアイコンがあったが見ただけで何のアイコンなのかわからない」や「アプリケーションのカメラ移動の画面が見づらい」など、ユーザに対して不親切な部分があることが分かった。また、魚の説明に関しては、「動画中に複数の魚が写った場合に、1 匹の魚の情報が知りたい」や「水族館のように、動画に対応して魚の説明がされるとよいと思った」など、魚の情報を図鑑で表示することでは、ユーザのニーズを満たせない場合があることが分かった。さらに、アプリケーション全体の評価としては、「類似作品との差別化がほしい。このままでは、ほかの作品にネタ負けしそう」という評価をもらい現在の機能では、ほかの動画再生アプリケーションとの差別化ができていないことが分かった。

（※文責: 永田りか）

5.2.2

後期の評価

後期では、前期で開発したアプリケーションの 360 度動画再生機能、図鑑機能、クイズ機能を改
良し、新機能としてマップ機能、実績機能、チュートリアル機能を開発することを目指した。
後期活動をするにあたり、アプリ開発班内でグループ分けをしたことでアプリケーション開発の効率化を図れた反面、グループ同士での情報共有が上手くいかず、スムーズに作業できない場合もあった。アプリケーションを完成させることができたが、作業を更に効率化できたと考えられる。
開発したアプリケーションには、開発予定としていた機能をすべて実装して完成させることができた。この完成したアプリケーションを使用してもらい、「海中映像で海の知識、海を学ぶためにクイズや図鑑などにしてわかりやすい」や「海に興味を持つという条件が満たされている」という評価を得られたことより、プロジェクトの目的を達成できたと考えられる。しかし、「アプリケー
ションの動作が重い」や「直感的に操作ができない」という意見もあった。この意見により、対象ユーザが快適にアプリケーションを使える状態ではないことが分かった。操作性については前期でも挙げられており、改善策としてデザインを再考し、ボタンなどを認知しやすい設計にした。しかし、デザインに統一性がなく、操作性について改良の余地があると考えられる。また、「実際に小中学生からフィードバックがあると良かった」という意見もあり、対象ユーザが実際にアプリケー
ションを使用し、知識が身に付いたかが不明瞭であることが分かった。
今回、アンケートの結果より「実際の海中映像を用いて海に関する知識を身に付けてもらう」というプロジェクトの目的を達成できたと判断したが、デザインや操作性の改良、フィードバックが必要ということがわかった。また、小中学生が実際に知識を身に付けたかどうかを客観的に判断できない点が課題として残った。
（※文責: 永田りか）

Group Report of 2016 SISP

- 32 -

Group Number 18-C

Virtual Diving

5.3

プロジェクトの反省点

5.3.1

班としての反省点

プロジェクトの反省点として、全体像が不明なままアプリケーション開発を行ったことと、プロジェクトマネジメントを行わなかったことが挙げられる。
まず、全体像が不明なままアプリケーション開発を行ったことついて述べる。この反省点の大きな要因として、下準備の不足とアイデアが出なかったことがある。 アプリケーションを開発する
前に、対象ユーザの設定や類似するアプリケーションの調査を行わなかった結果、全体像が不明なままアプリケーション開発を行うことになった。これにより、前期では具体的な目標がないままア
プリケーション開発することになり、時間を無駄にすることになった。類似するアプリケーション
を調べることやターゲットを決めることで、最終成果物に応用できるプロトタイプを開発することができたと考える。また、追加機能について検討したときに、アイデアが出せなかった。それに対して、アイデアを出す方法を考えなかった結果、出すことができた数少ないアイデアをそのまま採用し、独自性のないアプリケーションを作ることになった。ブレインストーミングなどのアイデアを出すための方法を調べることで、この反省点を改善することができたと考える。
次に、プロジェクトマネジメントを行わなかったことについて述べる。実装する機能を決定後、各タスクの担当者と期日を決めて取り掛かった。しかし、タスクの進度を確認しなかったため、期日遅れや人が余るなどの問題が起こった。また、実装する機能を決める話し合いを行う際、議事録をとらなかった。そのため、開発中に実装目的が不明確になり再確認に時間を割かれ、発表準備や報告書作成にも手間取った。この問題解決のために、プロジェクトマネージャーを設けて進捗管理や議事録作成を行う必要があった。そして、それらの情報をまとめて共有し、いつでも参照できるようにすると、より効率的に作業を進めることができたと感じる。

（※文責: 芳野洸太）

5.3.2

アンケートグループ

反省点 1

本来の対象者へのアンケート未実施

今回このプロジェクトで開発したアプリケーションの対象ユーザは、小中学生であった。しかし、実際にアンケートを取り、意見を伺ったのは本学の椿本先生のみであった。この原因として、事前のスケジュール調整をきちんと行わなかったことがあげられる。
初めに、外部へアンケートを行う際には、アンケートを実施したい小中学校側のスケジュールを確認し、小中学校側の都合に合わせるべきであった。しかし、今回は後期になって初めてアンケー
トを取ることになったため、小中学校側もいきなり都合をつけられないとのことであった。また、プロジェクト学習は通年で行うものであるため、アンケートを取るならば年度の最初にあらかじめ決めておき、早い段階で外部と連絡を取るべきであったと考えた。
次に、アプリケーションの開発にもし遅れが出た場合にも対応できるようなスケジュールを組み立てなかったことも問題である。あらかじめ納期が遅れても対応できるように、スケジュールを組
み立てておけば、アプリケーションが完成してから急いでアポイントメントを取る事態に陥ることは無かったのではないかと考えた。

Group Report of 2016 SISP

- 33 -

Group Number 18-C

Virtual Diving

反省点 2

アンケート内容の調整

前節で述べた通り、アンケートの内容に関して、更に回答者の意図が詳細にわかるようなものを設置するべきであったと考えた。
今回、アンケートの作成時には事前に知識を集め、なるべく質問内容がアプリケーションの開発者、またユーザのどちらかに有利な質問内容にならないようにした。しかし、回答者の意図を知るためには、質問数を増やし内容を改善する必要があるのではないかと考えた。用意したアンケートの質問内容は、選択式のものと自由記述のものの 2 種類があった。選択式のものは「操作は容易でしたか？」、「画面は見やすかったですか？」、「このアプリは小学生向けのものとして適切だと思いましたか？」という 3 種類で、自由記述のものは「海を身近に感じる瞬間はいつですか？」という1 種類であった。意見を求めた際に、用意した質問以外にも詳細な意見を頂いたため、これらの意見を補えるような質問を用意すべきだったと感じた。
また、今回は事前にプロジェクト内で、アンケートの内容の不備や、今後に生かすことのできる
フィードバックをもらうことができるかなどを確認してもらう機会が無かった。時間に余裕をもってアンケートを作成し、他メンバーに確認してもらう機会を設けることで、より良いアンケートを作成することができたのではないかと感じた。
（※文責: 田中友菜）

5.3.3

デザイングループ

反省点 1 デザインに関する知識の学習不足
本プロジェクトでは小中学生を対象にしたアプリケーションということから子供向けのデザインを意識し、多彩色、キャラクターなどを用いて画面のデザイン案を作成した。しかし、画面に多くの要素を配置し過ぎた結果、どれが押すことが出来るボタンかわからないといった問題が発生した。この問題の原因として、配色に関する知識が足りない、レイアウト方法の学習不足が挙げられた。後期の初期に、配色に関する知識、UI のレイアウト方法について学習を十分に深めておく必要があったと感じる。
反省点 2

デザインの統一性

デザイングループは 2 人で機能ごとに役割分担をしてデザインをした。これによって、効率的に作業を進めることができた。一方で、各画面に必ず存在するボタンなども各々担当している画面に合わせて作成していたため、統一性がなくなってしまった。結果として、各画面のボタンなどの仕様が変わることにより、操作性が悪くなってしまった。初期段階で基本的な仕様を決めていなかったため、完成後に画面間の不統一性が発覚する事態になった。デザイン設計をする初期段階で基本
的なボタンなどは先に決め、統一性を図る必要があったと感じる。

（※文責: 斉川聡基）

Group Report of 2016 SISP

- 34 -

Group Number 18-C

Virtual Diving

5.3.4

実装グループ

反省点 1

柔軟ではない機能の実装

柔軟ではない機能実装の大きな要因として、動画ファイルの保存方法とデモ機に限定したレイア
ウトの実装の 2 つが挙げられる。

1 つ目は、動画ファイルの保存方法についてである。アプリケーション内で再生する海中の動画
は、動画のファイルサイズが大きくアプリケーション内に組み込むとインストールに多大な時間を要することから、Android デバイスのローカルストレージに動画を保存している。サーバを立て、動画を保存し、そこからストリーミングを用いた動画再生を実装することで、デモ機のみでしか本
アプリケーションを使うことができないという状況を避けることができたと考える。

2 つ目は、デモ機に限定したレイアウトの実装についてである。対象デバイス Xperia X
Performance SOV33 に対応させて開発を行ったため、他のデバイスでは画面サイズやの違いなど
から、レイアウトや画像表示に問題が起こってしまった。画面の位置でレイアウトを管理するのではなく、画面の縦横の比率や、それぞれのパーツの相対的な位置でレイアウトを作成するべきだっ
た。
反省点 2

デバッグや動作テストの不足

プロトタイプ、最終成果物のどちらに対しても、アプリケーションを実行し確認するのみで、ツールを用いたデバッグは行わなかった。その結果、画面遷移の際などに予期せぬアプリケーショ
ンの強制終了が発生するなど、再現性の高くないバグに対応することができなかった。あらかじめ、Android Stduio のテストケースを用いたデバッグ方法を調べ、開発の途中から用いるべきだった。
また、動作テストをすることで、メモリリークやアプリケーションの動作速度が遅いことにも早期に気づくことができたと考える。アプリ開発班が開発したアプリケーションには、各画面の遷移時に必要でなくなったデータをメモリから開放するような実装を行っていなかった。そのため、ア
プリケーションを使えば使うほどメモリを圧迫し、動作が遅くなるという問題が起きた。それぞれが個人で開発したプログラムを合わせて動作テストすることで問題により早く気づくことが必要だと考えられる。
次に、アプリケーションの動作速度が遅くなった要因としては、データベースの操作や座標の読
み込み、図鑑選択画面の画像表示など並列処理にすべき部分を逐次処理したことが挙げられる。そのため、ユーザが不快に感じるような操作時間の遅れが発生した。
反省点 3

スマートフォンアプリケーションの独自性の不足

今回開発したアプリケーションには、スマートフォンアプリケーションならではの要素がなかった。作成するコンテンツとして Android アプリケーションを選択した理由は、アプリケーションのリリースのしやすさや、メンバー全員が 2 年の前期に情報処理演習で Java を学んでいたためであった。しかし、Andrioid アプリケーションを選択したからには、動画再生をヘッドマウントディ
スプレイを用いた VR に対応させ、立体的な海中の映像を可能にするなど、スマートデバイスを生かした機能を実装するべきであった。
また、デザイングループは、画面をスワイプすることで、ページがめくれるアニメーションのようなスマートフォンならではのアイデアをデザイン案に入れていた。しかし、実装グループがデザ
イン案通りの実装を行えないことも多々あった。このことから、実装グループの技術力のなさが、Group Report of 2016 SISP

- 35 -

Group Number 18-C

Virtual Diving
開発したアプリケーションの独自性を排除する原因になっていた可能性がある。

（※文責: 芳野洸太）

5.4

今後の課題

5.4.1

前期の課題

まず前期の課題として、マテリアルデザインの導入、現時点で実装が完了している機能の見直し、他のアプリケーションとの差別化の 3 つが挙げられた。

1 つ目はマテリアルデザインの導入である。Google のデザインガイドラインであるマテリアル
デザインを導入することで、アイコンの意味が分からないという問題を解決することや、優れた

UI/UX を導入することで、アプリケーションを使用したいという意欲をユーザに持たせることが必要である。

2 つ目は現時点で実装が完了している機能の見直しである。図鑑機能における魚の説明が現時点ではユーザのニーズを満たすためには不十分であったこと、360 度動画の視点の位置や画面そのものが見づらいことなど、現時点で完成した機能を改善する必要がある。

3 つ目は他のアプリケーションとの差別化である。まず、対象ユーザを明確に定義し、そのユー
ザのニーズや類似した他のアプリケーションを分析することで、本アプリケーションの長所を探す必要である。

（※文責: 永田りか）

5.4.2

後期の課題

後期では、前期に挙げられた 3 点の課題に重点を置き、アプリケーションの開発、修正にあたった。最終発表での意見を参考にした結果、操作性を考慮したデザインへの修正、アプリケーションの軽量化、図鑑データの不足、対象ユーザが知識を身に付けたか不明瞭という 4 点が課題として挙げられる。

1 つ目は、操作性を考慮したデザインへの修正である。「小中学生が対象」という言葉にとらわ
れ、UI などの操作性を蔑ろにしてしまった。そのため最終発表のアンケートより、直感的に操作しづらいという意見が上がる結果になった。この課題を解決する方法として、マテリアルデザインの導入とアプリケーション全体でデザインを統一することがあげられる。マテリアルデザインでは、Primary color、Secondary color、Accent color、3 色が基本となっている。Primary color とSecondary color は同系色であり、色の選択によるが、偏った配色になりがちである。今回、対象ユーザである小中学生に合ったデザインに重点を置いたため、多彩色を採用した。この時点で「マテリアルデザイン」から遠く離れていく形になった。また、ボタンの色が画面により異なるなど、画面によって色やレイアウトが大きく変わり、ユーザへの認知的負荷を高めてしまった。対策として、ボタンの色や大きさの設計をあらかじめ作成し、それに合わせてデザインする必要があった。

2 つ目にアプリケーション動作の軽量化である。これは 5.3.4 節より並列処理の未実装、メモリリークの発生が関係している。特に、並列処理を実装することで画像の読み込みや、リストの表示

Group Report of 2016 SISP

- 36 -

Group Number 18-C

Virtual Divingなどの時間がかかる処理が必要な動作でも、アプリケーションが全く動かなくなるという状況を避けることができると考えられる。また、適切にメモリ開放をするよう実装することでアプリケー
ション動作の軽量化が可能になると考えられる。

3 つ目に、図鑑のデータの不足がある。現在のアプリケーションには、函館近郊の魚の図鑑デー
タしかない。バリや西表島などの動画に登場する魚が図鑑データには反映されていないままでは、
函館近郊の魚について限定された知識しか身に付けることができない。そのため、函館近郊以外の魚のデータ拡張も課題となる。また、現在図鑑のフィルタリング機能が五十音、季節、科目しかな
いため、地域でもフィルタリングをかけられるようにデータベースを更新する必要がある。さらに、図鑑選択画面において、表示する魚の総数が増えるため、アプリケーションの動作速度が遅くなることが予測される。そのため、5.3.4 節でも述べたが、画面の表示と画像情報の取得を並列に処理するよう実装し、アプリケーションの動作速度が遅くならないように工夫する必要がある。

4 つ目に、対象ユーザが知識を身に付けたか不明瞭な点が課題として残された。実績機能では、
アプリケーションの使用履歴の可視化をしたが、実際にユーザが知識を身に付けられたかを客観的に判断できない。そのため、ユーザが海や魚について知識を身に付つけられたか評価し、明記する手段が必要である。これは、本プロジェクトの目標達成にも関わる重要な問題であり、対策として確認する手段をアプリケーションの新機能として実装する必要がある。この他に、対象の小中学生へのアンケート実施も重要である。対象ユーザが知識を身に付けたことを実感できたか調査することも、目的達成の情報の鍵と考えられる。アンケート実施についての詳細は 5.3.2 節に述べられている。この対策として、より早い段階で学校にアポイントメントをとるか、児童館への協力が仰げれば対象ユーザに対してアンケートが実施できたと考えられる。

（※文責: 永田りか）

Group Report of 2016 SISP

- 37 -

Group Number 18-C

Virtual Diving

付録 A
A.1

新規習得技術

Android Studio

Android アプリを作成するにあたり、開発環境である Android Studio の使い方を習得し、アプリ開発に活用した。

A.2

GitHub

グループメンバー全体でアプリの開発に取り組むにあたり、バージョン管理を容易に行えるように GitHub を導入、活用した。これを導入することでバージョン管理以外にもプログラム内のどこを修正したか、プログラムで使用するファイルの共有も容易に行うことができた。

Group Report of 2016 SISP

- 38 -

Group Number 18-C

Virtual Diving

付録 B 活用した講義
B.1

情報処理演習 I

Java を使用するうえでの基本的な考え方、プログラムの記述方法に関して、情報処理演習１で修得した技術を活用した。

Group Report of 2016 SISP

- 39 -

Group Number 18-C

Virtual Diving

参考文献[1] 国 土 交 通 省.2014.

”国 民 の 海 へ の 親 し み 、理 解 の 向 上 に つ い て,”[Online].

Available:

http://www.mlit.go.jp/common/001053846.pdf [Accessed: Jan. 9, 2017][2] 日本財団海洋政策研究財団. ”小中学校の海洋教育実施状況に関する全国調査,”[Online]. Available:

https://www.spf.org/opri-j/publication/education/pdf/201212 questionnaire.pdf.

[Accessed: Jan. 10, 2017][3] NIFTY Cloud. ”mBaas とは,”[Online]. Available: http://mb.cloud.nifty.com/about.htm.
. [Accessed: Jan. 13, 2017][4] Mindlight. ” Panframe — High performance 360° panoramic VR streaming SDKs (Embedded, VOD and Live),”[Online]. Available: http://www.panframe.com/. [Accessed:
Jan. 13, 2017][5] ぼう ずコンニャク株式会社. ”市場 魚 介類図 鑑 ぼう ずコ ンニャク,”[Online]. Available:
http://www.zukan-bouz.com/. [Accessed: Jan. 6, 2017]

Group Report of 2016 SISP

- 40 -

Group Number 18-C