献立アプリを作ってみる　その１

 

はじめに

今回はこんなことを実現するための献立アプリを作っていきます。

  • 日々の献立を立てやすくする
  • 立てた献立から簡単に買い物リストを作る

ゴールはスマホアプリ(Android）として使えるようにすることですが、まずはWebアプリケーションを作っていきたいと思います。

 

 

アプリ作成までの流れ

作りながらこのブログを書いているので方向転換はするかもしれません。今日は１～４までをやっていきます。

  1. 作りたいものをイメージする
  2. 大体の構成をきめる
  3. 利用するAPIの準備をする
  4. Webサーバを立てる
  5. 仕様を考える
  6. テストアプリを作る
  7. 仕様の追加を行う
  8. Webアプリケーションとして使えるようにする
  9. スマホアプリを作る
    ...

 １．作りたいものをイメージする

なぜこのアプリを作りたいか？

家にいることが多いので、最近は*1ほぼ毎日晩御飯を作っています。

 

料理をすること自体は楽しいのですが、何を食べるか毎日考えることが面倒になってきました。

 

kurashiruの献立機能がすごい！

そこでkurashiruの献立機能を試しに使ってみましたが、これがとても素晴らしいのです。

  • 主菜、副菜、汁物をそれぞれランダムに選ばれた4つの中から選ぶだけという手軽さ
  • 手軽だけど、自分で選んでいるという満足感
  • 複数日の献立から買い物リストを作ることができる便利さ
  • なんといっても動画付きレシピの見やすさ

 

自分が使うなら・・・こうだったらいいな！

しかし、使ってみてもっとこうだったらいいなというポイントもあります。

  • 献立の中にメモを登録できるようにしたい。
    ひもの焼くだけ、とか昨日の残りとかのメモ。これは優先度高い。
  • kurashiru以外のレシピも設定できるようにしたい
    よく使っているCookpadのお気に入りのレシピのURLをプレビューできるようにしたい。これも優先度高い
  • レシピのお気に入り件数を気にせずしたい
    無料プランだとお気に入り数に制限があります。登録も検討中ですが。。
  • 人気のレシピを使いたい
    無料プランだとランキング機能が使えません。
  • 日々のご飯にいくら使ったかが見られるといい
    kurashiruアプリにも、目安の金額はレシピに書いてあるものの、合計値は表示されません。自炊の目的の一つでもあるかかった料金が見られたらいいなと思いました。
  • 一人当たりどのくらいのカロリーかわかるといい
    上と同じく自炊の目的であるカロリー管理(今はできていない)が意識できるといいなと思いました。

 

すでに完成度の高いシンプルで見やすいアプリなのですが、より自分の生活に合うような献立アプリを作っていきたいと思います！

 

２．大体の構成をきめる

ざっくり構成

今回は、APIを使ってレシピを取得して、Webブラウザで操作・確認できるようにしていきたいと思います。

f:id:alui:20210320202554p:plain

構成

構成図作成にはこちらを使いました。

https://www.draw.io/

３．Webサーバを立てる

ドメインとWebサーバを準備する

ドメイン取得とWebサーバを立てるところまでやってしまいます。

 

WebサーバにはAmazon EC2、DNSサーバにはAmazon Route53設定を利用します。

  1. ドメインをfreenomで取得する。
  2. Route 53でHosted Zone設定を行う。
  3. EC2インスタンスの作成とDNSレコード登録する。
    3-1.EC2インスタンスの作成とwebサーバーのインストール
    3-2.Route 53でAレコードの登録
  4. 動作確認

 

こちらの記事を参考にさせていただきました。

dev.classmethod.jp

 

『3-1.EC2インスタンスの作成とwebサーバーのインストール』でトラブル発生・・

SSH接続ってどうやってたっけ。

こちらを見て思い出す！

dev.classmethod.jp

 

無事Webサーバを立ち上げることができました。次はAPIの準備をしていきます。

４．利用するAPIの準備をする

どのAPIを利用するか？

献立アプリを作るにあたって、APIを利用します。

今回はRakuten Webserviceの一つである、楽天APIを採用しようと思います。

 

私自身はレシピサイトにはCookpadやKurashiruをよく利用していますが、APIを公開していません。なので、 今回はAPIを公開している楽天レシピAPIを利用しようと思います。楽天レシピは掲載数も多く、十分利用できそうと判断しました。

 

楽天APIを利用する準備

楽天APIを利用するには、アプリIDを取得します。そのために以下を準備します。

アプリURLには先ほど作ったドメインを利用します。

  • 楽天のアカウント
  • アプリ名
  • アプリURL
アプリIDを発行する 

 

リクエストを送ってみる

ブラウザでさっき取得したIDを使って、試しにカテゴリ一覧を取得するリクエストを送ってみます。

https://app.rakuten.co.jp/services/api/Recipe/CategoryList/20170426?applicationId=[アプリID]&categoryType=large

 

無事にJSONファイルが返ってきました。

{"result":{"small":,"medium":,"large":[{"categoryName":"人気メニュー","categoryId":"30","categoryUrl":"https://recipe.rakuten.co.jp/category/30/"},{"categoryName":"定番の肉料理","

...

 

おわりに

今日は4番までやっていきました。

次回は仕様を考えるをやっていきます。

  1. 作りたいものをイメージする
  2. 大体の構成をきめる
  3. 利用するAPIの準備をする
  4. Webサーバを立てる
  5. 仕様を考える
  6. テストアプリを作る
  7. 仕様の追加を行う
  8. Webアプリケーションとして使えるようにする
  9. スマホアプリを作る
    ...

 

 

*1:一時期配達アプリを使いまくっていたので、お金がかかる＆カロリーも高くなりがちだったので、もともと好きだった料理を再開しました。