NCMBとMonaca、DeepL APIを使って翻訳アプリを作る（その3：保存データの取得と表示）

NCMBとMonacaを使ってデモアプリを作ってみます。今回はDeepL APIを使った翻訳アプリです。翻訳結果をNCMBのデータストアに保存し、後で確認できるようにします。データストアにデータを保存したり、逆に取り出すのはよくあるケースなので、様々な場面で応用できるはずです。

前回は翻訳処理とデータの保存までを紹介しました。今回は保存データの取得と表示を実装します。

コードについて

今回のコードはNCMBMania/monaca_translation_app: MonacaとNCMB、DeepL APIを使った翻訳アプリですにアップロードしてあります。実装時の参考にしてください。

履歴画面について

再掲になりますが、履歴画面は次のようなコードになります。

<div class="page">
	<div class="navbar">
		<div class="navbar-bg"></div>
		<div class="navbar-inner">
			<div class="title">翻訳</div>
		</div>
	</div>
	<div class="page-content">
		<div class="list links-list">
			<ul>
				${translations.value.map(translation => $h`
					<li><a href="/translations/${translation.objectId}">${translation.original}</a></li>
				`)}
			</ul>
		</div>
	</div>
</div>

履歴データの取得

NCMBに保存した履歴データを取得します。履歴データはストアに追加することで、画面が自動的に更新されます。翻訳処理の時のように、 $update 関数を実行せずに履歴データが一覧表示されます。

export default (props, { $store, $onMounted }) => {
	const { translations } = $store.getters;
	// DOMがマウントされたタイミング実行
	$onMounted(async () => {
		// 履歴データの取得
		const Translate = ncmb.DataStore('Translate');
		const translates = await Translate
			.limit(10)
			.fetchAll();
		// ストアに追加
		$store.dispatch('addTranslates', translates);
	});
	return $render;
}

一覧をタップした際の処理

一覧をタップした際には /translations/:objectId にリンクで遷移します。これは pages/translation.html を表示する処理です（ js/routes.js にて定義しています）。

// 履歴詳細画面（routes.jsの抜粋）
{
	path: '/translations/:objectId',
	componentUrl: './pages/translation.html',
},

www/pages/translation.htmlについて

www/pages/translation.htmlの画面は次のようになります。

<div class="page">
	<div class="navbar">
		<div class="navbar-bg"></div>
		<div class="navbar-inner">
			<div class="left">
				<a href="#" class="link back">
					<i class="icon icon-back"></i>
					<span class="if-not-md">戻る</span>
				</a>
			</div>
			<div class="title">翻訳</div>
		</div>
	</div>
	<div class="page-content">
		<div class="block-title">日本語</div>
		<div class="block">
			<p>${translation.original}</p>
		</div>
		<div class="block-title">英訳</div>
		<div class="block">
			<p>${translation.translate}</p>
		</div>
	</div>
</div>

リンク遷移した際のURLからobjectIdを受け取り、ストアにある履歴データから該当データを探します。そして、そのデータを画面に表示します。

export default (props, { $store }) => {
	// URLからobjectIdを受け取ります
	const { objectId } = $f7route.params;
	// ストアから翻訳履歴データを受け取ります
	const { translations } = $store.getters;
	// 翻訳履歴データから、選択されたデータを抽出します
	const translation = translations.value.filter(translation => translation.objectId === objectId)[0];
	return $render;
}

これで翻訳アプリの完成です。

まとめ

今回はデータストアへのデータ保存と、検索処理を利用しました。検索と言っても条件は特に指定していません。データストアは文字列検索や以上以下検索など様々な条件を指定して検索できますので、ぜひお試しください。

また、NCMBにはデータストアだけでなくファイルストアや認証、プッシュ通知機能があります。ぜひそれらを使って、あなたのアプリ開発に活かしてください。