JavaScriptでぐるなびAPIを使う方法 #JavaScript

ぐるなびAPIがすごく面白そうで簡単だったので、使ってまとめてみました。Google Maps APIなどと組み合わせると絶対に強い

ぐるなびAPI is なに？

株式会社ぐるなびが提供しているAPIです。飲食店の店舗情報について簡単に取得することができます。

アクセスキー取得

今回は、レストラン検索APIを使っていきます。このAPIはアクセスキー（APIを使うための許可証みたいなもの）が必要です。これを発行するために以下のリンクをクリックして、新規登録アカウント発行をしましょう。
https://api.gnavi.co.jp/api/

新規アカウントが発行されると、アクセスキーが記載されたメールが届くので、それをメモしておいてください。

アクセスキーが使えるか確認するため、以下のURLへアクセスしてください。keyidのところは自分のアクセスキーへ置き換えてください。

https://api.gnavi.co.jp/RestSearchAPI/v3/?keyid={発行したアクセスキー}

エラーメッセージで、「絞り込み条件を指定してください」と表示されていれば正解です。

パラメータについて

以下のリンクにリクエストパラメータ（APIに送るデータ）とレスポンス（返ってくるデータ）の一覧が書かれています。
https://api.gnavi.co.jp/api/manual/restsearch/

そして、親切なことにテストツールまであるのでリンクを貼っておきます。パラメータのついたURLと返ってくるデータが表示されます。
https://api.gnavi.co.jp/api/tools/?apitype=ver1_RestSearchAPI

パラメータの使い方の例

例えば、緯度・37.702492　経度・135.495965　範囲1000m以内のお店の情報を取得するとします。すると以下のようなパラメータを使います。

パラメータ名	説明	値
latitude	緯度	34.702492
longitude	経度	135.495965
range	範囲	3

（詳しい説明については、パラメータ一覧から確認してください。）

すると、このようなURLになります。

https://api.gnavi.co.jp/RestSearchAPI/20150630/?keyid=[アクセスキー]&format=json&latitude=34.702492&longitude=135.495965&range=3

これで、JSON形式でデータを取得可能です。

JavaScriptで表示

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>ぐるなびAPIテスト</title>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
  <input type="text" id="key" placeholder="アクセスキーを入力"><input type="button" id="submit" value="送信">
  <table id="table" border="1">
    <tr><th>店舗名</th><th>営業時間</th></tr>
  </table>

  <script>
    const showResult = result => {
      result.rest.map( item => {
        $("#table").append(`<tr><td>${item.name}</td><td>${item.opentime}</td></tr>`)
      })
    }

    $( function () {
      const url = "https://api.gnavi.co.jp/RestSearchAPI/v3/"
      const params = {
        keyid: "",
        latitude: 34.702492,
        longitude: 135.495965,
        range: 3
      }

      $("#submit").on("click",  () => {
        params.keyid = $("#key").val()
        $.getJSON( url, params, result => {
          showResult( result )
        })
      })
    })
  </script>
</body>
</html>

ぐるなびのサンプルコードとほぼ一緒です。シンプルなので、難しくはないと思いますが、一応このコードを分解して簡単に解説します。

<input type="text" id="key" placeholder="アクセスキーを入力"><input type="button" id="submit" value="送信">
<table id="table" border="1">
  <tr><th>店舗名</th><th>営業時間</th></tr>
</table>

ここは、アクセスキー入力用のフォームとボタンですね。テーブルに店舗情報を出力していきます。

const showResult = result => {
  result.rest.map( item => {
    $("#table").append(`<tr><td>${item.name}</td><td>${item.opentime}</td></tr>`)
  })
}

結果の表示用関数です。

var url = "https://api.gnavi.co.jp/RestSearchAPI/v3/"
var params = {
  keyid: "",
  latitude: 34.702492,
  longitude: 135.495965,
  range: 3
}

URLとパラメータをセットしています。アクセスキーはフォームで入力したものを使うので、空にしています。

$("#submit").on("click", function () {
  params.keyid = $("#key").val()
  $.getJSON( url, params, function( result ) {
    showResult( result )
  })
})

もしボタンがクリックされたら、パラメータのkeyidに、テキストフォームの中身を取得したものを入れています。最後にgetJSONで表示用関数に受け取ったデータを投げれば完成です。