ぐるなびAPIを使って、営業時間がすぐにわかる飲食店検索サイトを作った

ぐるなびAPIを使って、営業時間がすぐにわかる飲食店検索サイトを作った。

#めしタイム

めしタイムの作成中に考えたことや、やったことなどを書いていく。

##自己紹介

• Railsをメインに独学中の人。SESで働いて2年が経とうとしている。(24歳)
• HTMLの存在を1年前に知った
• Qiita初投稿

なぜ作ったか

• 役に立つwebアプリを作ってみたかった
• ある特定の飲食店の営業時間を知りたいときに、スマホでググって大手グルメサイトのページに飛んで、下にスクロールという操作を簡略化したかった

なぜぐるなびAPIを使うのか

• ホットペッパーグルメのAPIと迷ったが、ぐるなびの方が取得できる店の数が多かったため

使う場面の例

• ある特定の飲食店の開店時間、または閉店時間を知りたいとき
  検索キーワードの例「新小岩 牛角」
• その地域または駅付近で朝早くからやっている、または夜遅くまでやっている店を知りたいとき
  検索キーワードの例「目黒駅 居酒屋」

使った技術

• Rails
• Heroku
• Bulma

Herokuは無料プラン

Herokuのdynoスリープ回避方法

• uptimerobotを使った

.envを使用したときの注意点

• こちらの記事を参考にした

コードの抜粋

shops_controller.rb

class ShopsController < ApplicationController
  def top
  end

  def create
    keyword = params[:keyword]
    redirect_to "/shops?keyword=#{keyword}"
  end

  def show
    begin
    keyword = params[:keyword]

    require 'open-uri'
    require 'json'
    require 'active_support'
    require 'active_support/core_ext'

    uri = "https://api.gnavi.co.jp/RestSearchAPI/20171213/"
    access_key = ENV['ACCESS_KEY']
    url = uri << "?keyid=" << access_key << "&hit_per_page=100"  << "&freeword=" << keyword
    url = URI.encode url
    json = open(url)
    hash = Hash.from_xml json
    shops = []

    if hash.has_key?("response")
      hash["response"]["rest"].each do |shop|
        shops.push({
          name: shop["name"],
          url: shop["url"],
          opentime: shop["opentime"],
          holiday: shop["holiday"],
          image1: shop["image_url"]["shop_image1"],
          image2: shop["image_url"]["shop_image2"]
        })
      end
    elsif hash.has_key?("gnavi")
      if hash["gnavi"].has_key?("error")
          if hash["gnavi"]["error"]["code"] == "600"
            @error = "該当する店舗の情報が存在しません"
          end
      end
    else
      @error = "エラーが発生しました"
    end

    rescue
      @error = "エラーが発生しました"
    end
    @shops = Kaminari.paginate_array(shops).page(params[:page]).per(10)
  end

  def description
  end

end

最初のリリースまでにかかった時間

• 10時間程度
  最初に公開したのは3月4日

ユーザーからフィードバックを頂いた

• チャットサイトを使ってユーザーを集め、フィードバックを頂いた

ユーザーフィードバックの抜粋

• どんなキーワードを入力すればいいのか分からない
• 検索画面が簡素すぎて食欲が湧かない
• 地域指定を入れてほしい
• 食事関係なのにTwitter色はどうなのか
• シンプルすぎてなんか怪しい
• 検索した後の表示が遅い
• トップページを見て何のサイトか明確じゃない

ユーザーフィードバックをもとに修正

• place holderの文字を変更した
  「キーワードを入力」→「キーワード(駅名、店名、料理名など)を入力」

今後修正したい箇所

• ページネーションをページが切り替わるのではなく、「もっと見る」ボタンを押したら、下に表示されるようにしたい
• 検索した後のレスポンスが遅いのでなんとかしたい

ユーザー数とPV

(リリースから2週間経過)

• 170ユーザー
• 1000PV
  (Googleアナリティクスで自分のアクセスを除外する方法)
  (Googleアナリティクスで自分のスマホのアクセスを除外する方法)

まとめ

• 作るの面白い！！

追記(2020/3/30)

サイトは閉じたが、Flutterでアプリを作ってみた。
https://play.google.com/store/apps/details?id=meshitime.meshitime