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

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

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

コードについて

今回のコードはNCMBMania/flutter_chat: Flutter SDKを使ったチャットアプリですにアップロードしてあります。実装時の参考にしてください。

利用技術について

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

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

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

仕様について

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

利用する機能について

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

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

画面について

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

LoginPage

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

@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

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

@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にてアプリを作成し、アプリケーションキーとクライアントキーを作成します。

匿名認証の有効化

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

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

同じく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 になります。

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を使って環境設定ファイルを読み込み、その後で初期化を行います。

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

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

まとめ

今回はチャットアプリの仕様と画面、NCMBの初期化までを解説しました。次はログイン処理を実装します。