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')); } }
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); }
ユーザ一覧画面を作る
ユーザ一覧画面はmBaaSの機能は使っていません。chat.usersを一覧表示しているだけです。
ons.getScriptPage().onShow = function() { $('#users').html(chat.users.map(u => ` <ons-list-item> <div class="center">${u}</div> </ons-list-item> `)); }
まとめ
今回はチャットIDが固定ですが、これを異なるものにすればチャット部屋を複数作成できます。mBaaSと組み合わせることで認証を使ったり、チャットの記録を取れるようになります。画像をファイルストアに保存するのも難しくないでしょう。ぜひカスタマイズしてみてください。
今回のハンズオンで利用したmBaaSの機能は次の通りです。
- 会員登録(ID/パスワード)
- 会員認証(ID/パスワード)
- データストア登録/更新
- データストア検索
mBaaSには他にもたくさんの機能があります。ぜひほかのハンズオンで体験してください。