コーディングブログ

Coding Blog

【Vue.js×axios】ホットペッパーグルメサーチAPIを使って非同期に近くのグルメを検索!

API

PHP

Vue.js

最終更新日:2020/01/04

今回実際に作成したのがこちら!
【Vue.js版】近くのお店~フリーワードで –グルメサーチ

このページの仕様は、

  • フリーワード検索
  • 現在地を測定し、付近のグルメを検索
  • 非同期処理

です。
今回はこれベースで解説していきます。

    用意するファイルは3つ

    • HTML(表示用)
    • JavaScript(Vue.js axiosをつかってPHPにリクエスト)
    • PHP(リクエストをAPIに送信し、結果を取得して、返す)

    まずはAPIキーを取得

    APIを利用するためには、まずリクルートWEBサービスに登録して、 APIキーを取得します。
    新規登録 | リクルートWEBサービス

    リクルートWEBサービス 新規登録画面

    メールアドレスだけで登録できるので、すぐ取得できます!
    メールアドレスの認証が完了すると、APIキーがメールで届きます。

    リクルートWEBサービス メールアドレス認証

    まずは試しにPHPでグルメ情報を取得

    もちろんjsだけでも実装可能ですが、公開するのであれば、APIキーを隠蔽する必要があるのでPHPで作るのが良いでしょう。
    自分のAPIキーを他人に使われて、リクルートWEBサービスに危害が加わった時の責任は自分にあるので、APIキーの管理には注意が必要です。

    リクエストを送り結果を取得してみる

    APIキーをセットして、キーワード『焼肉』10件json形式で取得します。

    検索クエリ一覧

    公式ドキュメント:検索クエリ| APIリファレンス

    結果が、下記レスポンス一覧の構造で配列で取得できたと思います!

    レスポンス一覧

    公式ドキュメント:レスポンスフィールド|APIリファレンス

    掲載したい情報を出力

    変数$shopsに結果の店データを格納します。
    後はforeachでループして出力させるだけです!

    エラーがあった場合は$json['results']['error']に値が入ります。
    エラーの場合はエラー文を出力して終了させます。

    取得件数は$json['results']['results_available']に値が入ります。
    最大100件までしか取得できないのですが、ここの値は全検索結果の数値が入り、検索クエリによっては100件を超えてくる場合もあります。
    100件以上の場合は100とさせます。
    結果が無かった場合は見つからなかった分を出力して、終了させます。

    基本はここまでで完了

    ここまでで、必要な情報を出力することができたらもう後は、この処理をVueに差し替えやCSSで表示を調整や、
    フォームを作って入力に応じて動的に結果を出力してみたりしたらグルメサーチは完成ですね。

    この後はVue.jsとaxiosを使って、入力に応じて非同期で検索結果を出力していきます!

    Vue.jsとaxiosを使って非同期で結果を出力

    Vueとaxiosをそれぞれscriptタグで読み込んでください。

    ダウンロード

    インストール — Vue.js
    https://github.com/axios/axios

    jsを用意

    data

    それぞれで使用していく、データを定義しておきます。

    messageは初期メッセージと、エラー時に出力する為に用意します。
    検索結果用のdataは、gourmetCount数値、gourmetListを配列を空で用意しておきます。
    APIリクエスト用の、キーワードや緯度、経度、範囲は空で用意しておきます。

    methods

    ・inputtingメソッド

    テキストボックスに入力した0.5秒後に、値を後述のgetGourmetメソッドに引数で値を渡します。
    タイマーを駆使します。

    ・getGeoメソッド

    現在地をJavaScriptを使って取得します。
    まず、if( navigator.geolocation )で取得ができる(許可されている)か判定し、
    navigator.geolocation.getCurrentPositionで位置情報を取得し、成功した時と失敗した時の処理を加えていきます。

    成功時はdata:latlonに代入して、後述のgetGourmetメソッドに引数で値を渡します。

    失敗時の受け取った3種類のエラーコードは下記の通りです。
    PositionError.code – Web APIs | MDN

    注意:thisのスコープ

    アロー関数を使用したら問題ないのでしょうが、function()形式で記述しているので、thisのスコープが変化してしまいました。
    メソッド内のメソッドに入る前にthisを変数に格納することで回避できます。
    let $this = this;

    ・getGourmetメソッド

    グルメ情報を取得します。
    用意したPHPにリクエストを送って、PHPがAPIにリクエストして返ってきた値をJSで表示させます。

    PHPに送るパラメーターをセットします。
    URLSearchParams()で用意して、.append('【パラメーター名】', 値);でパラメーターを一つずつ追加していきます。

    あとは、axiosでPHPにpost送信でパラメーターを渡して、結果をgourmetListに適応したデータをオブジェクトとしてforでshopの数繰り返し追加していきます。
    この後、結果が格納されたデータgourmetListをHTML側で出力させます。

    エラー時はmessageに捕捉したエラー文を出力させます。

    HTMLを用意

    入力フォームと、結果が出力される要素を用意しました。

    v-model

    v-modelで値を同期させます。
    入力に応じて入力した値を出力させます。

    v-ifで値があるか判定し、あったら出力させます。

    範囲に関しては、現在地(geoActive)が有効時に出力させます。

    @input、@click、@change

    入力、クリック、セレクトボックスを選択した時のイベントを指定します。

    入力時にinputtingメソッド発火 @input="inputting"
    クリック時にgetGeoメソッド発火 @click="getGeo"
    チェンジ時にgetGourmetメソッド発火 @change="getGourmet"

    どちらのタイミングでもグルメ情報を取得し、出力します。

    v-for

    v-forで取得したデータ:gourmetListitemに代入して、出力させます。

    また、v-ifで結果の有無でHTMLの出力を分岐させます。
    エラー時はmessageでエラー文を出力させます。

    PHPを用意

    APIにリクエストし、結果を返す用のPHPを用意します。
    APIキーを隠蔽するためにも、PHPを挟むのが良いでしょう。

    POSTでJSから値が渡されるので、それをつかってAPIにリクエストを送ります。
    返ってきたjsonをjs側に渡してあげます。

    最終 完成版ソース

    HTML

    ローディングアニメーションや、入力中アニメーション、スクロールで検索フォーム追従なども追加しました。
    主にv-bind:classでclassを出し分けています。

    ローディングは下記参考サイトを使うのがおススメです!
    SpinKit | Simple CSS Spinners
    Loaders.css

    API利用規約で、ホットペッパーのクレジット表記が義務付けられているの注意してください。
    下記からHTMLをコピーできるのでそれを張り付けましょう。
    クレジット表示について

    Javascript

    算出プロパティでフォームの位置を計算。
    スクロールイベントや、ローディング系も入っているので参考にどうぞ。

    PHP

    完成サイト

    【Vue.js版】近くのお店~フリーワードで –グルメサーチ

    公式ドキュメント