Googleウェブサイト翻訳ツール

らら
らら

はじめに

2019年1月でサービス終了したGoogleウェブサイト翻訳ツールとGoogle翻訳系について調べてみた。

Google翻訳とGoogleウェブサイト翻訳ツール

Googleウェブサイト翻訳ツールは、Google翻訳のウェブサイト上で使用できる、ウィザード付のツールバー生成機能で

ステップごとに設定していくと、HTMLタグとjavascriptが生成されて、既存のHTMLに組み込むだけで言語変換できるツールバーが生成されてました。

こちらのサービスが2019年1月で終了しました。Google翻訳は現在もサービス中です。

下記のツールバー

Googleウェブサイト翻訳ツール

言語を選択すると下記の画面になります。

Googleウェブサイト翻訳ツール

Google翻訳からだと下記から

上部のツールバーが違いますね・・

Googleウェブサイト翻訳ツール

Googleウェブサイト翻訳ツールのタグ




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

TranslateElementのオプション

ウィザードでなくても手動でjavascriptかけば。。

pageLanguageja Webサイトの言語
includedLanguagesen,zh-CN 翻訳する言語
layout表示モード
autoDisplaytrue 翻訳バナーを自動的に表示するか
multilanguagePagetrueコンテンツに複数の言語が含まれているか
gaTracktrue Google Analytics連動
gaIdGoogle AnalyticsのID

layout

google.translate.TranslateElement.InlineLayout.VERTICAL縦
google.translate.TranslateElement.InlineLayout.HORIZONTAL横
google.translate.TranslateElement.InlineLayout.SIMPLE言語プルダウンのみ
google.translate.TranslateElement.FloatPosition.BOTTOM_RIGHT右下
google.translate.TranslateElement.FloatPosition.BOTTOM_LEFT左下
google.translate.TranslateElement.FloatPosition.TOP_LEFT右上
google.translate.TranslateElement.FloatPosition.TOP_RIGHT左上

実際には、現在もサービスとしては動作しています。ウィザードでタグ生成機能がサービスを停止しています。

ただ、これは、下記URLによると

https://developers.google.com/search/blog/2020/05/google-translates-website-translator?hl=ja

Google 翻訳のウェブサイト翻訳ツール - 非営利目的の使用に限り無料で提供します。

2020 年 5 月 19 日に COVID-19 の対応による措置の様です。

Google翻訳へ直接飛ばす方法

こちらは、別ウィンドウ表示になります。


https://translate.google.com/translate?sl=ja&tl=en&hl=ja&u=http://xxx.xxx.xxx
<a href="https://translate.google.com/translate?sl=ja&tl=en&hl=ja&u=https://www.omakase.net">英語版はこちら</a>

上記サンプル

英語版はこちら

別ウィンドウにしたくない場合は・・または下記のようにするとか


<select onchange="location.href=value;">
<option value="https://translate.google.com/translate?hl=en&sl=ja&tl=en&u=https://www.omakase.net/">English</option>
<option value="https://translate.google.com/translate?hl=zh-CN&sl=ja&tl=zh-CN&u=https://www.omakase.net/">中文（简体字）</option>
<option value="https://translate.google.com/translate?hl=zh-TW&sl=ja&tl=zh-TW&u=https://www.omakase.net/">中文（繁體字）</option>
</select>

上記サンプル



u翻訳したいURL
sl翻訳元の言語　auto ja en
tl翻訳後の言語 ja en
hl翻訳インターフェイスの言語 ja en

上記も公開されいる情報ではないので・・・

下記のURLを解析してみたいな・・


https://translate.google.co.jp/?hl=ja&sl=auto&tl=ja&op=websites

どちらにしても、いつ終わるかわからないので・・

Google Translation API

こちらは、現在、Google MAP同様有料になり、サービス名が

Google Cloud Translationとなっています。ややこしいですね。

Cloud Translation - Basic（v2）系は、以前と同様に使用できます。

V2だとhtmlファイルのような、タグ付きはできず、textだけになります。

V3ではベータ版では、mimeType: 'text/html'ができていましたが。ファイルで指定のみになりました。

Cloud Translation - Basic（v2）(Google Translation API)

最初の 500,000 文字 *（1 か月あたり）無料（毎月 $10 分のクレジットとして適用）
500,001 文字～10 億文字 *（1 か月あたり）$20/100 万文字
10 億文字超*（1 か月あたり）割引料金についてのご相談は、営業担当者にお問い合わせください。

Cloud Translation - Advanced（v3）

NMTのみでドキュメント翻訳は省いています。

毎月最初の 500,000 文字 無料毎月 $10 分のクレジットとして適用）
1 か月あたり500,000 文字超100 万文字あたり $20*
1 か月あたり 10 億文字以上割引料金についてのご相談は、営業担当者にお問い合わせください。

注意）mimeType: 'text/html'を指定した場合、htmlのタグも文字数に含まれるそうです。

javascriptのサンプルがなく・・RESTの方を参考に・・

https://cloud.google.com/translate/docs/basic/translating-text?hl=ja

文字をクリックしたら、そこの部分だけ翻訳する感じ・・

Cloud Translation - Basic（v2）サンプル

こちらもhtmlコードはできないのでtextで・・


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>Google Translation APIV2 サンプル</title>
	<script src="https://code.jquery.com/jquery.min.js"></script>
	<script>
		var apiKey = "Googleで取得したキー";
		$(document).ready(function () {
			loadLanguages();
			$("[id^='tran_']").click(function (e) {
				var text = $(this).text();
				var saveid = $(this);
				if(text.length > 0) {
					var langSource = $('#selsrclang').val();
					var langTarget = $('#seltrglang').val();
					var apiurl = "https://www.googleapis.com/language/translate/v2?key=" + apiKey + "&source=" + langSource + "&target=" + langTarget + "&q=";
					$.ajax({
						url: apiurl + encodeURIComponent(text),
						dataType: 'jsonp',
						async: false,
						success: function (data) {
							if(langSource === langTarget) {
								saveid.text(text);
							} else {
								saveid.text(data.data.translations[0].translatedText);
							}
						}
					});
				}
			});
		});
		function loadLanguages() {
			var apiurl = "https://www.googleapis.com/language/translate/v2/languages?key=" + apiKey + "&target=ja";
			$.ajax({
				url: apiurl,
				dataType: 'jsonp',
				success: function (data) {
					var languages = data.data.languages;
					$.each(languages, function (index, language) {
						$('#selsrclang').append('<option value="' + language.language + '">' + language.name + '</option>');
						$('#seltrglang').append('<option value="' + language.language + '">' + language.name + '</option>');
					});
					$("select#selsrclang").val('ja');
					$("select#seltrglang").val('en');
				}
			});
		}
</script>
</head>
<body>
	<select id="selsrclang" name="selsrclang" >
	</select>
	<select id="seltrglang" name="seltrglang" >
	</select>
	<div id="tran_lang1">日本語です</div>
	<div id="tran_lang2">英語です</div>
	<div id="tran_lang3">ドイツ語です</div>
	<div id="tran_lang4">鉛筆です</div>
</body>
</html>

HTMLマークアップ要件

Cloud Translationのドキュメントをみていると・・・

HTMLマークアップ要件という文言が。。

該当のリンク

https://cloud.google.com/translate/markup?hl=ja

https://cloud.google.com/translate/attribution?hl=ja

翻訳されたものを使うには、ガイドラインに準拠することが義務付けられているらしい・・

Google 翻訳による翻訳結果を直接ユーザーに表示するときは、その都度適切なテキストやブランド要素を使用して、Google 翻訳による自動翻訳が表示されていることをユーザーに対して明確に示す必要があります。

Cloud Translation API を使用するアプリケーションは、アプリケーションの説明やヘルプ ドキュメントに、そのアプリケーション内での翻訳の提供に Google 翻訳が使用されていることを明記し、Cloud Translation サイトへのリンクを表示する必要があります。

翻訳結果が変更されることなく、検索エンジンのインデックスに登録可能なウェブページに表示される場合、HTML マークアップ リファレンスを使用して、翻訳されたテキストを機械翻訳されたコンテンツとして指定する必要があります。

汗...

最近のブラウザーは

下記のように英語サイトなど見た場合、下記がでます。

またブラウザーに翻訳ボタンもついてきてますし・・iphoneないけど・・

正しくhtmlにlangを指定しておけば。。

Googleウェブサイト翻訳ツール

さいごに

ホームページ制作には、素直に・・翻訳サイトを作成したほうが良さそうですね

Google翻訳、Googleウェブサイト翻訳ツール、Cloud Translation にしろ、検索エンジンにはヒットできないので・・・

関連記事