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

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

Monaca + NCMBでチャットアプリを作る【その3:チャット画面を作る】

f:id:mbaasdevrel:20201119154758p:plain

MonacaとNCMBで簡単なアプリを作ってみるハンズオンの資料です。今回のテーマはチャットアプリです。この記事ではチャット画面の実装と、ユーザ一覧画面を実装します。なおコードはNCMBMania/chat_appにて公開しています。

チャット画面について

初期表示を作る

ログインした後、チャット画面に戻ってきたらチャットのログを表示します。これはmBaaSのChatクラスにあるデータを表示します。

ons.getScriptPage().onShow = async function() {
  $('#chats').empty();
  // mBaaSのデータストアからデータを取得する
  const Chat = ncmb.DataStore('Chat');
  const chats = await Chat.limit(100).fetchAll();
  // データを書き込む
  for (const chat of chats) {
    writeChat(chat.get('user'), chat.get('message'));
  }
}

f:id:mbaasdevrel:20201119160047p:plain

writeChatはHTMLを表示しているだけです。自分のメッセージとほかのユーザからのメッセージかで色や左右を分けています。

function writeChat(name, message) {
  const user = ncmb.User.getCurrentUser();
  let html = '';
  if (user.get('displayName') === name) {
    // 自分のメッセージ
    html = `
    <ons-list-item modifier="nodivider">
      <div class="right">
        <ons-button style="background-color: green">${message}</ons-button>
      </div>
    </ons-list-item>
    `;
  } else {
    html = `
    <ons-list-item modifier="nodivider">
      <ons-button>${message}</ons-button>
      <span class="list-item__subtitle">${name}</span>
    </ons-list-item>
    `;
  }
  $('#chats').append(html);
}

メッセージを送信する

次にメッセージを送信する処理です。これは #send をクリックした際に実行します。chatクラスのsendメソッドを使ってメッセージを送信します。

$('#send').on('click', e => {
  const message = $('#message').val();
  if (message.trim() === '') return true;
  chat.send('chat', message);
  $('#message').val('')
  saveToNCMB(message);
});

saveToNCMBはChatクラスにデータを保存しています。ACLは誰でも読み込み可能、編集は本人のみとしています。

async function saveToNCMB(message) {
  // データストアのChatクラスを利用
  const Chat = ncmb.DataStore('Chat');
  // インスタンスを作成
  const chat = new Chat();
  // ログインユーザを取得
  const user = ncmb.User.getCurrentUser();
  // ACLを準備
  const acl = new ncmb.Acl();
  acl
    .setPublicReadAccess(true)       // 誰でも読み込み可能
    .setUserWriteAccess(user, true); // 書き込みは本人のみ
  // データをセットして保存処理を実行
  await chat
    .set('user', user.get('displayName'))
    .set('message', message)
    .set('acl', acl)
    .save();
}

新規メッセージが来ると chat.message イベントが呼ばれますので、それを使ってチャットに書き込みを行います。

// 新しいメッセージが届いた時の処理
chat.message = function(user, message) {
  writeChat(user, message);
}

f:id:mbaasdevrel:20201119155531p:plain

ユーザ一覧画面を作る

ユーザ一覧画面はmBaaSの機能は使っていません。chat.usersを一覧表示しているだけです。

ons.getScriptPage().onShow = function() {
  $('#users').html(chat.users.map(u => `
    <ons-list-item>
      <div class="center">${u}</div>
    </ons-list-item>
  `));
}

f:id:mbaasdevrel:20201119160111p:plain

まとめ

今回はチャットIDが固定ですが、これを異なるものにすればチャット部屋を複数作成できます。mBaaSと組み合わせることで認証を使ったり、チャットの記録を取れるようになります。画像をファイルストアに保存するのも難しくないでしょう。ぜひカスタマイズしてみてください。

今回のハンズオンで利用したmBaaSの機能は次の通りです。

  • 会員登録(ID/パスワード)
  • 会員認証(ID/パスワード)
  • データストア登録/更新
  • データストア検索

mBaaSには他にもたくさんの機能があります。ぜひほかのハンズオンで体験してください。

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

中津川 篤司

中津川 篤司

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