この話は…2024年1月あたりから、始めたいと思います。
私はCDLE名古屋のリーダーという事もあり、CDLE各グループリーダーやコアメンバーの方々とのオンラインミーティングに参加する立場にあります。
ミーティング開始時間は20時あたりが通例なのですが…子育てや家事を行なっていると22時近くになり、思うようにミーティングに参加できない日々が続いていました。
そんな感じで過ごしていましたが…今年（2024年）の１月あたりに、現CDLE名古屋のサブリーダーである宮野さん（@Kota Miyano ）より
「代わりにオンラインミーティングに参加しますよ！」
という話をいただきました。本当に大変ありがたいお話です。
そのような経緯で宮野さんにオンラインミーティングに参加いただいていたのですが…そのミーティングで、こんな話が出ました。
3/14・15に実施されるAismileyの「AI博覧会」へのCDLEの参加が決まりました。LT会の実施と、余力があればブース出展しそうです。
また、3/23・24に実施される「東京AI祭」にも何か出展などで出ようという話になりました。
CDLE名古屋で噛んでもよいという話はもらったので、うち起点で何かやってもよさそうです
CDLE名古屋ではイベントは参加したいメンバーが多いので、「おおっ！」なんて思って聞いたりしていました。
その翌週、詳細がオンラインミーティングで語られるかと思ったのですが…場所（URL）が直前に変わった事により、私から宮野さんに伝えられず参加出来ませんでした。過渡期にはまぁ良くある話です。
仕方ないので、ミーティング後に議事録を眺めたりしていたのですが、そこに書いてあったのが…
3/23-24
東京AI祭@渋谷
・………
・チャトモン
「チャトモン！」
聞き覚えのある単語が書いてあります…
チャトモンってあのCDLE名古屋でイベントをやったチャトモン！？
※参考資料
チャトモンはCDLE名古屋のコンテンツになります。
ですが…何の話も聞いてない状態でしたので…私と宮野さんは
「これはいったいどうなっているんだ！？」
と非常に興奮状態。
しばらくして、コアメンバーのためさんより正式に
「CDLE企画としてチャトモンをやろう！」という話になっています。CDLE名古屋として参加いただくのはもちろんOKなのですが、運営側としても参加できませんか？
という話が来ました。
おぉ！そういう話になっていたんですね！
…と納得いたしました。
ご評価いただけるのは嬉しい限りです✨
そして、CDLE名古屋としてもチャトモンを広げようとしていて…次の手をどうしようかと考えているところでした。それもあり、このような具体的な話がくるのであれば…もう…これはノルしかない！
という感じで、速攻「Ok!!」の返事をしました！
このあたりのスピード感は大事ですね✨
そんなこんなで…東京AI祭の運営でありCDLEメンバーでもある「大川さん」とCDLEコアメンバー、そして、CDLE名古屋の徳和と宮野さんでイベントの詳細を決めるオンラインミーティングを定期的に行う事になりました。
会議の開始時間については、ワガママ言ってCDLE名古屋の標準オンラインミーティング開始時間である22:00からとさせていただきました。
さて、チャトモンはお話をいただいた時点では、Web版ChatGPTを使ったモンスターバトルゲームでした。そして、プロンプトを入力しなくても良いようにGPTsも作成していました。
しかし…Web版のChatGPTは非常にレスポンスが遅い時があり、安定して動かないという問題があります。現実として、リアルイベント時にはエラーが続出しました。
なので、安定して動かすには…プログラムを組み、そこからOpenAIのAPIを呼び出すような…アプケーションを作成するなどの対策が必要であると考えていました。
そして…この時点で「何も作ってはいませんが」どうすれば良いかの具体的なイメージは頭の中にありました。
このような感じです。
１．不安定なWeb版ChatGPTではなく、OpenAIのAPIで動かす。
２．グラフィックなどを追加、見た目を良くしてゲームっぽくまとめる。
３．とりあえずイベントで安定稼働する事を目的とし、広く使ってもらうサービスにはしない。
４．SunoAIにハマっていたので、音楽は絶対に入れたい！
この中で重要なのはどれでしょうか？
こういう面倒な事を行う時に重視するのは…私の場合、「モチベーション」です！
仕事でお金を貰っている訳ではないので…凄くやりたくて楽しい部分から手をつけなくては続きません。
なので…
「４！です！」
とにかく4は必須にしながら、最も手数をかけない方法を模索します。
正直ゲームプログラムなんてもう10年ぐらいはマトモに作っていない気もします。
PygameZero、Unityとかいろいろ候補はありますが…私の本職はWebシステムのエンジニアです。ですので、やはり…最も慣れた環境で着手しようと考えました。
作ると決心すれば、即座に手を動かしての検証です！
早速、Webブラウザで音楽が自由に流せるか？の検証を行います。
全て自前で実装するのはシンドイので何かしらのオープンソースのライブラリを使いたいところです。Babylon.jsなどいろいろなライブラリがあるなか、私が選んだのは…
Phaser！になります！
音楽もグラフィックも自由自在！凄く楽々に作れます！いい時代になったものです。軽く検証して…
「これはいける！」
という結論を下しました。
音楽を鳴らしたり止めたり自在に動かしていると楽しくなってきて…これでもう、Webで実装することが確定です！
このような経緯があったため、東京AI祭の運営の大川さんとの打ち合わせで…
「チャトモンは綺麗なグラフィックと音楽がつくことにより、非常に見ていて楽しいものになります！」
なんて宣言しました。現物がないのにMS-DOSを売ってしまったビルゲイツみたいに自信満々に語ってしまいました（笑）
これがきっかけで…なんと！最大200人ぐらい入る会場でチャトモンイベントを行う方向で進めていただく事になりました✨
この宣言は自分を追い込むためにも必要でした。確かに完成させる自信はありましたが…余裕があるとサボってしまうタイプなので、完成はいつでも良いなどと余裕をかましていては完成出来ません。短期集中決戦です！
そうは言っても、毎回このようなサーカスやっていたら…いつかは痛い目を見そうです。本当に「ここぞ！」というとき以外には使わないようにしたいものです。
さて…
ここでWebブラウザで動かすアプケーションについて簡単にご説明したいと思います。
Webアプリケーションは一般的に「フロントエンド」と呼ばれるブラウザ（HTMLとJavaScript）で動くものと、「バックエンド」と呼ばれるクラウドなどのサーバー（JavaやPHPやPythonなど）で動くものがあります。
Phaserが良い感じなので、フロントエンドはこれを使えば良いのですが…問題はバックエンドです。バックエンドはどこかのサーバー上で動かさなくてはなりません。
ローカルPC上で動かすのもアリなのですが…このスピード感だと環境構築が面倒なのでクラウド上で動かしたいです。
AWS（Amazon Web Services）あたりが最も有名ですが…Amazonは契約していないので慣れていないというのもあります。Googleであれば、Google Colabの有料版を使ってますし、GCP（Google Cloud Platform）の無料枠が使えるので…これを選択しました。
TEAM EXPO共創チャレンジで、生成モデルのリーダーである矢野さんがマッチングアプリで利用していたというのも、参考にしました。
GCPはツールがあり、簡単にサーバー上にプログラムを配置出来るので非常に便利です！
ですが…それでも、毎回サーバーにプログラムを登録するのは面倒です。特にテスト段階だと不具合が出るたびサーバーに登録なんて…やってられません。
ならば、デバッグするためにローカルで環境を整えるのか？…というのもやはり面倒なので、Google ColabでWebアプリ環境作ってテストしていくことにします。
その環境であれば、まぁまぁサクサクとプログラムを作る事が出来るようになりました。それでも…そもそも、フロントエンドとバックエンドが別れていること自体、テストとデバッグが面倒なんですよね。
なので、「フロントエンドだけ」ならローカル環境だけで完結出来るので、先フロントエンドを作り始めて…なるべくフロントエンドにプログラムを集中させるように実装していきました。
その結果…
「バックエンドのプログラムがなくなりました！」
これは、かなり衝撃でした！
「AWSもGCPもAzureも要らないじゃん！」
これが実現出来たので…行えることの幅がすごく広がりそうです✨この事については、今後、別のところで説明したいと考えています。
このようにして、フロントエンドのみでプログラムを書いていきます。
システム全体のラフスケッチを書いて開発の着手を決めたのが2月5日、ほぼ完成して（内部メンバーのみで）インターネットに公開したのが2月20日。仕事もフルであって家庭のこと（家事など）もあって…約２週間で技術的な調査から始め、仕様から実装まで全て含めて完成です。決して楽な道のりではなかったですが…絵も音楽もAIで作成、プログラムの70%ぐらいAIで作成しているので、生成AIがなければ実現出来ていなかったです。
「生成AI万歳！」
ですね！
そんな中、東京AI祭とは別のチャトモンイベントの話があり、そちらのイベントの方が先に行われる事となります。東京AI祭の準備と並行して、そちらにも集中することになります。
このイオンでのイベントは２日間で計１２時間行われたのですが…チャトモンのWebアプリは一度の不具合もなく動きました！
本当は、東京AI祭用にもう少し作り込もうと思っていたのですが…この安定感を維持するため、この時点でのアプリの微調整で行くことに決めました。
このイベントの様子は下記のブログを見ていだけたらと思います。
※外部公開されていないブログになります
さて、イオンのイベントも終わり、一般には知名度が低いCDLE名古屋が…いきなり東京AI祭で200人ぐらい入る会場でのイベントを行うことになります。
「３人ぐらいしか集まらなかったらどうしよう…」
という不安がよぎります。イベントの告知や宣伝をしようにも普段名古屋にいます。名古屋で宣伝しても恐らく来てくれる人は皆無でしょう。
告知や宣伝するなら、響く場所でしなくてはなりません。そんな場所簡単には…
「ありました！」
ここです！
「CDLE Special Weeks 2024 春」が開催される「AI博覧会」です！
東京AI祭の10日程度前であり、AIに興味がある人が集まるイベント…さらにはCDLEメンバーはLT（ライトニングトーク）も出来る！
こんなピンポイントで告知できる場所は他にはありません！
そのため、CDLEコアメンバーにAI博覧会でのLT会参加を軽く打診してみたところ、歓迎いただけるような感じでしたで、サクッと３月１４日に東京に行くことを決めました！
AI博覧会でチラシ（stdio vecoの伊藤さん作成）も置いてもらえる事になり、東京AI祭の運営の大川さんに刷っていただき準備万端です！
AI博覧会の様子については @NAO さんのブログを見ていただけたらと思います。
AI博覧会では初めての方、お会いした事のある方などなど、多くの方々とお話できて非常に楽しい時間を過ごさせていただきました。
ありがとうございました！
…話を東京AI祭に戻したいと思います。
東京AI祭で戦わせるモンスター画像をどうするかは、チャトモンを行うと決めてからの課題でした。会場で募集するなど様々な意見が出ましたが、どれも現実的ではなく、最終的に…
・東京AI祭のキャラクターとCDLE名古屋のグリーザーを戦わせる
・それ以外はCDLEでモンスター画像を募集する
に決まりました！
そして、CDLEコアメンバーの@midcentury（小野寺） さん主導で東京AI祭のモンスター画像を募集していただきました！
※外部公開されていない記事になります。
多くの画像をご投稿いただき、皆様、本当にありがとうございました！
そして、東京AI祭！
初日…チャトモンイベントの前日。
チャトモンイベントのモデレーターのとなる「おざけん」さんは非常にお忙しい方で、なかなか当日までお話が出来ませんでした。そのため、急遽お話をすることになりました。
このあたり、事前の調整が上手くいかなかったりなど、バタバタしましたが…宮野さんが事前に送ったタイムスケジュールを見ていただいて…なんとか進められそうな雰囲気になりました。
こういう所は、本当に宮野さんは素晴らしく頼りになると感じました✨
このイベントは本来であれば、開催前の平日にリハーサルをするのが通常なのですが、CDLE名古屋メンバーは何度も東京には来れません。それもあり、東京AI祭の初日、チャトモンイベントの前日の夕方にリハーサルを行うことになりました。
非常にスタイリッシュなステージに少し緊張しますね💦
無事リハーサルを終え、その夜、集まった皆で飲み会andお馴染みのNoodle名古屋！という事で、ラーメンなんかをいただき、明日の本番に備えます🍜
東京AI祭の２日目…2024年3月24日…チャトモンイベント当日ですね！
チャトモンのイベントは渋谷ストリームホールの6Fの会場で16:00〜16:45に開催されました。
会場に集まったのが３人だったらどうしよう…という心配は杞憂だったようで、100人を超える人数…立ち見が出るほどの方々に来場いただけました。
イベントが開始され…まずは自己紹介。少し噛みましたが…まぁ滑舌悪い方なのでこんなもんです💦
おざけんさんと宮野さんの軽快なトークによりイベントが進行していきます。
まずは東京AI祭のキャラクター「saiちゃん」と我らがCDLE名古屋が誇る愛すべき最弱モンスター「グリーザー」との闘いです！
この「saiちゃん」というキャラクターは事前に能力値がどのように出るかを検証していたのですが…★１から★７ぐらいまで…非常に強さにブレが出るキャラクターです。東京AI祭のキャラクターが簡単に負けてしまうようではマズイので…能力値が低くならないよう事前に能力を確定しておきました。
その甲斐あって、「saiちゃん」は無事勝利をおさめました。もちろん、戦い自体は裏で操作してませんw
次は、何かに似ている？「パチモン」同士の対決です！生成AIは、著作権問題などで世間で騒がれていますので、非常に攻めた企画になります。
ここからは投稿いただいた画像から４枚を運営メンバーが選び、会場の挙手に戦うモンスターをひとつ選んでいくという流れになります。
こちらの４枚から１枚…
会場の挙手でNo.4に決まりました。
パチモンは8枚必要でしたが応募が少なかったため、採用率が高かったです。ここが狙い目でしたね。
そしてこちらの４枚から１枚…
こちらはNo.3に決定！
どこかで見た事があるようなキャラクターですが、刀を持って空を飛んでいるキャラクターは沢山いますので…まぁ、気のせいでしょう。
勝負は接戦になりました。
ずっと「空を舞う兵士」が有利でしたが…最後は「赤いスーツの宝石泥棒」の一撃で勝負あり！という感じでした！
戦いの過程はAIが決めているので、いきなり即死の攻撃が出たりする事もあり、見ていて油断ができません。
最後は「強そうなキャラクター」vs「生活用品」です。
まずは強そうなキャラクターですね。これは斬新なデザインが評価されたのか…
No.4に決まりした！かっこいいです！
そして、生活用品です。
みんな絆創膏に目が行きます。これ、勝てないだろうけど戦ったらどうなるんだ？…と。
結局は少し強そうなNo.4の「洗濯バサミ」が選ばれました。
…戦ってみたら洗濯バサミは瞬殺。
時間が余りました。
みな、絆創膏が気になりますよね！
そこは、さすが「おざけん」さん、
「絆創膏でもう一戦やりましょう！」
という提案をいただきました。
先程の強そうなキャラクターと絆創膏の対決です！
この戦いは一瞬で決着がつくかと思いきや…
何度攻撃されても回復してくる絆創膏、思わぬ善戦に会場も盛り上がります。会場が一体となり絆創膏を応援します！
長い戦いの末…絆創膏は破れました。しかし、この絆創膏の活躍により会場は非常に盛り上がります。
最後はCDLEの紹介、そして、登壇者が一言づつ話してイベントは終了となりました。
多くの皆さんのご協力があり、会場は非常に盛り上がって終わることが出来ました。
皆様、本当にありがとうございました！
なお、会場の写真は@しゅーもん さんに撮影いただいたものを使わせていただいております。
最後は運営メンバー皆で打ち上げです！
長い戦いを経て、ようやくひと区切り。新しくコアメンバーになった方々との絆も深まり非常に充実した数ヶ月間だったと思います。
最後に…
せっかくご応募いただいたモンスターを対戦させないのは勿体ない！…ということで、私の方で投稿モンスター最強決定トーナメントを行わせていただきました。
全てのモンスターは難しかったのですが、「強そうなモンスター」を中心に、ほぼ応募された全員のモンスターは網羅できているかとは思います。
トーナメントの組み合わせは、私の方で強いモンスターが固まらないように決めさせていただきました。
「最強はどのモンスターか！？」
長い動画にはなりますが、下記の動画をぜひ！
ご覧下さい！！