Monacaでボイスレコーディングアプリを作る（その1：画面の説明とSDKの導入）

NCMBとMonacaを使ってボイスレコーディングアプリを作ります。HTML APIだけを使うので、プラグインを使わずに開発できます。録音した音声をNCMBのファイルストアへアップロードし、逆にダウンロードして再生できるアプリです。

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

## コードについて

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

## 利用技術について

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

- Monaca
- Framework7
- NCMB JavaScript SDK

## 仕様について

画面表示はFramework7を使っています。とはいえ、1画面の構成ですし、 `www/pages/home.html` だけ見れば実装内容は分かるでしょう。また、Framework7はVanilla JSで、VueやReactなどのUIフレームワークは利用していません。

音声の再生についてはWeb Audio APIを利用する方法がありますが、コードが複雑になるので今回はaudioタグを利用しています。

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

ボイスレコーディングアプリで利用するNCMBの機能は次の通りです。

- ファイルストア
  - アップロード
  - 検索
	- HTTPSダウンロード

## 画面について

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

### www/pages/home.html

![IMG_1174.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/ceee782b-3c68-412e-87ba-2db270a2eb7e.png)


ボイスレコーディングを行い、ファイルストアへアップロードします。また、既存のボイスレコーディングを一覧表示し、選択された音声を再生します。

以下はFramework7のテンプレートですが、変数として `status` と `files` 、 `uri` を使っています。これは以下の内容を持つ変数です。

- **status**  
録音状態を表す。 `ready` が初期状態、 `recording` は録音中
- **files**  
ファイルストアからダウンロードした録音済みファイルの配列
- **uri**  
録音データのURI（ファイルストアへのHTTPSアクセス用URL）

```html
<div class="page" data-name="catalog">
	<div class="navbar">
		<div class="navbar-bg"></div>
		<div class="navbar-inner sliding">
			<div class="title">レコーダー</div>
		</div>
	</div>
	<div class="page-content">
		<!-- 録音状態に合わせてボタンの出し分け -->
		${ status == 'ready' ?
			$h`<button class="button button-large button-fill" @click=${start}>録音開始</button>` :
			$h`<button class="button button-large button-fill" @click=${stop}>録音終了</button>`
		}
		<p>
			<div class="block-title">録音したデータ</div>
			<div class="list simple-list">
				<!-- 既存の録音データを一覧表示する -->
				<ul>
					${ files.map(file => $h`
						<li @click="${() => listen(file)}">
							${ file.fileName }
						</li>
					`)}
				</ul>
			</div>
			<!-- 録音データが選択されたら audio タグを表示する -->
			${ uri !== '' ?
				$h`<audio src="${uri}" controls style="width:100%;"></audio>`
				:
			''
			}
		</p>
	</div>
</div>
```

### SDKのインストール

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

## NCMBのAPIキーを取得

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

## 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の初期化が完了します。

## ルーティング設定

今回は音声入力・出力用の1画面になります。これを `js/routes.js` に定義します。

```js
const routes = [
  {
    path: '/',
    url: './index.html',
  },
  // メイン画面
  {
    path: '/home/',
    componentUrl: './pages/home.html',
  },
  // Default route (404 page). MUST BE THE LAST
  {
    path: '(.*)',
    url: './pages/404.html',
  },
];
```

## まとめ

今回はボイスレコーディングアプリの仕様と画面、NCMBの初期化までを解説しました。次は[レコーディング処理を実装](https://qiita.com/goofmint/items/691a3a97024090e745c6)します。