【開発日記】初心者がOpenAI API×React×Next.jsでアプリを作ってみた

完成したアプリ(2023/02/01記)

はじめに

初心者が勉強を兼ねて、javascriptとopenaiのapiを使ってアプリを作りました。
その試行錯誤の跡です。
22日分あります。ちょくちょくさぼってます。

アプリ要件

• フロントエンド
  • Reactjs
  • Nextjs
  • Chakra UI
• バックエンド
  • Node.js
• DB
  • PlanetScale
• ORM
  • Prisma
• API
  • OpenAI

1日目

やったこと

• node.jsのインストール等環境構築
• javascriptのexampleを使ってみた
• 漫画のタイトルを生成するWebアプリを作ることを決めた

作るアプリを決めた時の記事

2日目

1日目で行った表示をWebブラウザ上で表示しようと試みた。
Node.js,Next.js,React,javascript,typescriptの全てが分からず何とかならなかった。
そのため、こちらの動画を見始めた(なぜかNext.jsから見始めてしまった...)

3日目

動画を見る中でアロー関数に躓きつつ、動画を見終えた(ハンズオンで手も動かした)。

.then(res => res.json())

が

.then((res) => {
  return res.json()
})

の省略であることを理解した。

アロー関数

• 関数を省略して書くための構文
• パラメータresの()を省略可能
• 1行だとreturnも省略可能

4日目

公式の配布しているスターターキットを見つけ、簡単に組み立てた
タイトル生成出来てる感.....!

5日目

Twitterにシェアするボタンを作った

やったこと

• OGPの設定
  • こちらはデプロイしてurlが確定しないとチェックできない模様
  • metaタグは設定したが、うまく動いてるかどうかは不明。
• シェアボタンの設定
  • こちらは動作確認できた。
• プロンプト・プレースホルダ
  • キーワードを含むタイトル生成の仕様にした

シェアボタンを押すと生成されるHTML

日本語で出力されるようにプロンプトを変更

OGP:Open Graph Protcolの略。各種SNSにシェアする時の投稿画面をカスタマイズすることが出来る。詳しくはこちら

6日目~10日目

一生漫画読んでた

11日目

Chakra UIとNext.jsのチュートリアルを参考に色やら大きさやらを変えてみた

【テキスト入力前】

【”海賊”と入力後】

12日目

Chakra UIのcardを使ってみた。出力結果をカードで出力するようにしてみた。

その際、APIの出力結果を整える必要があり、沼った。
少し整えて表示するだけのはずが同じところをぐるぐると。。

13日目

やったこと

• 12日目のエラー修正
  • カードごとに値の出し分け成功
• 画像生成APIとのやり取り

12日のエラーは変数や関数のスコープについて理解をしていなかったからだった。
ifブロックの中でconst宣言、ブロック外で呼び出しをしており、undefinedだった。
ついでに変数定義の種類(const,let,var)も知らなかったので、ざっくり知った。

テキストの時は成功していたが、画像生成ではAPIの出力結果をfetch出来ないエラーが発生した。
→JSONの存在しないキーを参照していた。中身を確認しよう

生成した画像はurlが返されるので、next.js上で表示できるように工夫する

14日目

やったこと

• 画像生成APIとのやり取り成功
  • ただ、画像生成するとすべてのカードの画像が変更されてしまっている。

画像はキーワードに"新"と入力した結果。
真ん中のカード「新幹線でのミステリー」で画像生成ボタンを押したら生成された画像。

15日目

やったこと

• 結果を表示するカード毎の画像出し分け

キーワード"コイル"と入力し、2つ目のカードの画像生成ボタンを押下した結果

16日目

やったこと

• デザインをchakra ui templateを少しいじって変更
  • レスポンシブ設定もした
• 画像生成用プロンプトを生成するapiの設定
  • プロンプト生成ボタンを作った

もっと直観的に操作できるようにしたい。

現在はプロンプトボタン→画像生成ボタンの流れを踏まないとエラーになる
本来ならば画像生成ボタン→(裏でプロンプト生成APIを通してプロンプト作成)→画像表示が理想。
react,react hooks,非同期処理,らへんをまた復習

こちらの、midjurneyのプロンプト生成を参考にプロンプトを生成してもらう

17日目

寝てた

18日目

やったこと

• モードのトグルボタンをつくった
  • ダークモードに出来るようになった
  • 記事書いた
• カルーセルまたはテスティモニーで利用例的なのを作ろうとした
  • カルーセルでスライドで見せるのがよさそう
    • エラーエラーエラー
  • 最悪テスティモニーで表示する。

書いた記事

19日目

やったこと

• 使用例作った
  • テスティモニーで表示することに
  • アコーディオンで表示した
• 文言変更・コピーボタン作成など
  • 作品のタイトルでなく、エピソード毎のタイトルを支援することにした

20日目

やったこと

• DB作る
  • Plantscale,prismaの初期設定

参考

21日目

やったこと

• DB作る
  • 日付で条件指定して使用制限

1日のAPI使用上限を100回に指定した。
APIを呼び出すタイミングでDB接続し、現在時刻までに使用されたレコードの数を数えて、100回を超えたらAPIを呼び出せないように設定した。

参考
prismaのwhereに複数条件の指定がとても参考になった

時間の文字列⇔Date型変換について

文字列の中に余計なスペースがあるとNG,タイムゾーンはUTC(.000Z)

公式pranetScaleのvercelデプロイドキュメント

22日目

やったこと

• Twitterのogp設定
  • 画像の表示
• アプリ完成

相対パスでは表示されない模様。

こちらのチェックツールでチェックした

一旦完成した

やりたかった奴ら

• Typescriptで書く
• OGPの動的な画像生成
• ロード中の表示切替
  • スケルトンとかスピナーとか
• カルーセル
  • 使用例にカルーセル

精進

Tips

gifを作成するときに参照

なぜか画像のパスを以下のように設定したら通った
src=public/img/idea.jpgとしたら通らない。

フォルダ構成

• pages
  • index.jsx
• public
  • img
    • idea.jpg

下のコードをindex.jsxに記載

<Image src="/img/idea.jpg" width={500} height={500} objectFit="contain" vclassName={styles.icon} />

参考

githubのリモートリポジトリのプッシュ手順

接続リポジトリの確認と削除
git remote -v
git remote rm origin

ローカルでサーバーは複数立てられることを知った。。

node.jsでテストする時には環境変数をdotenvパッケージをインストールすると便利(next.js,reactには関係ないところでのテスト)