2024.06.09

【生成AI自分教材化シリーズ】ChatGPTで爆速でスマホアプリを開発する3【ホーム画面の開発編】

きたたく

こんにちは、IT博士のきたたくです。

今日のブログでは、ChatGPTを活用したアプリ開発について詳しくお話しします。

特に、アプリ開発に悩む方々のために、Unityを用いたアプリ開発に焦点を当てます。

この情報は、個人でアプリを開発し、収益化を目指す方にとって非常に有益です。

ぜひ最後までお読みいただき、アプリ開発の参考にしてください。

きたたく

本記事の信頼性

スマホアプリ開発会社を創業&売却
個人開発アプリで新着有料ランキング4位を獲得
これまでに40以上のアプリを開発

ChatGPTに開発のステップを示してもらう
ステップ1: プロジェクトのセットアップ
- Unityのインストール
- 新しいプロジェクトの作成
シーンとUIの設定
- シーンの作成
- UIの設定：ホーム画面
ホーム画面で言語を選択する
スクリプトの作成
- - LanguageManager.cs
- SceneController.cs
ローカライズ設定
イベントの設定
- LanguageManagerのアタッチ
TMPで日本語を表示する
SceneController.csのアタッチ

ChatGPTに開発のステップを示してもらう

きたたく

あなたはプロのアプリエンジニアです。
上記の設計をUnityで実装するためのステップを示してください。

ChatGPT

ステップ1: プロジェクトのセットアップ

Unityのインストール:
- 最新版のUnity Hubをインストールし、Unity Editorをインストール。
新しいプロジェクトの作成:
- Unity Hubを開き、「New Project」をクリックしてプロジェクトを作成。テンプレートとして「2D」を選択。

ステップ2: シーンとUIの設定

シーンの作成:
- 「Assets」フォルダで右クリックして「Create」→「Scene」を選択し、必要なシーン（ホーム画面、オープニング選択画面、学ぶモード、テストモード）を作成。
UIの設定:
- ホーム画面: ボタンを配置して、オープニング選択、学ぶモード、テストモード、設定へのナビゲーションを実装。
- オープニング選択画面: ScrollViewとボタンを使用して、オープニングのリストを表示。
- 学ぶモード: チェス盤（GridLayout）と解説テキストエリアを配置。
- テストモード: チェス盤と2択ボタンを配置。

ステップ3: スクリプトの作成

シーンの遷移スクリプト:
- 各シーンへの遷移を管理するスクリプトを作成。SceneManager.LoadScene("SceneName");を使用。
チェスロジックの実装:
- Chess.jsを参考にしてチェスのロジックを実装するスクリプトを作成。
学ぶモードのスクリプト:
- ユーザーの操作に応じてチェス盤を更新し、解説を表示するスクリプトを作成。
テストモードのスクリプト:
- 2択の質問を生成し、ユーザーの回答をチェックして結果を表示するスクリプトを作成。

ステップ4: 言語対応

ローカライゼーション:
- Unityのローカライゼーションパッケージを使用して、日本語と英語の言語対応を実装。LocalizationSettingsを使用して言語の切り替えを管理。
- 各テキスト要素にローカライズされた文字列を設定。

ステップ5: データベースとバックエンドの設定

データベースの構築:
- MongoDBなどのNoSQLデータベースを使用して、オープニングのデータとユーザーデータを保存。
バックエンドAPIの構築:
- Node.jsとExpressを使用してRESTful APIを構築し、アプリとデータベースのやり取りを実装。

ステップ6: テストとデプロイ

ユニットテスト:
- 各機能のユニットテストを作成して、ロジックが正しく動作することを確認。
統合テスト:
- アプリ全体の動作を確認するための統合テストを実施。
ビルドとデプロイ:
- iOSとAndroid向けにビルドを行い、それぞれのストアにアプリを提出。

上記のステップを1つずつ実行していきましょう。
本記事では、UIの設定(ホーム画面)までを解説します。

ステップ1: プロジェクトのセットアップ

プロジェクトのセットアップでは、Unityのインストールと新しいプロジェクトの作成の2ステップを行います。

Unityのインストール

Unityとはゲームやアプリを簡単に開発できる無料のツールです。

Unityのインストール方法は以下の記事を参照ください。

本記事では、Unity推奨の2022.3.31f1を使用します。

新しいプロジェクトの作成

UnityHubを起動します。

画面右上の[New project]をクリックします。

テンプレートから[2D]をクリックします。
[Projectname]にご自身で決めたプロジェクトの名前を入力します。
- 今回は例として[ChessLearning]と入力します。
[Create project]をクリックします。

シーンとUIの設定

ChatGPT

ステップ2: シーンとUIの設定

シーンの作成:
- 「Assets」フォルダで右クリックして「Create」→「Scene」を選択し、必要なシーン（ホーム画面、オープニング選択画面、学ぶモード、テストモード）を作成。
UIの設定:
- ホーム画面: ボタンを配置して、オープニング選択、学ぶモード、テストモード、設定へのナビゲーションを実装。
- オープニング選択画面: ScrollViewとボタンを使用して、オープニングのリストを表示。
- 学ぶモード: チェス盤（GridLayout）と解説テキストエリアを配置。
- テストモード: チェス盤と2択ボタンを配置。

シーンの作成

必要なシーンを作成します。

シーンは以下の画像の[+]ボタンをクリックして、[Scene]をクリックすると作成できます。

また、作成したシーンを[Command+D]で複製できます。

シーンを1つ1つ作るよりは複製した方が早く作れるためお勧めです。

今回は[Assets/Scenes]フォルダに以下のシーンを作成しました。

HomeScene:ホーム画面
OpeningScene：オープニング選択画面
LearningScene：学習画面
ChallengeScene：テスト画面

[SampleScene]は最初から用意されていたシーンです。

UIの設定：ホーム画面

[HomeScene]をダブルクリックして、[HomeScene]を開きます。

[+]をクリックし、[UI->Panel]をクリックします。

以下のように[Canvas]と[Panel]が配置されます。

現在、画面が横画面になっているため、縦画面に設定します。

まずはUnityの左下の画面の[Game]タブの[16:9 Aspect]をクリックして、[SmartPhone(9:16 Aspect)]をクリックします。

次に、スマホアプリを作る場合、画面サイズが機種によって異なるため、自動で調整するようにします。

[Hierarchy]の[Canvas]をクリックします。

Unity画面の右の[Inspector]画面の[UI Scale Mode]の[Scale With Screen Size]を選びます。

これは画面サイズによって見た目を拡大、縮小する設定です。

9:16にするため、X=1080、Y=1920を入力します。

調整手法を選ぶ[Screen Match Mode]で[Expand]を選びます。

これで画面設定は完了です。

ホーム画面で言語を選択する

以下のプロンプトをChatGPTに投げます。

今回、言語は英語と日本語のみの対応予定のため、言語切替はドロップダウン式のUIではなくボタン式を指示します。

きたたく

あなたはプロのUnityエンジニアです。
ホーム画面で、日本語か英語かを選択し、スタートを押すとオープニングシーンに移動するシーンの作り方をステップごとにおしえてください。
言語選択ではDropdownではなく、ボタンで言語を切り替えます。

ChatGPT

ステップ1: プロジェクトのセットアップ

Unityのインストール:
- 最新版のUnity Hubをインストールし、Unity Editorをインストール。
新しいプロジェクトの作成:
- Unity Hubを開き、「New Project」をクリックし、「2D」テンプレートを選択してプロジェクトを作成。

ステップ2: UIの配置

ホーム画面のUI作成:
- 「Assets」フォルダで右クリックし、「Create」→「Scene」を選択し、「HomeScene」と名付けます。
- 新しいシーンを開き、Canvasを作成（右クリック→「UI」→「Canvas」）。
- Canvasの中にTextを作成し、「Select Language」と表示。
- 言語選択用のボタン（日本語と英語）を作成（右クリック→「UI」→「Button」）。
- スタートボタンを作成（右クリック→「UI」→「Button」）。

ステップ3: スクリプトの作成

言語管理スクリプト:
- 「Assets」フォルダで右クリックし、「Create」→「C# Script」を選択し、「LanguageManager.cs」と名付けます。
- 以下のようにスクリプトを編集します：
シーン遷移スクリプト:
- 「Assets」フォルダで右クリックし、「Create」→「C# Script」を選択し、「SceneController.cs」と名付けます。
- 以下のようにスクリプトを編集します：省略

ステップ4: イベントの設定

LanguageManagerのアタッチ:
- Canvasに「LanguageManager.cs」をアタッチし、日本語ボタンに「SetJapanese」メソッドを、英語ボタンに「SetEnglish」メソッドを設定。
SceneControllerのアタッチ:
- Canvasまたはスタートボタンに「SceneController.cs」をアタッチし、スタートボタンの「OnClick()」イベントに「LoadOpeningScene」メソッドを設定。

ステップ5: ローカライズの設定

ローカライズパッケージのインストール:
- 「Window」→「Package Manager」を開き、「Localization」を検索してインストール。
ローカルの設定:
- 「Window」→「Asset Management」→「Localization Tables」を選択し、言語ごとにローカルファイルを設定。

ステップ6: シーンの作成と設定

OpeningSceneの作成:
- 「Assets」フォルダで右クリックし、「Create」→「Scene」を選択し、「OpeningScene」と名付けます。
- シーンを開き、チェス盤やその他のUI要素を配置。

ステップ7: テストとデプロイ

テスト:
- Unityエディターでゲームを再生し、言語ボタンを押してスタートボタンをクリックし、シーンが正しく遷移するか確認。
ビルドとデプロイ:
- 「File」→「Build Settings」を開き、iOSまたはAndroidを選択してビルドを行い、デバイスでテスト。

これらのステップに従うことで、言語選択とシーン遷移が正しく実装されたチェスのオープニング学習アプリをUnityで開発できます。

ステップ1: プロジェクトのセットアップはすでに完了しているため、ステップ2: UIの配置から実行します。

Canvasの中にTextを作成し、「Select Language」と表示。

[Hierarchy]で[Canvas]を選択します。

[+]ボタンをクリックし、[ui->Text-TextMeshPro]をクリックしTextを作成します。

初回は以下のTMP Importerのウィンドウが開きます。

[Import TMP Essentials]をクリックします。

インポートが終わったら、✕ボタンをクリックしてウィンドウを閉じます。

[Hierarchy]の[Text(TMP)]をクリックします。

Unity画面右の[Inspector]ビューの[Text Input]のSelect Languageと入力します。

[Scene]ビューの左側の矢印をクリックします。

[Scene]ビュー内のテキストをクリックすると矢印がでるため、パネルの真ん中に配置します。

文字が改行されて表示される場合は、黄色い矩形の周りにある白い□をドラッグすることで文字の表示領域を広げることができます。

文字が小さすぎるため、文字サイズを調整します。

Unity画面右の[Inspector]ビューの[Text Input]の[Font Size]を80に設定します。

ついでに[Alignment]も中央揃えに設定しておきます。

[Game]ビューで確認します。

言語選択用のボタン（日本語と英語）を作成

[Button]を作成します。

[Button->Text(TMP)]をクリックし、[Text Input]にEnglishと入力します。

ボタンのサイズを調整します。

[Scene]ビューで、[Rect tool]をクリックします。

ボタンの外枠をドラッグすることでボタンの大きさを調整できます。

ちなみに、[Scene]ビューの拡大は、マウスのホイールで調整できます。

[Button->Text(TMP)]をクリックし、[Fontsize]を80に設定します。

この作成したボタンを複製（Command+D）して日本語用のボタンも作成します。

複製すると同じ位置に重なってボタンが作成されます。

[Scene]ビューで複製したボタンをずらしましょう。

新しく作成したボタンの[Text Input]にJapaneseと入力します。

スタートボタンを作成

同様にボタンを複製して、スタートボタンを作成します。

[Hierarchy]ビューのボタンの名前を変更しておきます。

項目名を長押しすることで、編集できます。

スクリプトの作成

ChatGPT

ステップ3: スクリプトの作成

言語管理スクリプト:
- 「Assets」フォルダで右クリックし、「Create」→「C# Script」を選択し、「LanguageManager.cs」と名付けます。
- 以下のようにスクリプトを編集します：
シーン遷移スクリプト:
- 「Assets」フォルダで右クリックし、「Create」→「C# Script」を選択し、「SceneController.cs」と名付けます。
- 以下のようにスクリプトを編集します：省略

LanguageManager.cs

ダブルクリックするとVisual Studioでファイルが開きます。

Visual Studioが入っていないwindowsの方は、以下からダウンロードください。

ただしVisual Studio for MACは2024年の8月にサポートが終了します。

そのためMacの方はVisual Codeをインストールしましょう。

Visual Studio for Windows をインストールする

Download Visual Studio Code

Visual Codeをインストールした場合は、UnityのデフォルでC#ファイルを開くソフトウェアをVisual Codeに変更する必要があります。

Unity -> Setting -> External Tools -> External Script Editorで、Visual Codeを選択します。

LanguageManager.csを以下のように入力します。

using UnityEngine;
using UnityEngine.Localization;
using UnityEngine.Localization.Settings;

public class LanguageManager : MonoBehaviour
{
    public void SetEnglish()
    {
        LocalizationSettings.SelectedLocale = LocalizationSettings.AvailableLocales.Locales[0]; // 英語
    }

    public void SetJapanese()
    {
        LocalizationSettings.SelectedLocale = LocalizationSettings.AvailableLocales.Locales[1]; // 日本語
    }
}

LocalizationSettings.AvailableLocales.Locales[0];

この行は、アプリケーションの現在の言語設定を、使用可能なロケールのリストの最初の言語（英語）に変更するという意味です。

SceneController.cs

SceneController.csを作成し、以下のように入力します。

using UnityEngine;
using UnityEngine.SceneManagement;

public class SceneController : MonoBehaviour
{
    public void LoadOpeningScene()
    {
        SceneManager.LoadScene("OpeningScene");
    }
}

ローカライズ設定

ChatGPTでは次にイベントの設定を案内しています。

しかし、先にローカライズ設定をしないとイベントの設定はできません。

実際に[Console]タブを開くと、[Localization]が存在しないというエラーがでていることがわかります。

そのため、ChatGPTの指示とは順番を前後して、先にローカライズの設定を行います。

ChatGPT

ステップ5: ローカライズの設定

ローカライズパッケージのインストール:
- 「Window」→「Package Manager」を開き、「Localization」を検索してインストール。
ローカルの設定:
- 「Window」→「Asset Management」→「Localization Tables」を選択し、言語ごとにローカルファイルを設定。

[Package Manager]の[+]をクリックし[Add package from git URL…]をクリックします。

以下のURLを入力するとLocalizationがインポートされます。

com.unity.localization

まず、Localization Settings を作成します。

[Edit->Project Settings->Localization]ウィンドウを開きます。

Create をクリックし、Localization Settings ファイルを作ります。

[Add Locale]をクリックします。

今回は英語と日本語の対応のため、EnglishとJapaeseにチェックを入れて[Add Locales]をクリックします。

デフォルトを英語にするため、以下の画像の2箇所をEnglishに設定します。

言語テーブルを作成

言語テーブルを作成します。

[Window->Asset Management->Localization Tables]を選択します。

[+New Table Collection]をクリックします。

[Name]にローカライズテーブルの名前をつけます。今回は[TextTable]とします。

[Create]をクリックします。

[New Entry]をクリックします。

[StartButtonText]として、[Start(English)]と[始める(Japanese)]を設定します。

[Localization Tables]ウィンドウは一度閉じます。

次に、Unityウィンドウに戻り、StartButtonのTextを選択します。

[TextMeshPro-Text]の[…]をクリックし、[Localize]をクリックします。

[Select string table entry]から、先ほど作成した[StartButtonText]を選択します。

これでローカライズの初期設定が完了です。

イベントの設定

ChatGPT

ステップ4: イベントの設定

LanguageManagerのアタッチ:
- Canvasに「LanguageManager.cs」をアタッチし、日本語ボタンに「SetJapanese」メソッドを、英語ボタンに「SetEnglish」メソッドを設定。
SceneControllerのアタッチ:
- Canvasまたはスタートボタンに「SceneController.cs」をアタッチし、スタートボタンの「OnClick()」イベントに「LoadOpeningScene」メソッドを設定。