NCMBとFlutterでチャットアプリを作る（その1：画面の説明とSDKの導入）

NCMBとFlutterを使ってチャットアプリを作ります。以前はPieSocketを使ってチャットアプリを作っていたのですが、現在PieSocketは無料での利用枠がなくなっています。そこで今回は[goofmint/ruby-websockets-chat-demo](https://github.com/goofmint/ruby-websockets-chat-demo)をベースにチャットアプリを作ります。これはごく単純なWebScoketサーバーで、Herokuにデプロイできるものです。Herokuの無料枠内での利用が可能です。

まず最初の記事では画面の説明とSDKの導入までを進めます。

## コードについて

今回のコードは[NCMBMania/flutter\_chat: Flutter SDKを使ったチャットアプリです](https://github.com/NCMBMania/flutter_chat)にアップロードしてあります。実装時の参考にしてください。

## 利用技術について

今回は次のような組み合わせになっています。

- Flutter 3.0.5（Dart 2.17.6）
- [flutter_chat_ui \| Flutter Package](https://pub.dev/packages/flutter_chat_ui)
- [web_socket_channel \| Dart Package](https://pub.dev/packages/web_socket_channel)
- [ncmb \| Dart Package](https://pub.dev/packages/ncmb)

flutter_chat_uiはFirebaseと組み合わせて使う想定のチャットUIのようですが、そのままNCMBと組み合わせられるので利用しています。テキストはもちろん、画像の添付や表示にも対応しているので便利です。

WebSocketとの接続はweb_socket_channelにて行います。

## 仕様について

今回は匿名認証を利用しています。チャットではユーザー名を決めて、それを匿名認証と関連付けています。また、アップロードした写真にはURLベースでアクセスします。

## 利用する機能について

チャットアプリで利用するNCMBの機能は次の通りです。

- 会員管理
	- 匿名認証
- データストア
  - メッセージデータの保存
  - メッセージデータの検索
- ファイルストア
	- 写真のアップロード
	- 写真へのアクセス（HTTPS経由）

## 画面について

今回は以下の2つの画面があります。

### LoginPage

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/c5e0d840-9a8f-8d7d-9184-c79a48d04d17.png)


ログイン画面です。チャットで利用するユーザー名を入力します。認証自体は匿名認証を使いますので、パスワードは入力しません。

```dart
@override
Widget build(BuildContext context) {
	return Scaffold(
			appBar: AppBar(title: const Text('Login')),
			body: Column(mainAxisAlignment: MainAxisAlignment.center, children: [
				const Text(
					'チャットの名前を入力してください',
				),
				Row(
					mainAxisAlignment: MainAxisAlignment.center,
					children: [
						SizedBox(
							width: 250,
							child: TextField(
								onChanged: (value) {
									setState(() {
										_name = value;
									});
								},
							),
						),
						TextButton(onPressed: anonymousLogin, child: const Text("ログインする"))
					],
				)
			]));
}
```

### ChatPage

![IMG_2615.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/16c05384-cc0a-9d9e-8d02-790bc8e6fcc4.png)


チャット画面です。チャット画面は前述のflutter_chat_uiを使います。 `_messages` の中にflutter_chat_uiのメッセージが入ります。

```dart
@override
Widget build(BuildContext context) {
	return Scaffold(
			appBar: AppBar(title: const Text('Chat')),
			body: Chat(
				messages: _messages,
				onPreviewDataFetched:
						(types.TextMessage message, types.PreviewData previewData) {},
				onSendPressed: _onSendPressed,
				onAttachmentPressed: _handleAtachmentPressed,
				showUserAvatars: true,
				showUserNames: true,
				user: _user,
			));
}
```

### SDKのインストール

SDKはflutterコマンドでインストールします。

```
flutter pub add ncmb
```

### 他のライブラリなどのインストール

他に必要なライブラリもインストールします。

```
# チャット画面用
flutter pub add flutter_chat_ui
flutter pub add web_socket_channel
flutter pub add http
flutter pub add html_unescape
flutter pub add image_picker
# 設定用
flutter pub add flutter_dotenv
# ファイルストア用
flutter pub add uuid
flutter pub add mime
```

## NCMBのAPIキーを取得

[mBaaSでサーバー開発不要！ | ニフクラ mobile backend](https://mbaas.nifcloud.com/)にてアプリを作成し、アプリケーションキーとクライアントキーを作成します。

### 匿名認証の有効化

匿名認証はNCMBの管理画面、アプリ設定にて有効化できます。有効化しておかないと匿名認証実行時にエラーが出るので注意してください。

![FireShot_Capture_487_-_ニフクラ_mobile_backend_-_console_mbaas_nifcloud_com_20220803154556_-_487.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/895f7230-75ca-8948-75de-7b96556ac6f1.jpeg)

### ファイルストアへのHTTPSアクセス有効化

![FireShot_Capture_043_-_ニフクラ_mobile_backend_-_console_mbaas_nifcloud_com_-_043.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/3b7ab5d8-cdca-a6b0-7d3b-6ab49f112269.jpeg)


同じくNCMBの管理画面にて、ファイルストアへのHTTPSアクセスを有効化します。これでファイルへAPIキー不要でアクセスできるようになります。

## .env

.envを作成し、その中に先ほど取得したNCMBのAPIキーなどを設定します。内容は次のようになります。 `NCMB_PUBLIC_FILE_PATH` はファイルストアへHTTPSアクセスする際の共通URLで、 `YOUR_APP_ID` は管理画面のURL `https://console.mbaas.nifcloud.com/#/applications/uScDnX7D9IBrBMCU` などの `uScDnX7D9IBrBMCU` になります。

![スクリーンショット_2022-08-17_12_36_59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/ca1f68e7-cf7c-b1d1-2fb3-18468ff7dbb4.png)


`WEBSOCKET_URL` はまだHerokuでデプロイしていないので未設定で大丈夫です。

```
APPLICATION_KEY=YOUR_APPLICATION_KEY
CLIENT_KEY=YOUR_CLIENT_KEY
NCMB_PUBLIC_FILE_PATH=https://mbaas.api.nifcloud.com/2013-09-01/applications/YOUR_APP_ID/publicFiles/
WEBSOCKET_URL=wss://YOUR_APP_NAME.herokuapp.com
```

## 初期化

初期化は `main` 関数にて行います。dotenvを使って環境設定ファイルを読み込み、その後で初期化を行います。

```dart
void main() async {
  await dotenv.load();
  // NCMBの初期化
  NCMB(dotenv.env['APPLICATION_KEY']!, dotenv.env['CLIENT_KEY']!);
  runApp(const MyApp());
}
```

これでNCMBの初期化が完了します。

## まとめ

今回はチャットアプリの仕様と画面、NCMBの初期化までを解説しました。次は[ログイン処理を実装](https://qiita.com/goofmint/items/389746953078397f886e)します。