MonacaとNCMBで簡単なアプリを作ってみるハンズオンの資料です。今回はチャットアプリを作ってみます。初回となる今回はアプリの仕様と画面を説明します。なおコードはNCMBMania/chat_appにて公開しています。
仕様について
このアプリの主な機能です。
- 認証画面
- ID/パスワード認証を利用します
- チャット画面
- チャットで扱うのは次のデータです
- 送信者名
- メッセージ
- チャットメッセージは閲覧は誰でも可能、更新や削除は本人のみ可とします
- チャットで扱うのは次のデータです
- 参加ユーザ一覧画面
- 同じチャットに参加しているユーザを一覧表示します
チャット自体はWebSocketサービスを利用します。WebSocketで送ったメッセージは保存できませんが、mBaaSのデータストアを使うことで認証とメッセージの保存と再現が可能です。
利用した技術
今回はjQueryとOnsen UIを利用しています。
画面
チャットアプリの画面は全部で3つです。
- ログイン/新規登録画面
- チャット画面
- ユーザ一覧画面
チャット画面
最初に表示される画面です。ただし認証されていない場合はログイン/新規登録画面へ遷移します。この画面ではメッセージを入力して送信します。
ログイン/新規登録画面
ログインと新規登録は処理が似ているので一つの画面にまとめてしまいました。ID/パスワードで認証していますが、追加で表示名も登録できます。
ユーザ一覧画面
チャットに参加しているユーザを一覧する画面です。
まとめ
今回はチャットアプリの仕様と画面について紹介しました。次回は認証機能を実装します。
