よこぼと申します。
超初心者です🔰

同じような初心者・初学者の方にも、
育成や普及活動を進める立場の方にも、
参考になるような記事をあげていけたらと思います。
よろしくお願いします🙇

=======================

今回は
CDLE名古屋    @徳和 貴成_core.member さんの
「チャットモンスター」を改造してみちゃいました👀

※ブログ掲載許可いただいてます







〜あらすじ〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
いつものようにチャットモンスターで遊んでいたよこぼ🐈

・・・ふと思った。

「自分で書いた絵でバトルできたら、もっと面白いんじゃないか?🤔」

ここからChat GPT(withよこぼ)の戦いが始まるのだった・・・
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜


というわけで、
チャトモンの中身の勉強も兼ねて改造してみました。

ほぼほぼAIに頼りましたが、
こんなのができましたよ!というのを紹介します!!


それでは、チャットモンスター(お絵描きバトル ed.)
はじめるぜ!!!


=======================
①最初の難関・・・それは初歩ミス

意気揚々とファイルの書き換えを始めたものの。。。
最初は全然お絵描き機能がつかない。。。


変だな。。。と思って見てみたら、
\\\違うファイル書き換えてた~/// (^o^)/


チャットモンスターはwebサーバーNGINXなるものを使って遊べるのですが、
NGINXのフォルダ直下の"html"フォルダにあるファイルを読み込むんですね。

    ↓NGINXについては徳和さんのnoteで詳しく解説いただいてます!
   
https://note.com/t_tokuwa/n/n99cda8413fd8

ところがどっこい、別の場所になぜかチャトモンのフォルダをもう1個作っちゃってたよ・・・なんでだよ・・・ずっと違うファイル編集してたよ・・・


=======================
②お絵描きできたぞ!

気を取り直して、お絵描き機能~スタンバイ!!

チャトモン・・・スタート!!!

image.png 1.61 MBおお・・・右上にボタンが・・・!!


ぽちっとな👉

image.png 894.89 KB出た!!お絵描きパネル!!!


色々調整して、カードまで作れるようになりました!やったね!
スクリーンショット 2025-10-08 232852.png 897.45 KBニジニャン。おまえ魅力カンストやん・・・


=======================
③最後の関門・・・バトルができない

お絵描き⇒カードづくり
までは順調に進んだChat GPT(withよこぼ)

だがしかし!!!バトルができない!!!
カードを生成したあとバトル画面に進まずフリーズしてしまうのだ。

そうなんです、カードを作り終わったら満足してしまうのです・・・


色々と(GPTと)相談して、特に何も考えていなかった設計を見直しました。


Player1がお絵描き
→Player2がお絵描き
    →Player1のカード生成
        →Player2のカード生成
            →バトル🔥!!


よし、こんな感じにしよう!!(いまさら)

※チャトモンはデフォルトでトーナメントバトルができる仕様なので、どうやらそことぶつかっているみたいでした


さらに、GPTさんで複数のファイルを見るのは限界がある・・・

そこで、CodeXさんに乗り換えました。
image.png 244.02 KBCodeXさんはやっぱりすごいですね。いろいろ教えてもらいました。


CodeXさんがファイルを全速力で書き換え・・・(よこぼ待機)
いよいよ、その時がきました!!!


╔════════════════╗
            バトルスタートだぜ!!!
╚════════════════╝


ここからはみなさまの脳内BGMを流してお楽しみください。

image.png 883.13 KBPlayer1:よこぼ    Player2:よこぼ

image.png 1.32 MB何回もテストして嫌になってきたので、絵もだいぶ簡略化されております

image.png 1.3 MB特にドラマチックなどんでんがえしは無く、☆5の圧倒的格上「ふわふわねこ」の勝利です


いやー、妙な達成感ですね。
やったぜ。

コーディングの知識は相変わらずほぼゼロですが、
「僕たちが簡単にゲームをする裏でとんでもねぇ量のファイルが働いてくれているんだな」
という片鱗に触れられた次第であります。


蛇足ですが
最後に、お絵描きの制限時間タイマーとかPlayer1のお絵描きが終わった後に白紙になって欲しいとかこまごましたお願いを聞いてよCodeXさん~

image.png 122.78 KB文句も言わず対応してくれるCodeXさんありがとう

image.png 855.7 KBおお、タイマーがついたぞ。枠も素材を転用してみた



いかがでしたでしょうか?
楽しみながら学べるなんて・・・

\\\||||///    
チャトモン最高だぜ!
///||||\\\

※PRではありません


というわけで次回もお楽しみに。よこぼ🐈でした。