【コード解説】ホットペッパーぐるめでペット可のお店一覧を表示

ホットペッパーAPIを使用し、一部地域のペット可のお店一覧をwordpress上の記事として表示しました。

この記事では、作成手順とコードを解説します。

ざっくりとした仕様
実施手順
おわりに

ざっくりとした仕様

地域のエリアコードを取得(手動)
店舗一覧を出力(Pyhonで自動)
店舗一覧をhtml形式に変換(Pythonで自動)
3のhtmlをwordpress上の記事に貼り付け(手動)
wordpress上で、表を整形(カスタムcssにより自動)
※ 住所での絞り込みなどはできず

という、そこそこアナログな仕様で作成しました。
WordPressでのカスタマイズが難しいので、今回はやむを得ないかな～と思ってます。

成果物はこんな感じです。

また、こちらのリンクから結果一覧をご覧になれます。

【結果】ホットペッパーぐるめでペット可のお店一覧を表示|一部地域のみ

実施手順

ホットペッパーAPIに登録

リクルートWEBサービス経由で、ホットペッパーAPIへの登録申請を行います。
私は1年ほど前に登録しているので確かなことは言えないですが、数日以内に承認してもらえたと記憶しています。

エリアコードをURLから類推

ホットペッパーAPIではエリアコードが地域ごとに割り振られています。
(参考リンク：ホットペッパーAPIリファレンス)

今回は、ざっくりと「西東京」のエリアコードを知りたかったので、
ホットペッパーぐるめの「東京のグルメ・レストラン予約」の「エリアから探す・予約する」から、調べたい地域のエリアコードを推測しました。
たとえば、「武蔵小金井のグルメ・レストラン予約」のページのURLは “https://www.hotpepper.jp/SA11/Y083/” なので、エリアコードは”Y083″だろう、という感じです。

この方法でエリアコードを当てられましたが、もっとスマートな方法があると思います。

今回は、「武蔵小金井」「国立・国分寺」「青梅・昭島・小作」「八王子・立川」のエリアコードを取得しました。
(すべて、東京都西部の地域です。)

※ こちらの結果には、「武蔵小金井」と「国立・国分寺」のみ表示しています。

Pythonでhtmlコードを出力

Pythonにて、pandas.DataFrame.to_htmlを使用して、データを抽出しhtmlコードを記述します。

コードは次の通りです。

import sys
import json
import requests
import pandas as pd

#APIキー
#リクルートWEBサービス経由で取得
api_key="xxxxxxxxxxxxxxxxxxx"

#ミドルエリア
#こちらのリンクから気になるエリアをクリックし、リンクに表示されたIDを使用した。
#https://www.hotpepper.jp/SA11/_
m_area_list = ['Y083',#武蔵小金井
               'Y088',#国立・国分寺
               'Y089',#青梅・昭島・小作
               'Y110',#八王子・立川
              ]

def make_Hotpepper_df(m_area,api_key=api_key):
    api = "http://webservice.recruit.co.jp/hotpepper/gourmet/v1/?" \
            "key={key}&middle_area={m_area}&pet=1&count=100&order=1&format=json"
    url=api.format(key=api_key,m_area=m_area)
    response = requests.get(url)
    result_list = json.loads(response.text)['results']['shop']
    
    shop_datas=[]
    for shop_data in result_list:
        shop_datas.append([shop_data["name"],shop_data["address"],shop_data["urls"]['pc'], shop_data["budget"]['average']])
    
    columns = ['name','address', 'url', 'budget']
    df = pd.DataFrame(shop_datas, columns=columns)    
    return df

def add_href(df, col):
    df[col] = '<a href=' + df[col] + '>' + 'ホットペッパーへのリンク</a>' 

def make_html_code(df):
    try:
        df_html = df.set_index('name')
    except KeyError as e:
        print('name列がありません。列名を確認してください。')

    
    #wordpress上のカスタムcssのために、'row_table'というclassを指定
    #'<'と'>'をエスケープ処理しないために、escape=Falseを指定
    print(df_html.to_html(header=None,index_names=False,classes='row_table', border=0, escape=False))
    return



for m_area in m_area_list:
    df_HP = make_Hotpepper_df(m_area,api_key=api_key)
    df_HP.sort_values('address', inplace=True) #表が見やすいようソート
    add_href(df_HP, 'url')
    make_html_code(df_HP)
    
    print("\n" + '#'*50)

このコードによる出力結果を、wordpressの記事にhtmlとして貼り付けます。

カスタムcssで表を整形

カスタムcssを記述して、表を整形します。

追加cssのコードは次の通りです。

.row_table th {
  text-align: center;
  font-weight:bold;
  display: inline-block;
  width: 100%
}
.row_table td {
  display: inline-block;
  width: 100%;
  text-align: center;
  font-weight:normal;
}

参考リンク：【レスポンシブ】CSSで作るtableデザイン＆コーディング【コードあり】