株式会社ライブキャストロゴ 株式会社ライブキャスト

Microsoftの翻訳APIを久しぶりに使ってみた（アクセストークン取得API実装編）

2016年6月7日 javascript, Microsoft, PHP
シェア

Microsoftの翻訳APIを久しぶりに使ってみた（準備編）の続きです。

今回はアクセストークン取得API呼び出しの実装についてまとめてみたいと思います。

画面イメージは、gTranslatorのように翻訳前と翻訳後の文章を入出力するtextareaがあって、翻訳対象の言語と翻訳後の言語を選べるようにしたいと思います。後、翻訳実行のボタンがあるといいと思います。

少しだけスタイルをあててこんな感じにしてみました。

翻訳フォームのレイアウト

htmlはざっくりですがこんな感じになりました。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>Translate example</title>
	<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>  
</head>
 <style>
 .container {
 	margin: 10px auto;
 	width: 300px;
 }
 textarea {
 	float: left;
 	width: 300px;
 	height: 100px;
 }
 </style>
<body>
	<div class="container">
		<textarea id="srcText"></textarea>
		<div style="clear: both;"></div>
		<div style="float: left; height:36px; line-height:36px;">
			<select id="srcLang">
				<option value="ja" selected>日本語</option>
				<option value="zh">中国語</option>
				<option value="en">英語</option>
				<option value="fr">フランス語</option>
				<option value="de">ドイツ語</option>
				<option value="it">イタリア語</option>
				<option value="es">スペイン語</option>
			</select>
			<select id="dstLang">
				<option value="ja">日本語</option>
				<option value="zh">中国語</option>
				<option value="en" selected>英語</option>
				<option value="fr">フランス語</option>
				<option value="de">ドイツ語</option>
				<option value="it">イタリア語</option>
				<option value="es">スペイン語</option>
			</select>
			<button>実行</button>
		</div>
		<div style="clear: both;"></div>
		<textarea id="dstText" style="float: left;"></textarea>	
	</div>
</body>
</html>

とりあえず今回はAPI呼び出しの部分がメインなので、見た目に関してはこれで良いことにします。jQueryを使っています。cdnより読み込むようにしました。

続いて、API呼び出しの部分を実装していきたいと思います。

こちらの翻訳APIを呼び出す前に、
Using the HTTP Interface
アクセストークンを取得しないといけません。
Obtaining an Access Token

Microsoftのサイト以外ではこちらがとても参考になりました。
Microsoft Translator API プログラミング解説

url

アクセストークンを取得するAPIのurlはこちらです。
https://datamarket.accesscontrol.windows.net/v2/OAuth2-13

リクエストパラメータ

このAPIはjavascriptのクロスドメインの呼び出しが許可されていないので、PHPで実装しました。

こんな感じになりました。

<?php
const CONST_TRANSLATE_TOKEN_CLIENT_ID = 'myappid';
const CONST_TRANSLATE_TOKEN_CLIENT_SECRET = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
const CONST_TRANSLATE_TOKEN_SCOPE = 'http://api.microsofttranslator.com';
const CONST_TRANSLATE_TOKEN_GRANT_TYPE = 'client_credentials';
const CONST_TRANSLATE_TOKEN_ORIGIN = 'https://datamarket.accesscontrol.windows.net';
const CONST_TRANSLATE_TOKEN_URL = 'https://datamarket.accesscontrol.windows.net/v2/OAuth2-13';

$data = array(
	'client_id' => CONST_TRANSLATE_TOKEN_CLIENT_ID,
	'client_secret' => CONST_TRANSLATE_TOKEN_CLIENT_SECRET,
	'scope' => CONST_TRANSLATE_TOKEN_SCOPE,
	'grant_type' => CONST_TRANSLATE_TOKEN_GRANT_TYPE
);

$header = array(
	'Content-Type: application/x-www-form-urlencoded',
	'Access-Control-Allow-Origin: ' . CONST_TRANSLATE_TOKEN_ORIGIN
);

$context = stream_context_create(array(
    "http" => array(
        "method"  => "POST",
        "header"  => implode("\r\n", $header),
        "content" => http_build_query($data, "", "&")
    )
));

$response = file_get_contents(
	CONST_TRANSLATE_TOKEN_URL,
	false,
	$context
);

echo $response;

Access-Control-Allow-Originをhttps://datamarket.accesscontrol.windows.netにしてHTTPヘッダに設定しています。これでこのPHPを経由して、javascriptからの呼び出しができるようになります。

レスポンス

レスポンスはjson形式で返ってきます。

{
	"token_type":"http://schemas.xmlsoap.org/ws/2009/11/swt-token-profile-1.0",
	"access_token":"xxxxxxxxxxxxxxxxxxxxx",
	"expires_in":"600",
	"scope":"http://api.microsofttranslator.com"
}

取得したaccess_tokenはTranslate API呼び出し時に使用します。

これでアクセストークン取得のAPI呼び出しが実装できました。
次回は、翻訳APIの呼び出し部分を説明したいと思います。

関連記事

»
«