Salesforceのダッシュボードを自動翻訳するコツ

背景

Salesforceアプリのホームページに表示されているダッシュボードを自動的に翻訳するのは可能かどうかを検証してみました。

アイデア

ダッシュボードを翻訳するのは画面全体を翻訳するということなので、Webページあるいはコンポーネント全体を翻訳するという選択肢があります。
全ページの単語を検出し、取得　→　翻訳APIに投げて　→　翻訳結果を再度画面にレンダーリングするということができるかもしれませんけど、時間かかるし面倒なので今回はやりません。

Google翻訳

今回使ってるのはGoogle翻訳です。Google翻訳にはGoogle翻訳APIがありますが残念ながらAPIにはページ全体の自動翻訳機能がありません。
Google翻訳では以下のようにWebページ全体を自動翻訳するボタンを配置することができます。

しかしどうしても言語選択は手動で行うし、上記の画像のようにダサいバナーwも表示されてしまうので、少し改善する必要があります。

課題

第一のアイデアを検証してみましたが、Salesforceアプリページの画面全体を自動翻訳させることは不可能でした。

• LWCで実装するとしたら、まず外部スクリプトをダウンロードし静的リソースとして扱わない必要があります。しかしそれを実装してもLWCのロッカーSafetyに引っかかってしまって window オブジェクトの下をアクセスすることができませんでした orz
• Visualforceで実装したら、VFページのコンポーネントは iframeに包み込んでるので画面全体の制御は parentを使わないといけないですが、parentの直下をアクセスしようとすると cross-originのエラーが出てしまいましたのでアクセス不可になってました。

課題の解消

どうしても画面全体を自動翻訳ができないなら、コンポーネント内にチャートを手動で表示させて自動翻訳を行うしかりませんね。

さあ、実装しよう

• まずはVisualforceにチャートを追加します。「analytics:reportChart」のタグでこんな感じで追加できます

<analytics:reportChart reportId="00O2r0000013tzPEAQ" size="large" showRefreshButton="false" hideOnError="false">
    </analytics:reportChart>

• 自動で翻訳するということで、日本語環境のユーザは翻訳しないというフィルタリングをしないといけません。Apex上ではこんな感じでユーザの環境の言語を取得することができました。

User u = [SELECT toLabel(LanguageLocaleKey) FROM User WHERE Id = :UserInfo.getUserId()];
language = u.LanguageLocaleKey;

• その後Google翻訳の枠を用意

<div id="google_translate_element"></div>

• 英語環境であれば翻訳開始し、Google翻訳の選択ボックスを自動的に英語選んでその後Google翻訳のバナーと選択ボックスを非表示させます

<script type="text/javascript">
  function googleTranslateElementInit() {
    if ('{!language}' == 'English') {
      new google.translate.TranslateElement(
        {
          pageLanguage: 'ja',               // Webサイトの言語
          includedLanguages: 'en', // 翻訳する言語
        }, 'google_translate_element');
      setTimeout(function () {
        var select = document.querySelector('select.goog-te-combo');
        select.value = "en";
        select.dispatchEvent(new Event('change'));
      }, 2000)
      setTimeout(function () {
        const el = document.querySelector('#google_translate_element');
        el.style.display = 'none';
      }, 2500);
    }
  }
</script>

• Google翻訳のスクリプトを落として上記の関数をコールバックとして設定します

<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

• 最後にバナーを非表示するためのCSSを追加します

.goog-te-banner-frame.skiptranslate {
  display: none;
}

感想

現状はこんなに苦労して実現することができましたが、将来的にGoogle翻訳APIにWebページの翻訳の機能をすごく期待してます。