NCMBとFramework7を使ったプロフィール画面コンポーネントの紹介と使い方

NCMBはモバイルアプリ開発におけるバックエンド機能（認証、データストア、ファイルストア、プッシュ通知など）を提供しています。バックエンドなのでAPIベースで利用するのが基本で、UI（アプリ側）は各自で開発する仕組みになっています。

現在、数多くのアプリが存在し、その中には定番とも言える機能があります。そうした定番機能を各フレームワークごとに実装しておくことで、再利用性高くNCMBが利用できるかと思います。

今回はFramework7で作ったプロフィール画面コンポーネントを紹介します。Monacaアプリでも利用可能です。

![FireShot Capture 143 - 20220304150846 Settings - localhost.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/fb7a593d-b177-e43c-0ee2-ffb9f0d3ea05.jpeg)


## UIについて

コンポーネントは1つのHTMLだけで実装されているのが特徴です。そのため、基本的には以下の方法で導入・利用ができます。

1. 必要なライブラリ・SDKの読み込み
1. 必要なキーの取得
1. NCMBの初期化
1. プロフィール画面の設置

用意されている画面（機能）は次の通りです。

## プロフィール画面

特定のユーザー情報を表示する画面です。[NCMBとFramework7を使った設定画面コンポーネントの紹介と使い方 - Qiita](https://qiita.com/goofmint/items/053707151e8a3ada5da4)で利用した公開情報（Profileクラス）の情報を表示します。

### 必要なライブラリ・SDKの読み込み

今回利用しているライブラリ・SDKは次の通りです。markedはMarkdownパーサー（Markdown to HTML）です。

- NCMB JavaScript SDK
- Marked

これらを `www/index.html` で読み込みます。

```html
<script src="js/ncmb.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>

```

### 必要なキー・トークンの取得

NCMBのアプリケーションキーとクライアントキーを取得します。

- [ニフクラ mobile backend](https://mbaas.nifcloud.com/)

### NCMBの初期化

`www/js/app.js` にてNCMBを初期化します。今回は `www/js/config.json` というファイルにキーを記述しているので、以下のように読み込みを行っています。

```js
const $ = Dom7;
(async () => {
  const device = Framework7.getDevice();
	// 設定ファイルの読み込み
  const config = await (await fetch('./js/config.json')).json();
	// NCMBの初期化
  window.ncmb = new NCMB(config.applicationKey, config.clientKey);

  // Framework7の初期化
  window.app = new Framework7({
    name: 'NCMB Profile',
    theme: 'auto',
    el: '#app',
    id: 'com.nifcloud.mbaas.map',
    store: store,
    routes: routes,
    input: {
      scrollIntoViewOnFocus: device.cordova && !device.electron,
      scrollIntoViewCentered: device.cordova && !device.electron,
    },
    statusbar: {
      iosOverlaysWebView: true,
      androidOverlaysWebView: false,
    },
    on: {
      init: function () {
        if (this.device.cordova) {
          cordovaApp.init(this);
        }
      },
    },
  });
})();
```

## ルーティングの設定

ルーティングは `/profile/:objectId` になります。objectIdはProfileクラスのユーザーIDになります。

```js
const routes = [
  {
    path: '/',
    url: './index.html',
  },
  {
    path: '/profile/:objectId',
    componentUrl: './pages/profile.html',
  },
  {
    path: '(.*)',
    url: './pages/404.html',
  },
];
```

そして、今回は `www/index.html` にてプロフィール表示用のURLを指定します。 `S3fp2NvYlsgaTYsX2` はアプリによって異なります。

```html
<div id="app">
	<div class="view view-init safe-areas" data-url="/profile/S3fp2NvYlsgaTYsX2">
	</div>
</div>
```

## プロフィール画面の追加

[profile.html](https://raw.githubusercontent.com/NCMBMania/-framework7_profile_component/main/www/pages/profile.html)をダウンロードして、 `www/pages/profile.html` として配置します。

![FireShot Capture 143 - 20220304150846 Settings - localhost.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/92fd4123-914b-eddb-ea95-e331973cb244.jpeg)

### ユーザーが存在しない場合

ユーザーが存在しない場合（Profileクラスからデータを取得できない場合）は、 `User not found` という表示になります。

![FireShot Capture 144 - 20220304150903 Settings - localhost.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/1e08ec44-d5b7-da02-f06d-4e6d0a65d280.jpeg)


## カスタマイズ

プロフィール画面はアプリによって異なると思うので、表示内容はカスタマイズしてください。ベースはリスト表示のシンプルなものとなっています。また、プロフィール画像 `image` はファイルストアから取得して表示するようになっています。また、プロフィールの文字列はMarkdownに対応しています。

```html
<template>
  <div class="page">
    <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 text-center">
				${ image ?
					$h`<img class="profileImage" src=${image} />`
					:
					$h`<i class="f7-icons size-250">person_alt_circle</i>`
				}
			</div>
			<div class="block block-strong no-hairlines text-center">
				${profile.displayName}
			</div>
			<div class="block no-hairlines">
				<p innerHTML="${marked.parse(profile.profile || '')}">
				</p>
			</div>
    </div>
  </div>
</template>
```

## まとめ

[NCMBとFramework7を使った設定画面コンポーネントの紹介と使い方 - Qiita](https://qiita.com/goofmint/items/053707151e8a3ada5da4)を見ると分かりますが、Profileクラスは誰でも読み込み可、関連したユーザーがだけが編集できる権限で保存されます。こちらは公開情報だけを保存するクラスとなっています。

コミュニケーションするアプリなどではプロフィール画面がよく使われます。イチから開発するのは面倒ですが、これを使うことで実装は簡単になるでしょう。ぜひご利用ください。

[mBaaSでサーバー開発不要！ | ニフクラ mobile backend](https://mbaas.nifcloud.com/)