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

平成 30 年度
青森大学

ソフトウェア情報学部

緑川研究室
3115006 大水裕翔
共同研究者
3115035 山舘俊輝

目次
第1章
1.1

はじめに........................................................................................................1

1.2 「青森施設一覧アプリ」とは………………………………………………………2
第２章
2.1

開発環境…………………………………………………………………………....3

2.2

HTLM について……………………………………………………………………3

2.3

HTML5 について……………………………………………………………….....4

2.4

JavaScript について………………………………………………………………4

2.5

CSS について………………………………………………………………………5

第３章
3.1

Monaca の採用理由について…………………………………………………….63.2

各手順について…………………………………………………………………….93.2.1 レイアウトについて………………………………………………………………103.2.2 ホーム画面について………………………………………………………………103.2.3 各ジャンルのページについて……………………………………………………103.2.4 back ボタンについて……………………………………………………………..103.2.5 Google Map の導入について…………………………………………………… 12
3.2.6 収集した情報の反映 ……………………………………………………………..13
第４章
4.1

結果………………………………………………………………………………..144.2

結論………………………………………………………………………………..14

参考文献 ………………………………………………………………………………………15
謝辞……………………………………………………………………………………………..16

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

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

「青森施設一覧アプリ」

2

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

図.HTML で作成されたサイト

3

基本のタグ<!DOCTYPE html>
CSS を正しく読み込む宣言する<html>～</html>
Html の文章であることを宣言する<body>～<body>表示される内容を中に書く
一般的なブラウザではレンダリングモード（表示方法を決めるブラウザの状態）が互換モードになるために<!DOCTYPE Html>を使用している。
基本構成例<!DOCTYPE html><html><head><title>web サイトの名前</title></head><body>
内容</body><html>
2.3HTML5 について
HTML5 とは、ウェブを記述するためのコンピューター言語の一種である HTML の 5 回目の改訂になる最新版のこと。

2.5JavaScript について
JavaScript とは、アプリ開発で使用される言語、Web サイトに日付や画像の表示を変えることが可能になるプログラム言語である。動きのあるサイトの作成やゲームなど幅広く利用される。

4

2.4CSS について
CSS とは、CagcadingStyleSheetg の略でサイトのデザインを指定するための言語のことである。サイトは大体、HTML と CSS を組み合わせ使われている。
サイトの背景色やレイアウト、文字サイズなどの表示に関してのスタイルや印刷機器などの出力に関してスタイルを指定することができる。
HTML で作った要素を CSS のタグを使用することにより、便利に装飾ができる。
タグの例
ｈ1｛font-size: 30px;｝<h1>~<h1>の大きさを 30 ピクセルにする
ｈ2｛color:blue;｝<h2>~<h2>の文字の色を青にする
html に直接書き込むことにより文字の装飾は可能なのだが、CSS と比べて効率が悪いため CSSを使用した。
html を使用した装飾の例<font color=”#ff0000”>文字</font><font color=”#ff0000”>size=”7”>文字</font>
CSS を使用した装飾の例
html<h1>文字</h1><h2></h1>文字<h1></h2>CSS
ｈ1｛font-size:30px;｝ｈ2｛color:blue;｝5第３章
3-1 Monaca の採用理由
研究題材として「スマートフォン」で使える「モバイルアプリ」の開発であるが、スマートフォンといっても様々な OS がある、有名なものでいえば「android」や「iOS」などである。多くの人に利用してもらえるためにシェア率の高い OS で動くように開発を目指そうと思い、まずスマートフォンの OS のシェア率を調査した。
図 3-1-1 が日本でのシェア率、図 3-1-1 が世界の OS のシェア率である[2]。

6図を見てもらえば一目瞭然だが「iOS」と「android」の2 つがとてもシェア率が高い。
世界で見ると「android」だが日本に限っては「iOS」が多くみられる。
このようにシェア率が二極化していると一方の OS 専用で作るより「android」と「iOS」の二つで動くアプリを作ったほうがいいと思えた。
そのため一度の開発環境で二つの OS で動く開発環境であることを最低限とした。

7

次にその中でなぜ「Monaca」を選んだかということだが「Monaca」の最大の特徴としてクラウド上で動作するということだ。
ネットにさえ繋がっていればどの PC でも作成が可能だし、初期の導入もアカウントを作るくらいでその他に面倒なことがなかった[3]。

図 3-1-1 Monaca の公式ページ

8

3.2 各手順について制作した手順は下記の通りである。
「アプリ作成の手順」
1. レイアウトについて
2. ホーム画面について
3. 各ジャンルのページについて
4. Back ボタンについて
5. Google Map の導入について
6. 収集した情報の反映
以上がアプリ制作の手順である。

情報収集に関して、青森市にある各ジャンルの病院、娯楽施設、飲食店、商業施設、公共施設等の情報収集はインターネットでの収集や実際に足を運び調査、情報収集を行った。
実際に様々な施設に行き何を調べたかと言うと・病院では、インターネットで調べても出てこなかった場合、出てこなかった病院に行き第何駐車場まであるのかを調査した。
・娯楽施設ではゲームセンターに行き、お店に設置してあるゲーム機種やお店の駐車場について調査を行った。
・飲食店では、駐車場の詳細な情報を調査した。
・商業施設ではインターネットで検索しても出てこなかった場合、小さな規模のお店などの営業時間や駐車場の有無を調査した。
・公共施設では公園の調査、公園にある遊具や大きい公園、小さい公園があるためその公園の駐車場の有無などを調査した。
情報収集するにあたって、青森市全体の情報では情報量が多かったためインターネットで検索して出た情報や実際に足を運び調査したできた情報のみとなってしまったため、青森市全体の情報を各ジャンル別に反映させることができなく断念することにした。そのため集めた情報と地域別でのジャンルの地域を絞り作成をした。

9

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

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

3.2.3 各ジャンルのページについて
ホーム画面同様<li>タグを使用し、作成した

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

10

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;}
このようなコードを入れ
図 3-2-4 のようなデザインになった

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

図 3-2-5-1 Google Map

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

図 3-2-5-2 Google Map 共有画面
12

3.2.6 収集した情報の反映について想定していた期間より長くアプリの開発を行っていため、実際に足を運び情報収取をすることができなく予定より少なくなってしまった。
また、冬の間は雪が積もり駐車場の情報を獲得することができなかった。
雪が降り積もり、駐車場の台数を数えることができないというのを計算に入れていなかったため、直接調べようとしたが断念した。

役割分担として、アプリ制作を山舘、各ジャンル別にそれぞれ担当し、ページを作成。
情報収集も各々が担当したジャンルの収集を行い、各ジャンルのページに情報を反映させた。

13

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

4.2 結論
結論としては、まず時間が足りず情報を全て掲載することができなかった。青森市全域という設定で行っていたが、各ジャンルの情報量が多く全ての情報を掲載することができなかった。アプリを制作する段階で青森市ではあるが、地域を絞るなどして設定して行っていけばよかったと思う。また、デザインについては、シンプルすぎていて感想・意見でももらっているがスマートフォンのアプリらしいデザインではなかったと思う。情報が古くなり随時更新していくという意
見をもらったが、情報の更新について考えていなかった。アプリを制作して、制作したアプリを第３者人に使用してもらい、その意見から考えていなかったことを指摘されアプリの欠点を知るいい機会だったと思う。

14

参考文献
[1].Yahoo!Japan
https://www.yahoo.co.jp/[2].日本と世界のモバイル OS シェア率

https://xera.jp/entry/iphone-android-share[3].Monaca の公式ページ
https://ja.monaca.io/[4].Google Map
https://www.google.co.jp/maps/?hl=ja15

謝辞
本研究を進めるにあたって、緑川教授にご指導いただきお世話になりました。
アプリ制作をするにあたり、共同研究者の山舘、また研究室の皆様にとても助けてもらい感謝申し上げます。

16