ぐるなびAPIの使い方 #JavaScript

ぐるなびAPIについて

ぐるなびが提供しているAPIです。
店の名前や緯度経度などの店舗情報を取得できます。
詳しくはこちらを参照。

使い方

手順に沿って使い方を説明していきます。

手順１：アクセスキーを発行する

アクセスキーがないと何もできないためアクセスキーを発行します。
公式サイトの右上にある新規アカウント発行を押しアカウントを作成します。
メールでの本人確認が完了すると同じメールアドレスにアクセスキーが届きます。

手順２：URLを生成する

ぐるなびAPIにはAPIテストツールというものがあり項目を入力するとURLを作成してくれます。
今回は東京駅の近くのお店の名前を表示したいと思うので、
API名はレストラン検索APIを選択。
keyidには自分のアクセスキーを入力します。
latitude(緯度)
longitude(経度)
range(範囲)
を追加して入力。
今回は緯度経度は東京駅の座標を、範囲は一番小さい1(300m)を使用します。
URLはあとで使用するのでコピーしといてください。

手順３：コードを入力する

以下のコードを入力してください。
URLは自分のものを入力してください。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8">
</head>

<body>
    <script>
        async function callapi() {
            const res = await fetch("https://api.gnavi.co.jp/RestSearchAPI/v3/?keyid=[自分のアクセスコードを入力]&latitude=35.681382&longitude=139.76608399999998&range=1"); //コピーした自分のURLを入力
            const users = await res.json();
            const rest = users.rest;
            console.log(users);
            Object.keys(rest).map(key => document.write('key:' + key + ' value:' + rest[key]["name"] + "<br>\n"));
            document.write("Supported by ぐるなびWebService : https://api.gnavi.co.jp/api/scope/");
        }
        callapi();
    </script>
</body>


</html>

コードを実行すると店名が表示されます。

コードの説明

少しコードの説明をします。
非同期処理でAPIの取得を行っています。

const res = await fetch("https://api.gnavi.co.jp/RestSearchAPI/v3/?keyid=[自分のアクセスコードを入力]&latitude=35.681382&longitude=139.76608399999998&range=1"); //コピーした自分のURLを入力
            const users = await res.json();

ここではAPIからjsonファイルを取得しています。

Object.keys(rest).map(key => document.write('key:' + key + ' value:' + rest[key]["name"] + "<br>\n"));

restをmapで取り出して店の名前を表示しています。
["name"]の部分を変更すると他の値を表示できます。
受け取れる値はこのサイトのレスポンスを確認しましょう。
PR文(short)を表示してみます。

Object.keys(rest).map(key => document.write('key:' + key + ' value:' + rest[key]["pr"]["pr_short"] + "<br>\n"));

PR文が表示されました。

利用規約について

最後にぐるなびAPIは利用規約でクレジットを表示しなければならないという物があります。
忘れずにつけましょう。
詳しくはこちら