NCMBとMonaca、Framework7を使ってチャットアプリを作る（その1：画面の説明とSDKの導入）

NCMBとMonacaを使ってチャットアプリを作ります。以前、PieSocketを使ったチャットアプリを公開したのですが、現在PieSocketは無料での利用枠がなくなっています。そこで今回は[goofmint/ruby-websockets-chat-demo](https://github.com/goofmint/ruby-websockets-chat-demo)をベースにチャットアプリを作ります。これはごく単純なWebScoketサーバーで、Herokuにデプロイできるものです。Herokuの無料枠内での利用が可能です。

まず最初の記事では画面の説明とSDKの導入までを進めます。

## コードについて

今回のコードは[NCMBMania/MonacaChatDemo](https://github.com/NCMBMania/MonacaChatDemo)にアップロードしてあります。実装時の参考にしてください。

## 利用技術について

今回は次のような組み合わせになっています。

- Monaca
- Framework7
- NCMB JavaScript SDK

## 仕様について

今回は匿名認証を利用しています。チャットではユーザー名を決めて、それを匿名認証と関連付けています。チャット画面についてはFramework7に用意されているメッセージ機能を利用しています。

## 利用する機能について

チャットアプリで利用するNCMBの機能は次の通りです。

- 会員管理
	- 匿名認証
- データストア
  - メッセージデータの保存
  - メッセージデータの検索

## 画面について

今回は以下の2つの画面があります。

### www/pages/login.html

![FireShot Capture 484 - Monaca × Framework7 × NCMB - localhost 20220803154332 - 484.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/f09755f3-e232-373a-15a0-6dc8df9bff94.jpeg)


ログイン画面です。チャットで利用するユーザー名を入力します。認証自体は匿名認証を使いますので、パスワードは入力しません。

```html
<div class="page" data-name="form">
    <div class="navbar">
        <div class="navbar-bg"></div>
        <div class="navbar-inner sliding">
        <div class="title">名前を決める</div>
        </div>
    </div>
    <div class="page-content">
        <div class="block-title">チャットの名前を決めてください</div>
        <form id="login">
        <div class="list no-hairlines-md">
            <ul>
            <li>
                <div class="item-content item-input">
                <div class="item-inner">
                    <div class="item-title item-label">名前</div>
                    <div class="item-input-wrap">
                    <input type="text" name="displayName" placeholder="お名前" required/>
                    </div>
                </div>
                </div>
            </li>
            </ul>
        </div>
        <div class="block block-strong">
            <p class="row">
            <a href="#" @click=${login} class="col button">入室する</a>
            </p>
        </div>
        </form>
    </div>
</div>
```

### www/pages/chat.html

![FireShot Capture 485 - Monaca × Framework7 × NCMB - localhost 20220803154354 - 485.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/c8d68d87-4fea-0d69-2374-a34f1e669632.jpeg)


チャット画面です。チャット画面はFramework7のメッセージ機能で作成するので、HTMLはとてもシンプルになります。

```html
<div class="page" data-name="chat">
    <div class="navbar">
        <div class="navbar-bg"></div>
        <div class="navbar-inner sliding">
        <div class="title">チャット</div>
        </div>
    </div>
    <div class="toolbar messagebar">
        <form id="chat">
            <div class="toolbar-inner">
                <div class="messagebar-area">
                    <textarea name="text" class="resizable" placeholder="Message"></textarea>
                </div>
                <a class="link send-link" href="#" @click=${sendMessage}>Send</a>
            </div>
        </form>
    </div>
    <div class="page-content">
        <div class="messages">
        </div>
    </div>
    </div>
```

![FireShot Capture 486 - Monaca × Framework7 × NCMB - localhost 20220803154430 - 486.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/4d4e632c-ced4-a5fd-ac14-e0d876f99258.jpeg)


### SDKのインストール

今回はMonacaのJS/CSSコンポーネントの追加と削除より、NCMBを追加します。アプリのテンプレートはFramework7のJavaScript版（VueやReactではなく）を選択しています。

## NCMBのAPIキーを取得

[mBaaSでサーバー開発不要！ | ニフクラ mobile backend](https://mbaas.nifcloud.com/)にてアプリを作成し、アプリケーションキーとクライアントキーを作成します。

### 匿名認証の有効化

匿名認証はNCMBの管理画面、アプリ設定にて有効化できます。有効化しておかないと匿名認証実行時にエラーが出るので注意してください。

![FireShot_Capture_487_-_ニフクラ_mobile_backend_-_console_mbaas_nifcloud_com_20220803154556_-_487.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/895f7230-75ca-8948-75de-7b96556ac6f1.jpeg)


## js/config.jsonの作成

js/config.jsonを作成し、その中に先ほど取得したNCMBのAPIキーを設定します。内容は次のようになります。

```json
{
	"applicationKey": "YOUR_APPLICATION_KEY",
	"clientKey": "YOUR_CLIENT_KEY"
}
```

## 初期化

初期化は `js/app.js` にて行います。config.jsonを読み込む関係上、非同期処理内にて行います。cordovaの有無（アプリまたはプレビューの違いを検知）によって初期化時のイベント処理を変えています。

```js
// NCMBの初期化用
const event = window.cordova ? 'deviceready' : 'DOMContentLoaded';
document.addEventListener(event, async (e) => {
	// この中に処理を書きます
});
```

config.jsonの内容を読み込んで、NCMBとFramework7の初期化を行います。

```js
window.config = await (await fetch('./js/config.json')).json();
window.ncmb = new NCMB(config.applicationKey, config.clientKey);
window.app = new Framework7({
	name: 'My App', // App name
	theme: 'auto', // Automatic theme detection
	el: '#app', // App root element
	// App store
	store: store,
	// App routes
	routes: routes,
});
```

これでNCMBの初期化が完了します。

## ルーティング設定

今回はチャット画面、ログイン画面の2つがあります。これを `js/routes.js` に定義します。

```js
const routes = [
  {
    path: '/',
    url: './index.html',
  },
  // チャット画面
  {
    path: '/chat/',
    componentUrl: './pages/chat.html',
    // 今回は省略。次回説明します。
  },
  // ログイン画面
  {
    path: '/login/',
    componentUrl: './pages/login.html',
  },
  // Default route (404 page). MUST BE THE LAST
  {
    path: '(.*)',
    url: './pages/404.html',
  },
];
```

## まとめ

今回はチャットアプリの仕様と画面、NCMBの初期化までを解説しました。次は[ログイン処理を実装](https://qiita.com/goofmint/items/f48282a1b995fa6007da)します。