はじめに
この記事は3章の続きです。
まだ読んでいない人は3章から読まれることを推奨します。
この章では1章2章で説明したことを踏まえて実際にチャットアプリを実装していこうと思います。
記事を通じて疑問点があれば、ぜひフィードバックをください。
1章 設計説明編
2章 AppUI編
3章 MVVM実装編
4章 アプリ実装編
5章 Middleware編
アプリの実装
前章まででMVVMまで実装しました。
次はこれをアプリとして動かしていきたいと思います。
以下のようにファイルを作成してください。
Claudia
├── SampleResources
│ ├── Styles
+ │ │ ├── ClaudiaPanel.asset
+ │ │ ├── ClaudiaTheme.tss
│ │ └── MainPage.uss
│ └── Views
│ └── MainPage.uxml
├── Scripts
│ ├── Runtime
│ │ ├── Models
│ │ │ ├── Actions.cs
│ │ │ ├── AppState.cs
│ │ │ └── Reducers.cs
│ │ ├── Services
│ │ │ ├── ILocalStorageService.cs
│ │ │ ├── IStoreService.cs
+ │ │ │ ├── LocalStorageService.cs
│ │ │ ├── MockStorageService.cs
│ │ │ └── StoreService.cs
│ │ ├── ViewModels
│ │ │ ├── IMainViewModel.cs
│ │ │ ├── MainViewModel.cs
│ │ │ └── MockMainViewModel.cs
│ │ ├── Vuiew
│ │ │ └── MainPage.cs
+ │ │ ├── ClaudiaApp.cs
+ │ │ ├── ClaudiaAppBuilder.cs
│ │ └── ClaudiaUiToolKit.asmdef
│ └── Tests
│ ├── Editor
│ │ ├── ClaudiaApp.Test.Editor.asmdef
│ │ └── MainPage.stories.cs
│ └── Runtime
│ ├── ViewModels
│ │ └── MainViewModelTest.cs
│ └── ClaudiaApp.Test.asmdef
+ └── Claudia.unity
ClaudiaTheme.tssはUnityから作成することができます。
Assets → Create → UI Toolkit → TSS Theme File
以下のように設定にしてください。
AppUIに関してはAssets以下に含まれておらずドラッグアンドドロップで参照する必要があるので注意してください。
ClaudiaPanel.assetは同様にUnityから作成することができます。
Assets → Create → UI Toolkit → TSS Theme File
以下のように設定してください。
次にスクリプトの実装に移っていきます。
LocalStorageService.csを記述します。
using UnityEngine;
namespace ClaudiaApp.Services
{
public class LocalStorageService : ILocalStorageService
{
public T GetValue<T>(string key, T defaultValue = default)
{
if (PlayerPrefs.HasKey(key))
{
var json = PlayerPrefs.GetString(key);
return JsonUtility.FromJson<T>(json);
}
SetValue(key, defaultValue);
return defaultValue;
}
public void SetValue<T>(string key, T value)
{
var json = JsonUtility.ToJson(value);
PlayerPrefs.SetString(key, json);
}
}
}
LocalStorageServiceの実装では、PlayerPrefsを利用してデータの永続化を実現しています。これにより、アプリケーションの再起動後もユーザーの設定が保持されます。
ClaudiaApp.csを記述します。
using ClaudiaApp.View;
using Unity.AppUI.MVVM;
namespace ClaudiaApp
{
public class ClaudiaApp : App
{
public ClaudiaApp(MainPage page)
{
mainPage = page;
}
}
}
ClaudiaAppBuilder.csを記述します。
using ClaudiaApp.Services;
using ClaudiaApp.View;
using ClaudiaApp.ViewModels;
using Unity.AppUI.MVVM;
using UnityEngine.UIElements;
namespace ClaudiaApp
{
public class ClaudiaAppBuilder : UIToolkitAppBuilder<ClaudiaApp>
{
public VisualTreeAsset MainPageTemplate;
internal static ClaudiaAppBuilder Instance { get; private set; }
protected override void OnConfiguringApp(AppBuilder builder)
{
base.OnConfiguringApp(builder);
Instance = this;
builder.services.AddSingleton<ILocalStorageService, LocalStorageService>();
builder.services.AddSingleton<IStoreService, StoreService>();
builder.services.AddTransient<IMainViewModel, MainViewModel>();
builder.services.AddTransient<MainPage>();
}
}
}
ここで依存関係を解消します。
これにてスクリプトの記述は終わりです。
あとはシーンにUIDocumentとClaudiaAppBuilderを置くだけで内部実装がよしなにやってくれます。
シーンの実装
Claudia Sceneを開いてください。
シーン内にUIDocumentゲームオブジェクトを作成しましょう。
その後二つのコンポーネントをアタッチしてください。
- UI Document
- Claudia App Builder
以下のようになればオーケーです。
ここまでできたら、シーンを再生してみてください。
Viewが表示されるはずです。
表示がおかしい場合はUSSやMainPageに不具合のある可能性が高いです。StoryBookを見直してみましょう。
次にClaudeとチャットしてみましょう。
ボタンを押下して返信が返ってくれば成功です。
帰ってこない場合はStateやViewModelに異常があります。TestRunnerでテストしてみて異常を見つけましょう。
ここまでできればチャットアプリの完成です。
もちろんこれ以上にできることはたくさんあります。
- APIKeyを動的に変更する機能
- 出力をRoleごとに色分けする機能
- 履歴を消去する機能
これらの機能拡張は手続き的に書いた時よりも楽に追加できるはずです。
ぜひ試してみてください。(テストも忘れずに)
もちろんビルドも通るので試してみてください。
おわりに
1~4章と長い記事を読んでいただきありがとうございました。
Unity上でアプリを作成できるフレームワークAppUIとClaudiaを利用してチャットアプリを作成してみました。
稚拙な部分もあったかと思いますが、役に立てたなら幸いです。
間違い等ありましたら、コメントしていただけると嬉しいです。
筆者は普段、Unity上で動く2DゲームエンジンNebulaを開発しています。
X(旧Twitter)に進捗を上げていますのでそちらも見ていただけると喜びます。
最後になりますが、改めて読んでいただきありがとうございました。
では！ 快適なUIToolkit Lifeを！
参考文献