今日の料理アプリ「DaD」のプログラムをChatGPT4と改善

前回の「ChatGPT4とWEBアプリの名前やデザイン感を決める」とい記事で名前が決まった、「今日の料理とレシピ」を提案してくれるWEBアプリ「D-a-D(ディーエーディー)」。残りの以下の改善を実施していきたいと思います。

改善項目

・レシピなどのデータはJSONで管理 – 将来的なAPI化にも対応させる
・デザインをデザイナーがデザインし整える
・料理の画像をもっと美味しそうに出力
・レシピデータをChatGPTで制作し実用に耐えれるデータ量とする

早速、プログラムを書いてもらいながら改善していきます。

JSONに対応

現状javascript内にハードコーディングされている、レシピデータをJSONで外部から非同期で読み込みます。

JSONファイルを作成

[
  {
    "name": "オムライス",
    "img": "omurice.jpg",
    "steps": [
      "玉ねぎをみじん切りにする",
      "フライパンで玉ねぎを炒める",
      "ご飯とケチャップを加えて炒める",
      "別のフライパンで卵を焼く",
      "卵をご飯の上にのせる"
    ]
  },
  {
    "name": "カルボナーラ",
    "img": "carbonara.jpg",
    "steps": [
      "スパゲッティを茹でる",
      "ベーコンをフライパンで炒める",
      "卵、粉チーズ、黒コショウを混ぜる",
      "炒めたベーコンに茹でたスパゲッティを加える",
      "卵の混ぜ物を加え、よく混ぜる"
    ]
  },
  {
    "name": "寿司",
    "img": "sushi.jpg",
    "steps": [
      "酢飯を作る",
      "刺身を薄くスライスする",
      "手に酢水をつけ、酢飯を握る",
      "刺身を酢飯の上にのせる",
      "わさびと醤油で食べる"
    ]
  }
]

作成したJSONを読むためにjavascriptを調整

let recipes = [];

async function fetchRecipes() {
  const response = await fetch('recipes.json');
  const data = await response.json();
  recipes = data;
  displayRecipe();
}

function displayRecipe() {
  const recipe = recipes[Math.floor(Math.random() * recipes.length)];
  document.getElementById('recipe-image').src = recipe.img;
  document.getElementById('recipe-name').textContent = recipe.name;
  const steps = document.getElementById('recipe-steps');
  steps.innerHTML = '';
  for (const step of recipe.steps) {
    const li = document.createElement('li');
    li.textContent = step;
    steps.appendChild(li);
  }
}

fetchRecipes();

CSSを調整

モバイルに最適化するなどを実施、またキーカラーをオレンジに変更 ロゴ画像なども設置しました。
最終的なCSSは以下。流石にここは人間の手で実施するほうが早く、細かいところは手作業で調整しました。

JSONデータ生成・追加

種類を増やしたJSONをChatGPTに出力してもらいます。
色々質問していたので、jsonの型が変わってしまうので、データを改めて創った場合は注意が必要です。

もっと美味しそうな画像生成

前回はシンプルに料理名をいれていましたが、写真であること美味しそうであることを加えたプロンプトでMidJourneyで生成。前回のアウトプットよりはかなり美味しそうになりました。

最終成果物

DaD
https://taziku.co.jp/app/menu_v2/

v1は以下
https://taziku.co.jp/app/menu_v1/

まだまだ調整できるところは沢山ありますが、一旦この企画はここまで。今まで0からWEBアプリを創っていた方に取ってはベースや基本的なパーツ作りなどがものすごく早くなりますね。

ChatGPT4を便利に使って、生産性上げつつ、クリエイティブに特化して動けるように動きを変えて行こうと思います。

※当サイトに掲載されている商標、一部画像、スクリ-ンショット、文章に置いては著作権侵害を目的に利用しておらず、第三十二条で定められる引用の範囲で使用しています。万が一問題があれば、お問い合わせからご連絡ください。即刻削除いたします。また、本ブログは業務の研究開発のためのものとなり、一部、弊社に関連性が無いものも掲載しております。

Related INSIGHTS

最新の知見をお届け

AI・クリエイティブに関する最新情報は
公式Xアカウントやnoteでも発信しています。

Follow @taziku_co note で読む