コーディングブログ

Coding Blog

PHP(WP)とjQueryで1ヶ月無料の翻訳API『Translator Text API v3.0』を使って非同期処理で同時多言語翻訳!

API

jQuery

PHP

今回実際に作成したのがこちら!
多言語同時翻訳サービス

このページの仕様は、

  • 翻訳したい言語は自動検出
  • 翻訳後の言語は複数言語同時翻訳
  • 翻訳後の言語はユーザーが指定(複数可能)
  • ajaxで非同期で翻訳

です。
今回はこれベースに解説していきます。

    まずはAPI keyを取得

    まず初めに、Azureのアカウントを作成する必要があります。とりあえず無料でできます。
    アカウントは12ヶ月は無料で使えます。翻訳APIは1ヶ月は無料です。
    下記リンクから登録を進めてください。
    https://azure.microsoft.com/ja-jp/free/

    Microsoft Azure 無料で始める

    若干登録時にクレジットカードを登録したりと、入力項目が多いのでネックですが、APIを無料で使うための少しの辛抱です。

    公式のサンプルコードをベースに構築

    今回はPHPでやっていくのでこちらを使用します。
    公式サンプルコード(Translate.php)

    他にもRubyやPythonなど、様々な言語でのサンプルコードが用意されていますね。
    その他の言語でもサンプルコードを用いることによって実装の手助けになるかと思います。
    https://github.com/MicrosoftTranslator

    とりあえず実装

    処理に合わせてコメントアウトを付け、解説しています。

    これで「Hello, world!」を、日本語とイタリア語に翻訳できたかと思います。

    使用パラメーター

    パラメーター名説明使用例
    to必須のパラメーター。
    出力テキストの言語を指定します。
    言語は下記『翻訳できる言語を確認』参照
    &to=ja&to=it

    翻訳できる言語を確認

    公式のサンプルコードにAPI Keyを入れて実行するだけで、
    『output.txt』に対応言語が無数に書き込まれ、保存されます。
    公式サンプルコード(Languages.php)

    例)

    その言語一覧がこちら

    言語一覧(output.txt)

    翻訳後のテキストをユーザーが入力できるようにする

    ここからカスタマイズを進めていきます。

    テキストエリアを用意してユーザーが入力したテキストを翻訳するようにしていきます。

    フォームで受け取ったテキストエリアの値をパラメーターとしてセットします。

    先ほどの下記ソースを上記(動的に翻訳前テキストを変更版)に差し替えたら、動的にユーザーが入力したテキストで翻訳ができます。

    翻訳後の言語はユーザーが指定(複数可能)できるようにする

    フォームでチェックボックスで複数選択させて選択した言語で翻訳する

    まずは言語リストを作ります。
    とりあえず5か国語用意しました。

    その後言語リストに基づいてチェックボックスを出力します。

    フォームで受け取ったチェックボックスの値をパラメーターとしてセットします。

    そして、先ほどの下記ソースを上記(動的に翻訳後言語を変更版)に差し替えたら、動的にユーザーが選択した言語で翻訳ができます。

    WordPressでAjaxを使って非同期に翻訳

    ここまでで十分翻訳機能は完成していますが、google翻訳みたいに入力してすぐに翻訳結果を表示してほしい所ですよね。
    ここからはjQueryもつかって非同期処理を実装していきます。

    WordPressでAjaxを使う

    WordPressでは /wp-admin/admin-ajax.phpリクエストを送るとAjaxを使うことができます。
    ※ディレクトリが違う場合は自身の環境に合わせてください。

    最終 完成版ソース

    – PHP、HTML

    – functions.php

    – jQuery

    テキストエリアの入力に応じて高さを自動で変換したいので、下記プラグインを使用しました。
    Autosize

    完成サイト

    多言語同時翻訳サービス

    公式ドキュメントまとめ