今年の Advent Calendar では、AIと一緒に「マサワダ」を主人公とした映画タイトルジェネレーターを作りました。このコードは、実行するたびに異なるタイトルとサブタイトルを生成します。「マサワダと影の覚醒」「ふたりはマサワダと未来の冒険」など、膨大なバリエーションをランダムに生み出せる仕組みです。
試行錯誤の中で一番工夫した点は、「マサワダ」を必ずタイトルに含めるルールを設けつつ、構成要素（前置き、中心のテーマ、結末）を柔軟に組み合わせられるようにしたことです。こうすることで、単なるパターン化に留まらない、より多彩なタイトルを生成できるようになりました。
作業の過程では、AIに何度も細かな要求を出し、「星座が画面サイズに依存しないように」「タイトル生成に多様性を持たせて」など、多岐にわたる指示を即座に反映してもらいました。この体験に慣れすぎると、コードレビューでも「星座が正確に見えない」「生成結果にもっとバリエーションを」など、AI相手のような厳しい要求を人間にもしてしまいそうで、少し怖い気がします。
とはいえ、こんな自由なアウトプットを受け止めてくれる場があるのはありがたいことです。masawadaさんが10年間もこのような「遊び心のあるアウトプット」を共有する場を作り続けてくれているおかげで、今年も楽しくコードを書けました。ありがとうございます！
解説
ここまでのコードと本文は、ChatGPTに書いてもらった。
冒頭のアイキャッチ画像は、このページをリロードするたびにランダムに生成される作りになっている。
ここまでの過程を紹介する。
やり取りしながら書いてもらったのだけど、こういうお願いをしている。
最初のお願い
マサワダ、という字が1文字ずつ順にフレームインしてくるかわいいアニメーションのHTMLを書いてください
最初はこれだった。以前は手でコードを書いていたけど、今回は生成にAIにやってもらいつつ、見て楽しめるようなマサワダのレタリングを作れたら良いんじゃないか、と考える。
背景に星を飛ばすなど工夫
各文字はただの文字ではなくて、縁取り、グラデーションをつかったかわいいデザインにしてください。動きに、もっと躍動感を持たせてください。
背景に、☆のような図形をちらして、それらもアニメーションさせてください。躍動感をもっと持たせて、画面外からダイナミックに飛んでくるようにしてください。立体的な効果も加えてください。文字のふちどりは別の色を使ってカラフルにしてください。
背景を工夫。
タイトルのバリエーションを増やす
文字を変えたいです。例：「ふたりはマサワダ」「帰ってきたマサワダ」「マサワダ死闘篇」のように、50種類ほどマサワダを主人公とした映画のタイトルを考えて、画面リロード時に毎回ランダムに表示させるようにしてください。
毎回変わる要素を足したいと考える。
色をランダムに変更
文字を、プレゼンのタイトルのように、画面全体に広がるようレイアウトを工夫してください。映画のサブタイトルも考え、改行を挟んですこし小さめに、2行目に出力してください。☆がすくなくてさみしいので、もっと背景装飾を増やしてください。カラーテーマを何パターンか作り、ランダムに切り替わるようにしてください。HSLをつかってコントラストが一定になるようにしつつ、hueをランダムに決めてください。
アイキャッチ画像自動生成みたいな気分になってくる。HSLをつかったランダムな色は、手でコードを書いててもよく使うもの。
背景に絵を描いてもらう
画面表示時に一度文字が表示されてから、ふたたびアニメーションで表示されてるように見えます。ワクワクして待ちたいので、1文字ずつ出てくるようにしてください。背景は、☆じゃなくて、白い直線のストロークの組み合わせで、映画の内容を抽象的にイメージしたグラフィティを出してもらえますか？グラフィティも毎回ランダムに生成してください。
ランダムな図形を描画して、出てきた模様を人間が読み解く、という形にしたいと思ってお願いした。
星座を出したい
タイトルとサブタイトルの間は改行してください。グラフィティについて、線だけだとおもしろくないので、ページロード時には、星をイメージした点がバラバラと表示されていて、タイトルの表示とともに、それらがつながってオリジナルの星座になる、というグラフィティに変更してください。
これは宇宙に見えるな、と思って、意味ありげな星座をプロットする方向に軌道修正。
星座が出ない
星同士がつながらず、星から、横に線がびよーんと伸びるだけで、星座になりませんでした。星同士を線でつなげますか？また、星座に加わらない星も配置してください。星のサイズは実際の星座をイメージして、サイズをばらけさせてください。
このへんは線が横にしか伸びなくて苦労している。コードは読まずにただお願いしてみた。
コードを読んでアドバイスしたら直してもらえた
drawLineのアニメーションでtransform: scaleを指定しているので、各要素のtransformが効いてないようです。
コードを読んで問題を指摘したら、直してもらえた。こういうことがあるので、成果物を読み解けないような物の生成にはまだ使えないな、と感じる。
線がつながってない
rotateが効きました。が、星と星がつながれているようには見えず、線の終点が無限に続き、つきぬけてるように見えます。
線と星がつながってないです。画面サイズを変えるとずれていきます。
ちゃんと星座っぽいものが出ている。古代への旅路を感じる。
タイトルのバリエーションを増やす
タイトルとサブタイトルについて、事前に分かち書きしたパーツからいくつか選んで結合するような形で、バリエーションを増やせますか？タイトルとサブタイトルはセットにならなくていいです。
タイトルに「マサワダ」はかならず含むようにしてください。「マサワダと」「マサワダに」のようなパーツのセクションを1つ用意して、前半のどこかで混ぜ込むような形にしてはどうでしょう。
このあたりで、コードの分量が多くなってきて、タイトルリストと、描画のためのコードを一度に生成してもらえなくなってきた。
また、前半のお願いは忘れられていき、ランダムな色などの仕様は抜けていっている。
手元のエディタで切り貼りが必要となり、試行錯誤の手間が増えてきたので、これで完成、ということにした。
完成版は独立したHTMLだったけど、ブログの記事内に貼るために、ちょっとスタイルの手直しなどをした。
コード×AI本によると、対話型のツールだけでなくて、エディタ内で部分的に補完してくれるようなツールを使えば、インクリメンタルに作れて、軌道修正も簡単。GitHub Copilotでやってもらえば、選択範囲だけ書き直す、ということができるのだけど、ChatGPTだけでやるほうが、コードをまるっと書いてもらう、というアツさがある。
Copilotで作るとどんな仕上がりになるか、別の機会にやってみると、楽しそう。
本文を書いてもらう
最後に、本文も生成してもらった。生成してもらうことでとくに楽にはなっていなくて、本文とほぼ同じ分量のプロンプトを書いている。目が滑るような、さっぱりした生成感を得られるのが魅力。
このコードは、「masawada advent calendar 2024」の記事として、「hitode909の日記」で公開したいです。
400文字程度の日記で、このコードの試行錯誤の記録や、工夫した点を紹介してもらえますか？
著者は、AIの使い方として、実行するたびに結果の変わる、ジェネレーティブなコードを書くのを魅力に感じています。
著者はまた、AIへの要求が今回のやりとりのように多岐にわたり、それを直ちに叶えてもらえる、という体験に慣れてしまうと、そのうち、人間へのコードレビューも、このような厳しい要求になっていくのではないか、と心配しています。
最後にmasawadaさんは10年間変わらず、このような人々のアウトプットをおおらかに受け止めてくれる場を作ってくれている事に感謝して、記事を締めてください。
やり取りのログはこちら。
同じプロンプトを流していくと同じ結果が得られると思う。
途中から方向性を変えて別の路線を探っても楽しいかもしれない。
chatgpt.com
みなさんも、「マサワダ」をお題に、生成AIにコードを書いてもらってはどうでしょう。
結果やプロンプトを見比べることで、AIの使い方の個性とかテクニックを知れるかもしれない。
この記事は、masawada Advent Calendar 2024の3日目でした。
adventar.org
