NCMBのFramework7用UIコンポーネントを使ってスマホアプリを作る（その1：画面の仕様とSDKの初期化）

NCMBはmBaaS（mobile Backend as a Serivce）であり、UIは各フレームワークやプログラミング言語で開発する必要があります。しかし、イチからUIを作るのは大変なことです。

そこで最近、色々なUIコンポーネントを作っています。これらは個々に独立しているので、簡単にアプリ内に導入が可能です。今はFramework7向けに作っていますが、以下のようなUIコンポーネントがあります。

- [地図コンポーネント](https://qiita.com/goofmint/items/20d73a3aad5313f2ecd8)
- [お知らせコンポーネント](https://qiita.com/goofmint/items/ede45debc91df4439da5)
- [ギャラリーコンポーネント](https://qiita.com/goofmint/items/07a5bf7d747b99c16589)
- [認証コンポーネント](https://qiita.com/goofmint/items/6dc28141da611426abc4)
- [リスト・詳細コンポーネント](https://qiita.com/goofmint/items/9df40e8d4117716fe073)
- [フォームコンポーネント](https://qiita.com/goofmint/items/df11f566c35f55fce826)
- [スワイパーコンポーネント](https://qiita.com/goofmint/items/d5bfc38a30c4112dc14a)
- [設定画面コンポーネント](https://qiita.com/goofmint/items/053707151e8a3ada5da4)
- [プロフィール画面コンポーネント](https://qiita.com/goofmint/items/f2a01782bc9149f82ffa)
- [情報リスト画面コンポーネント](https://qiita.com/goofmint/items/286c934cd8445915ae31)

今回は実際にこれらのコンポーネントを使ってアプリを開発する方法を紹介します。まずアプリの仕様とSDKの初期化について解説します。

![demo-app (1).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/f94b192e-e53d-f9d0-9964-d3dcafff3bf4.gif)


## 完成版のコード

作成したデモアプリのコードは[NCMBMania/UIComponentApp: Framework7向けUIコンポーネントを使ったデモアプリです。](https://github.com/NCMBMania/UIComponentApp)にアップロードしてあります。

## ベースについて

ベースは[最新版のFramework7を使ったテンプレート](https://github.com/NCMBMania/MonacaFramework7Base)です。これはMonacaのFramework7テンプレートで、Framework7の最新版へアップデート + NCMBを追加したものです。

## 画面について

今回利用している画面は次の通りです。

### [地図コンポーネント](https://qiita.com/goofmint/items/20d73a3aad5313f2ecd8)

![screenshot-4.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/e0fa4b47-3529-4d3b-2882-05ab9d5fc472.jpeg)

### [認証コンポーネント](https://qiita.com/goofmint/items/6dc28141da611426abc4)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/851bc583-2f13-ecc6-fc6b-eec2858d4693.png)

### [リスト・詳細コンポーネント](https://qiita.com/goofmint/items/9df40e8d4117716fe073)

![FireShot Capture 078 - 20220218165333 List - localhost.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/77901c4e-6f71-c5fb-e9e9-162a3371f46d.jpeg)

詳細画面です。

![FireShot Capture 078 - 20220218165334 List - localhost.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/a4051d07-4194-ae66-eb19-a8b4dc58e8a1.jpeg)


### [情報リスト画面コンポーネント](https://qiita.com/goofmint/items/286c934cd8445915ae31)

![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)

### 画面の配置

それぞれのHTMLファイルを `www/pages/` 以下に配置します。

- [map.html](https://raw.githubusercontent.com/NCMBMania/framework7_map_component/main/www/pages/map.html)
- [auth.html](https://raw.githubusercontent.com/NCMBMania/framework7_auth_component/main/www/pages/auth.html)
- [list.html](https://raw.githubusercontent.com/NCMBMania/framework7_list_component/main/www/pages/list.html)
- [detail.html](https://raw.githubusercontent.com/NCMBMania/framework7_list_component/main/www/pages/detail.html)
- [information.html](https://github.com/NCMBMania/framework7_information_component/blob/main/www/pages/information.html)

## 利用するライブラリについて

NCMB JavaScript SDK以外に利用しているライブラリは次の通りです。

- moment.js
- Mapbox JS SDK
- Turf.js

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

```html
<link href='https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css' rel='stylesheet' />

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment-with-locales.min.js" integrity="sha512-LGXaggshOkD/at6PFNcp2V2unf9LzFq6LE+sChH7ceMTDP0g2kn6Vxwgg7wkPP7AAtX+lmPqPdxB47A0Nz0cMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src='https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.js'></script>
<script src='https://unpkg.com/@turf/turf@6/turf.min.js'></script>
```

## CSPの編集

さらにMapboxのWorker用にCSPを編集します。これも `www/index.html` です。

```html
<meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: content: blob:">
```

## 情報画面用にアイコンファイルを読み込み

今回は情報リスト画面があるので、[NCMBとFramework7を使った情報リスト画面コンポーネントの紹介と使い方 - Qiita](https://qiita.com/goofmint/items/286c934cd8445915ae31)で紹介したCSSファイルと、フォントを読み込みます。

```html
<link rel="stylesheet" href="css/style.css">
```

## SDKのキーを設定

今回利用するキーは次の2つです。

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

それぞれキーを取得したら `www/js/app.js` にてNCMBとMapboxを初期化します。今回は `www/js/config.json` というファイルにキーやトークンを記述しているので、以下のように読み込みを行っています。

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

つまり `www/js/config.json` を開いて、各キーを編集してください。

```json
{
	"applicationKey": "APPLICATION_KEY",
	"clientKey": "CLIENT_KEY",
	"mapboxToken": "MAPBOX_TOKEN"
}
```

## まとめ

今回は各画面の説明とNCMB SDKの初期化までを行いました。[次回は各UIコンポーネントの実装を進めます]()。