ChatGPTに頼めばもっと簡単にできると思ってた時期が私にもありました…。
いやま、GPTのせいではなく自分のやり方の問題だったとは思いますが…!!
というわけで前々からやろうと思っていたブログのリニューアルを実施しました。
「ChatGPTに頼んだらWordpressのテーマを丸ごと作ってくれないかな？」という思いつきから始めたんですが、蓋を開けてみると結構やることが多くて丸っと一週間ぐらいかかってしまった汗
というわけで今回はGPT先生と行くサイトリニューアル作業の備忘録的なお話。
ワイヤーフレームを元にコーディングしてもらう
というわけでこんな感じで簡単なワイヤーを作ってみることにしました。
使えるツールがPhotoshopぐらいしかないので普通のjpg画像です。
GPTによるとFigmaでも良いみたいですが個人で契約してないので諦め。
XDでも良さそうですがどうなんでしょ。
ChatGPTでプロジェクト作成、画像をアップしていざ制作開始をポチっとしてみたけど
結論だけ言うとこれでテーマ自体は作成できました。
とはいえ細かいディティールは伝わらず、ヘッダーフッターはそこまで問題ないんですがメインのコンテンツエリアはかなり手直しが必要という感じ。
ウィジェットエリアも1つしか存在していないなど完成には大分遠いって感じです。
ま、それなら手直しをお願いすれば良いだけのことです。
と思い、ここから更にGPTに指示を出してメインエリアのコーディングやウィジェットエリアの追加を指示するものの、これが地獄の入り口になるとは思いもよらず…。
地獄の無限ループ開始、1つ修正すると2つ前の修正が無かったことになる
というわけで無限修正地獄編に突入。
前述のメインエリア修正を依頼すればヘッダーが消える等々を頻発に起こす。
ウィジェットを追加させればfunction.phpへの記述ミスを起こし、それの修正指示をすれば2~3前のバージョンを参照し修正済みの項目が先祖返りする、ということを何時間も繰り返すハメになりました。
GPTの推論に時間がかかってしまったのもありましたが…。
色々格闘した結果、とりあえずワイヤーフレームから制作するというのは諦めました。
ベースのindex.htmlを作成しレイアウトだけこちらでコーディング。
指示を出しやすいように各セクションにclassを付与しておき、そのclassに対してやって欲しいことを仕様書にするという方向にシフトすることに。
Googleドキュメントで仕様書を作成し、再挑戦
こんな感じの仕様書を準備。
これと先ほどのワイヤーフレーム、制作したhtmlファイルをGPTのプロジェクトファイルにアップし、再度制作依頼をかけることにしました。
やはり機能不足は目立ちますが、html部分を自分で書いていたことや細かいclass指定をしてあったおかげで前回よりも大分イメージに近い形になりました（そりゃそうか）
再び陥る無限ループとそれの脱出方法
結局無限ループの運命には逆らえないんですよね。
仕様書に書いた機能は大分実装されていたしので制度は上がったものの結局修正を依頼すれば途中で無限ループに突入することに…。
それの対策として、安定して動いているバージョンをプロジェクトファイルにアップし、安定板から作業を再開させることで一応の対策にはなりました、どうしようもない時は会話を新しく作り直して指示書と一緒に読み込ませればOK。
とはいえ実質別の担当者になるようなものなので、コードの中身はちょっと怖いことに。
正直デザインはテーマカラー以外あまり考えてなくAIと相談しながら作ろうかな～と思ってたのもいけなかったですね。
特にCSSの中身がとんでもないことになってしまい手動でリファクタリングをしないといけないことに。
まぁリファクタリングしなくても動作自体は問題なかったものの細かい修正をわざわざ依頼するよりは自分でやった方が早い場面が多く、そのためには中身を読めるようにしておかないといけない。
勿論リファクタリングも任せたいと思ったんですが何度もレイアウトをぶっ飛ばす結果になってしまい、結局手動で直すことに汗
CSSの中身を見てみると以下のような記述がチラホラ
<!--ChatGPTが書いたCSSの一例-->
.sample{
display: block;
}
.sample{
display: none !important;
}のように自分で宣言して自分で打ち消してるという意味不明な記述も多かったし、何より同じ名前のセレクタが7個も8個もあったりして気持ち悪すぎる状況に。
これを直しつつ自分の好みにテーマを色々弄っていたら結局がっつり自分で作ることになってしまいました。
そんなこんなでリニューアルはしたけど改善することは山積み
あれから色々あってテーマは完成して今の形になったわけです。
なんかChatGPTに対する不満みたいになってしまいましたが、使わなかったら間違いなくもっと時間がかかっていた部分もあります、例えばスマホメニューの開閉はBootstrapのデフォルトとは違い全画面メニューが出ますが、これはGPT先生に作ってもらったものから手を加えたのは見た目だけ、Javascriptは一切触ってないという具合にお任せしたものをそのまま使っている箇所も多いので、まぁ一応楽は出来たといえば出来てますというぐらいかな。
とりあえず感じたのは、AIは「察する」ということが出来ないんだなぁと。
1から10まで指示をしなければ動けないのが人間に指示することの違いかなーと思いました（まぁ人間にも1から10言わないと動けない人はいますが、それはまた別のお話…）。
人間相手なら最初のワイヤーフレーム＋口頭説明でもそれなりに完結するはずですが、それは人間がある程度察してくれるからなんですよね。
とはいえ人間相手に作業を任せていればその分の労力は発生してしまうわけで、それを無くすためのAIだと思うので、対策としては「AIに向けの指示書・仕様書をしっかりと作る」ということなんだと思いました。
前述の通り資料は色々用意していたんですが、そもそも論としてまずはコーディング規約をまず覚えてもらう必要があったと思う、あまりにも無法すぎた。
指示書にももっと細かく書けることが多かったと思います、まぁそれ以前に作りながら仕様を考えるという無計画ライブ感満載の手法で作っていたのが良くないんですが…。
とりま、しっかり仕様を固めてそれを文章化することが大事（当たり前）。
というわけで色々と苦労がありましたがこの苦労話は仕事にそのままダイレクトに生かせそうではあるので、経験値稼ぎにもよかったと思います。
コメントを残す