NCMBとFramework7を使った情報リスト画面コンポーネントの紹介と使い方

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

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

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

## UIについて

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

1. 必要なSDKの読み込み
1. 必要なキーの取得
1. NCMBの初期化
1. 情報リスト画面の設置

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

## 情報リスト画面

![FireShot Capture 153 - 20220307133148 Information - localhost.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/de7b8163-17ad-5a30-38c8-f6e6da4d6c00.jpeg)


アプリに関連する情報を一覧表示する画面です。たとえばソーシャルメディアやサポートページ、ライセンス情報などを一覧表示します。一覧からタップした後は、httpからはじまっていればIn App Browser（または別タブ）で開き、それ以外はFramework7のルーティングで処理します。

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

今回利用しているライブラリ・SDKは次の通りです。

- NCMB JavaScript SDK

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

```html
<script src="js/ncmb.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);
        }
      },
    },
  });
})();
```

## ルーティングの設定

ルーティングは `/information` になります。

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

そして、今回は `www/index.html` にて情報一覧画面のURLを指定します。

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

## 情報一覧画面の追加

[information.html](https://github.com/NCMBMania/framework7_information_component/blob/main/www/pages/information.html)をダウンロードして、 `www/pages/information.html` として配置します。

## データストアの設定

NCMBの管理画面にてデータストアのクラス Information を作成します。フィールドは次の通りです。

| フィールド名 | 型 | 説明 |
|---------------|---------------|---------------|
| icon	       | 文字列  | [Framework7 Icons](https://framework7.io/icons/)のアイコン名を利用できます。他に `line` 、 `hatebu` 、 `feedly` も利用できます。 |
| label	       | 文字列  | 一覧時に表示するラベルです。 |
| path	       | 文字列  | タップした際に遷移するURLです。 |
| color        | 文字列  | アイコンの色です。 |

`path` は URLまたはFramework7のルーティング設定に沿って指定してください。

![FireShot Capture 154 - 20220307133357 ニフクラ mobile backend - console.mbaas.nifcloud.com.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/e9815d87-64df-42a0-0a14-fc7fc354e1c3.jpeg)


## 謝意

LINE、はてなブックマーク、Feedlyのアイコンは[アイコンフォントでLINE、はてなブックマーク、feedlyを作ってみる | Webお役立ちネタ帳](https://webnetamemo.com/coding/css/201508271667)で紹介されている方法に沿って作成しています。アイコン自体は[ブログのデザインでも使用している「Webフォントアイコン」を本当にオススメしたい！ | ドウラク-douraku-：webとゲームで道楽人生](https://douraku.sw2x.com/note/web-font-icon/)にて配布されているものになります。

## まとめ

情報一覧画面はアプリでよく使われる画面になります。アプリ内に直書きでも良いですが、データストアから取るようにすればメンテナンスが簡単になります。仕組みはシンプルなので、ぜひご利用ください。

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