Microsoftの翻訳APIを試してみた

投稿日:

1年程前にHTML5の音声入力とGoogle翻訳APIを使ってこんなのを作ってみたけど、
HTML5の音声入力とGoogleの翻訳APIを試してみた | Shimabox Blog
Google翻訳APIがフリーで使えなくなっていて全然動かなくなってた。。

※参考記事
Google Translate API v2 有料化と v1廃止に伴って、Microsoft Translatorを使って見る余地はあるかもという話 – くるえるはてなくしょん

いやぁ〜、何というファ○ク。でもまぁ、そのままにしとくのも悔しいので、
こちらの記事にある通りMicrosoftの翻訳APIを試してみる事にしました。

Microsoftの翻訳APIは上記の参考記事中にもありあますが、
使ってみよう! Windows Live SDK/API:第38回 使ってみようMicrosoft Translator|gihyo.jp … 技術評論社

こちらの記事通りに進めたらあっさり使えました。
本当にあっさり。

完成品

んで、出来たのがこれです。
Microsoft Translation API And WebkitSpeech
前作ったのとUI変わってません(キリッ

というか、めちゃくちゃAPIの返答が遅いです。
※応答が遅すぎるので翻訳結果が返ってくるまではラジオボタンをdisabledにしたりとかしてます

GoogleのAPIは早かったから使えなくなってしまったのは悔やまれますなぁ。。

ソース

拙いですが一応ソースコードも晒しときます。
要素名とか、関数名とか酷いですけど勘弁です。

HTML ※input周り

<input type="text" id="webkitSpeech" x-webkit-speech lang="ja" onwebkitspeechchange="translate(this.value);" />
<input type="radio" name="langAtt" id="inputJa" class='inputLangChoiceParts' value="ja" checked="checked">
<label for="inputJa" class="label">Input Japanese</label>
<input type="radio" name="langAtt" id="inputEn"  class='inputLangChoiceParts' value="en">
<label for="inputEn" class="label">Input English</label>
<div class="choiceLang firstColumn label">
    <input type="radio" name="lang" id="en" class='langChoiceParts' value="en" checked="checked"><label for="en" id="langToEn">To English</label>
    <input type="radio" style="display:none;" name="lang" id="ja" class='langChoiceParts' value="ja"><label for="ja" id="langToJa" class='langChoiceParts' style="display:none;">To Japanese</label>
    <input type="radio" name="lang" id="zh-CHS" class='langChoiceParts' value="zh-CHS"><label for="zh-CHS">To Chinese</label>
    <input type="radio" name="lang" id="ar" class='langChoiceParts' value="ar"><label for="ar">To Arabic</label>
    <input type="radio" name="lang" id="fr" class='langChoiceParts' value="fr"><label for="fr">To French</label>
</div>
<div class="choiceLang label">
    <input type="radio" name="lang" id="de" class='langChoiceParts' value="de"><label for="de">To German</label>
    <input type="radio" name="lang" id="it" class='langChoiceParts' value="it"><label for="it">To Italian</label>
    <input type="radio" name="lang" id="ru" class='langChoiceParts' value="ru"><label for="ru">To Russian</label>
    <input type="radio" name="lang" id="ko" class='langChoiceParts' value="ko"><label for="ko">To Korean</label>
</div>
<div class="choiceLang label">
    <input type="radio" name="lang" id="pt-PT" class='langChoiceParts' value="pt-PT"><label for="pt-PT">To Portuguese</label>
    <input type="radio" name="lang" id="es" class='langChoiceParts' value="es"><label for="es">To Spanish</label>
    <input type="radio" name="lang" id="nl" class='langChoiceParts' value="nl"><label for="nl">To Dutch</label>
</div>
<div id="resultArea">
    <textarea id="result"></textarea>
</div>

javascript ※ajaxがあったのでjQueryを利用

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
jQuery(function($){

  // 翻訳を行う ※global 
  translate = function(text){
    var fromLang = $('#webkitSpeech').attr('lang'),
        toLang = getToLang();

    obtainResult(text, fromLang, toLang);
  };

  // Event付与
  var addEvents = function(){
    $("input[name='langAtt']:radio").change(function(){
      setAttributeLang($(this).val());
    });

    $("input[name='lang']:radio").change(function(){
      changeLang();
    });

    $('#webkitSpeech').keyup(function(){
      translate($(this).val());
    });
  };

  // API result
  var obtainResult = function(text, fromLang, toLang, doRecursive){
    $.ajax({
      type: "GET",
      url: "http://api.microsofttranslator.com/V2/Ajax.svc/Translate",
      dataType: "jsonp",
      data: {
        appId: appId, // 取得したBing APIのApplication ID
        text: text,
        from: fromLang,
        to: toLang
      },
      jsonp: "oncomplete",
      beforeSend : function(){
        // 返答が遅いのでチェックボックスをdisabledに
        $('input:radio').attr('disabled', true);
      },
      success : function(ret){
        $('#result').val(ret);
        // disabled解除
        $('input:radio').attr('disabled', false);

        // 翻訳結果を入力BOXに移してもう一度翻訳
        if(doRecursive === true){
          $('#webkitSpeech').val(ret);
          translate(getInputBoxValue());
        }
      },
      error : function(XMLHttpRequest, textStatus, errorThrown){
        $('#result').val(textStatus);
        $('input:radio').attr('disabled', false);
      }
    });
  }

  // 何語に翻訳するか
  var getToLang = function(){
    return $('input[name=lang]:checked').val();
  }

  // 入力言語(ja or en)の設定
  var setAttributeLang= function(val){
    $('#webkitSpeech').attr('lang', val);
    changeDisplayLang(val);
    changeAttributeLang(val);
  }

  // htmlの表示変更(入力言語変更後)
  var changeDisplayLang = function(val){
    var jaEle = $('#ja'),
        enEle = $('#en'),
        langToEn = $('#langToEn'),
        langToJa = $('#langToJa');

    if(val === 'ja'){
      jaEle.css('display', 'none');
      langToJa.css('display', 'none');
      enEle.css('display', 'inline');
      langToEn.css('display', 'inline');

      if(jaEle.attr('checked') === 'checked'){
        enEle.attr('checked', 'checked');
      } 
    }else if (val === 'en'){
      enEle.css('display', 'none');
      langToEn.css('display', 'none');
      jaEle.css('display', 'inline');
      langToJa.css('display', 'inline');

      if(enEle.attr('checked') === 'checked'){
        jaEle.attr('checked', 'checked');
      }
    }
  };

  // 入力言語(ja or en)変更時処理
  // 翻訳結果文字列を翻訳して入力BOXに移してからもう一度翻訳させる
  var changeAttributeLang = function(fromLang){
    var toLang = getToLang(),
    inputFromLang = fromLang === 'en' ? 'ja' : 'en',
    inputToLang = fromLang === 'en' ? 'en' : 'ja';

    obtainResult(
      getInputBoxValue(),
      inputFromLang,
      inputToLang,
      doRecursive = true // もう一度APIを叩かせる
    );
  }

  // 入力BOXの文字列取得
  var getInputBoxValue = function(){
    return $('#webkitSpeech').val();
  }

  // 翻訳言語変更
  var changeLang = function(){
    translate(getInputBoxValue());
  }

  // addEvent
  addEvents();
});
</script>

余談

ちなみにdemoではajaxでサーバーに投げてphpのfile_get_contentsで
翻訳結果を取得してます。※appidあんまり見せたくし

で、そうすると何故か翻訳結果がダブルクォーテーションで囲まれて返ってくるのでダブルクォーテーションを取り除いてから翻訳結果を表示しています。

翻訳結果にこんな関数を挟んでます。※demoのソース参照

var doublequotationTrim = function(str){
  var len = str.length;
  return str.substr(1, len).substr(0, len - 2);
}

いやぁ、それにしてもめっちゃ応答遅いっすわぁ。。
それとも、他に早くする方法とかあるのかなぁ???Helpっす。。

作成者: shimabox

Web系のプログラマをやっています。 なるべく楽しく生きていきたい。

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください