【Vue.js】奥さんに喜んでもらうためにオリジナル「レシピ検索アプリ」のプロトタイプ1号を作った【Bootstrap】

目指したのはオリジナル「レシピ検索アプリ」

先日、奥さんと会話していると、こんなことを言われました。
「食材からレシピ検索して、副菜も提案してくれるアプリが欲しい」
なるほど、確かに奥さんはいつも主菜だけでなく副菜も作ってくれています。
これは何とか報いねばということで考えました。

目指したのはこんなアプリ

しかしながら、作り始めてみてWebアプリケーション制作に関するスキルの無さに唖然とし、とりあえずプロトタイプ中のプロトタイプを作ったところで今に至ります。

今回作ったもの

CodePenで作成したので、そのまま添付します。
初めて使いましたがコード弄りながら逐一結果を確認できて便利ですね。

See the Pen
Recipe by shoito66 (@shoito66)
on CodePen.

※楽天レシピのAPIを叩くのにIDが要るのでこのままだと動きません。

今回はプロトタイプということで楽天レシピのAPIを叩いて結果を表示するところまでになります。

サイトとして公開したものはこちら

やっていることは以下の通り。
①楽天レシピのカテゴリ取得APIを呼んでカテゴリ一覧を取得
②取得したカテゴリをプルダウンメニューへセット
③カテゴリを選択して検索ボタンを押すとカテゴリ別のおすすめメニュー取得APIを呼ぶ
④結果をカード形式にして表示（VIEW MOREクリックするとレシピのページへ飛べます）

作り方

環境

今回はCodePenで作りましたが、導入したフレームワーク・ライブラリは以下の通りです。

JavaScript
・Vue.js v2.6.11
・Vue Select v3.11.2
・axios v 0.21.1

CSS
・Bootstrap v4.5.0

APIの呼び出し

楽天レシピの2種類のAPIを使用しています。
使用するためには楽天DevelopersでアプリIDを発行する必要があります。（要楽天アカウント）

IDの発行はこちら

IDが発行できたらリクエストパラメータに指定してコールすればOK
今回もAPIの呼び出しにはaxiosを使用しています。

楽天レシピカテゴリ一覧API

const app_id = 'アプリID';
let response;
response = await axios.get('https://app.rakuten.co.jp/services/api/Recipe/CategoryList/20170426?format=json&categoryType=large&applicationId='+ app_id);

categoryTypeにはlarge,medium,smallが指定できますが今回はlargeで取得しています。

楽天レシピカテゴリ別ランキングAPI

const app_id = 'アプリID';
let response;
let categoryid = '15'; //検索したいカテゴリのIDを指定する
response = await axios.get('https://app.rakuten.co.jp/services/api/Recipe/CategoryRanking/20170426?format=json&categoryId='+ categoryid  + '&applicationId=' + app_id);

これで最大4位までのレシピが取得できます。

カテゴリのプルダウン表示

Vue Selectというライブラリを使用しました。
使い方はこちらの記事を見てください。

取得したレシピのカード表示

取得したレシピの情報はVue.jsの力でカード形式のオブジェクトにバインドしています。

カード形式のオブジェクトはCodePenのテンプレートを参考にしました。

このオブジェクトを取得したレシピ情報の数だけ生成して表示しています。

HTMLはこんな感じ

<div class="block " v-for="item of recipes">
 <div class="block-card">
  <div class="block-card-img">
   <img :src="item.imageurl" alt="foodImage">
  </div>
   <h1>{{item.recipename}}</h1>
   <p>{{item.description}}</p>      
   <a v-bind:href="`https://recipe.rakuten.co.jp/recipe/${item.recipeurl}`">VIEW MORE</a>
 </div>
</div>

recipes配列に格納されたレシピ情報をv-forで参照しながらオブジェクトを作っています。

CSSはこんな感じ(SCSSで書いてあります)

.block {  
  margin: 50px 0px 50px auto;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
    &-card {
      //position: relative;
      width: 300px;
      background: white;
      padding: .4em;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      box-shadow: 0 0 10px rgba(0,0,0,.2);
      &-img {
        width: 100%;
        height: 150px;
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      h1 {
        margin: .4em 0;
        font-size: 21px;
        font-family: arial;
      }
      p {
        font-size: 18px;
        margin: .5em 0;
        font-family: arial;
      }
      a {
        background: #177E89;
        color: white;
        text-decoration: none;
        padding: .4em .6em;
        margin: .7em 0;
      }
   }
}

見た目のカスタム

最終的に見た目を整えようとBootstrapを使いました。
基本的な文法は公式ドキュメントを参考にしながら書きました。

ページ先頭のイメージが横幅いっぱいに表示されている部分はjumbotronを使用しています。
この部分だけコードを紹介します。

<div class="jumbotron jumbotron-fluid">
  <div class="container">
    <h1 class="display-4 text-dark bg-white ">楽天レシピ検索</h1>
    <p class="lead text-dark bg-white">このサイトでは楽天レシピに掲載されているレシピが検索できます。</p>
  </div>
</div>

.jumbotron {
  background-image: url("https://i.gyazo.com/f33af7a98d13fee550506602711f61dd.jpg");
  background-size: cover;
  background-position: center 60%;
}

h1 {
  font-size: 26px;
  font-weight: 600;
  opacity: 0.5;
}

.lead {
  font-size: 20px;
  font-weight: 600;
  opacity: 0.5;
}

最後に

作ってみて自分のWebアプリケーションに対する知識の無さを痛感しました。
やりたいことに対してもまだまだギャップだらけですので、引き続き勉強しながら自分の作りたいものに近づけていきたいなと思います。