今日の料理案をランダムで提案してくれるサイトを作った

なんか料理したいけどアイデアが思いつかないときがありますよね。
そんな時に使えるサイトを作ってみました。

ランダムな料理を表示してくれます。
是非見てみてください。↓

使ってみるとこんな感じです。
Kung Po Prawns(宮保蝦仁)は海老とピーナッツを唐辛子とともに炒めた四川料理だそうです。
とても食欲をそそりますね。

概要

やっていることはhtmlとphpを使って料理のデータベースのAPIをたたくだけです。
(本当はAWSを使いたくて始めたことでしたが、そこまでしなくて良さそうだったのでこうなりました。。。)
htmlやphpをロクに知らない状態で調べながら作ったので、もっと効率の良い方法があるかもしれません。

構成

作ったのはhtmlファイル一つです。

素のhtmlだと味気なかったのでTemplate Stockのテンプレートを使用しています。
使用したテンプレートはこちらです。

Visual Free Website Template | Free CSS Templates | Free CSS
Preview of the Visual Free CSS Template from Template Stock
動作

htmlファイルの中にphpを書いています。

本題の料理ですが、themealdb.comに便利がAPIが用意されてたのでそのまま使いました。
ランダムに料理についての情報をJSON形式で返してくれます。

Free Meal API | TheMealDB.com

phpでAPIをたたいてJSON形式で情報をもらい、整形して表示しています。
せっかくなので検索へのリンクと共有ボタンも付けてみました。

まとめ

webAPIがとても使いやすくて感動しました。
他にもいろんなものが存在するみたいなので色々なことができそうです。

今回使ったTheMealDBの料理の写真がとても美味しそうでデバッグしながらお腹が空きました。

(どう使うかイマイチ分かってないですが、)いつかAWSを使って何か作ってみたいです。

コメント