AIで作ったオセロゲームをスマホで遊べるようにするぞ｜GitHubで公開

この記事は、スマホでAIで作成したゲームをプレイしたい、ブラウザゲームをスマホアプリ化したいと考えている人向けです。

本記事を読みつつ、実際の作業を並行で行った場合、30分以上要することもあると思いますので、その点はご容赦ください。

以前の記事で、AIを使ってHTML版オセロゲームを作成してみました。しかし実際に作ってみると、次にやりたくなるのはやはりスマホ対応です。

スマホアプリ化の作業フロー、本記事の対象作業

現在のゲームの主戦場はブラウザというよりスマホですよね。

また、以下のことを考えて、スマホアプリ化を目指しました。

• スマホアプリが世に公開されるまでの手番を把握したいため
• 将来的に作成してみたいRPGもスマホをイメージしているため
• 家族や知人にゲームプレイしてもらうのにスマホがお手軽と考えたため

大きな流れは下図のようになります。

①は第一回の記事でオセロゲーム作成済（第一回の記事はこちら）となります。

②は第二回の記事でTWA環境構築済（第二回の記事はこちら）となります。

本記事は③を対象としています。

GitHubとは？

GitHub公式サイトは GitHub となります。

個人的には名前は聞いたことがあるものの、 「実際に何をするサービスなのか」はよく分かっていませんでした。

GitHubは、プログラムやゲーム素材などの 「ファイル管理・公開・共有」 を行うためのサービスです。

世界中の開発者が利用しており、 個人制作のスマホゲームやHTMLゲームの配布先としても非常に人気があります。

GitHub リポジトリ作成

アカウントを作成したら、GitHubにログインします。

ダッシュボード画面になりますので、上段メニューから「Repositories」を押下します。

すると下図画面に遷移しますので、緑色の「New」ボタンを押下します。

リポジトリ作成画面に遷移しますので、それぞれ必要な情報を入力します。入力後、画面下の緑色の「Create repository」ボタンを押下します。

無事に作成完了すると、先ほどのリポジトリ画面に作成したリポジトリが表示されます。

GitHub ファイルアップロード

作成したリポジトリを選択すると、下図画面に遷移します。 （下図は既にファイルアップロード済なので、HTMLが表示されています。本来はファイルは存在しません。）

「Add file」を選択し、選択肢が表示されるので、その中から「Upload Files」を選択します。

下図画面に遷移するので、この画面から作成したゲームファイルをアップロードします。 この際、メインのHTMLはindex.htmlとしてアップロードすることをお勧めします。

ファイルアップロード完了後、画面左下の緑色の「Commit changes」ボタンを押下します。

GitHub Pageの設定変更 HTMLゲームを公開する設定

次は下図画面から上段メニューの「Settings」を押下します。

下図の設定画面に遷移しますので、遷移後、左メニューの「Pages」を押下します。 その画面のBranch項目をNone→mainに変更して、「Saveボタン」で保存します。

GitHub 公開したURLの確認

以上の作業が無事に完了していると、下記にアクセスするとゲーム表示されます。

◆index.htmlの場合

https://ユーザー名.github.io/othello-game/

◆index.html以外の場合

https://ユーザー名.github.io/othello-game/xxxxx.html

下図のように一般公開された形になります。ブラウザゲームとして、上記URLにアクセスすると誰でもプレイ可能ですよ！

今後やりたいことは以下の内容です。

• ④〜⑥のスマホアプリ化対応（PWA化など）
• BGM・効果音の挿入
• 広告の挿入
• GooglePlayへの登録

FAQ

GitHub Pagesは無料ですか？

はい。HTMLサイトを無料で公開可能です。個人ゲーム制作との相性が非常に良いです。

PWAとは何ですか？

Webサイトをアプリのように扱える技術です。ホーム画面追加や全画面表示が可能になります。