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

前回は画面の説明とSDKの導入まで紹介しました。今回はDeepL APIを使った翻訳処理と、データをNCMBに保存するまでを解説します。

コードについて

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

翻訳処理について

翻訳画面を再掲します。翻訳するボタンを押すと addTranslate 関数が実行される仕組みです。日本語はテキストエリアに入力します。

<div class="page-content">
	<div class="list no-hairlines-md">
		<form id="translation">
			<ul>
				<li class="item-content item-input">
					<div class="item-inner">
						<div class="item-title item-label">日本語</div>
						<div class="item-input-wrap">
							<textarea class="resizable" name="text" placeholder="翻訳するテキストを入力してください"></textarea>
						</div>
					</div>
				</li>
				${translatedText !== '' ?
				$h`
				<li class="item-content item-input">
					<div class="item-inner">
						<div class="item-title item-label">英訳</div>
						<div class="item-input-wrap">
							${translatedText}
						</div>
					</div>
				</li>
				`
				:
				''
				}
			</ul>
			<div class="block">
				<button class="button button-fill" @click=${addTranslate}>翻訳する</Button>
			</div>
		</form>
	</div>
</div>

JavaScript処理

Framework7の基本形として、JavaScriptは下記の中に書きます。今回はストア $store と画面更新用の $update 関数を使います。

export default (props, { $store, $update }) => {
	// ここに記述
	return $render;
}

画面表示で利用する変数

画面上では翻訳後のテキスト有無によって表示を変更しています。そのための変数を用意します。

let translatedText = '';

翻訳ボタンを押した後の処理

addTranslate 関数の内容です。まず入力値を取得して、それをDeepLにて英語に翻訳します。

const addTranslate = async (e) => {
	e.preventDefault();
	// 入力値の取得
	const params = app.form.convertToData('#translation');
	// 翻訳実行（js/app.jsに定義）
	translatedText = await translationText(params.text);
	// 以下は後述
}

translationText 関数は js/app.js にて定義しています。契約状態によってURLが異なるので、変数化してあります。

// DeepL実行用URL
const DEEPL_API_URL = 'https://api-free.deepl.com';

// DeepLを使ってテキストを翻訳する関数
const translationText = async (text, target_lang = 'EN-US') => {
  const res = await fetch(`${DEEPL_API_URL}/v2/translate`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    },
    body: new URLSearchParams({
      text,
      target_lang,
      auth_key: config.deepLAuthKey,
    })
  });
  const json = await res.json();
  return json['translations'][0]['text'];
}

翻訳されたテキストは画面表示に利用します。画面表示を更新した後、データをNCMBに保存します。

// 画面を更新
$update();
// データをNCMBに保存する処理
await saveTranslate(params.text, translatedText);

NCMBのデータストアに翻訳結果を保存する

saveTranslate 関数の内容です。Translateはデータストアのクラス名（DBでいうテーブル名相当）になります。

// NCMBにデータを保存する処理
const saveTranslate = (originalText, translateText) => {
	const Translate = ncmb.DataStore('Translate');
	const translate = new Translate;
	return translate
		.set('original', originalText)
		.set('translate', translatedText)
		.save();
}

ストアに反映

翻訳結果を保存したNCMBのデータはそのままストアに追加します。

// ストアに追加
$store.dispatch('addTranslate', translate);

処理全体

pages/translations.html のJavaScriptは全体として、次のようになります。

export default (props, { $store, $update }) => {
	let translatedText = '';
	// 翻訳ボタンを押した時の処理
	const addTranslate = async (e) => {
		e.preventDefault();
		// 入力値の取得
		const params = app.form.convertToData('#translation');
		// 翻訳実行（js/app.jsに定義）
		translatedText = await translationText(params.text);
		// 画面を更新
		$update();
		// データをNCMBに保存する処理
		const translate = await saveTranslate(params.text, translatedText);
		// ストアに追加
		$store.dispatch('addTranslate', translate);
	}

	// NCMBにデータを保存する処理
	const saveTranslate = (originalText, translateText) => {
		const Translate = ncmb.DataStore('Translate');
		const translate = new Translate;
		return translate
			.set('original', originalText)
			.set('translate', translatedText)
			.save();
	}
	
	return $render;
}

これでNCMBの管理画面にて、データストアにTranslateクラスができあがり、翻訳結果も保存されているのが確認できるはずです。

まとめ

NCMBを使うとクラウドデータベースへの保存がわずか数行で書けます。今回は使っていませんが、ACL（アクセス権限）も指定できます。ぜひ試してください。

次回は保存したデータの取得と表示を行います。