Google Maps APIをローカル開発環境で使用するときの制限設定方法

Google Maps APIは使用量に応じて料金が変わってきます。
そんなGoogle Maps APIで1番注意しないといけないのが、APIキーを他の人に使われないためにどうするか?です。
Google Mapsをウェブ上に公開する場合、設定やキーは全てHTMLやJavaScriptファイルから見れてしまうので、制限を設定していないと簡単に他の人に使われてしまい、使っていない分の料金まで請求される可能性があります。
そうならないためにも、制限設定は必須です。
制限設定方法
APIキーの作成方法は過去に記事にしているので、そちらをご覧下さい。
APIキーの作成が終わった状態で、Google Cloud Platformへアクセスし、サイドバーの[API とサービス]→[認証情報]をクリックします。
![[API とサービス]→[認証情報]](https://webrandum.net/mskz/wp-content/uploads/2021/02/image_1-9.png)
「API キー」に現在利用可能なAPIキーが一覧になっているので、制限をかけたいAPI右側の「Edit API key」をクリックして編集画面へ移動します。

IPアドレスで制限設定
「アプリケーションの制限」で「IP アドレス(ウェブサーバー、cron ジョブなど)」を選択します。

あとは「新しいアイテム」内に自分のIPアドレスを追加すればOKです。

ちなみに、自分のIPアドレスはこちらのサイトで確認できます。
IPアドレスは定期的に変わってしまうので、実際に実装・開発作業をするときはVPNを使うことになると思いますが、「一時的に確認できればOK」「試しにGoogle Maps APIをローカルで触ってみたいだけ」のような場合は、VPNを使わずそのまま自分のIPアドレスを入力しても良いと思います。
もしIPアドレスが変わってしまった場合は、登録しているIPアドレスを修正すれば問題ありません。
設定できたら1番下の「保存」を押して完了です。
HTTP リファラーに「localhost」入力はしない
サーバーにアップする場合は「HTTP リファラー」でURLを入力すれば、そのURL以下でしか使用できなくなりますが、ローカル開発環境の場合は特定のURLがないのでそれが使えません。
一応URLに「localhost:xxxx」などlocalhostを入力しても使えますが、それだと関係ない人も同じようにローカル開発環境を作れば使用できてしまいます。
IPアドレスで制限をかけた方が安心・安全です。


Visual Studio Codeで連番を入力する拡張機能「vscode-input-sequence」
全角スペースを可視化してくれるVisual Studio Codeの拡張機能「zenkaku」
iOS Safariで指定したフォントサイズにならない場合の対処法
スマホやPCにプッシュ通知をしてくれる「Push7」をブログに追加する方法
Visual Studio Codeのエクスプローラー上でファイル・フォルダの複製ができるようになる拡張機能「Duplicate action」
gulpfile.jsにAutoprefixerのブラウザオプションを書くとエラーがでる場合の修正方法
SourceTreeでマージ時に「fatal: You have not concluded your merge (MERGE_HEAD exists).」と表示される場合の対処法
アイコンフォントをPCにインストールしている場合は、コーディング後の確認に注意
WordPressのカスタム投稿タイプを追加後、ページは存在しているはずなのに404になる場合の解決方法
超軽量なコードエディタ 「Zed」をサブエディタとして活用する
AirPodsで片耳を外しても再生が止まらないようにする方法
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
CSS Nite in Kobe, vol.40「クライアントとのより良い関係性を築くためのコミュニケーション手法」に参加してきました
Adobe XD × Keyboard Maestroでここまでできる!ショートカットキーであらゆることを実現するマクロサンプル
コーディング時のclass名の省略はどこまでして良いのか?「img / btn / ttl / desc / thumb」
入力関連のトラブルを防ぐためにも、システム環境設定の[キーボード]→[ユーザ辞書]を確認しておく
iTerm2全般の設定ができる環境設定の「General」タブ
いつも使っているアプリがタブに埋もれるのを防止するアプリ「Biscuit(ビスケット)」
Sketchのプラグインを管理ツールを使わずに直接フォルダで管理する方法
Visual Studio Codeを使ったコード整形方法(Fomatter)
ATOKの使いやすさに直結する「入力・変換」タブの設定項目
Google Chromeのタブを検索するAlfred Workflowの「Search Safari and Chrome Tabs」で、タブ移動をラクにする