スマホだけでゲームを公開するまでに使ったもの全部紹介
前回の記事で、スマホで10分でテトリスを作った話を書きました。ありがたいことに読んでくれた方から「で、何を使ったの？」という声をいただいたので、今回は使ったツールと手順をまとめてみます。
普段はパソコンで開発しているのですが、あのテトリスは本当にスマホだけで完成させました。「スマホでもここまでできるんだ」という記録として、同じことをやってみたい方の参考になれば嬉しいです。
使ったもの一覧
まず全体像です。使ったのはこれだけです。
- ChatGPT（スマホアプリ）— 画像生成
- GitHub（ブラウザ）— コードの保管・公開
- Claude（スマホアプリ）— コードを書いてもらう
- GitHub Pages（GitHubの機能）— 動作確認用
全部スマホのブラウザとアプリだけで使えます。パソコンは一切使っていません。
手順① ChatGPTでイメージ画像を作る
最初にやったのは、テトリスの見た目のイメージ画像を作ることです。
ChatGPTには画像を生成する機能があります。「こんな配色で、こんな雰囲気のテトリスの画面」と伝えて、自分好みのデザインに近い画像を作りました。
これは必須ではありません。なくてもテトリスは作れます。ただ、完成イメージを先に用意しておくと「こういう見た目にして」と伝えやすくなるので、こだわりがある方にはおすすめです。
手順② GitHubでリポジトリを作る
次に、GitHubで「リポジトリ」を作ります。
リポジトリというのは、ファイルの保管場所のことです。パソコンでいう「フォルダ」に近いイメージで、ここにゲームのデータを入れていきます。GitHubはこのリポジトリをインターネット上に置いておけるサービスです。
スマホのブラウザからGitHubにアクセスして、新しいリポジトリ「TETRIS」をひとつ作りました。
手順③ Claudeにテトリスを作ってもらう
ここがメインです。スマホのClaude アプリを開きます。
普段スマホアプリで「チャット」を使っている人が多いのではないかと思いますが、今回使うのは「コード」の方です。
完全未経験の方であれば、たぶんこの辺りでつまずくのではないかと思うので、少し丁寧に説明します。
作業場所を選ぶ
「コード」を選んだあと、GitHubリポジトリ（今回は「TETRIS」）を選択します。
チャットと違って、GitHubリポジトリやローカルにあるフォルダなど、作業場所を指定してあげないと作業を始められません。基本的には、開いているフォルダ（リポジトリ）の中でのみ作業をしてくれます。
指示を送る
手順①で作ったイメージ画像を添付し、こう伝えました。
添付画像のようなテトリスを作ってください。スマホ縦画面でのプレイを想定しています。
これだけです。
するとClaudeから「操作はボタン式にしますか？ タッチ操作にしますか？」と質問がありました。「両方」という選択肢があったので、両方にしてもらいました。
そのあとはしばらく待ちです。
数分待つと、テトリスのコードが完成しました。Claude Code が作ったコードは、そのままGitHubのリポジトリに保存されます。
手順④ 動作確認する（ここが一番悩んだ）
コードはできたっぽいのですが、ここで問題が発生しました。
「見れない！動作確認ができない！遊べない！」
テトリスのコードは、リポジトリのindex.htmlというファイルに書かれています。
index.htmlというのは、Webページの本体のようなファイルです。パソコンで開発をするときは、「完成した」と言われたらindex.htmlを開けば動作確認ができます。
しかし、今回はスマホ。スマホだと、index.htmlを直接開く方法がありません。
コードはできた（らしい）のに、動くかどうか確認できないのです。
いくつか方法はあると思いますが、私が選んだのはGitHub Pagesを使う方法でした。
GitHub Pagesは、GitHubにあるリポジトリの中身をそのままWebサイトとして公開できる機能です。つまり、公開してしまえばスマホのブラウザからアクセスして動作確認ができます。
ただし、GitHub Pagesを無料で使うには、リポジトリを「公開」にする必要があります。公開すると、テトリスのコードが世界中に大公開されてしまうのです。
本当は非公開にしておきたかったのですが、動作確認のために一時的に公開リポジトリに変更しました。リポジトリにデータが入っている以上、これが一番手軽な方法だと判断しました。
ちなみに公開／非公開の切り替えはGitHubモバイルアプリからはできないので、Web版を開いて行いました。Pagesの設定も同様です。
設定を済ませて、ブラウザでアクセスしてみると、ちゃんとテトリスが動いていました。
まとめ：スマホだけでもゲームは公開できる
改めて、流れをまとめるとこうなります。
- ChatGPT でイメージ画像を作る（任意）
- GitHub でリポジトリを作る
- Claude にイメージ画像を渡して「作って」と頼む
- GitHub Pages で動作確認・公開する
パソコンがなくても、スマホとこれらのツールがあればゲームを作って公開するところまでできます。
ちなみに、現在テトリスは自分のサイトに移して公開しています。リポジトリを非公開に戻したかったことと、独自ドメインを使いたかったことが理由です。
3ヶ月前の私が読んだら「やってみよう」と思えるかな、と考えながら書きました。もし気になったら、ぜひ試してみてください。