Web APIを使ったレシピアプリの構成


このデモアプリは、本サービスによってAPI化した「ボブとアンジー」のデータを使っています。

「ボブとアンジー」は(株)オージス総研の提供している料理レシピサイトで、大阪ガスクッキングスクール80年の運営で蓄積された レシピをベースに7,000以上のレシピを公開しています。

レシピAPIのデータソースは、レシピデータ、材料、作り方、栄養士コメントの4つのCSVファイルから構成されています。

API一覧


構成図

レシピレンタル・レシピ開発・料理写真 ボブとアンジー

このデモは、レシピの一覧と詳細を表示するだけの簡単なアプリケーションです。また、レシピデータをランダムに並べ替えて表示する機能もあります。

全てのデータはAPI経由で取得しており、レシピ一覧とシャッフル画面では「レシピデータ」だけを使っています。詳細画面では、4つのデータを組み合わせて表示しています。

本レシピアプリはAngular JSフレームワークを使いJavascriptで書かれており、Thinサーバアーキテクチャを採用したシングルページアプリケーションです。わずか180行のJavascriptと300行程度のHTMLテンプレートで実装されています。