FJCT_ニフクラ mobile backend(mBaaS)お役立ちブログ

スマホアプリ開発にニフクラ mobile backend(mBaaS)。アプリ開発に役立つ情報をおとどけ!

Monaca + NCMBでチャットアプリを作る【その1:仕様と画面の説明】

f:id:mbaasdevrel:20201119154758p:plain

MonacaとNCMBで簡単なアプリを作ってみるハンズオンの資料です。今回はチャットアプリを作ってみます。初回となる今回はアプリの仕様と画面を説明します。なおコードはNCMBMania/chat_appにて公開しています。

仕様について

このアプリの主な機能です。

  • 認証画面
    • ID/パスワード認証を利用します
  • チャット画面
    • チャットで扱うのは次のデータです
      • 送信者名
      • メッセージ
    • チャットメッセージは閲覧は誰でも可能、更新や削除は本人のみ可とします
  • 参加ユーザ一覧画面
    • 同じチャットに参加しているユーザを一覧表示します

チャット自体はWebSocketサービスを利用します。WebSocketで送ったメッセージは保存できませんが、mBaaSのデータストアを使うことで認証とメッセージの保存と再現が可能です。

利用した技術

今回はjQueryとOnsen UIを利用しています。

画面

チャットアプリの画面は全部で3つです。

  • ログイン/新規登録画面
  • チャット画面
  • ユーザ一覧画面

チャット画面

最初に表示される画面です。ただし認証されていない場合はログイン/新規登録画面へ遷移します。この画面ではメッセージを入力して送信します。

f:id:mbaasdevrel:20201119155531p:plain

ログイン/新規登録画面

ログインと新規登録は処理が似ているので一つの画面にまとめてしまいました。ID/パスワードで認証していますが、追加で表示名も登録できます。

f:id:mbaasdevrel:20201119154850p:plain

ユーザ一覧画面

チャットに参加しているユーザを一覧する画面です。

f:id:mbaasdevrel:20201119155550p:plain

まとめ

今回はチャットアプリの仕様と画面について紹介しました。次回は認証機能を実装します。

Monacaでチャットアプリ 記事一覧

中津川 篤司

中津川 篤司

NCMBエヴァンジェリスト。プログラマ、エンジニアとしていくつかの企業で働き、28歳のときに独立。 2004年、まだ情報が少なかったオープンソースソフトの技術ブログ「MOONGIFT」を開設し、毎日情報を発信している。2013年に法人化、ビジネスとエンジニアを結ぶDXエージェンシー「DevRel」活動をスタート。