生成AIを使ったテトリスゲームの開発
App Inventorでテトリスゲームを作ろうと思い立ち、いろいろと調べてみたところ、App Inventorだけで実装している記事を見つけました。しかし、その内容を見るとかなり手間がかかっており、大変そうでした。
本来、App Inventorは「簡単にスマホアプリを作る」ことを目的としたツールのはずです。それにもかかわらず、ゲームをひとつ作るのにここまで苦労するのは本末転倒だと感じました。そこで、複雑な処理はWebViewer内でJavaScriptに任せればよいことを思い出しました。
例えば、関数電卓アプリでは、複雑な計算部分をJavaScriptのライブラリで処理し、App Inventor側では結果の表示や操作部分だけを担当させることで、全体をずっと簡潔に構築できます。
そこで今回は、GoogleのGemini 2.5 Proを活用してテトリスゲームを作成します。なお、ここに掲載しているプロンプトと返答は、掲載用に改めて行った会話の内容であり、実際にゲームを作成した際のやり取りとは多少異なります。
実際に作ったテトリスゲームのチュートリアルはこちらです。
Gemini 2.5 Proとの対話
プロンプト
App Inventorでテトリスゲームを作りたい。ゲーム本体はウェブビュー内でJavaScriptで実行する。ゲームプレイ用のボタンなどはApp Inventor側で定義する。ウェブビューで使うhtmlファイルは１個にまとめる。返答
App InventorとWebViewを組み合わせたテトリスゲームですね。承知いたしました。
WebView内で動作する、単一のHTMLファイルを作成します。このファイルには、ゲームのロジック（JavaScript）、描画（Canvas）、スタイル（CSS）がすべて含まれています。
App Inventor側では、このHTMLファイルをメディアとしてアップロードし、WebViewのHomeUrlに設定します。そして、App Inventorで作成したボタンから、WebViewのJavaScript関数を呼び出す（RunJavaScriptブロックを使用）ことでゲームを操作します。
こちらが、App InventorのWebViewで使用するための単一のHTMLファイルです。