PbTimes 情報誌

Google翻訳APIを使用してサイトを多言語で表示

2013/07/24

• API
• Google
• Translate

Google翻訳でサイトを多言語で表示してみる

概要

Google翻訳APIを使用して、簡単に自分のサイトを多言語で表示する方法を紹介します。
googleTranslateElementInitを定義するだけです。
これを行うと各言語のプルダウンが表示され、プルダウンを選択すると各言語でサイトが表示されます。

自動翻訳のため、確実に正しく翻訳されるわけではありませんが、とても簡単に設置できるので試してみてはいかがでしょうか。

翻訳プルダウンの設置方法

設置するのは本当に簡単で、bodyタグの中に以下のコードを記述するのみです。

<div id="google_translate_element"></div>
<script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'ja', includedLanguages: 'en,de,es,fr,it,pt,ru,zh-CN', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
}
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

pageLanguageでは、サイトの言語を指定します。

includedLanguages では、翻訳する言語をしていします。

layout では、表示形式を選択します。

上記のコードは、Google ウェブサイト翻訳ツールから取得できますので、是非試してみてください。