完成したアプリ(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には関係ないところでのテスト)