ぐるなび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で表示用関数に受け取ったデータを投げれば完成です。