p5.CodingWithAIのこれまでを振り返る 2024
2024/12/22
この記事はProcessing Advent Calendar 2024 - Adventarの22日目の記事です。
年の瀬ですね。ついこの間2024年が始まって、「今年は⚪︎⚪︎をやるぞ」なんて意気込んでいたような気がします。時間が経つのは本当に早い。2024年を振り返って、充実した1年だったと感じています。色々ある理由の中でも、ご縁があり、さまざまな活動の機会をいただくきっかけとなった、拙作「p5.CodingWithAI」について書いてみたいと思います。
p5.CodingWithAIとは
p5.CodingWithAIはp5.jsによるクリエイティブコーディングのためのWebエディタです。生成AIのアシストを借りながら作品を制作できます。チャットでリクエストを送信すると、コードの変更を解説とともに提案してくれます。ユーザーはそれを受け入れるかどうかを選択していきます。
2024年8月にモバイルレイアウトにも対応しました。通勤通学中に思いついたアイデアを試すこともできます。
実際に試してみたい方はこちらからアクセスしてみてください。
https://app.kyabe.net/p5-coding-with-ai/
※ 初回のロードには時間がかかります。
これまでの歩み
2023年3月 開発スタート
2023年3月2日にOpenAIからChatGPT APIがリリースされました。このAPIを使ってなにか作ってみたいと思いました。それ以前から自作のWebエディタを作ってみたいという興味があったので、これらを組み合わせてみようとしたのが始まりです。最初のコミットは2023年3月11日でした。
一般的な用途のエディタとしてはVisual Studio Codeで満足していたので、少しニッチなものを検討することにしました。色々考えた結果、普段楽しみで書いているp5.jsのコードにフォーカスした「ぼくのかんがえたさいきょうのp5.js Webエディタ」を作ろうと思ったのでした。老若男女いろんな方に使っていただく中で形を変え、今となっては最初に目指したものとは少し離れたものになっていますが、個人的には気に入っています。
生成AIを活用してコーディングをすることは、今となっては当たり前の世界観になっています。当時は2022年11月にChatGPTがリリースされて以来、「ChatGPTというサービス」をどんなふうに活用できるのか、みんな手探りで探求するお祭りのような雰囲気だったと記憶しています。そんな中、公開されたChatGPTのAPIを使って、自分でも「AIを組み込んだサービス自体」を開発できることにワクワクしていました。AIとユーザーのインタラクションをどのように設計するかを考えるのは楽しかったです。
初めての自作Webエディタはとてもシンプルなところから始まりました。この時点ではまだAIと連携する機能はなく、コードを編集するたびに出力がちらついていました。
ChatGPTと連携した最初のプロトタイプでは、AIにリクエストするためにエディタからチャット欄にコードをコピペする必要がありました。AIからのレスポンスもスタイリングされていないプレーンテキストとして画面に表示されるだけで、自分でコードエリアにコピペする仕様でした。チープな作りではありますが、やりたかったことが実現できそうな感触と高揚感がありました。
2023年6月 Processing Community Day Tokyo 2023にて展示
2023年3月中にある程度使えるプロトタイプができたので、2023年6月27日から7月4日の間、渋谷でのProcessing Communityの展示に出展することを決めました。この展示のおかげで、自分以外の人が使うことを意識し、見た目や使用感をある程度整えることができました。現在もベースとなるデザインはこの頃から大きく変わっていません。
1週間展示する間にSNSや在廊中のコミュニケーションでたくさんフィードバックをいただけました。ヒカリエという好立地ではあるものの、8階なので狙って行かないとなかなか辿りつかない場所です。その関係か、来場されている方にはArt, Tech系の方、Demo Sceneの方も多くいらっしゃいました。「面白い」「家でも使ってみたい」などの声のほか、どうやって作っているのかに興味を持ってくれる方、実装に関するアドバイスをくださる方もいらっしゃり、とてもありがたかったです。
偶然にもこの時、のちにワークショップ運営でご一緒させていただくことになるCCBTのスタッフの方やIE3の田中陽さんが展示をご覧になっていたことを後で知り、密かに喜んでいました。
関連記事: Processing Community Day Tokyo 2023に出展中です - kyabe.net
展示後しばらくは気ままに開発
Processing Communityでの展示が終わった後は、特段大きなイベントがなかったのでしばらくはゆったりと開発する時期が続きました。友人のWebエンジニアのNaruにパフォーマンス改善やリファクタリングを手伝ってもらったりしました。スケッチの動画キャプチャ機能ができたのもちょうどこの頃でした。自分が使いたいがために実装したのですが、後々イベントなどで活躍してくれることになります。
2024年3月と5月 CCBTでのワークショップ開催
2024年3月にシビック・クリエイティブ・ベース東京（CCBT）にてワークショップを実施する機会をいただきました。プログラムを書いて、AIを使って、アニメーションを作るという欲張りな2時間のワークショップを企画しました。対象は子供から大人まで、プログラミング初心者の方向けのワークショップですが、やりたいことが多く、コンセプトづくりや構成に苦労しました。小林さんをはじめとしたCCBTスタッフの方との打ち合わせやリハーサルを経て、1つのパッケージとしてまとめることができました。
イベント情報: ひらめく☆道場 プログラミング入門 - シビック・クリエイティブ・ベース東京 [CCBT]
最初から最後まで生成AIを使ってコードを作成するだけではなく、前半は生成AIとは何か簡単に紹介するパートと、純粋にp5.jsでアニメーションを描画するコードを手で入力するパートを用意しました。AIを使う体験だけでも意味があると思いますが、AIに対するリテラシーをある程度持った状態である方が有意義だと考えたためです。また、このワークショップで初めてテキストコーディングをする方も多いので、プログラミングそのものに関心を持ってもらう余地を作りたかったのです。
写真提供:シビック・クリエイティブ・ベース東京（CCBT）
多くの方の協力のもと開催に至ったワークショップですが、アンケートでは「楽しかった」「またやりたい」といった嬉しい声をいただき、頑張りが報われた気持ちです。参加者の方はそれぞれ自分なりのやり方でAIを活用し、各々の価値観に基づいて作品をつくり上げていくところを見ることができ、ワークショップの実施は私にとっても有意義な時間でした。
写真提供:シビック・クリエイティブ・ベース東京（CCBT）
2024年5月には追加で2日間、「CCBT COMPASS 2024」のプログラムの1つとして同様のワークショップを実施する機会をいただきました。
イベント情報: ひらめく☆道場 プログラミング入門：生成AIと一緒にアニメーションをつくろう！ - CCBT COMPASS 2024
これらのワークショップの前に、p5.CodingWithAIを用いたワークショップの実績はありませんでした。そんな中、私とコラボレーションし、ワークショップを開催することを決めていただいたCCBTの皆さんの器の広さには感謝しきれません。まさに「Co-Creative Transformation of Tokyo」というミッションを体現している組織・拠点・人だと心からリスペクトしています。
関連記事: CCBTにて「生成AIと一緒にアニメーションをつくろう！」ワークショップを実施しました - kyabe.net
2024年10月 ホモ・コーデンス＠YCAMでの講演
高尾さんにお声がけいただき、2024年10月25-27日に山口情報芸術センター（YCAM）で開催されたホモ・コーデンス - AI時代人類はどう描くのかにてハンズオンセッションの講師を担当させていただきました。「AIを使った自然言語コーディング」というタイトルで、p5.CodingWithAIを使ってAIとの協働を探るハンズオンです。
写真提供:山口情報芸術センター[YCAM]
参加者のレベルが初心者から上級者まで想定されたので、少し高度なトピックを含めることに。 まずは初級者向けトピックとして、AIを活用してシンプルなエージェントを描画する作品をつくるところから始めました。Discordで参加者どうし互いに作ったものを共有し合ったのですが、同じものを目指してもアウトプットがまったく異なるものになっており、個性を感じられたのが興味深かったです。
中級者〜上級者向けトピックとして、生成AIを活用した外部ライブラリの利用を取り上げました。初めてのライブラリを使い始めるには一定の学習が必要ですが、生成AIを活用するとスムーズに利用を開始でき、効率よく学習できる、という体験をするものです。イベントの主題の一部である「AI」にちなんで、例として取り上げるライブラリとして機械学習ライブラリ「ml5.js」を選定しました。ずいぶん昔ですが、2019年にml5.jsを題材にした技術同人誌を書いたことがあり、個人的に思い入れのあるライブラリでもあります。資料を作成するにあたり久々にml5.jsを使ったのですが、当時からライブラリのAPIは大きく変わり、性能も上がっていて驚きました。参加者の方の中には最終成果として作品にml5.jsを使っている方もいました。紹介したものを気に入ってもらえるのはちょっと嬉しかったです。
参加者の方は所属も、主な活動も、居住地もさまざま。共通しているのは、AI・コーディング・創作活動への関心。熱量の高いさまざまな方面で活躍されている参加者の方々や豪華な講師陣のみなさんと、3日間のキャンプを共にできたことはとても刺激的でした。
写真提供:山口情報芸術センター[YCAM]
2024年12月 CIVIC CANVAS Vol.2: キッズ・ワークショップ
2024年12月1日に渋谷のCCBT主催の子ども向けワークショップの講師をさせていただきました。AIと協力しながらプログラミングによるアニメーション制作に取り組む、という点では前回と同様ですが、Shibuya Sakura Stageのメディアファサード「INTER-SQUARE」に自分の作品を上映するという貴重な体験ができるのが大きな特徴です。CIVIC CANVAS Vol.1ではいち参加者として参加し、作品を披露する場を持つ喜びや、展示する地域への愛着などを身をもって感じました。子供たちにも、建築やアート、技術に興味を持ってもらう入口となればいいなという思いで取り組みました。
参加者の中には3月と5月のワークショップに参加してくれた子もちらほら。もう一回やってみたいと思ってもらえたのがとても嬉しかったです。レクチャーパートはこれまでと同様の内容ですが、従来と大きく異なる点は制作パートはチームで取り組むこと。4人1組の各チームで1つのテーマを設定し、1度の上映で4人の映像が同時に流れるという仕組みです。
イベント情報: 映像上映「CIVIC CANVAS Vol.2」（CCBT×Shibuya Sakura Stage「CIVIC CANVAS Vol.2: キッズ・ワークショップ 」成果上映）
最終的に仕上がった映像は素敵なものになりました。1つ1つの映像には個性を感じますが、全体としての調和も感じさせます。上映中通りかかった親子が足を止め、じっと子どもたちがつくった作品を見つめていたのがグッときました。運営メンバーでは、子どもどうしで通じ合う魅力があるんだろうね、と話していました。見知らぬ誰かが、確かに彼ら彼女らの作品を楽しんでいました。小さなアーティストたちの誕生の瞬間です。
9時半から14時まで、休憩込みで約4時間にわたるワークショップでした。アンケートには「もう少し時間が長いと良かった」「5時間があっという間でした」とのコメントがあり、時間が短く感じるほど集中力を持って取り組んでくれました。とても印象的だったのが、みんなワークショップが終わってからもその場に20分ほど残って新しい制作を始めていたことです。子どもたちの中に新しい興味関心が芽吹いていたとしたら、これ以上嬉しいことはありません。
これまでの活動を通して考えていること
システムに色々改善を入れたい
今となってはあまり役に立たないヘルプ機能をチュートリアル機能としてリニューアルしたい。CDNからライブラリをインポートして使えるようにしたい。動画のダウンロード時にmp4エンコーディングできるようにしたい。などやりたいことは色々あるので、時間を作って取り組みたいなと思っています。
ワークショップを起点とした継続的な関わり
1Dayのワークショップとしては面白い取り組みとしてまとまってきたと手応えを感じています。一部の参加者の方がリピートしてくれていることから、表現や制作をすること、技術などに一定の興味を持ってもらうことができているのかなと感じています。ただ、ワークショップが終わった後、さらに探求して学びを深めるサポートにおいてはまだまだ不足していると感じています。
一度やってみたいと思っているのは、ワークショップで制作したものを一定期間どこかで展示し、それらを鑑賞してくれる方の反応を受けて継続的に作品をアップデートしたり、新しい作品をつくるような活動です。継続して取り組むことでものづくりやテクノロジーがより身近になり、それらの理解を深掘りできるのではと考えています。中長期的にものごとに取り組む経験と習慣付けそのものにも、社会で活動する準備として重要な意味がある気がしています。
どのように、どの程度AIを活用するのが良いかという葛藤
今後、多くのタスクがAIによって代替されていくことが予想されるので、AIを使いこなす方法を学び、経験すること自体は必要なことだと考えています。一方で、AIを使うことにより本質を理解することから遠ざかってしまう可能性もあるのではと懸念しています。例えば、コードを書くことにAIを活用することを想定すると、知識がなくてもある程度のアウトプットが得られます。中身を理解していなくてもそれなりに思ったことが実現できてしまうことから、本質を理解することへのモチベーションを抑制してしまうのではと思うことがあります。
リスクを案じる傍ら、AIを上手に活用することで学習を深くし、加速させられることを確信しています。従来よりも圧倒的に質・量・速さの観点で求めている情報を得やすくなったためです。求める情報に対して100％正確な情報は得られないとしても、文献を探したりググったりするための概念やキーワードに素早くアクセスできるようになったことは革新的です。任意の切り口の問いに対してある程度答えにアプローチできることは、リレーショナルDBのあらゆるカラムに対して都合よくインデックスが張ってあるような感覚にさえなります。
そのような背景から、現在のワークショップの取り組みでは必ずAIを使う前に人力でのコーディングを学ぶパートを取り入れるようにしています。とはいえこれが唯一の解とは思っていないので、時々刻々と変化するAI技術の進歩と社会への浸透度合いを踏まえ、自分で考えることとAIに任せることのバランスをどうコントロールするべきかを、観察と軌道修正を繰り返すしかないと考えています。
「センス」を鍛えるということ
p5.CodingWithAIを使って、AIを使って自然言語でコーディングし、作品をつくり上げる様子を何度も見てきました。その過程でプロンプトを書き、出力を見て、またプロンプトを書くことを繰り返し、コードや作品に創作意図を注入していきます。この取り組みの学習的意義はなんだろうと自問してきましたが、なかなかうまく言語化できていませんでした。AIを使いこなす、コードの書き方を学ぶということはイメージしやすいですが、重要なことが表現しきれていない感覚がありました。
先日、ソニーコンピュータサイエンス研究所研究員であり、ジェネラティブアート振興財団の理事でもあるAlexis Andréさんの「創造性を加速させるもの」という記事を読んで、とてもしっくりきました。
Alexis Andréさんが考える「創造的であること」とは、新しいものを考え出すことと、その新しいものに価値があるかどうかを評価できることで構成されるといいます。アイディアを評価するスキルである「センス」は、簡単には他人から学ぶことができず、繰り返し自分に問うことで鍛えるしかない。そして、生成システムは評価すべきアイディアを無数にかつ時間的に効率よく提示するため、「センス」を鍛えるのに実用的なプラットフォームを提供する、ということが書かれています。
記事の中から「センス」の価値についてわかりやすく説明されているパラグラフを引用します。
私はさらに進んで、「センス」は一人の人間が持つことのできる最も価値のあるスキルであると考えています。自分自身で選択する能力と、それに自信を持つことができる能力です。インフルエンサーに従ったり、外部からの承認に頼ったりすることではありません。ただ自分の、これはいいものだ，正しい、と感じる直感を信じることです。
コード修正を提案してくれる生成AIを一般化すると生成システムとして捉えられますが、まさに生成AIから提示されるコードを取捨選択し、さらにプロンプトを考える過程がこの「センス」を鍛える活動だと腑に落ちました。
頭に浮かんだアイディアをプロンプトとして言語化し、それがAIによりたちまち生成され、それらが可視化されることで、素早く自らのアイディアに対する評価を繰り返すことができます。
プロンプトから汲み取れる意図が不明瞭な場合に、またそうでなくてもしばしば起こりますが、思ったとおりの出力を得られないことがあります。このランダム性を抱えた、ある意味誤った出力に「良さ」を感じて、取り入れる場面を目にしてきました。このような自分の意図の外部にあるアイディアを評価する過程にも「センス」を鍛錬する意義があると感じています。
おわりに
2024年も大変お世話になりました。特に上述のような活動が実現できたのは、一緒に企画や運営に関わってくださった方々、p5.CodingWithAIに触れていただいたみなさまのおかげです。心から御礼申し上げます。
来年もたくさん楽しいことができればと思っていますので、ご一緒できることやお手伝いできることがあればお声がけください！