hitode909の日記

以前はプログラミング日記でしたが、今は子育て日記です

京都の平熱を読んでたら、居酒屋「伏見」のことが書かれていて、急に、そういえば、伏見、あったな…!、と思い出した。
おばんざいを押し売りされて、どんどん食べさせられる店。
3〜4回くらい行ってたような気がする。
今思うと、こういう狭くて渋い空間に、よく足を運んでいたな。と思う。
最近はなんとなく、中の様子がわからない空間には入りたくない気分になっている。

伏見には、10年前に行ってた。その後1〜2年で閉店していたような気がする。
blog.sushi.money




2013年に出た本なので、いま見るとけっこう閉店している。

紅葉

紅葉を見まくっている。
週末は寺をうろついてもみじをジロジロ見るし、平日の昼休みにも、そこらへんの道を徘徊して、もみじを探し回っている。
家ではクリスマスソングを聞いていて、シュトーレンを食べているので、すごい変な気分になる。妻がシュトーレン買い集めるが趣味で、いま1本目を食べているのだけど、2本目と3本目のストックがすでに確保されている。
このまま紅葉の季節がずれていくと、最終的に春まで移動して、桜ともみじを同時に楽しめるようになると思う。
さらに、翌年の夏までずれて、紅葉を見ながら縁側でスイカを食べたい。













ジェネレーティブな「マサワダ」映画タイトルを生成する




今年の 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

けさ、子がTシャツ一枚で家を出ようとしていた。
玄関に出たあと、全然寒くない、とかいって飛び跳ねていたけど、同じタイミングで出てきた向かいの家の子はしっかりダウンを着ていて、それを見るなり、半袖1枚で居るのは恥ずかしい、となって上着を着始めていた。
人と違うからと言って止まらず、逆に突き進むような、パンクの精神を見せてほしい。

そういえばヘヴィ・トリップ/俺たち崖っぷち北欧メタル!(字幕版)を見た。
家のガレージでこんなふうにバンドが練習する映画があったような気がして、既視感があった。なんだっけ…。ヴォーカルは女性だった。なんてことないおばちゃんがヘビメタバンドでデビューするという内容だったような気がする。こういうときにFilmarksを使ってないことで、思い出せなくて、困る。7年前くらいに映画館で見たような気がしている。

銭湯の朝風呂に行って、そのまま植物園に紅葉を見に行ったら、ぽかぽかしていてかなり良い状態だった。
隣のベンチで転がってた爺さん(79歳)が、一年で一番いい天気だ〜って言っててピースフルだった。
きのうも韓国から来ている旅行中の爺さん(娘は33歳)に、明治って何年から開始か知ってるか?ってクイズを出されていたし、最近、爺さんに話しかけられることが多い。

銭湯からの植物園は京都に住んでて一番良かったと感じる瞬間なので、極寒になるまでは、毎週このルーティンを繰り返したい。
帰ってきて、録画していた、マツコの知らない世界を3時間くらいぶっ続けで見て、妻と子はそのまま寝ている。スーパーに、サッと食べられそうなものを買い出しに行って、帰ってきたらもう寝てた。

使うのが難しいものを使う、その結果、あまりうまくいってない、という状態を好んでいる。

鉄フライパンや鉄鍋を使うものの、めちゃくちゃひっついている。
電動でない自転車に乗っていて、電動自転車に乗る妻と出かけると、スピード差から、容赦なく置いていかれる。
床板が落書きだらけで、紙やすりで削ってみたら、元の状態よりすべすべになって、歩くとこけそうになる。
革靴の手入れをしてなくて、毎日、保育園に履いていってるので、先端が削れてきている。
オールドレンズを使っていて、ピントが全然合わない。

下手な状態なものにあわれみを感じるのが好きなのか?とか考えていたけど、そのうち上達したら良い状態になれる、という期待感があるものが好きなのかもしれない。