無償の Bing Translation APIを使用する(20110407)

  • Article

このエントリはこちらのエントリを(私なりの解釈で)翻訳したエントリです。

https://www.microsoft.com/web/post/using-the-free-bing-translation-apis

何気にソースもオリジナルと少しだけ変えてたりしますが、これで翻訳 API を使う一番シンプルなパターンは体験できるかと思います。

無償の Bing Translation APIを使用する。

Bing では無償で利用できる様々な API を提供しています。この API を活用することで、Web ページに様々な機能を追加し、より使いやすい Web ページへとあなたのページを変えていくことができます。今回は多様な API の中から翻訳 API を使って、簡単な翻訳機能を作成します。また、ほかのエントリではページ全体を翻訳するような仕組みも紹介する予定です。

なお、Bing の API を使用するには Bing AppID を取得する必要があります。まずはこの Bing AppID の取得方法から紹介します。

Bing AppID の取得

1. Windows Live ID をお持ちでない場合は、 https://signup.live.com/signup.aspx でWindows Live ID を取得してください。もし、Windows Live IDをお持ちの場合はこのステップは無視してください。

2. Bing AppID を取得するには https://www.bing.com/developers/default.aspx に Windows Live ID を使ってログインしてください。

3. 表示されたページの “Get started by applying for an AppId now” というリンクをクリックしてください。

4. 表示されたフォームの必要項目を入力し、ライセンス条項に同意したら “agree” ボタンを押して登録内容を送信してください。

5. AppID と登録したアプリケーション名が表示されます。AppID は16進数の文字列で生成されます。ここでは Disable、Enable、Delete を選択可能ですが、ここでは何も操作する必要がありません。

6. このページでいつでも生成した AppIDを確認することができるので、ここをお気に入りに登録しておくことをお勧めします。

Translator API を使用する

WebMatrix を使ってサイトを簡単に作成する

まずは WebMatrix を使用して簡単なサイトを作成します。もし、 WebMatrix をインストールしていない場合はこちらのサイトから WebMatrix をインストールしてください。 https://www.microsoft.com/web/webmatrix

WebMatrix を使用する準備が出来たら次の手順でサイトを作成します。

1. WebMatrix の「テンプレートからサイトを作成する」をクリックして新しい Web サイトを作成します。

01

2. テンプレートのリストから 「空のサイト[英語]」を選択します。サイト名には「Windows-Live-Translator」 と入力します。

02

3. OK を押すと サイトが生成されます。WebMatrix の画面の左下に4つの作業領域が表示されますので、その中から「ファイル」という作業領域を選択してください。

03a

4. まだこの段階では空のサイトです。まずは「新規」ボタンをクリックして CSHTML ファイルを作成します。

03b

5. ダイアログに様々なファイル タイプが表示されますが、その中から CSHTML を選択し「Web-Translator.cshtml」という名前を付け、「OK」 を押します。

04

6. 生成された CSHTML ファイルの <body> と </body> タグの間に下記のコードを挿入します。：

 <h1>Using Windows Live Translator's HTTP API</h1>

<form method="post" action="">

    <div>

        <label for="tobeTranslated">Type the text you want translated:</label>

        <br />

        <textarea name="tobeTranslated" rows="5" cols="20" id="inputText" /></textarea>

    </div>

    I want to translate to:

    <select name="languageChoice">

        <option value="ja">Japanese</option>

        <option value="es" >Spanish</option>

        <option value="fr">French</option>

        <option value="it">Italian</option>

    </select>

    <input type="submit" value="Translate Now!" />

</form>

7. 「実行」ボタンを押して、作成した Web ページを表示します。<body> タグの中に記述した HTML が表示されます。

05

06

8. この Web ページのボタンをクリックしても、何も起こりません。これはまだ翻訳を実行するためのコードが実装されていないためです。

ここまで作ったのは THML のフォームだけです。フォームはデータを送信するための標準的な方法です。入力したデータをサーバーに送信するには POST という仕組みを使用します。そうすることでサーバーは入力したデータを処理することができるのです。

このサンプルではPOST を使って文章とその文章を翻訳したい言語情報をサーバーに送付します。サーバーはそのデータを受け取り、翻訳を行って、HTML のページを生成して送り返します。

Microsoft Translator ではクラウド上で文章を翻訳するサービスを提供しています。今回のサイトでは次のような仕組みで翻訳が行います。

1. ブラウザ上で「Translate」ボタンを押す

2. サーバーにデータを POST で送信する

3. サーバーは受け取ったデータをBing Translator クラウド サービスに送信する

4. サーバーがクラウド サービスから翻訳結果を受け取る

5. サーバーは HTML を生成してブラウザに送り返す

次のセクションでは上記の処理を実装します。

翻訳クラウド サービスを利用する

今回使用するサービスは https://api.microsofttranslator.com/v2/Http.svc に配置されています。このセクションではクラウド サービスを利用するために WebMatrix で提供されている簡単なクラスを紹介します。このクラスを使用して翻訳結果をクラウド サービスから取得します。

このサービスを使うには4つの引数が必要です。第1引数は先ほど取得した Bing AppID です。第2引数が翻訳したい文章。第3、第4引数は翻訳前と翻訳後の言語コードです。

まず、最初にすることは作成したサーバーにデータを送信するように作成した CSHTML ページでサーバーがデータを処理できるようにすることです。ここから Razor 記法を使用して送信されたデータを処理します。

先ほど記述した HTML ページの <form> タグの action 属性が空のままであるのが確認できるかと思います。これはデータの送信先が同じページであることを意味しています。ページが最初に表示された時には GET という仕組みを利用してサーバーからこのページを取得しましたが、このフォームのデータを送信する際には POSTが使われます。このコードでは同じページにデータを送信して、サーバーが POST で送信された場合のみ翻訳処理を実行するようになっています。

次のコードを Web-Translator.cshtml ファイルの <!DOCTYPE html> タグの上に追加します。

 @{

    string appId = "<AppID をここに記述してください>";

    string fromLang = "en";

    string translatedText = "";

    if (IsPost) {

    }

}

「@」は Razor 記法のコードであることを意味しています。このコードはサーバー側で、ページが呼ばれるたびにGET で呼ばれたか POSTで呼ばれたかに関わらず実行されます。

コードの中に「if (IsPost)」という記述があるのが分かるでしょうか?これは POST の場合だけ実行するような判定を行っています。今回は「Translate」 ボタンが押された場合 (POST の場合) のみ翻訳を行いたいため、翻訳の処理はこの判定の中に記述します。

Microsoft Translator クラウド サービスを呼び出すためのコードを 「if (IsPost)」 の中に追加します。

 if (IsPost) {

    string tobetranslated = Request["tobeTranslated"];

    string toLang = Request["languageChoice"];

    if (tobetranslated == "") {

        <text>

        <p style="color:red;">Please enter text to be translated!</p>

        </text>

        }

    else

    {

        string uri = "https://api.microsofttranslator.com/v2/Http.svc/Translate?appId="

            + appId + "&text=" + tobetranslated + "&from=" + fromLang + "&to=" + toLang;

        HttpWebRequest request = (HttpWebRequest)WebRequest.Create(uri);

        WebResponse response = request.GetResponse();

        Stream strm = response.GetResponseStream();

        StreamReader reader = new System.IO.StreamReader(strm);

        translatedText = reader.ReadToEnd();

        Response.Write("The translated text is: '" + translatedText + "'.");

        response.Close();

    }

}

・フォームの 「tobeTranslated」 というテキストエリアに入力された文章は、サーバー側で 「Request[“”tobeTranslated]」という形で取り出すことができます。同じように翻訳後の言語コードを 「Request[“languageChoice”]」という形で取り出すことができます。

・もし、テキストエリアに何も入力されていない場合は、文章を入力するようにメッセージを表示しています。

テキストエリアが空でない場合は、先ほど説明した4つの引数を使ってサービスを呼び出すためのURI を組み立てます。

.NET Framework で提供されている HttpWebRequest クラスはサービスに処理を依頼し、その結果を WebResponse クラスとして受け取ります。この処理結果は StreamReader クラスで読み取ることができます。

この処理ではサービスへの要求とサービスからの応答、そしてその結果として翻訳済みの文章を受け取るという流れが実現できました。この結果を Respose.Write を使って Web ページの最上部に表示するようにしています。

07

08