アシアル情報教育研究所の岡本です。

中学校の次期学習指導要領では「ネットワークを利用した双方向性のあるコンテンツのプログラミング」が入ってきます。そこで、クラウドデータベースを活用したチャットアプリを開発したのでご紹介いたします。

まずは最小限の機能を備えた基本版のチャットアプリを開発し、そこから段階的に機能や見た目を改良していきます。完成版と基本版の二つのデザインは以下の通りです。

完成版(Lv7)のアプリのデザイン

こちらは起動画面で「名前」と「アイコン」を設定できます。
また、チャットルームという考え方があり、複数のチャットルームから参加したい部屋を選ぶことができます。

基本版 (Lv1)のアプリのデザイン

こちらは起動画面すらありません。
名前も設定できないため、誰が投稿したのかも分かりません。
チャットというよりも匿名の掲示板と呼んだ方が妥当かもしれません。

チャットアプリの動かし方

このチャットアプリを動かすためには、Monacaとクラウドデータベースの「ニフクラ mobile backend」が必要になります。

ニフクラ mobile backendの準備

ニフクラ mobile backendのアカウント作成方法や基本的な使い方の説明は省略します。

今回作成するチャットアプリと連動する「ニフクラ mobile backend」側の「アプリ」を「ニフクラ mobile backend」で作成してください。

「ニフクラ mobile backend」にアプリを作成すると、「アプリケーションキー」と「クライアントキー」の2つが生成されます。この2つの値が重要です。アプリ作成後にキーを改めて確認したい場合は、「アプリ一覧」から確認できます。

Monacaプロジェクト一覧

チャットアプリのMonacaプロジェクト一覧です。
ダイレクトインポート方式でインポートできるように調整中です。
なお、チャットを実際に動かすためには別途「ニフクラ mobile backend」のキーも必要となります。

チャットアプリのひな形

Lv0:チャットアプリのひな形

基本版

Lv1:一言チャット

Lv2:一言チャット(order&limit)

カスタム版 (easy)

Lv3:名前付きチャット
Lv4:吹き出しチャット

もっとカスタム版 (hard)

Lv5:アイコンチャット
Lv6:真アイコンチャット

最終カスタム版 (hard)

Lv7:起動画面付きチャット

スライドのPDFデータ

chat_mbaas_20200307