【JavaScript】Yahoo! JavaScriptマップAPIで地上絵を書くアプリを作る【後編】(完成コードとこだわりについて)

投稿日:

プログラミング初心者の勉強ブログ #122

完成品を披露する記事。JSのClass記法を織り交ぜつつ、メソッドをイベントハンドラで上手いこと使いまわせるよう設計を意識した。一時的に保存したい情報は全てLocal Storageを利用したので、iOSやAndroidで思わぬ挙動などないか少し不安であったが、正常に機能した。PWAを実装し、一枚のHTMLとJSのみでアプリ感をある程度出せた気がする。

 

目次

 

GeoPict

geopict

http://geopict.supunic.com

「地上絵を描いてシェアしよう」的なアプリ。自分の現在位置情報を記録していき、マップ上に絵を描いていくというアソビ。SNSに投稿してもらえたらなという考えのもと、作成した絵はマップごと画像化できる。今まであまり使ってこなかったMAP APIやPWAの練習作品であり、少しづつではあるが、JavaScriptでイメージした物を作れるようになってきた気がする。とは言っても、非同期処理の関連(promiseカンケー)はまだまだ自分で思うように書くことができなかったので、今後の課題として意識を持って置きたい。

 

自分で使ってみた

map

渋谷駅をぐるっと囲むようにミッキーを描いた。散々道に迷い2時間かかった。こんな疲れるアプリは誰も使わないだろうと感じた。UXとはこういうことか、開発段階では確かに考えていなかった。

 

実際のコード

コードを載せて参考になるかはわからないが、とりあえず載せる。今回の実装ではJSで独自クラスを2つ設けてみた。GPクラス(gp.js)とMapクラス(map.js)、そしてmain.js。

 

gp.js

GPクラスは、index.htmlにあらかじめ書き込んでいる要素を全て閉じ込めている。このクラスでインスタンスを作り、それをメインのjsファイルで使いたいときに呼び出す設計にしてみた。取得する要素がリスト化でき管理がしやすいであろうという点でこういう形を試してみた。

 

次はMapクラスについて。今回はYahooMapAPIを使っている。前編参照。

【JavaScript】Yahoo! JavaScriptマップAPIで地上絵を書くアプリを作る【前編】(静止画変換や他のMap APIとの比較など)

 

map.js

色々こだわって書いている部分があるので紹介していく。

 

初期化関係

 

constructorとinitで基本的な設定を行っている。ここでのこだわりポイントは

ここである。静止画化する場合、線の太さとズームの度合いをユーザーが選択できるようにしなければならない訳で、なぜならユーザーによって描くであろう地上絵のスケールが違う。距離的に小さい地上絵と大きい地上絵で、静止画かするために使用するAPIに送らなければならないズーム度合いと線の太さを変える必要がある。

 

geopict操作画面

上の画像はアプリの操作画面だが、「zoom」ボタンと「line」ボタンが押されるたびに、Mapクラスからインスタンスを毎回生成し、生成されるインスタンス毎にthisでzoom情報を格納する。完成ボタンのクリック時に、そのとき生成されているインスタンスのzoom情報をAPIに送信する。

 

zoom情報は、1〜20までの数値で判断される(1がもっとも離れており、20が最大ズーム状態)。そのため、zoomのプラスボタンが押されるタイミングでzoom情報をプラス1していく仕組みが必要になる。つまり、一旦zoom情報をどこかしらに保存しておかなければならない。そこでLocal Storageを使用する。

 

localstoreage_before

最初のmapインスタンス初期化のタイミングで、あらかじめlocal storage内に「zoomLebel」と「pWidth」を保存しておく。pWidthは線の太さ(px指定)であり、初期値のzoom情報は16、線の太さは5pxにしている。

 

次に、zoomのプラスボタンが押されたとき、

localstorage_after

zoomLevelが17に変化するようにしている。

イメージとしては、

 

画面が開く

→mapインスタンス生成

→mapインスタンスのzoom値をlocal storageに保存

→zoom+ボタンが押される

→local storageにzoom値に+1した値でmapインスタンスを再生成

→mapインスタンスのzoom値をlocal storageに保存

・・・以下繰り返し。

 

 

みたいな感じにしてある。(lineについても同様。)

写真には載っていないが、ユーザーが記録させた位置情報(経度と緯度)もlocal storageに保存させている。

 

静止画化関係

とりあえずAPIに送るパラメータ部分について、変数に置き換えて整理した。

 

あとは静止画化するためには画像にするための中心座標を求める必要がある。そうしないと、書いた絵が中心にこない。色々考えたが、ユーザーが記録させた各座標の経度と緯度をソートさせ、最小値と最大値を足して2で割ることにした。今回の場合、それでいい感じになる。

 

 

ここでその処理を行なっている。リターンさせている[cLat, cLon]が中心の経度と緯度になる。

 

main.js

 

index.html

 

 

まとめ

コードたくさん載せたらめちゃめちゃ長くなった。PWAの実装については別の記事として書こうと思っている。

以上ありがとうございました。

-プログラミング学習
-, , ,

Copyright© s u p ? , 2019 All Rights Reserved.