青森大学ソフトウェア情報学部ソフトウェア情報学科

平成 30 年度

卒業論文

便利マップの作成

緑川研究室

3115013久保田竜馬

目次
第1章 序論1.1

はじめに・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・1

1.2

Google Map について・・・・・・・・・・・・・・・・・・・・・・・・・・ 1

1.3

便利 Map について・・・・・・・・・・・・・・・・・・・・・・・・・・2～3

1.4

作業分担について・・・・・・・・・・・・・・・・・・・・・・・・・・・・4

1.5

使用言語について・・・・・・・・・・・・・・・・・・・・・・・・・・・・4

1.6

開発環境・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・4

第2章 便利 Map の制作準備
2.1

写真の撮影について・・・・・・・・・・・・・・・・・・・・・・・・・・・5

第3章 作成の手法
3.1

Google Maps API について・・・・・・・・・・・・・・・・・・・・・・5～6

3.2

Google Map API キーの取得方法について・・・・・・・・・・・・・・・6～11

3.3

HTML ページの作成・・・・・・・・・・・・・・・・・・・・・・・・・・12

3.4

Google Map の表示・・・・・・・・・・・・・・・・・・・・・・・・12～13

3.5

マーカーピンの設置・・・・・・・・・・・・・・・・・・・・・・・・・・13

3.6

infoWindow の実装・・・・・・・・・・・・・・・・・・・・・・・・14～16

3.7

情報をまとめたサイトの作成・・・・・・・・・・・・・・・・・・・・・・17

3.8

絞り込ボタンの作成・・・・・・・・・・・・・・・・・・・・・・・・・・18

第4章 考察4.1

Map 制作について・・・・・・・・・・・・・・・・・・・・・・・・・・・19

4.2

ホームページの編集について・・・・・・・・・・・・・・・・・・・・・・19

4.3

アンケートについて・・・・・・・・・・・・・・・・・・・・・・・・・・20

4.4

今後の課題・・・・・・・・・・・・・・・・・・・・・・・・・・・・20～21

謝辞・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・21

参考資料・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・22～23

第1章 序論
1.1

はじめに

緑川研究室では、ホームページ制作を研究している。そこに先輩方が作成した New
AodaiView というサイトがある。このサイトは青森大学構内の写真や周辺のお店などを見られるようにしたサイトであるが、使われている地図を見た際見慣れない地図だったため分かりにくいと感じた。地図を見やすくするには見慣れた Google Map を利用することで見やすくなるのではないかと思い、Google Map を利用することにした。
県外からきた学生や新入生は大学の周辺にはどんなお店や施設があるのかわからない。
ネットで検索しようにも、具体的なことが分かっていなければ自分の知りたい情報を得るのは困難だ。そこで大学周辺に詳しくない学生でも地図を見るだけでお店の場所がわかるような地域の便利 Map を作成することに決めた。
更新については、続けていくのは困難であると判断したため 2018 年度版として Map を作成する。
本研究は 3115009 片岡亮平との共同研究である。
1.2 Google Map について
Google がインターネットを通じて提供している地図、無料のローカル検索サービスであり、誰もが一度は目にしたことがあるだろう。地図はドラックして全方位にスクロールしてみることができる。Map には表示モードがあり地図、航空写真、地形図の 3 つがある。
航空写真では 3D 機能がついており、使用するとビルなどの建物を 3D 視点でみることができる。地形図は地形に色や影を付けることで山岳地帯などの状態を分かりやすく表示してくれる。2007 年からは Google ストリートビューという世界各地の風景をパノラマ写真で見ることができる Web サービスも開始した。

1

1.3 便利 Map について
Google Map を利用した地域 Map を作成する。[4]Google Map には最初からマーカーピン設置されているが、ズームしなければ表示されないものもあり、新しくできた建物やお店が地図に反映されない、反映されるまでに時間がかかるということがある。そこで、ズー
ムしなくても一目でお店や病院等がある場所が分かるように地図上に私たちで作成したマーカピンを設置した。

図1

マーカーピンを設置した図

しかしこのままではマーカーピンの量が多く分かりにくいので、必要なマーカーピンだけを表示できるように絞り込みボタンを作成することで、情報量を減らし見やすくなるようにした。[7]また、マーカピンはお店に合わせた画像に変更することで絞り込み後も見分けやすくした。

図2

絞り込みで飲食店のみを表示した場合

2

[15]

マーカーピンをクリックするとその場所の名前が表示され、さらに名前をクリックするとそのお店や病院等の営業時間や電話番号などの最低限の情報をまとめたホームページに移動し、情報を得られるようにした。情報をまとめたホームページは青森大学の大学祭の際にアンケートを実施して得られた意見を参考にした。

図3

情報をまとめたサイト

3

1.4

作業分担について私が担当した作業用は Google Maps API キーの取得、HTML によるサイトの作成、JavaScript の実装、写真撮影である。共同研究者である片岡はリンク先のページ作成、CSSの実装、写真の撮影・加工を担当した。

1.5 使用言語について
ホームページの作成に使用した言語は HTML、CSS、JavaScript である。

・HTML についてHTML とは Hyper Text Markup Language の略である。Web ページを作成するための最も基本的な言語である。普段何気なく見ている Web ページのほとんどが HTML で作成されている。
・CSS について
CSS とは、Cascading Style Sheets の略語で、HTML と組み合わせて使用する言語で、デザインを指定することができ、サイトの背景や文字サイズなどのスタイルをどのように装飾するのかを指定することができる。
・JavaScript について
JavaScript とはアプリ開発で使用されるプログラム言語である。ユーザー側の Web ブラウザと Web サイトまたは Web サービスの相互間のやりとりを円滑にするために多くの人に使用されている。Web ページを構築する全てのオブジェクトを操作することが可能。

1.6 開発環境
写真撮影にはデジタルカメラを所持していなかったためスマートフォン（android・iphone）で撮影を行った。テキストエディタは GitHub が開発したオープンソースのテキストエディタ atom を使用した。対応 OS は macOS10.8 以上、Windws7 以上、Linux である。 画像の加工はペイント、GIMP2 を使用して行った。データ管理は GitHub を利用している。

4第2章
2.1

便利 Map の制作準備

写真の撮影

ホームページを作成するにあたって色々な場所で写真撮影をした。撮影時には通行人がいないか、走行中の車が写りこまないように注意して撮影をした。駐車場等にある車が写ってしまった場合はナンバープレートを見えないように処理した。この作業にはペイントを使用した。

図4

3章
3.1

ナンバープレートを隠す処理

作成の手法
Google Maps API について

[2]

Google Maps API とは、自作したサイトに Google Map を表示することができるシステムである。
2018 年 7 月 18 日から Google Maps Platform に移行しため仕様が変更された。
基本的には無料で利用できるが、地図のロード回数に制限がある。しかし、ほとんどの人はロード回数の制限を超えることはないと[3]Google Cloud というホームページに書かれている。利用回数を超えてしまった場合は、API キー作成時に請求先のアカウントを作成していなければ料金請求は来ないが Web サイトを表示した際に「このページでは Google Mapが正しく読み込まれませんでした」と警告がでて表示しなくなる。

5

図5

エラー画面

請求先のアカウントを作成すれば利用回数の制限を超えても料金を払うことによって地図は再び表示される。また、利用回数が想像以上に多くなって料金請求がきてしまうことを防ぐために利用回数の制限を自分で設定することができる。私は変更前に API キーを取得しており、クレジットカードも所持していなので請求アカウントは作成していない。
使用変更前は地図を表示するために API キーを取得しなくてもよかったのだが、現在はAPI キーを取得しなければ地図は表示されない。今後 API の仕様が変更されればそれに合わせてコードの変更が必要になる可能性がある。

3.2

Google Map API キーの取得方法について

Google Map を Web 上に表示させるために API キーを取得する必要がある。取得方法には 2 つやり方がある。私は仕様変更目に API キーを取得しているので、請求アカウントを作成していないため、請求アカウントがいらない方法で作成する。まず、前提として Googleアカウントが必要だ。Google アカウントを所持していない人は簡単に作成することができるので作成しよう。[3]Google アカウントが準備できたら Google Cloud Console というサイトにアクセスする。そのサイトの右上にあるコンソールというボタンを押すと Google アカ
ウントでログインする画面が出てくるので ID とパスワードを入力してログインする。

図6

Google Cloud Console6無事にログインすると同意画面が出てくるので同意を選択する。すると図 7 のような画面が表示される。

図7

ログイン後の状態

API キーを取得するにはまずプロジェクトを作成する必要があるので左上にある「プロジェクトの選択」をクリックする。クリックすると図 8 の画面が表示されるので右上にある「新しいプロジェクト」又は「+」をクリックする。クリック後は図 10 が表示されるのでプロジェクト名を入力し作成をクリックする。プロジェクト ID のところには自分の IDが表示される。

図8

プロジェクトの選択後

7

図9

新しいプロジェクト選択画面

新しいプロジェクトを作成できたら API キーを作成する。図 9 の作成を選択したら図 11が表示される。もし表示されなければ通知（右上のベルマーク）をクリックすると新しく作られたプロジェクト名が表示されるのでそれをクリックすると同様の画面になる。

図 10

新しいプロジェクト作成後の画面

8

図 10 の画面になったら「API の概要に移動」をクリックする。
API キーを有効かさせるために「APIS と有効なサービス」をクリックする（図 11）。

図 11 API の概要に移動を選択後「APIS と有効なサービス」をクリックすると、API ライブラリのページが表示される。
マップという項目があれば「全て表示」を選択し、なければ検索用のテキストボックスにmap と入力して検索する。そうすると Google Maps API に関係する API の一覧が表示されるのでその中から Maps JavaScript API をクリックし、キーを作成していく。

図 12 API ライブラリーページ
Maps JavaScript API のページが表示されるのでページ内の有効のボタンを押す。これでMaps JavaScript API は有効となったので API キーを作成していく。

9

認証情報と書かれてある場所をクリックし、認証情報作成を選択すると図 13 のようにいくつか認証情報が出てくるので API キーを選択するとキーを取得することができる。

図 13

認証情報画面

最後に API キーに対してキーの制限を設定する。これはキーの情報が漏れた際に悪用されるのを防ぐためなので制限をかけることを推奨する。キー作成後に「キーの制限」と書かれたところをクリックする。

図 14 API キー制限画面10

「キーの制限」をクリックすると図 15 のような画面が出てくるので、ラジオボタンの「HTTP リファラー（ウェブサイト）からのリクエストを受け入れる」の欄で Google Mapを設置する URL を登録する。複数設定することができ、テスト用・本番用と設定しておくのがよい。制限をかけられたら API キーの準備は完了する。

図 15キーの制限画面

11

3.3

HTML ページの作成

まず、Google Map を表示させるための Web ページを作成する。灰色になっている場所に地図が表示されるため自分の好みの大きさを CSS で設定する。図 16 は width: 100%、height: 400px で私たちが作成した便利 Map は width: 90%、height: 550px である。

図 163.4

テスト Web ページ作成画面

Google Map の表示

HTML ページができたら JavaScript で Google Map を表示させる。[4]Google Maps APIを読み込む記述を追加し、(API キー)のところに自分で取得した API キーを入力するとGoogle Map が表示される。地図を表示する際に、表示したい場所の座標が必要となるので緯度と経度を調べて記述する必要がある。図 18 は青森大学付近が中心になるように座標を設定している。

図 17

Google Maps API を読み込む記述

図 18

Map 表示できた画面
12

地図を表示させることができたが、このままでは地図が遠く何度もズームしなければ地図として機能しない。そこで地図をズームして表示させる記述をする。こうすることで Web
ページを開くたびにズームするのではなく最初からズームされた地図が表示される。

図 19

3.5

地図をズーム処理した画面

マーカーピンの設置[5]

Google Map を Web 上に表示させることができたので次はマーカーピンを設置していく。[6]マーカーピンを設置したい場所の座標（緯度・経度）を調べ、マーカーピンを表示させるコードを記述する。図 20 は地図を表示する中心座標にマーカーが設置されるようにしているので青森大学にマーカーピンが設置されている。

図 20

マーカーピンを設置した画面

13

3.6
[7]

infoWindow の実装
マーカーピンだけでは情報が足りないのでマーカーピンに吹き出しを付け情報量を増やす。infoWindow とはこの吹き出しのことである。吹き出しの中は自由に記述することができるのでマーカーピンを設置した場所の名前を記述する。こうすることによりマーカーピンが置いてある場所の名前がわかる。

図 21

infoWindow 追加した画面

14

infoWindow には文字だけではなく画像や写真も表示させることができるので文字の左隣に青森大学の校章の画像を表示させる。お店等の撮影してきた写真やネットにある画像のサイズが小さければ問題ないが、あまりのも大きすぎると画像が大きく表示されて画面を覆ってしまい地図が見えなくなってしまうので、画像の大きさを丁度よく調整しなければならない。

図 22

画像追加後の画面[7]

画像を表示できたらマーカーピンを別の画像に置き換える。ネットにある画像をダウンロードしてきて置き換える場合は infoWindow 内に画像を表示させたとき同様に大きさを調整しなければならない。画像をダウンロードせずに画像の URL をコピーしてきて読み込ませて表示させることもできる。青森大学のマーカーピンだけはこちらを使用している。
使用する画像はその場所を表す画像を使用しており、便利 Map は青森大学が中心となっているのでホームという意味の画像を使用している。

図 23

マーカーピン画像の置き換えた後の画面
15

マーカーピンの画像の置き換えができたら infowindow 内の文字にリンクを組み込み、文字をクリックすると私たちが作成した最低限の情報をまとめたサイトが表示されるようにする。青森大学やバス停などはすでに作られた公式ホームページのサイトが表示されるようにした。これでマーカーピンの設定が完了したので後は[8]マーカーピンを増やしていき、それぞれの場所に設置する。（図 1）。

図 24

リンクの組み込み処理後の画像

16

3.7

情報をまとめたサイトの作成

写真を撮影してきたお店の情報を調べて作成した。写真を撮影しに行った際に移転している場合や、現在お休み中のお店があったがそれらも含めて作成した（図 3）。[9]CSS を使用して情報を書く場所を色分けした。上のピンクの所にはマーカーピンが設置されている場所の名前を記入する。お店等の名前を書く場所なので太字で見やすくした。その下の灰色の部分にはお店の公式ホームページがあるならばそのリンクを表示する。このまとめサ
イトは最低限の情報しか書いていないのでより詳しい情報は公式ホームページで見てもらうために載せている。公式ホームページが見つからない場合は不明と記入する。右側の黄色いところには調べたお店の経営時間などの最低限の情報を書くようにした。日によって経営時間が異なる、定休日などの特に大事な情報は赤文字で書くことで目につきやくした。
最後に左の緑の場所に撮影した写真を表示させる。写真の大きさが合わないと何の写真か分からないくらいズームされて表示されることが多いのでサイズ調整をしながら表示する。
お店のメニューやおすすめは季節ごとやお店の事情で変更されることがあるため掲載はしない。

図 25

まとめ情報サイト作成

17

3.8

絞り込ボタンの作成

このままではマーカーピンが常に表示されていて情報量が多く見にくいので必要なマーカーだけを表示できるよう絞り込みボタンを作成する。[10]ボタンをクリックすることでマーカーピンを表示させるためにマーカーピンを最初から表示させないように設定した。病院とバス停のボタンをクリックすると病院とバス停のマーカーピンが表示されるので最寄りのバス停を探すなどができる。マーカーピンを表示後は削除ボタンを押すと表示されているマーカーピン全てが非表示となる。
ボタンの種類はマーカーピンを複数表示させるようにするため、ラジオボタンでは機能が合わないため、通常のボタンかチェックボックスを使用することになり私たちは通常のボタンで作成することにした。

図 26

絞り込みボタン作成後の画面

図 27

複数マーカーを表示させた画面
18

第4章
4.1

考察

Map 制作について

Google Map を Web 上に表示させる、地図上にマーカーピンを表示させるまでは順調に進んでいたがマーカーピンの増量、infoWindow の追加、絞り込みボタンの実装には予想以上に時間がかかった。特に時間がかかったのは絞り込みボタンの実装である。マーカーピンの表示・非表示が上手くいかず完成まで 1 ヶ月近くかかってしまった。作成中に一人で悩まずに早い段階で共同研究者の片岡や先生を頼ればよかったと反省している。

4.2

ホームページの編集について

情報をまとめるサイトは共同研究者の片岡と分担して作業を進めていたが、おおざっぱに作成の方針だけを決めてしまったためお互いに作成し終えてから確認すると言葉の表現方法がバラバラであり、書くことを統一して修復するのが大変だった。また、Map 作成当
初は作業分担が上手くいかずにスケジュールに大幅なずれが生じてしまい事前にもっと話し合うべきだったと痛感した。

19

4.3 アンケートについて
Map を使用する人たちはどのような情報や機能があったらうれしいのか、利用者目線の意見が欲しかったのでアンケートを実施した。Map や情報をまとめたサイトをある程度作成したものを実際に見てもらい意見を聞いた。情報まとめたサイトはどのような情報を追加して欲しいのか、便利 map はどのような機能があれば使いやすくなるのかを調査した。
アンケートは学外の人がたくさん来る大学祭に実施し、アンケート対象者は小学生から大人までと幅広い年齢層で行った。

図 28

アンケート結果

アンケートをまとめた結果、map については分類分け・マーカーピンの設置数の増加、情報をまとめたサイトは欲しい情報がすぐに得られないとの意見が多かったので、これらの意見を参考に便利 Map と情報をまとめたサイトを作成する。

4.4

今後の課題

私たちが作成した Map には絞り込みボタンで必要な情報だけを表示できるようになっているが、一つだけをピンポイントで表示させることができない。例えばローソンがどこにあるのか知りたいといった際にコンビニボタンを押すとローソン以外のマーカーピンも表示されてしまう。絞り込みボタンの他に検索機能を付けることでより Map が使いやすくなると考えられる。また、地図を表示した際にマーカーピンを表示しない設定にしてあるた
め一度お店の情報をまとめたサイトに移動してから地図に戻ってくるとマーカーピンが全て非表示になった状態に戻ってしまう。違うお店の情報をまとめたサイトを見るにはもう一度ボタンを押してマーカーピンを再表示させなくてはならないのが不便だと感じた。
私たちが作成した便利 Map をスマートフォン（android・iphone）で開いて見ると地図やマーカーも問題なく表示されているが、縦長に表示されてしまうために少し操作しにくいと感じた。特にまとめ情報サイトを開くと一部の文字が小さく表示されてしまうので見えにくくもなっている。そのため画面回転機能を使用して横画面で使用するか、ズームして見なければならない。
20

図 29

スマートフォンで開いた場合この研究で初めて Map 制作を行ったが勉強不足・準備不足であることを実感した。色々な Web サイトを調べながら作成していたため、プログラムがどんどん複雑になっていった。
何度か書き直しをすることもあり、完成してから見直すともっと簡単に書けたところや、短縮できたのではないかと思うところが多い。

謝辞
卒業研究をすすめるにあたり、緑川先生には多くの手助けをしていただきました。共同研究者の片岡にはアイディアや知識をたくさんもらい成長することができました。また、同研究室の皆さんにもヒントやアイディアをもらい手助けしてもらいました。心より感謝申し上げます。

21参考資料[1]ノンプログラマのための JavaScript はじめの一歩（技術評論社）
ISBN:978-4-7741-5376-6C3055[2]Google Maps 導入ガイド
http://gma.kkc.co.jp/topics/346/[3]Google Cloud
https://cloud.google.com/maps-platform/pricing/[4]Google Maps Platform マーカーが設置された地図を Web ページに追加する
https://developers.google.com/maps/documentation/javascript/adding-a-google-map?hl=ja[5]Google Maps Platform マーカー
https://developers.google.com/maps/documentation/javascript/markers?hl=ja[6] WELLHAT
http://www.wellhat.co.jp/tools/googlemap.html[7]Lets プログラミング 初心者でもわかりやすいサイト
https://www.javadrive.jp/google-maps-javascript/ginfowindow/index3.html[8]kigiroku map に複数の pin を立てる
https://kigiroku.com/frontend/gmap2.html[9] CSS の「float」についてちょっと本気出して説明してみた
http://taneppa.net/float/[10]Google Maps API 徹底解説
http://gmap.pw/api_v3/maker_hide/all/#i-3[11]HTML タグ辞典
http://www.newcredge.com/IT/www/html/tag/link/link-target-blank.html[12]プログラミング入門レシピ
http://www.recipi.jp/1012[13]質問することでしかわからない解答やアドバイスがある
https://teratail.com/questions/67894[14]フレームの境界線を固定する
http://www.newcredge.com/IT/www/html/tag/frame/frame-noresize.html[15] Web サイト上の Google マップのマーカー（ピン）をオリジナル画像に変更する方法
https://www.marie-web.design/blog/google-map-marker/[16]CodeCampus Atom の使い方・便利機能まとめ
https://blog.codecamp.jp/atom_utility22[17]ipentec ボタンクリック時に JavaScript を実行する
https://www.ipentec.com/document/javascript-exec-javascript-on-button-click[18]地図で距離測定
https://japonyol.net/distance.html[19]かわいいフリーイラスト素材集 いらすとや
https://www.irasutoya.com

23