今回はいつものSEO記事と異なり、ブログ記事になります。
先日以下サイトを公開しました。
このアプリケーションは、ChatGPTと協力して作成しました。私は、HTML、JavaSprict、CSSにつかったアプリ作りは未経験でなんならコードはHTMLの簡単なコードぐらいしかわかりません。
今回は、制作備忘録をまとめます。よかったら、ご覧ください。
六星占術アプリ作成の経緯
きっかけはXでとあるツイートを見たことでした。内容としては、占いについて色々言っているツイートで。（残念ながらツイートを見つけられなかったのですが。。。）
それを見て、何を思ったのかふと思った私。
「ChatGPTで占いアプリ作れないかな…。」と。
上で書いたようにHTML、JavaSprict、CSSは未経験。なんならコードはHTMLの簡単なコードしかわかりません。ですが、やりたくなってしまったのです。
早速ChatGPTを立ち上げて、制作にとりかかりました。
設計相談
ChatGPTにまずはじめに指示を出しました。
あなたはアプリケーションを作る人です。
ウェブサイトで生年月日を入力し、ボタンを押したら占い結果を吐き出してくれる占いアプリを作りたいです。と話したとこと、構成を一緒に考え始めてくれました。
ここから「HTMLとJavaSprictで作成したい」と話をしたところ、さっそく雛形を考え始めてくれました。
■ このコードのポイント：
入力された誕生日の日付と月から簡易的に結果を算出
毎回違う要素が表示されるように、リストの中からランダム風に選択
JavaScriptのみで完結しているので、サーバー不要・ローカルで動作OKここから様々な要素を考えて以下のポイントをいれる設計にしました。
構成
今回の構成は以下の通りです。
/your-theme-or-plugin-folder/
├── index.html
├── js/
│ ├── showFortune.js // 占いロジック本体（生年月日から星人タイプ・運気を算出し、メッセージを表示）
│ └── barnumMessages.js // 星人タイプ・運気別のバーナム効果メッセージ定義（全120パターン）
├── css/
└── style.css // 結果カードのデザインやアニメーション用スタイル（任意）index.htmlはそのままWordPressのHTML埋め込みを利用。showFortune.js とstyle.css はページのカスタムを利用。barnumMessages.js はWPCodeに書き込みました。
六星占術を調べる
私は六星占術については「大殺界がとにかく何をやってもうまくいかない」ぐらいしか知りません。そのため、なにか参考になるサイトがないか調べていたところ、以下のサイトを発見。
このサイトに運命数の表、星数の出し方、運命星の早見表、陰陽の早見表が画像になって表示されていたのでこれを参考にGoogle Sheetで星数表のデータベースを作成。
▼ 星数表のデータベース🔗
※ 無料公開しています。コピーして自分のGoogle Driveに格納して使ってください。
ChatGPTにこれを参照してもらう形で運命星や運勢を判断してもらうアプリケーションにすることにしました。
バーナム効果のメッセージを考える
占いといったらバーナム効果のメッセージも大事だろうと考えた私。
ChatGPTに相談した結果、
- 各星人につき5パターン
- 陰陽（＋／−）でさらに分ける（全12分類）
- 「今年の運気」に応じてメッセージを出し分け（例：大殺界なら励まし寄り）
のメッセージ構成として、全120パターン作成することにしました。
なんとこのメッセージも全部ChatGPTが考えてくれました。。。
この全120パターンをbarnumMessages.jsに書き込み、全ページのフッターに設定しました。
コード作成
さてここまでできたら、 index.htmlとshowFortune.js とstyle.css を考えてもらいます。
先でもいいましたが、コードは未経験なのでなにもわかりません。そのため、毎回全文出力してもらってました。
（お陰様でChatGPTが何度も止まったり、エラーがでたりしましたが…。 ）
言われた通りやってもうまくいかないことがなんどかありましたが、ここではその例をいくつか紹介します。
全角・半角問題
ChatGPTよ。自分で書いているなら統一してくれよ。。。
なんどか突っ込みましたが、致し方ないことです…。私の場合は、陰陽の「+」「-」が全角・半角で混ぜ混ぜになっており、まぁ読み込まない読み込まない。。。
うんともすんとも言わないときもありました。。。
でも、全文読み込んでもらって直して、うまくいかなければ直して…と繰り返して動くようになりました。同じ間違いをしないのはいいことです。
運気12周期の基本サイクルがうまく設定されない
なぜか、1個ずつずっとズレてしまい、うまく設定できず…。データベース を作成してChatGPTに貼り付けることで見てもらえるようになりました…。
完成
できたコードをそれぞれで打ち込んで何度かテストをして完成しました！！！
これをベースに今度は日別の占いアプリケーションを作成しようかな・・・。
最後までお読み頂きありがとうございました！
コメント