卒業研究「青森市施設一覧アプリ」

平成 30 年度
青森大学ソフトウェア情報学部

平成 27 年（2015）度
青森大学

入学

ソフトウェア情報緑川研究室
3115035 山舘俊輝
共同研究者 3115006 大水裕翔

目次
第一章
1-1 はじめに……………………………………………………………………1
1-2「青森施設一覧アプリ」とは…………………………………………….2
第二章
2-1 開発環境…………………………………………………………………....3
2-2 monaca について………………………………………………………….3
2-3 HTML について…………………………………….……………………..3
2-4 HTLM5 について………………………………………..........................5
2-5 CSS について………………………………….......................................52-6 JavaScript について……………………………………………………...6第3章
3-1 monaca の採用理由…………………………………………………….....7
3-2 各手順について…………………………………………………………....10
3-2-1 レイアウトについて……………………………………………………12
3-2-2 ホーム画面について……………………………………………………13
3-2-3 各ジャンルのページについて…………………………………………13
3-2-4 back ボタンについて…………………………………………………...14
3-2-5 googlemap について……………………………………………………16
3-2-6 収集した情報の反映…………………………………………………..17第4章
4-1 結果………………………………………………………………………....18
4-2 結論………………………………………………………………………….19
第5章
5-1 参考文献…………………………………………………………………..20

第１章
1.1 はじめに休日などに外出先でスマートフォンを使い、Google などで周辺にある、時間を潰せる娯楽施設などを検索するときはないだろうか。Googlemap を使えば簡単に検索することができる。しかし、そのお店の詳細な情報や自分の求めている条件に絞って調べようとするとき Googlemap だと不便なところがある。例えば Googlemap で「ゲームセンター」と検索すると周辺にあるゲームセンターが表示される。もし、自分が今車で市街を移動していたら、駐車場の有無などがしりたい。駐車場があったとしても、収容台数が少ない駐車場であれば、実際お店に行ったとき駐車場が満車で困るかもしれない。さらに自分のやりたいゲームなどが置いていないお店であれば困るだろう。Googlemap では細かな情報までは掲載されていない。リンクされている HP で情報を確認すれば済むことだが、手間がかかるし、お店によって HP の情報が古かったり、自分の知りたい情報がなかったり、そもそも HP 自体がなかったりするお店があるかもしれない。昔から青森市に住んでいる人であれば、どの場所にどんなお店があるかなどの情報はすでに持っているかもしれないが、青森市に住んでいる人でも行ったことのないお店や、他県から青森市に来た人であれば困ってしまうかもしれない。
そこで、一つのアプリで青森市の施設の情報がジャンル別、地域などで検索できるアプリを制作することにした。

1

1.2「青森施設一覧アプリ」とは1.1 で書いたような問題を解決しようと開発したのが私たちが開発した「青森施設一覧アプリ」である。
このアプリは青森市にある公共施設、娯楽施設、商業施設などをジャンル別や地域別に調べられ、簡単な操作で自分の知りたい情報を素早くスマートフォンで分かるということを重点において制作を行った。
しかし、青森市全域の公共、娯楽、商業施設となると莫大な量があり一年という短い期間では情報が収集できなかった、またアプリ作成に関しても想定していた期間よりも多く時間を使ってしまい、デザインや情報なども想像していたものよりもシンプルなアプリが完成した。
このことからスケジューリングが曖昧であったことの悔しさもあったが、アプリ作成自体が初の試みということもあり、アプリ作成の奥深さを実感することができ、いい経験になったと思う。
下の図が創作ゼミで作った「青森施設一覧アプリ」である。

図 1.2.1 ホーム画面
2第2章
2.1 開発環境本研究では「monaca」という iOS&android のアプリを開発できるプラットフォームで作成し HTML5・JavaScript・CSS を使用した。
2.2Monaca について
Monaca とは Web で簡単にスマートフォン用のアプリを開発できるプラットフォームである。
2.3HTML について
まず、HTML とは、「HyperTextMarkupLanguage」の略であり、ウェブページ記述のためのマークアップ言語。文章の理論構造や見栄えを記述するほか、画像や音声、他のウェブページへのハイパーリンクを埋め込むことができる。簡単に説明するとサイトを作るために開発された最も基本的な言語のことで、日々閲覧しているサイトはHTML で作成されている。
下記の基本構成例のように作成している。

基本のタグ<!DOCTYPE html>
CSS を正しく読み込む宣言をしている<html>～</html>
html の文章であることを宣言している<body>～</body>表示される内容を中に書く※本研究は、一般的なブラウザではレンダリングモード（表示方法を決めるブラウザの状態）
3

が互換モードになるため<!DOCTYPE html>を使用している。

基本の構成例<!DOCTYPE html><html><head><title>web サイトの名前</title></head><body>
内容</body></html>

図,2-3-1 HTML で作成されたサイト
4

2-4 HTML5 について
HTML5 とは、ウェブを記述するためのコンピューター言語の一種である HTMLの 5 回目の改訂になる最新版のこと。

2-5 CSS について
CSS とは Cascading Style Sheets（カスケーディング・スタイル・シート）の略
でサイトのデザインを指定するための言語である。大体のサイトは、HTML と CSSを組み合わせて使われている。具体的に説明すると、サイトの背景色やレイアウト、文字サイズなどの表示に関してのスタイルや印刷機器などの出力に関してのスタイルなどを指定することができる。

タグの例

h1{font-size}<h1>~<h1>の大きさを 30 ピクセルにする
h2{color:blue;}<h2>~<h2>の文字の色を青にする

html に直接書き込むことによりにより文字の装飾は可能なのだが、CSS と比べ効率が悪いため本研究では、CSS を使用した。

Html を使用した装飾の例<font color =”#ff0000”>文字</font><font color =”#ff0000” size=”7”>文字</font>
5

CSS を使用した装飾の例

Html<h1>文字</h1><h2></h1>文字</h1></h2>CSS
h1{font-size: 30px;}h2{color:blue;}

2-6 JavaScript について
JavaScropt とは、web サイトに日付や画像の表示を変えることが可能にするプログラム言語である。本研究で、javaScript を導入することにより、メニューの表示や画像のスライドショーを導入し、HP を見る際に、分かりやすくしている。

6

第3章
3-1 monaca の採用理由
私たちの研究題材として「スマートフォン」で使える「モバイルアプリ」の開発であるが、スマートフォンといっても様々な OS がある、有名なものでいえば「android」や「ios」などである。
多くの人に利用してもらえるためにシェア率の高い OS で動くように開発を目指そうと思い、まずスマートフォンの OS のシェア率を調査した。
図 3-1-1 が日本でのシェア率、図 3-1-1 が世界の OS のシェア率である。
参考：https://xera.jp/entry/iphone-android-share[1]図 3-1-1 日本のシェア率7図 3-1-1 世界の OS のシェア率
図を見てもらえば一目瞭然だが「ios」と「android」の 2 つがとてもシェア率が高い。
世界で見ると「android」だが日本に限っては「ios」が多くみられる。このようにシ
ェア率が二極化していると一方の OS 専用で作るより、「android」と「ios」の二つで動くアプリを作ったほうがいいと思えた。そのため一度の開発環境で二つの OS で動く開発環境であることを最低限とした。

8

次にその中でなぜ「monaca」を選んだかということだが「monaca」の最大の特徴としてクラウド上で動作するということだ、つまりネットにさえ繋がっていればどの PC でも作成が可能だし、初期の導入もアカウントを作るくらいでその他に面倒なことがなかった。
特に自宅でも開発を進めることが可能だということに魅力を感じ「monaca」を使うことを選んだ。図 3-1-1 は monaca の公式ページである。

図 3-1-1 monaca 公式ページ

9

3-2 各手順について制作した手順は下記の通りである。

「アプリ作成の手順」
1.

レイアウトについて

2.

ホーム画面について

3.

各ジャンルのページについて

4.

Back ボタンについて

5.

Googlemap の導入について6.

収集した情報の反映

以上がアプリ制作の手順である。

10

情報収集に関して、青森市にある各ジャンルの病院、娯楽施設、飲食店、商業施設、公共施設等の情報収集はインターネットでの収集や実際に足を運び調査、情報収集を行った。

実際に様々な施設に行き何を調べたかと言うと・病院では、インターネットで調べても出てこなかった場合、出てこなかった病院に行き第何駐車場まであるのかを調査した。
・娯楽施設ではゲームセンターに行き、お店に設置してあるゲーム機種やお店の駐車場について調査を行った。
・飲食店では、駐車場の詳細な情報を調査した。
・商業施設ではインターネットで検索しても出てこなかった場合、小さな規模のお店などの営業時間や駐車場の有無を調査した。
・公共施設では公園の調査、公園にある遊具や大きい公園、小さい公園があるためその公園の駐車場の有無などを調査した。

情報収集するにあたって、青森市全体の情報では情報量が多かったためインターネットで検索して出た情報や実際に足を運び調査したできた情報のみとなってしまったため、青森市全体の情報を各ジャンル別に反映させることができなく断念することにした。そのため集めた情報と地域別でのジャンルの地域を絞り作成をした。

11

3-2-1 レイアウトについて
まずアプリを作るにあたってどのような構成で作るかだが基本としてジャンル別に探せる項目、地域別に探せる項目を用意した。
中間発表で藤沢助教授から「一人で遊びに行くのか、友達と遊びに行くのか、恋人と遊びに行くのか、家族と遊びに行くのかなど誰と遊び行くかで行く施設なども変わってくると思うのでそのようなことでも探せるように項目を付け加えてはどうか？」という意見があり、確かに普通は友達や一人でデートスポットには行かないし、恋人とデートで病院や公園には行かないだろうと思い、「誰と行くか」という項目も追加した。
他にも売っている物別（専門店など）や、ゲームセンターなどで取り扱っているゲーム機種別など追加したい項目はたくさんあったが時間がなかったため断念した。

12

3-2-2 ホーム画面についてホーム画面は縦スクロールなシンプルな物を作成し、「ジャンルから探す」「誰と行くか」「地域別に探す」の 3 項目を作成し、<li>タグを使い見やすいように作成した。

3-2-3 各ジャンルのページについてホーム画面と同じように<li>タグを使い見やすいように作成した。

13

3-2-4 back ボタンについて
私のスマートフォンは android だったため気が付かなかったが ios は戻るボタンがな
いためアプリ内に戻るボタンを作る必要があることに気が付いた。

back ボタンはタップしやすく、なおかつスマートフォンらしいデザインにするために CSS を用いて作成した。

戻るプログラムは<a href="#" class="square_btn" onclick="history.back()">back</a>を使いCSS には.square_btn{
position: relative;
display: inline-block;font-weight: bold;
padding: 0.5em 1em;
text-decoration: none;border-left: solid 4px #668ad8;
border-right: solid 4px #668ad8;
color: #668ad8;
background: #e1f3ff;
transition: .4s;}14
このようなコードを入れ図 3-2-4-1 の右上のようなデザインになった。

図 3-2-4-1

back ボタン15

3-2-5 googlemap[2]の導入について最初の段階ではその施設のページに googlemap を載せる予定はなかったのだが導入するのにそれほど時間がかからないことと、googlemap も加えてあったほうがわかりやすいという指摘を受けたため、googlemap を導入することにした
Googlemap の導入は簡単で任意の場所を googlemap で開き（図 3-2-5-1）

図 3-2-5-1 googlemap

16

共有メニューから地図を埋め込むを選択し html のコードをコピーし、任意の場所に埋め込むことで実装できる・(図 3-2-5-2)

図 3-2-5-2

googlemap の埋め込み

3-2-6 収集した情報の反映について想定していた期間よりも長くアプリの開発を行っていたため、収集する情報量が予定より少なくなってしまった。また冬の期間雪が降ってしまうことを計算にいれていなかったため、収集しようとしていた情報項目の駐車場の台数について、駐車場の台数は現地行って直接数えて調べようと思っていたが雪が積もって数えることができなかった。

17

第4章
4-1 結果
知人や友人に「青森市施設一覧アプリ」を実際に使ってもらい、感想や意見をもらった、結果は以下のとおりである。
・アプリのコンセプトが面白く、便利なアプリだと思ったが、時間がたつと情報が古くなり随時更新する必要があるため運用は難しいのでは疑問に思った。
・便利ではあるが、そもそも各情報をまとめてユーザーに必要な情報を調べてもらう
ほど青森に施設が無いのではと思った。
・掲載されている情報が少し物足りなく、もう少し踏み込んだ情報が欲しいと思った。
・デザインがシンプルすぎる、もう少しスマートフォンのアプリらしいデザインのほうがいいと思った。
・完成されたらとても便利なアプリだと思った。

18

4-2 結論
まず時間が足りなくアプリ全体を完成させることができなかったのが悔やまれる。
しかし貰った意見にもあったように、もし完成していたとしても、情報というのは常に新しく変わっていくものであり、青森市全体の施設という莫大な量の情報量を常に更新し続け、アプリを運用していくのはかなり難しい問題だという結論に至った。
範囲を青森市全域にしてしまったのが原因であると考えられる。
他にもデザインについてそれなりに意見があり、機能性は勿論だがデザインをこだわることも大事であるのではないかと考えている。
青森市だけでも莫大な情報量があり、その情報を調査し整理することの大変さを考えるいい機会になった。

19

謝辞
本研究を進めるにあたり緑川教授には様々なご指導をいただきました。私がこの研究室に来たのは 4 年生からであり、他の生徒達よりも短い期間ではありましたが他の生徒達よりもとても感謝しております。この場を借りて深く感謝の言葉を申し上げます。
また、共同研究者である大水をはじめ、緑川研究室の皆様にも深く感謝を申し上げます。

20

第5章
5-1 参考文献[1]OS のシェア率
https://xera.jp/entry/iphone-android-share[2]Googlemap
https://www.google.co.jp/maps/?hl=ja

21