Microsoftの翻訳APIを久しぶりに使ってみた（翻訳実装編）

2016年7月5日 GitHub, javascript, Microsoft, PHP

Follow @mojyamojya

Developer’s blog | Microsoftの翻訳APIを久しぶりに使ってみた（アクセストークン取得API実装編）の続きです。

ちょっと時間が空いてしまいましたが、いよいよ翻訳処理の実装をしていきたいと思います。

アクセストークン取得の実装（Javascript）

前回は、アクセストークンを取得するphpの処理を実装し、それをauth.phpという名前で保存しました。

まずは、これをJavascriptから呼び出してアクセストークンを取得する部分を実装します。

function authorize(src, dst, text) {
	var xhr = new XMLHttpRequest();
	xhr.open("POST", "auth.php", true);
	xhr.responseType = 'json';

	xhr.onload = function () {
		if (xhr.readyState == 4) {
			if (xhr.status === 200) {
				console.log(xhr.response.access_token);
			}
		}
	};
	xhr.onerror = function () {
		console.log("認証に失敗しました。");
	};

	xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	xhr.send();
}

xhr.response.access_token

の形式でアクセストークンの参照ができます。

翻訳API呼び出しの実装（PHP）

翻訳APIを呼び出す部分ですが、こちらもJavascriptからクロスドメインのアクセスが許可されていないようなので、phpで実装しサーバーサイドから呼び出すようにしました。

アクセストークンをHTTPヘッダーにセットしてAPIを呼び出します。

‘Authorization: Bearer ‘ . $token

それと同時にAccess-Control-Allow-Originのヘッダーにoriginの値をセットします。ここでhttp://api.microsofttranslator.comとしています。トークンと合わせてセットすると以下のようになります。

$header = array(
	'Authorization: Bearer ' . $token,
	'Content-Type: application/x-www-form-urlencoded',
	'Access-Control-Allow-Origin: http://api.microsofttranslator.com'
);

次に、これをストリームコンテキストリソースにまとめて、

$context = stream_context_create(array(
    "http" => array(
        "method"  => "GET",
        "header"  => implode("\r\n", $header),
    )
));

file_get_contentsメソッドに渡してAPIを呼び出します。

$response = file_get_contents(
	'https://api.microsofttranslator.com/v2/Http.svc/Translate?' . http_build_query($data, "", "&"),
	false,
	$context
);

まとめるとこうです。

<?php
$token = $_GET['token'];
$text = $_GET['text'];
$src = $_GET['src'];
$dst = $_GET['dst'];

$data = array(
	'text' => $text,
	'from' => $src,
	'to' => $dst
);

$header = array(
	'Authorization: Bearer ' . $token,
	'Content-Type: application/x-www-form-urlencoded',
	'Access-Control-Allow-Origin: http://api.microsofttranslator.com'
);

$context = stream_context_create(array(
    "http" => array(
        "method"  => "GET",
        "header"  => implode("\r\n", $header),
    )
));

$response = file_get_contents(
	'https://api.microsofttranslator.com/v2/Http.svc/Translate?' . http_build_query($data, "", "&"),
	false,
	$context
);

echo $response;

これをtranslate.phpとして保存しました。

翻訳API呼び出しの実装（Javascript）

続いて、translate.phpをJavascriptから呼び出す部分を実装します。

function translate(src, dst, text, token) {
	var params = ['token=' + encodeURIComponent(token),
		'&text=' + encodeURIComponent(text),
		'&src=' + src,
		'&dst=' + dst
	].join("");

	var xhr = new XMLHttpRequest();
	xhr.open('GET', 'translate.php?' + params, true);

	xhr.onload = function () {
		if (xhr.readyState == 4) {
			if (xhr.status === 200) {
				var xml = $.parseXML(xhr.response);
				$("#dstText").val($(xml).text());
			}
			else {
				showErrorMessage("翻訳に失敗しました。");
			}
		}
	};
	xhr.onerror = function () {
		showErrorMessage("翻訳に失敗しました。");
	};

	xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	xhr.send();
}

翻訳結果はXML形式で返ってくるので、

				var xml = $.parseXML(xhr.response);

パースして翻訳結果を出力するようにします。

一番最初に記載した、アクセストークンを取得する処理、authorizeでトークンをconsoleにログ出力していた部分を

	xhr.onload = function () {
		if (xhr.readyState == 4) {
			if (xhr.status === 200) {
				console.log(xhr.response.access_token);
			}
		}
	};

translate関数を呼び出すように修正しています。

	xhr.onload = function () {
		if (xhr.readyState == 4) {
			if (xhr.status === 200) {
				translate(src, dst, text, xhr.response.access_token);
			}
		}
	};

これで翻訳結果が、下のtextareaに表示されるようになりました！

翻訳結果の表示

サンプルをこちらにアップしておきましたので、参考までにどうぞ。
サンプル

ソース一式はこちら。
mojyamojya/bing

株式会社ライブキャスト