audioタグで音声翻訳アプリを作ろう！：HTML5アプリ作ろうぜ！（6）（2/3 ページ）

[山崎 大助，魚津システム]

今回のサンプルで使用している翻訳API「Microsoft Translator API」

Microsoft Translator API（AJAX）
http://msdn.microsoft.com/en-us/library/ff512404.aspx
Microsoft TranslatorのWebサイト、Excite翻訳のような翻訳機能を自分のWebページにも追加できます。

　翻訳APIを使用するには、「Windows Azure Marketplace」への登録と、「Translator API利用登録」が必要になります。面倒ですが、1度登録してしまえばOKなので、頑張りましょう！

1．Windows Azure Marketplaceへの登録
http://datamarket.azure.com/

2．Microsoft Translator APIの利用登録
「Windows Azure Marketplace」にサインインした状態で以下のURLを開きましょう。
https://datamarket.azure.com/dataset/bing/microsofttranslator
※Microsoft Translator APIは200万文字／月まで無料
ここでは、一番下の0円を選択して登録しましょう。

3．サインアップ

4．ありがとうございます。

アプリケーション登録

　Microsoft Translator APIを使用するには作成するアプリケーション名（仮名でOK）やクライアントIDなどを登録する必要があります。

　以下、URLリンクから「アプリケーションの登録」へ進む。
　https://datamarket.azure.com/developer/applications/register

　以下2つのキーがAPI利用には必須なので登録しましょう！

• クライアントID：client_id（API利用で必要になります）
• 名前：仮名でもアプリ名を付けておきましょう（ユニークで）
• 顧客の秘密：client_secret（API利用で必要になります）
• リダイレクトURI：仮のURLなど登録しておきましょう（http://localhost/……など）
  ※メモ帳などにコピーして保存しておきましょう。必須フィールドを全て入力し、作成しましょう。

サンプルファイル説明

• ダウンロード:「http://sample.atmarkit.jp/fux/1309/11/sample.zip」

1. サンプルファイル構成
   • sample.html［メイン画面のHTMLファイル］
   • sample.php［認証用のPHPファイル］
     ※sample.html、sample.phpを同ディレクトリに配置してください。
     ※PHP動作環境が必要です。APIキー認証はPHPファイルで行います。
2. 実際に使用してるHTML5のAPI
   • audio
   • LocalStorage
3. 対応Webブラウザ
   • Safari
   • Chrome
   • Firefox
     ※IEブラウザ非検証

サンプル：コードの解説［PHP側：API認証処理］

　このPHPファイルは「Microsoft Translator API」を使用するための認証処理を行います。上記画像の（1）と（2）は、「アプリケーションの登録」のページで取得した、

• クライアントID：client_id → （1）
• 顧客の秘密：client_secret → （2）

この2つのキーを書き換えてください。
※sample.phpのコードは（1）と（2）の箇所が“******”となっていますので、自身の取得したIDを入力して使ってください。

　他のPHPコードは一切変更する必要はありません。「クライアントID」と「顧客の秘密」キーをマイクロソフト社のサーバに送り、翻訳APIの利用証明キーを取得するためだけのファイルです。主な処理はHTML側が行っています。

　次の解説でHTMLを説明しますので、そちらでご確認ください。

サンプル：コードの解説［HTML側：翻訳＆音声処理］

1．HTMLファイル

27〜35行目：SELECBOXで「翻訳方法を選択」するようにしています
37〜40行目：翻訳文字入力のテキストエリア
42〜45行目：翻訳後文字列の表示領域
47〜51行目：翻訳音声再生のaudioタグを表示