web ページに Google 翻訳ボタンの追加方法を学習します。
簡単な基本 web ページから始めます。
id "google_translate_element" を持つ <div> 要素を追加します：
<!DOCTYPE html>
<html>
<body>
<h1>My Web Page</h1>
<div id="google_translate_element"></div>
</body>
<html>
Try it Yourself »
google.com で翻訳 API への参照を追加します：
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
javascript 関数を追加します：
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
}
</script>
これで、ページ・コンテンツを翻訳する準備ができています：
<!DOCTYPE html>
<html lang="ja">
<body>
<h1>My Web Page</h1>
<p>Hello everybody!</p>
<p>Translate this page:</p>
<div id="google_translate_element"></div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</body>
</html>
Try it Yourself »
現在、Google 翻訳ボタンには3種類のデザインモードがあります。