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

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

コードについて

今回のコードは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

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

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

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

<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にてアプリを作成し、アプリケーションキーとクライアントキーを作成します。

js/config.jsonの作成

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

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

初期化

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

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

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

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 に定義します。

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の初期化までを解説しました。次はレコーディング処理を実装します。