ぐるなびAPIを使ってJavaScript(jQuery)で動作するシングルページアプリケーションを作ってみました。

カテゴリー:
jQuery

ご存じの方もいらっしゃると思いますが、ぐるなびというレストランの検索サイトでは、レストラン検索などができるAPIを公開しています。(ぐるなびWeb サービス for Developers)

APIの勉強がしたいと思っていろいろ調べていたところ、このAPIにたどり着きました。解説ページの作りが非常によく、サンプルコードもわかりやすかったので、このAPIを使わせていただくことにしました。

都道府県別カフェ検索アプリを作る。

ぐるなびに登録されているカフェを都道府県ごとに検索できるごく簡単なWebアプリケーションを作ったのでデモページとコードを公開してみます。

上記デモURLにアクセスすると、東京都のカフェ一覧が表示されます。クリックするとぐるなびの店舗紹介にリンクします。

「さらに表示する」ボタンをクリックすると次の10件のデータを取得して表示します。

都道府県を「変更する」ボタンをクリックすると、文字通り都道府県が切り替わって、条件にマッチしたデータを取得して表示します。

JavaScript(jQuery)

JavaScript初学者が作った学習用のコードのため、間違いや非効率なコードが含まれている可能性があります。ご了承ください。ご指摘、ご助言いただけますと非常にありがたいです!コメント欄をご利用ください。

html

※CSSは割愛します。

雑感

イベントの実行が煩雑になってしまったので、もっとすっきりわかりやすくできたらいいと思いました。デザインパターンを勉強すると良い気がします。

addEventListenerの使い方を覚えるといいのかな?時間を取って調べて行きたいですね。MVCフレームワークも覚えられたらいいですね。

あと、APIの仕様で残念なことが一つありました。それは、店舗の画像を表示させるパラメーターが2種類しかなく、しかもどんな画像なのか事前にわからない仕様だったこと。

当初のイメージでは、コーヒーそのものまたは室内の様子がわかる写真を並べて写真で魅せるデザインにしたかったのですが、ロゴや犬の写真が出てくることもあって(笑)、コントロールできなさそうでした。

食べ物、飲み物、店内、外観、それらをキーワードで指定、とかできたらなお良いですね。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です