無料かつ高速な自動翻訳してくれる機能をwebにいれこむ

入り

翻訳機能ってなってくると、ロケールファイルをつくっていて人力で翻訳するパターンか、GoogleTranslateだったりやDeepLなどのAPIをつかって自動で翻訳する方法があるかと思います。
まずは、いろいろのパターンのメリット・デメリットを書いて行こうかと思います。

いろいろな方法に対してのメリット・デメリット

ロケールファイル

人力でコツコツ翻訳ファイルをつくっていくやり方

メリット

・翻訳を人力でつくっていくので変な翻訳やUIの乱れが起こることが少ない
・サーバー内で管理していくでレスポンスが早い。

デメリット

・自動ではない
・人力でつくっていくので作業時間がめっちゃかかる。それ専門の人材を用意した方が良いです
・管理がしにくい。（やり方によると思いますが）、一工夫としてgoogleスプレッドで管理すると少しは軽減できます。参考記事（https://tech.hitomedia.jp/entry/2018/05/30/165801）

GoogleCloudTranslateAPI

こちらはAPIを呼び出すと自動翻訳してくれます。GCP内のサービスで、無料枠があるが実用化すると無料枠では収まらないので有料になります。

メリット

・自動である
・翻訳をカスタマイズできます。簡単に言うと、正しくない翻訳があったら修正できる機能ですね。

デメリット

・ページ丸ごと翻訳ってわけにはいかない
・無料枠があるとはいえチャットとかを翻訳するとなると有料になってきますね。$20‡ /1,000,000 文字(50万文字までは無料)
・API呼び出し時間がかかる
・質がめっちゃ良いってわけではないです（DeepLに比べたらですが）

GASをかました無料API

翻訳機能のコードを書いたGASを作成して、それをAPIとして呼び出す方法
参考記事：https://qiita.com/satto_sann/items/be4177360a0bc3691fdf

メリット

・自動である
・無料

デメリット

・ページ丸ごと翻訳ってわけにはいかない
・一回での翻訳できる字数が７００文字まで
・変な翻訳やUIの乱れは出てきます(translate="no"を入れて別途ロケールで対応できます)

最終的に行き着いたのは

色々紹介してますが、最後に紹介するやり方が一番コスパ良いです。その名は、「Google Website Translator」。

Google Website Translator

クライアント側でページ丸ごと翻訳してくれるwordpressのプラグインとかで導入できるやつですね。
古臭いですが実はめっちゃ効果的です。色々試しましたがこれに落ち着きました。
色々試したのがアホらしかったです。
参考記事：https://so-zou.jp/web-app/tech/search-engine/google/translate/

導入方法

1.まずは、入れて見ましょう

参考記事の通りにやればページ丸ごと自動翻訳してくれます。
https://so-zou.jp/web-app/tech/search-engine/google/translate/

2.かっこ悪いのでデザインを整えましょう

下記のセレクトボックスのようにwebサービス内に配置したいのでcssを上書きします。

.goog-te-banner-frame {
  display: none !important;
}
.goog-tooltip {
  display: none !important;
}
.goog-te-combo {
  margin: 0 !important;
}
.goog-tooltip:hover {
  display: none !important;
}
.goog-text-highlight {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.goog-logo-link{
  display: none !important;
}
.goog-te-gadget{
  height: 30px !important;  
  overflow: hidden;
  font-size: unset !important;
}
body{ 
  top: 0 !important;
}

3.デフォルト言語をセッションでセット

デフォルトが「言語を選択してください」となっているのでデフォルト言語に切り替わるようにスクリプトを変更します。

<script>
  function googleTranslateElementInit() {
    /* この部分追加 */
    if (document.cookie.match("googtrans") == null) {
      function setCookie(key, value, expiry) {
        var expires = new Date();
        expires.setTime(expires.getTime() + (expiry * 24 * 60 * 60 * 1000));
        document.cookie = key + '=' + value + ';expires=' + expires.toUTCString();
      };
      setCookie('googtrans', '/auto/en', 1); //この部分でデフォルトをenに指定
    };
    /* ここまで */
    new google.translate.TranslateElement({
      includedLanguages: 'ar,de,en,es,fr,ru,th,vi,zh-TW,zh-CN,ja,ko',
    }, 'google_translate_element');
  };
</script>

完成動画

まとめ

Google Website Translatorは古きからあると思いますが偉大です