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

平成 30 年度

卒業論文

便利マップの作成

緑川研究室

3115009

片岡亮平

目次

第１章

序論

1.1 初めに ・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・1
1.2 便利マップについて ・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・1

第２章

作成手法

2.1 Google Maps API の利用 ・・・・・・・・・・・・・・・・・・・・・・・・・・・・2
2.2 JavaScript の利用 ・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・7
2.3 CSS の利用・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・7
2.4 写真撮影と加工 ・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・72.5

Atom の利用 ・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・10

2.6 作業分担について・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・11
2.7 開発環境・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・11

第３章

作成内容

3.1 マップの作成・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・11
3.1.1 マップの表示・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・11
3.1.2 中心座標の指定・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・12
3.1.3 任意の場所へのピン立て・・・・・・・・・・・・・・・・・・・・・・・・・・・13
3.1.4 InfoWindow の追加・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・13
3.1.5 InfoWindow への画像と名称の追加・・・・・・・・・・・・・・・・・・・・・・・13
3.1.6 リンクの組み込み・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・14
3.1.7 マーカーピンのアイコン変更・・・・・・・・・・・・・・・・・・・・・・・・・15
3.2 絞り込み機能の追加・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・16
3.2.1 ボタンの追加 ・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・17
3.3 紹介ページの作成・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・18
3.3.1 ページの基本構造・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・18
3.3.2 記載する文章の考案・・・・・・・・・・・・・・・・・・・・・・・・・・・・・19
3.3.3 写真の掲載・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・19

第4章

考察と課題

4.1 写真撮影について・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・19
4.2 マップ作成について・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・19
4.3 リンク先ページの作成について・・・・・・・・・・・・・・・・・・・・・・・・・19
4.4 今後の課題・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・19

謝辞・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・19
参考資料・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・21

第1章

序論

1.1 初めに
緑川研究室では、ホームページの作成に必要な HTML を学んだ。私たちはこの学んだことを活かして何かを作ろうと考えていたときに、緑川研究室の先輩方が作成していた NewAodaiView というサイトを見つけた。そのサイトは青森大学やその近辺などをパノラマ写真を使い紹介するものだった。しかし、そのサイトは青森大学構内については詳しくできていたが近辺については情報が少なかったり古くてその建物がなかったりしたので私たちは近辺についての情報を多く掲載していくとともに、地図も見づらかったのでそこも改良し、青森大学近辺について詳しく知らない新入生や学生、幸畑で買い物をする人を対象として青森大学周辺の店舗情報などが見やすい便利マップを作成することを目標にした。
1.2 便利マップについて
便利マップの作成にあたって先輩方が作成した NewAodaiView の欠点の、青森大学近辺の情報が少ない、地図が見づらい、という点を改善したマップを目標にした。
青森大学近辺の情報が少ないという点については、コンビニ、床屋、病院、飲食店、スーパーマーケット、バス停、その他として銀行や交番等の青森大学近辺にあるほとんど店を載せることで、曖昧な情報で幸畑近辺の店舗について検索しても出てこないような店も表示できるようにする。
地図が見づらいという点については、先輩方は手書きで線のみで表した地図を使っていたため見づらかったので、私たちは Google が提供している GoogleMapsAPI というサービスを利用することで見やすくすることにした。
また、本サイトは今後更新することが困難なため 2018 年度版の情報として掲載する。

1

第2章

作成手法

2.1 GoogleMapsAPI の利用
地図を表示させるのに私たちは 1.3 で説明した理由から GoogleMapsAPI を利用した。
GoogleMapsAPI とは、Google 提供している Google マップを無料で個人のサイトにも地図を掲載することができるサービスのことである。GoogleMapsAPI は 2018 年 7 月 16 日からはサービス形態が変わりました。私たちが利用するうえで影響してくる点は、今までは一定のアクセスまでは無料のスタンダードプランとプレミアムがあったが、それらが統合してすべて従量制のプランになった。この従量制のプランは毎月 200 ドルまでの無料利用分が設定されおり、個人で使う分にはこの無料利用分を超えることはないということだったので、今回の GoogleMapsAPI のサービス形態の変更は私たちにはほとんど影響がなかった。
GoogleMapsAPI の取得手順[1]1. まず Google アカウントを作成する。
2. Google Cloud Platform[2]にアクセスする。
3. 左上の「My Project」をクリックする。

図1

Google Cloud Platform 画面2

4. 新しいプロジェクトをクリックする。

図 2 Google Cloud Platform 画面
5. プロジェクト名を決めて作成をクリックする。

図 3 Google Cloud Platform 画面3

6. 3 でクリックした「My Project」をクリックして 5 で作成したプロジェクト名を選択し、左の一覧にある「API とサービス」をクリックする。

図 4 Google Cloud Platform 画面
7. 「有効な APIS とサービス」をクリックする。

図 5 Google Cloud Platform 画面

4

8. 「Maps JavaScript API」をクリックする。

図 6 Google Cloud Platform 画面
9. 「有効にする」をクリックする。

図 7 Google Cloud Platform 画面

5

10. 「認証情報」をクリックして「認証情報を作成」をクリックする。そして一番上の「API キー」を選択する。

図 8 Google Cloud Platform 画面
11. 「キーを制限」をクリックする。

図 9 Google Cloud Platform 画面
12. 「アプリケーションの制限」の欄で制限内容を選んで保存する。JavaScript を利用する場
合アプリケーションの制限で「HTTP リファラー（ウェブサイト）」を選択する。

6

図 10 Google Cloud Platform 画面
13. 取得したキーを赤い線の中に入れるとマップが表示されるようになる。[3]図 11 API キーを加える部分のコード
2.2 JavaScript の利用
JavaScript とは、アプリ開発などで使われる言語の一つで動的なサイトやゲーム開発などに使われている。本研究ではマップに関わる機能、例として各店舗をクリックした際に表示されるInfoWindow の表示などに使用した。
2.3 CSS の利用
CSS とは、Cascading Style Sheets の略で、HTML で作成したサイトのデザインを施すためのものである。本研究では、紹介ページのボタンのデザインに CSS を使用した。
2.4 写真撮影と加工
紹介ページに載せるための写真を撮影して、それを Windows に標準装備されている「ペイント」やフリーソフトの「GIMP」、オンラインサイトの「Pixlr Editor」[4]を使い撮影した写真を加工した。主な加工内容は、コントラストの調整、画像の透過[5]、モザイク処理、画像の合成、サイズ調整である。

7

図 12 ナンバープレートへのモザイク前

図 13 ナンバープレートへのモザイク後8

図 14 影の処理前

図 15 影の処理後

9

2.5 Atom の利用「Atom[7]」は、GitHub が開発したテキストエディタで HTMl を編集する際私たちは今まで Windowsに標準装備されている「メモ帳」から編集していたが、便利マップを製作していく中でコードが増えて編集する際に見づらくなっていった。そこで今回私たちは Atom というテキストエディタを使い作成していった。

図 16 メモ帳での編集画面

図 17 Atom での編集画面

10

2.6 作業分担について
本研究は 3115013 久保田竜馬との共同研究である。
本研究を進めるにあたり役割分担を行った。
・私の担当：リンク先のページ作成、マップ制作、写真の撮影・加工・久保田の担当：ボタンの作成、マップ制作、写真の撮影・加工
協同作業として各店の写真撮影、マップ制作をした。
2.7 開発環境【1】写真撮影・・・iPhone6s、ARROWS NX F-02G【2】テキストエディタ・・・Atom【3】画像編集・加工・・・ペイント、GIMP、Pixlr Editor【4】データ管理・・・GitHub

第３章

作成内容3.1 マップの作成
3.1.1 マップの表示
便利マップの主体となるマップは API キーを取得せずに作成するとエラー表示になる。そこで
第 2 章の 2.1 で説明した API キーを使用する。マップの大きさや位置は CSS で調整した。今回は縦 15px、マップの左右の空白は中央に配置されるように auto にして配置した。マップの高さは550px、横幅はウィンドウの幅の 90%に設定した。

図 18 API キーを使用しないで表示した画面

11

3.1.2 中心座標の指定
今回は青森大学周辺の店舗等をピックアップしたマップを作りたいので青森大学がマップの中心となるように設定する。青森大学をマップの中心にするために青森大学の座標を調べる。
座標取得のやり方(例：Google マップ[7])1. 任意の場所を右クリックで選択
2. 「この場所について」を選択

図 19Google マップ画面

3. 画面下部に座標が表示される。

図 20 Google マップ画面

12

このやり方以外[8]にも個人サイトで座標を取得できるサイトもある。
先の方法で取得した座標をコードの中に記述し座標を青森大学の中心に設定する。中心に設定する際、座標だけでは表示されないので拡大倍率も設定する。今回は載せる店舗等が全て収まるように拡大倍率を 16 に設定した。
3.1.3 任意の場所へのピン立て
今回紹介ページを載せる店の場所にピンを立てる。まずピンを立てるためのコードを記述していき、3.1.2 で紹介したやり方等で店の座標を Google マップなどのサイトから座標を取得する。
コードの中に取得した座標を記述し任意の場所にピンを立てる。

図 21 便利マップ
3.1.4 InfoWindow[9]の追加
赤いピンが立っている状態だけではピンをクリックしても何もできず、そこがどのような店なのか分からない。そこでピンをクリックした際に InfoWindow が出るようにする。InfoWindow の追加には既存のコードに新たに数行コードを加える。
3.1.5 InfoWindow への画像と名称の追加
InfoWindow には画像と名称を入れた。右に店やその建物の名前を入れ、左側には小さくではあるがその店やその建物の写真を入れた。画像が大きすぎると InfoWindow も大きくなってしまい全体の見栄えが悪くなってしまうので丁度いい大きさに調整する。

13

図 22 便利マップ
3.1.6 リンクの組み込み
InfoWindow に画像と名称を追加したら、次にそれらから私たちが作成した最低限の情報が記載されているサイトに飛ぶよう文字と画像にリンクを組み込む。青森大学は公式ページに飛ぶようにし、バス停も時間だけの表示ならば私たちがサイトを作りそのサイトを載せるよりも公式ページを見たほうがいいと考えたので直接公式ページに飛ぶようにした。

図 23 便利マップ

143.1.7 マーカーピンのアイコン変更
InfoWindow の追加等が終わったら最後にマーカーピンのアイコンを変更[10]する。変更する理由は立てるピンの数が増えていくと、青森大学の周辺だけをピックアップしているので狭い範囲に赤いピンだけでは見づらく、どのピンが何のお店なのかが分かりづらいからである。マーカー
ピンのアイコンはそれぞれフリー素材のイラストを使用し変更した。フリー素材のイラストとは、「いらすとや[11]」という個人や商用問わず無償で使用できるサイトのイラストで今回はこれを使用した。

図 24 アイコン変更前

図 25 アイコン変更後

15

3.2 絞り込み機能の追加
3.1 で作成したマップのままでは初めからすべてのピンが表示されてしまう。これではアイコンで多少見やすくはなっているがまだ見づらいので、今回紹介する店舗等をそれぞれのカテゴリーに分けてより見やすくする。そのために今回はマップの下にボタンを追加し、このボタンで絞り込み機能を実装する。
絞り込み機能は、ラジオボタンではいくつかの選択肢から一つしか選択できないため今回実装する機能と合わないので、複数選択することができる通常タイプのボタンとチェックボックスタイプのどちらかで実装することになり、今回は通常タイプのボタンで実装することにした。
ボタンの種類はすべてのピンを表示させる「全表示」、ピンを非表示にする「削除」、今回紹介する店舗である「コンビニ」
・「理容室・美容室」
・
「病院」
・
「飲食店」
・
「スーパーマーケット」
・「バス停」とこのいずれにも分類できなかった交番や銀行の「その他」である。
この絞り込み機能を使うとそのカテゴリーの店だけを表示させることができる。また、例えば「コンビニ」ボタンを押した後に別のボタンを押すと追加でそのボタンの店舗等が表示され、先に押したボタンの店舗等は消えずに追加で表示される。既存のピンを消すには、「削除」ボタンを押す必要がある。

図 26 「コンビニ」ボタンを押したとき

16

図 27 「コンビニ」と「床屋」ボタンを押したとき
3.2.1 ボタンの追加
ホーム画面のマップの下にボタンを実装する。まずは、3.2 で説明したようにカテゴリーごとに分けたものをマップ下に表示させるためコードを組み込む。これで形だけボタンがマップの下に表示されるようになる。

図 28 ボタンの表示ボタンを表示させたら次にボタンが機能するようにする。今回はボタンをクリックした際にクリックしたカテゴリーの店を表示、または非表示にする機能を実装するため JavaScript ファイ
ル内にコードを組み込む。このコードは基本的な形はすべて同じで、表示するピンの数と非表示にするピンの数だけ組み込んだ。今回の場合全てを合わせると 92 個書くことになった。これらを組み込むことによりボタンが機能するようになる。

17

図 29 ピンを表示させるコード

図 30 ピンを非表示にするコード
3.3 紹介ページの作成
3.1 で作成した InfoWindow のリンク先である店舗の紹介ページを作成する。
作成手順
1.基本構造の考案
2.記載する文章の考案
3.写真の掲載
3.3.1 ページの基本構造
基本構造としてまず、ページ上部にその店の名前や名称を記載する。そして、その下に営業時

18

間、公式ホームページを記載する。その次にページの中心部には、その店や場所の写真と必要最低限の情報を載せた。最後にページ最下部には 3.1 で作成したマップのページ(ホーム画面)に戻れるように「top」ボタンを実装する。

図 31 紹介ページの基本構造
3.3.2 記載する文章の考案
今回載せる文章は基本的に、場所・営業日・駐車場の有無・電話番号である。しかし、病院などは何科なのか分からないと不便なので追加で記載するなどした。文章を作成するうえで公式ホームページを見るのが一番確実であるが、個人店舗の場合公式ホームページがない場合もあった。
そこで直接店に行き情報を集めるなどしたが、それでも分からないところは不明とした。
3.3.3 写真の掲載
写真は 10 月頃に撮影してきたものを掲載した。撮影した写真の中には車のナンバーが写っているものあり、2.4 で説明したやり方などで見つけ次第ぼかしなどの修正を行った。また、撮影場所の関係で、どうしても暗くなってしまった写真は「gimp」などの画像編集ソフトを使いコントラストを上げるなどして修正をした。

第4章

考察と課題

4.1 写真撮影について
青森大学近辺の店舗を撮影する際に、場所によっては逆光により暗くなってしまうところがいくつかあり、画像編集でもどうにもならないところは再度時間帯を変え撮影しに行くべきだった。
また写真のアングルが、正面からだけでなく斜めから撮られたものもあり、事前に共同制作者である久保田と相談し撮影方法を統一すべきだった。
4.2 マップ作成についてマップの作成は初めてのことで、マップの表示方法やピンの表示方法など分からないことだらけで本研究の大半がこの作業に時間をとられてしまった。またピンを表示するプログラムがうまく機能せず、作業後半に一から作り直すトラブルもあり計画通りにいかず大変だった。

19

4.3 リンク先ページの作成について
マップからのリンク先である紹介ページの作成は初め想定していたよりも時間がかかりすぎてしまった。理由としては、載せる店の数が増えたことと公式ページが無い店がいくつかあり調べるのに時間がかかってしまったからである。しかし、後半では久保田と作業を分担し作成したおかげで全て作り終えることができた。だが作成するにあたって、事前にどのように作るか確認しなかったために互いに文章が異なり後から修正することになってしまった。
4.4 今後の課題
今回作成したマップの機能の中でボタン機能について修正すべき箇所がいくつかあった。まず第 1 に店ごとにカテゴリーで分けたが、特定の条件で分ける機能が実装できなかったことである。
初めの予定では時間帯によっても店を表示することができるようにするつもりであったが、ボタン機能の実装が予定より遅れたことにより結局実装できなかった。
また今回作成したマップは、自宅などのＰＣから見るよりもスマートフォンなどの携帯端末で見ることが想定されるにもかかわらずレスポンシブデザインに対応できなかった。その結果携帯端末からは見ることはできるが、やはり見づらいので今後レスポンシブデザインに対応できるように修正できればと考えている。

図 32 スマートフォンでの表示画面

謝辞
本研究に際して緑川章一教授には様々なご指導を頂き深く感謝いたします。また、本研究を進めるにあたり協力してくれた地域の方々や共同研究者である久保田をはじめ緑川研究室の皆様の協力にも深く感謝を申し上げます。

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

21

https://www.ipentec.com/document/javascript-exec-javascript-on-button-click[20] 地図で距離測定
https://japonyol.net/distance.html[21] Online Photo Editor | Pixlr Editor
https://pixlr.com/editor/

22