以前、こちらの記事を書かせていただきました。
この試みはある程度上手くいきまして花火（っぽいもの）をブログに表示させるコードを書くことに成功しました。
今回はこのようなお願いをChatGPTにしてみました。
私「ブログに「２００×２００の水色の背景に白いクラゲがランダムにふわふわ泳ぐ」コードを貼りたい。コードを書いて」
以下が、HTMLとCSSを使って「200×200の水色の背景に白いクラゲがランダムにふわふわ泳ぐ」コードの例です。ブログの投稿画面でHTMLとCSSを貼り付けることで、このデザインを実現できます。
以下、ずらずらとコードが表示されました。
その後、こちらの文章が表示されました。
このコードは、div要素を使って「container」というクラス名を持つ200×200の領域を作成し、その中に「jellyfish」というクラス名を持つdiv要素を5つ配置しています。各「jellyfish」要素には、ランダムに配置するために異なる位置とアニメーションの遅延時間が設定されています。また、CSSのanimationプロパティを使って、泳ぐアニメーションを設定しています。最後に、背景色を指定するために、background-colorプロパティを使用しています。
知識の無い私でもなんかすごいことを自動でしてくれているのはわかります。
ただHTMLとCSSの表示がバラバラでよくわからなかったのでこんなお願いをしてみました。
私「ブログに貼るだけの形にまとめてくれ」
以下が、ブログに貼り付けるだけの形にまとめたHTMLコードです。このコードをブログの投稿画面にそのまま貼り付けてください。
以下、ずらずらとコードが表示されました。
しかし、そのコードを試しに動かしてみたのですが、上手くいきませんでした。
どうもChatGPTのAIは私がお願いしたクラゲをフリー画像のサイトから持ってこようとしていたらしくエラーが出てしまったのです。
そこでこんな指示を出しました。
私「他サイトの画像を使わずに描画機能を使ってクラゲっぽい形を泳がせてください」
承知しました。以下が、JavaScriptとHTML Canvasを使用してクラゲを描画し、アニメーションさせるコードです。
そして出来上がったのがこちらです。
うーん、クラゲには見えないですね……。
今回はここで断念します。
指示が悪かったのかなあ？
またいつかリベンジしたいですね。
