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

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

2016年6月7日 javascript, Microsoft, PHP

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

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

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!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で実装しました。

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<?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形式で返ってきます。

1
2
3
4
5
6
{
    "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の呼び出し部分を説明したいと思います。

関連記事

»
«