2017年版GoogleMapsAPI使用に関するチェックポイント

デザインのあれやこれ

Posted on 2017/1/6 by Kentaro

2017年版GoogleMapsAPI使用に関するチェックポイント

2016年に、GoogleMapsAPIを使用するにあたってエラーの原因となる仕様変更が2点ありました。1点はAPIキー指定の必須化、もう1点はgeolocationによる現在位置取得はhttpsが必須になった点です。この2点に絞って解決方法など紹介してみます。

2017年版とか大それたタイトルを付けてみたけど、こういうキーワードをつければ検索ヒット数あがるかな?あがるのかな?なんて姑息にワクワクしながら書いております。でへへ。

GoogleMapsAPIの使い方を紹介しているサイトや書籍はすごく沢山出ているので、ここで使い方などを紹介しても今更感がばりばりですよね。
でもそこはWeb特有の『仕様変更による不具合の発生』っていう切っても切れない縁があると思います。昨年2016年、GoogleMapsAPIを使うにあたってワリと小さくない問題の原因となりうる仕様変更が2点ありました。大げさに言うと、既存の方法通りに組み立てても動かない事があります。

なので、その仕様変更となった2点に絞って『2017年版』などとタイトルをつけて紹介してみようと思います。

GoogleMapsAPIを使用するにはAPIキーの指定が必須に

結構珍しい仕様だったなぁと思っているんですけど、以前まではGoogleMapsAPIはAPIキーを申請・取得しなくても使えてたんです。
といってもAPIキーそのものが存在しなかったワケじゃなくて、よくあるアカウント申請やアプリ登録・APIキーの発行などは普通に存在してたんですけど、そのキーを使わなくても問題なく使えていたという。

それが、2016年6月22日からAPIキーが必須になったんです。
GoogleMapsAPIの使い方を紹介されているサイトでは、APIキーを使用しない使い方を書かれてるところもあると思いますので、まずここが注意ポイントです。

また、APIキーが必須なのは2016年6月22日以降から新たにAPIを使い始めるドメインに限定されます。それ以前からGoogleMapsAPIを使用しているサイトは、引き続きAPIキー無しでも使用が可能なんです。
ここがちょっと混乱を招きがちで、『あのサイトのソースだとAPIキー無しでも動いてるのに、なんでそれコピペしても動かないの!?』ってケースにハマる可能性があります。(そのサイトは過去からGoogleMapsAPIを使い続けているので、APIキーが免除されてる状態なんですね…ややこしい。)
ちなみにAPIキーが指定されていないことが原因のエラーは、ページ表示時に一瞬だけマップが表示され、直後にグレー背景の『エラーが発生しました』画面に切り替わるのが特徴です。(マップを表示したはいいけど『APIキー無いじゃんか、やっぱやーめた!』って切り替えられるカンジですね)

GoogleMapsAPIのキーは、ここから登録〜取得しましょう。

ウェブ向け Google Maps API | Google Developers

APIキー取得に審査や条件はなく、無料から使用できます。ただし無料の場合はAPIコールが1日25000回までとの事です。これも、25000回を超えたら即ストップor料金発生というワケではなく、1日25000回を超えるAPIのコールが30日以上続いた場合に、有料プランへの移行が発生するとの事です。

登録の手順はスーパー簡単なので問題無いと思いますが、『キーの制限』は設定しておいた方がいいですね。
Webで使用する場合は、取得したAPIキーをURLに含めて呼び出すので、ソースを見ればAPIキーが丸見えです。上記のとおり無料プランのAPIキーは使用回数に制限アリなので、他人にキーを使われないように設定しましょう。
『キーの制限』ラジオボタンでHTTPリファラー(ウェブサイト)を選択するとテキストボックスが出てくるので、そこに使いたいサイトのドメインを*(アスタリスク、ワイルドカード)でくくって入れてやります。httpでもhttpsでも使えるように、ドメインの前もワイルドカードにしましょう。

APIキーの取得&設定が済んだら、このキーをURLに含めてGoogleMapsAPIを読み込んでやりましょう。

現在位置を取得するにはhttpsが必須に

正確には『必須』とは違うんですけど、もう必須と考えたほうがいいですねこれは。

※こちらの記事を参考にさせて頂きました。
Tech TIPS:Webブラウザで現在地情報を正しく取得できない場合の原因と対策 – @IT

現在位置情報は『プライバシー情報』

結論としては、navigator.geolocationで現在位置を取得するには、httpsなサイトからでないと無理になったんですね。

エリマキ的にざっくりと噛み砕いてみると、Googleが『現在位置ってプライバシー情報だよね、httpsで暗号化されてないと危なくね?』って言い出しました。んで2016年半ばから、ChromeやSafari等のブラウザが、https以外の暗号化されてないサイトが現在位置を取得しようとするのをブロックするようにアップデートされたんです。

ポイントは、この『現在位置の取得はhttpsで暗号化されたサイトのみで許可しよう』というのは、Googleの提唱に賛同したブラウザが最新のアップデートで仕様変更しているっていう点です。
なので、(2016年12月の時点で)まだ仕様変更してないFirefoxなどは、httpからでも現在位置取得が動きます。古い端末などアップデートをしていない旧バージョンのSafari等でも動きます。なので、同じソースでもサイトによって現在位置取得が動いたり動かなかったり、また見るブラウザによっても動いたり動かなかったり…と、かなり混乱を招く仕様になっているというか、私自身ここで死ぬほど混乱しました。こういう仕組みだったんですね。

無料でSSL証明書を取得できるLet’sEncrypt

というワケで、現在位置を取得するにはhttpsなサイトが必要ってことがわかりました。じゃあ、稼働させるサーバに無料の共用SSLとかが無い場合は、数万円払ってSSLを取得しなきゃ無理って事でしょうか?これ絶対SSL業者とツルんでるに決まってるー!って被害意識がよぎった私でしたが、そこまで鬼仕様じゃあありませんでした。

今はLet’sEncryptという無料SSL証明書発行サービスがあって(2016年4月から正式サービス開始したんですってよ)、ギークな人はそれを活用すれば無料でhttpsなサイト運用が可能ですね。
また私みたいに、ギークと聞いてMOTHERのラスボスしか連想できないような人は、Let’sEncryptを代行してくれるSSL業者のサービスを使ってみるといいと思います。こちらも無料でやってくれる所があります。

どうもWeb界隈の風潮的に『もうWebは全部httpsにしたほうがよくなくね?』という流れになり、それじゃあ無料で使えるSSL証明書のサービスを立ち上げてやるかぁ!って事のようです。なかなかイキですね。
特徴としては『無料で使えるけど3ヶ月ごとに更新しなきゃダメ』という事です。今までのSSLは1年とか2年ごとの更新でしたが、このLet’sEncryptは3ヶ月という比較的短いスパンで更新を求められるんですね。ちょっと面倒ですが、『1年も2年もほったらかさないで、マメにお手入れして鮮度の高いサイト運用しろや!』なんていう意図が感じ取れたのは私だけでしょうか。
Googleもhttpsなサイトは『セキュアでよくなくねこれ?』と判断してランクを上げてくれるそうですので、これを機にサイトのhttps化に取り組んでみるのもいいんじゃないかと思います。

以上、GoogleMapsAPI利用にあたり補足的な内容でしたが、頭の隅っこにでもちょこんと置いといて頂ければ幸いです。

Thank you for reading! 読んでくれてありがとう!