JavaScript
ぐるなびAPI

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

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

ぐるなびAPI is なに?

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

アクセスキー取得

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

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

キャプチャ3.PNG

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

http://api.gnavi.co.jp/RestSearchAPI/20150630/?keyid=[発行したアクセスキー]&format=json

ものすごい量の文字が出てきたら正解です。中身はJSONです。もし、少ない文字量で、どこかにerrorと書かれていれば、URL、またはアクセスキーを再確認してください。

パラメータについて

以下のリンクにリクエストパラメータ(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>
    function showResult( result ) {
      for ( var i in result.rest ) {
        $("#table").append("<tr><td>" + result.rest[ i ].name + "</td><td>" + result.rest[ i ].opentime )
      }
    }

    $( function () {
      var url = "https://api.gnavi.co.jp/RestSearchAPI/20150630/?callback=?"
      var params = {
        keyid: "",
        format: "json",
        latitude: 34.702492,
        longitude: 135.495965,
        range: 3
      }

      $("#submit").on("click", function () {
        params.keyid = $("#key").val()
        $.getJSON( url, params, function( 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>

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

function showResult( result ) {
  for ( var i in result.rest ) {
    $("#table").append("<tr><td>" + result.rest[ i ].name + "</td><td>" + result.rest[ i ].opentime )
  }
}

結果の表示用関数です。受け取った引数を、for文で回してテーブルに店舗名と開店時間を追加しています。

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

URLとパラメータをセットしています。URLは、返ってきたデータを使用したいので、[?callback=]という文を追加しています。アクセスキーはフォームで入力したものを使うので、空にしています。

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

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