グーグル翻訳（Google Translate）を利用してサイト多言語化

サイトに外国からの訪問がある場合、一番早く対応する方法はグーグル翻訳機能を追加して翻訳されたサイトを見せるのが良いかと思います。
そのため、今回はグーグル翻訳の追加について説明します。

- グーグル翻訳追加

グーグル翻訳言語選択リストを追加したい部分に以下のコードをhtmlに追加します。

<div id="google_translate_element"></div>
<script src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<script type="text/javascript">
	function googleTranslateElementInit() {new google.translate.TranslateElement({pageLanguage: 'ko',autoDisplay: false}, 'google_translate_element');}
</script>

上記のコードについて説明します。
1. グーグル翻訳選択リスト
タグの中にグーグル翻訳選択リストが生成されて表示されます。

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

2. グーグル翻訳のJavascript機能
グーグル翻訳のJavascript機能で最後の「googleTranslateElementInit」はグーグル翻訳の初期化関数名で初期化関数名と同じにしないといけない。
パラメーターで渡す関数名をグーグル翻訳が呼びます。

<script src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

3. グーグル翻訳オブジェクトを生成
初期化関数名「googleTranslateElementInit」にグーグル翻訳オブジェクトを生成（new google.translate.TranslateElement）してパラメータ「google_translate_element」は「1. グーグル翻訳選択リスト」にある<div>タグIDです。そのタグIDと名前が同じにならないといけない。

<script type="text/javascript">
function googleTranslateElementInit() {new google.translate.TranslateElement({pageLanguage: 'ja',autoDisplay: false}, 'google_translate_element');}
</script>

- 「Powered by Google Translate」を表示しないデザインを使用

「layout: google.translate.TranslateElement.InlineLayout.SIMPLE」の部分追加

<div id="google_translate_element"></div>
<script src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<script type="text/javascript">
	function googleTranslateElementInit() {new google.translate.TranslateElement({pageLanguage: 'ja', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');}
</script>