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

投稿日:

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

次のジーズの課題がMapアプリだったので、地図で何かできないかと思い地上絵アプリを作ろうと思った。インスタでのSNS拡散を狙いたく、マップの静止画変換を画策していたところ、どうやら割と簡単にできるっぽいのでそこら辺について書いていく。何でYahooMAPにしたのかなど。

 

目次

 

Yahoo! JavaScriptマップAPI

Yahoo! JavaScriptマップAPI

https://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/js/

 

いまどきのサイトと比べると良い意味でも悪い意味でもYahoo感を感じる見た目。今回はこのYahoo! JavaScriptマップAPIと、あとで書くYahoo!スタティックマップAPIの2つを使う。

 

Yahoo MAPの良いところ

マップAPIと言えば真っ先に浮かぶのがGoogleだと思う。僕も使うならGoogleだと考えているが、GoogleMAPは以前触れたことがあったし他の使ってみたいと思う気持ちが若干あったため、違うAPIを使うことを決めた。Yahooマップの良いところを書いていく。

 

①1番利用制限が緩い

YahooMAPはAPIリクエストを1アプリ当たり1日50,000回行うことができる。これは他のマップAPIと比較した際ぶっちぎりで制限が緩い。

利用制限

https://developer.yahoo.co.jp/appendix/rate.html

 

一方でGoogleは

googlemapsapi料金表

https://cloud.google.com/maps-platform/pricing/sheet/

 

ネイティブアプリには優しいが、Webで動的に使うとなると最大1ヶ月28,000回の読み込みとなる。1日で28,000回かと思ったが、1ヶ月である。単位が違う。bingなど、他のマップAPIも1日で換算すると、Googleと同じくらいかそれ以下くらいと制限が厳しめなことも考えると、この点はYahooのAPIの良いところだと言えると考える。

参考: Google Maps Platform の代替案

 

②リファレンスが全て日本語でわかりやすい

YahooのAPIのリファレンスは完全に日本語なのでわかりやすい。Google翻訳という便利な機能はあるものの、翻訳した場合の日本語は読みづらい。英語圏の独特な言い回しが強引に日本語に適用された感じが何とも言えない。生の英語でリファレンスを読んだとしても、「このワードはこのプラグイン上の固有名詞として特異な意味を持っている何かなのか、それとも普通に読んで良いのか」みたいな、ストレスと時間を割く作業がなくわかりやすい。そもそも読めない、なんて状態に陥る心配も無い。

 

その他思ったこと

Yahooマップの良いところ以外で思ったこと。Googleマップの方がかっこいい。というかGoogleマップの既視感が強いため、YahooのMAPを見るとどうしてもごちゃごちゃ感を感じる。PC用のデザインとスマホ用のデザインの2つを使うことができるのだが、特にPC用のデザインはイマドキのフラットデザインやモダンなマテリアルデザインとはかけ離れている。PCでの表示でもスマホデザインを利用できるのでそうしている。それでもGoogleの方がデザインは良いと思った。

また、Yahooマップはスマホ(僕のiOS)で表示したときに、「大きな地図で見る」というボタンが勝手に表示されてしまう。どうにかして非表示にしたかったが現状できていない。要素のidかclassさえ分かれば非表示にできそうだが、スマホだとディベロッパーツールが使えないためわからない。何か方法はないか探している。

 

Yahoo!スタティックマップAPI

Yahoo!スタティックマップAPI

https://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/static.html

このAPIにリクエストを送ると、地図の画像をimgタグで返却してくれる。リクエストに色々パラメータを入れることで、中心位置、画像の大きさ、ズーム、線や図形の挿入などが行える。

クエリパラメータを設定するのが少し煩雑だが、とても便利。1つ難点は静止画のデザインはPCマップになること。

 

まとめ

まさか自分でもYahooを使うことに決めるとは思ってなかった。当初はバックグラウンドでの位置情報取得を実装しようと思ったが、ネイティブアプリの領域でないと無料で出来ないっぽいなと調べてて思ったので、フォアグラウンド取得のみで何か良い感じのもの作れないかと思い、今回の地上絵かくアプリに至った。Yahooマップの静止画がインスタ栄えするかわからんが、使ってくれる人少し入るんじゃないかと思っている。

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

 

 

 

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

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