今日は、まずMLBの海外の反応系ブログを1記事更新しました。
YouTubeへの動画アップは今回はスキップしたので、全体的に作業は50分くらいで終了。サクッと終わって気分よし。
そして、今メインで取り組んでいるのが「脳トレサイトの制作」です。
昨日、ようやくWordPressの構築が完了したので、今日はそこに脳トレゲームを2つ追加し、記事も1本書きました。まあまあ順調…と言いたいところですが、問題は山積み。
正直、私はJavaScriptを自分で書けないので、ゲームのコードはすべてChatGPT頼み。
でも、これがまたエラー出まくりで、ほぼ毎回「なにこれ…」ってなるやつです。結局、1つの脳トレを完成させるのに1～3時間かかるのが現状。エラーと格闘してる時間の方が長いまである。
ちなみに、今回使ってるのはReact Native＋Expoじゃなくて、WordPressのカスタムHTMLブロック内だけで完結させるJavaScript。これ、地味に厄介です。
コードを書けない私にとって、どこが間違ってるのかも分からないし、WordPressのセキュリティ設定で<script>が引っかかるとか、子テーマにJSファイルを置かなきゃいけないとか、挙げ句PHPまで書き換えろとか、いきなりハードモード突入。
でも色々調べてみたら、「カスタムHTMLブロック内だけで全部完結できる」っていう情報を見つけて、それを元にプロンプトを修正しながら、なんとか形になりました。
WPのカスタムHTML内で完結させる方向にシフト
今回の脳トレゲーム開発では、WordPressのカスタムHTMLブロック内でコードを完結させるという方針にしました。
理由はシンプルで、WordPressが<script>タグや外部ファイルの読み込みに対してけっこう厳しいセキュリティ制限をかけているから。
いちいち子テーマを編集したり、functions.phpを書き換えるのはかなり面倒だし、間違えるとサイト全体が真っ白になるリスクもある。はい、怖い。
なので今回は、以下のようなルールをChatGPTに伝えて、HTMLブロック内だけで動作するコードを出力してもらうようにしました：
<style>,<script>,<div>を1つのブロック内に全部含める- JavaScriptの初期化は
DOMContentLoadedイベントで行う - 最初は要素を非表示（display: none）にしておき、状態管理も含めて対応
- idやclassはできるだけユニークにして、他のブロックやテーマと干渉しないようにする
このやり方で再挑戦したところ、やっとエラーなしで動くコードが生成されるようになりました。
毎回、戦ってる感はすごいですが、成果が出るとやっぱり嬉しいです。
効果音をつけたいだけなのに…AudioContextとのバトル
ゲームといえば、やっぱり効果音があると全然違う。
ちょっとした「ピコン」とか「キーン」って音が鳴るだけで、脳が「あ、これゲームっぽい」って反応してくれるんですよね。
というわけで、今回の脳トレにも効果音をつけようと思ったんですが――
音が、出ない。
いや、コードは間違ってない（はず）なんですよ。ChatGPTさんも「これでいけるはず」って顔してるし、私も何回も貼り直してみたし。でも、ブラウザが無言。
調べてみると、Web Audio API（AudioContext）を使うのが今のベストプラクティスらしい。
昔みたいに<audio>タグでポンと再生、みたいなノリではなく、今はセキュリティやUXの都合で、ユーザー操作に紐付いたAudioContextの使用が推奨されているとのこと。はい、面倒くさいです。
しかも、WordPressのカスタムHTML内で完結させようとすると、このAudioContextの扱いがさらに面倒。
やれ非同期だ、やれユーザー操作イベントだ、とか…。ちょっと音を鳴らしたいだけなのに、なんか壮大なエンジニアリングしてる気分になります。
それでも最終的には、ChatGPTとCloud（の無料版）とでやり取りしまくって、なんとか2つの脳トレゲームに効果音を組み込むことに成功しました。
ChatGPTとCloudの使い分け
今回も脳トレ制作では、コードを1から自分で書くのが難しいので、基本的にChatGPTとCloud（Claud）というAIたちに丸投げしています。
でもまあ、AIだからといって完璧ではないんですよね。
ChatGPTもCloudも、コードを出力してくれるのはありがたいんですが、かなりの確率でエラー吐きます。だいたい最初のコードは「なぜ…？」ってなるやつ。修正の旅に出るのは毎回のお約束です。
ただ、使っていて感じるのは――
- ChatGPTは柔軟でレスポンスが早く、アイデア出しとか「こうしたいんだけど、どう？」みたいな相談向き。バグも出るけど、丁寧に聞けば何度でも対応してくれる。
- Cloud（Claude）は、コードの正確性や修正力がやや高い印象。特にJavaScriptやDOM操作系の処理がちゃんと通る確率が高くて、「お、やるやん」ってなる瞬間が多い。
ただし、Cloudは無料版を使っているため、1日10回くらいで使用制限に引っかかるという哀しみもあります。
そのせいで、くだらない話は一切できず、コード一発勝負みたいな緊張感が常に漂ってます（笑）
今のところ、ChatGPTとCloudを組み合わせて、2つの脳トレゲームを完成。
コード修正のたびに二人（？）を行き来して、デバッグ地獄をくぐり抜けてます。
今後の予定と、やりたいことが渋滞中
今後もしばらくは、この脳トレサイトに集中するつもり。
完成度をもうちょっと上げて、YouTubeと連動した展開も考えています。
せっかく、以前にReact Native + Expoで脳トレのスマホアプリまで作ったわけですし、それとWeb版をうまく絡めて、いろんな入り口からアクセスできる形を作っておきたい。
YouTubeでプレイ動画を出したり、解説コンテンツを上げたりするのもアリかも。
…と、目の前の作業に集中しつつも、実は他にもやりたいことが山ほどあります。
- AdStir用の広告収益サイトを立ち上げたい
- noteで記事書きたい
- SD画像生成も触ってみたい
- 自作ゲーム（rpgツクール）もいつかは本格的に作りたい（chatgptまかせ）
とにかく、頭の中ではいろんなプロジェクトが渋滞してて、どれからやるか常にパニック（笑）
でも、ひとつずつ地道に進めていくしかない。
まずはこの「脳トレ×Webサイト×動画展開」の路線を、もう少し形にしていくつもりです。
やること多すぎて脳トレになる件
というわけで、今日はMLBブログ更新から始まり、脳トレサイト制作にどっぷりハマった1日でした。
脳トレのゲーム制作、音の実装、AIとの格闘、WordPressの壁、そして謎に強いセキュリティ設定――まるでこっちが脳トレ受けてるみたいな状態です。
でも、ひとつずつ問題を解決しながら前に進めてる感じは、やっぱりちょっと楽しい。
完璧じゃなくても、自分で作ったコンテンツが動くと、それだけでちょっと報われる気がするよね。たとえ、それが1時間かけて作った「ピコッ」と鳴るだけのゲームでも。
明日もまた、AIと格闘しながら、ちょっとずつ作っていこうと思います。
作っているプロトタイプの脳トレサイトはこちら↓
コメント