|
日本語
| Sign in
AJAX Language API を使用すると、JavaScript のみを使ってウェブページ内のテキストブロックの言語を判別し、翻訳できます。
新しい API には、バグがある場合やドキュメントが不完全な場合もあります。問題点の解決に努めますので、AJAX API デベロッパー フォーラムでのフィードバックや情報交換にご協力ください。
このドキュメントは JavaScript プログラミングとオブジェクト指向プログラミングの概念に精通している方を対象に作成されました。ウェブ上では、多数の JavaScript チュートリアルが公開されています。
この API について学ぶための近道は、まず簡単な例をご覧いただくことです。次のサンプル コードでは、テキストの言語を判別して、それを英語に翻訳します。
<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("language", "1");
function initialize() {
var text = document.getElementById("text").innerHTML;
google.language.detect(text, function(result) {
if (!result.error && result.language) {
google.language.translate(text, result.language, "en",
function(result) {
var translated = document.getElementById("translation");
if (result.translation) {
translated.innerHTML = result.translation;
}
});
}
});
}
google.setOnLoadCallback(initialize);
</script>
</head>
<body>
<div id="text">你好，很高興見到你。</div>
<div id="translation"></div>
</body>
</html>
ここで得られる結果はこちらでご覧いただけます。または、Code PlaygroundNew! で類似するコードを編集してみてください。
ご自分のページに AJAX Language API を組み込むには、Google AJAX API ローダを使用します。この一般的なローダーを使用すると、Language API を含むすべての必要な AJAX API を読み込むことができます。次のように Google AJAX API スクリプト タグを含めることと、google.load("language",
"1") を呼び出すことが必要です。
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("language", "1");
</script>
最初のスクリプト タグにより、google.load 関数を読み込みます。これにより、個々の Google API を読み込めるようになります。google.load("language", "1") により Language API のバージョン 1 を読み込みます。現在の AJAX Language API はバージョン 1 ですが、今後新しいバージョンが提供される可能性があります。詳しくは、このページのアップデートについての説明をご覧ください。
google.loadの 2 番目の引数は、使用している AJAX Language API のバージョンです。現在の AJAX Language API はバージョン 1 ですが、今後新しいバージョンが提供される可能性があります。
今後 API に重大なアップデートを行う場合は、バージョン番号を変更して Google Code と AJAX API ブログでお知らせします。この場合には、ユーザーがコードを移行できるようにするため、最低 1 か月間は両方のバージョンをサポートします。
AJAX Language API チームは、API を定期的にアップデートして最新のバグ修正やパフォーマンス改善を反映しています。これにより、パフォーマンスの向上とバグの修正が行われますが、API クライアントの一部に思わぬ障害が生じる恐れがあります。このような問題が発生した場合は、AJAX API ヘルプグループでご報告ください。
Code PlaygroundNew! では、さまざまなサンプル コードをご紹介しています。編集していろいろと試してみれば、API の使用方法について詳しく理解していただけます。
次のサンプル コードでは、簡単な JavaScript の文字列を翻訳します。
google.language.translate("Hello world", "en", "es", function(result) {
if (!result.error) {
var container = document.getElementById("translation");
container.innerHTML = result.translation;
}
});
次のサンプル コードでは、JavaScript の文字列の言語を判別します。言語コードが返されます。
var text = "¿Dónde está el baño?";
google.language.detect(text, function(result) {
if (!result.error) {
var language = 'unknown';
for (l in google.language.Languages) {
if (google.language.Languages[l] == result.language) {
language = l;
break;
}
}
var container = document.getElementById("detection");
container.innerHTML = text + " is: " + language + "";
}
});
ブラウザやオペレーティング システムには、特定の Unicode フォントのレンダリングをサポートするものとしないものがあります。あなたのウェブページを利用しているユーザーが、表示された言語のフォントを読みやすくレンダリングできるか、またはフォントのレンダリング サポートを判別する API を使用していないかを確認できます。Unicode 以外のフォントでは正しく実行できませんのでご注意ください。ウェブページが Unicode 以外のフォントでレンダリングを行っている場合、この機能は有用ではありません。フォントのレンダリングが特定の言語をサポートしていない場合は、いくつかの解決方法があります。詳しくはこちらの記事をご覧ください。
次のサンプル コードでは、フォントのレンダリング サポートを判別します。
var result = google.language.isFontRenderingSupported("hi");
var resultStr = "";
if (result == google.language.FontRenderingStatus.SUPPORTED) {
resultStr = "Rendering for " + lang + " is supported.";
} else if (result == google.language.FontRenderingStatus.UNSUPPORTED) {
resultStr = "Rendering for " + lang + " is not supported.";
} else {
resultStr = "Unsupported language " + lang + " for font detection API.";
}
var resultDiv = document.getElementById("displayResultsDiv");
resultDiv.innerHTML += resultStr;
次のサンプル コードは基本的な翻訳の例と似ていますが、このコードでは翻訳元のソース言語がわからない状態でテキストを翻訳する方法を示しています。不明であることを示す空の文字列をソース言語に指定すると、システムは 1 回の呼び出しで言語を判別し、それを翻訳します。
google.language.translate("Hello world", "", "es", function(result) {
if (!result.error) {
var container = document.getElementById("translation");
container.innerHTML = result.translation;
}
});
アプリケーションで Google AJAX Language API を使用している場合は、ユーザーに対して Google ブランドを明記することが必要です。そのためには google.language.getBranding() メソッドを使用します。このメソッドは HTML DOM 要素または対応する ID、および任意のオプションを受け入れます。ブランド表示は、提供された要素に添付されます。
// attach a "powered by Google" branding
<div id='branding'> </div>
...
google.language.getBranding('branding');
ブランド表示は CSS でカスタマイズでき、'vertical' と 'horizontal' ベースの形式で提供されます。次の例では、さまざまなブランド表示の形式と CSS のカスタマイズをご紹介しています。
ここでは、インタラクションが可能な 2 つの例をご紹介します。最初の例では、あらかじめフォーム内に記入されたテキスト文字列の言語を判別していますが、フィールドに他のテキストを入力することができます。ここには信頼度係数も表示されます。また、Code PlaygroundNew! で類似するコードを編集してみてください。
2 つ目の例では翻訳を実行しますが、この例でも最初の例のようなインタラクションが可能です。
現在、Google AJAX Language API では次の言語をサポートしています。技術は日々向上しており、AJAX Language API チームではサポート対象の言語を拡大すべく努力しています。新たな言語は随時追加されていますので、このページでご確認ください。Google 翻訳からも、最新の対象言語をご確認いただけます。
現在、Google AJAX Language API で判別可能な言語は上記のとおりですが、その一部は翻訳することができます。翻訳対象の言語は次のとおりです。この一覧にある言語は、すべて翻訳可能です。google.language.isTranslatable(languageCode); を使用すると、指定の言語が翻訳できるかどうかをテストできます。
Flash のデベロッパーや、JavaScript を使用しない環境で AJAX Language API にアクセスする必要のあるデベロッパーに対して、API ではシンプルな RESTful インターフェースを公開しています。どの場合でも、サポートされるメソッドは GET で、応答の形式は、ステータスコードが埋め込まれた JSON エンコードされた結果です。このインターフェースを使用するアプリケーションは、既存のすべての利用規約に従うものとします。特に注意する必要があるのは、要求において自身を正しく識別させることです。アプリケーションでは、有効かつ正確な HTTP referer ヘッダーを常に要求に含める必要があります。さらに、必須ではありませんが、それぞれの要求に有効な API キーを組み込んでください。キーを提供することで、アプリケーションにより二次的な識別構造が提供され、問題が発生した場合のコンタクトに使用できます。
このインターフェースについて簡単に学ぶ方法は、使用してみることです。コマンド ライン ツール curl や wget を使って次のコマンドを実行してください。
curl -e http://www.my-ajax-site.com \
'http://ajax.googleapis.com/ajax/services/language/translate?v=1.0&q=hello%20world&langpair=en%7Cit'
このコマンドを実行すると、Hello World（q=hello%20world）が英語からイタリア語（langpair=en%7Cit）に翻訳されます（/ajax/services/language/translate）。応答には text/javascript; charset=utf-8 の Content-Type が含まれます。次に示す応答を見ると、responseData が 結果のオブジェクト のドキュメントに記載されているプロパティと一致することがわかります。
{"responseData": {
"translatedText":"Ciao mondo"
},
"responseDetails": null, "responseStatus": 200}
この応答形式に加えて、このプロトコルは、callback 引数を指定して呼び出される従来の JSON-P 形式のコールバックもサポートします。この引数が指定されている場合、JSON オブジェクトは指定のコールバックに対する引数として渡されます。
callbackFunction(
{"responseData": {
"translatedText":"Ciao mondo"
},
"responseDetails": null, "responseStatus": 200})
最終的に、プロトコルは callback 引数と context 引数をサポートします。この URL の引数が指定されると、応答は callback(context, result, status, details, unused) の署名で JavaScript を直接呼び出すようエンコードされます。次のコマンドと応答に、微妙な違いがあることに注意してください。
curl -e http://www.my-ajax-site.com \ 'http://ajax.googleapis.com/ajax/services/language/translate?v=1.0&q=hello%20world&langpair=en%7Cit&callback=foo&context=bar'
このコマンドは言語の翻訳を実行し、前の呼び出しと同じですが、callback と context の両方を渡すように変更されています。この引数を使用すると、JSON オブジェクトが返される代わりに JavaScript 呼び出しが返され、JSON オブジェクトは result パラメータを介して渡されます。
foo('bar', {"translatedText":"Ciao mondo"}, 200, null)
このインターフェースについて網羅したドキュメントは、クラス リファレンス マニュアルをご覧ください。
コードについて問題が発生した場合は、次のことを実行してください。
AJAX Language API を使用して文字変換を行うと、ウェブページのテキスト フィールドやテキスト エリアで、文字変換ができるようにできます。これにより、ウェブサイトのユーザーが、英語のキーボードを使用してさまざまな言語を入力できるようになります。
文字変換とは文字変換は、ある文字体系で書かれた言葉を、その発音どおりに別の文字体系に変換する処理です。文字変換を翻訳と混同しないでください。翻訳では、意味が同じで、別の言語に変換します。文字変換では、言葉の発音をベースにして、ある文字体系から別の体系に変換します。
このドキュメントは JavaScript プログラミングとオブジェクト指向プログラミングの概念に精通している方を対象に作成されました。さまざまな JavaScript チュートリアルが、ウェブ上で公開されています。また、ユーザーの視点から文字変換について理解している必要もあります。文字変換機能を使用する方法について詳しくは、こちらの記事をご覧ください。
この概念的なドキュメントは完全ではありません。文字変換について調べたり、この機能をページに埋め込んだりするためのスタート ガイドとして作成されたものです。
この API について学ぶための近道は、まず簡単な例をご覧いただくことです。次のサンプル コードでは、テキスト エリアに入力された言語をヒンディー語に変換します。ユーザーは、英語のキーボードを使用してヒンディー語を入力できます。Ctrl+g を押すと、入力される言語を英語とヒンディー語で切り替えることができます。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<link href="http://www.google.com/uds/modules/elements/transliteration/api.css"
type="text/css" rel="stylesheet"/>
<script type="text/javascript">
// Load the Google Transliteration API
google.load("elements", "1", {
packages: "transliteration"
});
function onLoad() {
var options = {
sourceLanguage:
google.elements.transliteration.LanguageCode.ENGLISH,
destinationLanguage:
google.elements.transliteration.LanguageCode.HINDI,
shortcutKey: 'ctrl+g',
transliterationEnabled: true
};
// Create an instance on TransliterationControl with the required
// options.
var control =
new google.elements.transliteration.TransliterationControl(options);
// Enable transliteration in the textbox with id
// 'transliterateTextarea'.
control.makeTransliteratable(['transliterateTextarea']);
}
google.setOnLoadCallback(onLoad);
</script>
</head>
<body>
Type in Indian languages (Press Ctrl+g to toggle between English and Hindi)<br>
<textarea id="transliterateTextarea" style="width:600px;height:200px"></textarea>
</body>
</html>
AJAX Transliteration API は「elements」モジュールの下のパッケージに含まれています。ご自分のページに Google Transliteration API を組み込むには、まず Google AJAX API スクリプト タグを使用します。
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
このスクリプトは google.load 関数を読み込みます。これにより、個々の Google API を読み込めるようになります。Google Transliteration API を読み込む際、google.load の呼び出しは次のようになります。
<script type="text/javascript">
google.load("elements", "1", {
packages: "transliteration"
});
</script>
これにより Transliteration API のバージョン 1 を読み込みます。現在の Transliteration API はバージョン 1 ですが、今後新しいバージョンが提供される可能性があります。詳しくは、このページのアップデートについての説明をご覧ください。
google.loadの 2 番目の引数は、使用している AJAX Language API のバージョンです。現在の Transliteration API はバージョン 1 ですが、今後新しいバージョンが提供される可能性があります。
今後 API に重大なアップデートを行う場合は、バージョン番号を変更して Google Code と AJAX API ブログでお知らせします。この場合には、ユーザーがコードを移行できるようにするため、最低 1 か月間は両方のバージョンをサポートします。
AJAX Language API チームは、API を定期的にアップデートして最新のバグ修正やパフォーマンス改善を反映しています。これにより、パフォーマンスの向上とバグの修正が行われますが、API クライアントの一部に思わぬ障害が生じる恐れがあります。このような問題が発生した場合は、AJAX API ヘルプグループでご報告ください。
このサンプル コードは概要セクションで紹介したコードと非常に類似していますが、ここでは英語とヒンディー語間での入力モードの切り替えを制御します。また、2 つのテキスト フィールドでの文字変換も可能です。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<link href="http://www.google.com/uds/modules/elements/transliteration/api.css"
type="text/css" rel="stylesheet"/>
<script type="text/javascript">
// Load the Google Transliteration API
google.load("elements", "1", {
packages: "transliteration"
});
function onLoad() {
var options = {
sourceLanguage:
google.elements.transliteration.LanguageCode.ENGLISH,
destinationLanguage:
google.elements.transliteration.LanguageCode.HINDI,
shortcutKey: 'ctrl+g',
transliterationEnabled: true
};
// Create an instance on TransliterationControl with the required
// options.
var control =
new google.elements.transliteration.TransliterationControl(options);
// Enable transliteration in the textfields with the given ids.
var ids = [ "transl1", "transl2" ];
control.makeTransliteratable(ids);
// Show the transliteration control which can be used to toggle between
// English & Hindi.
control.showControl('translControl', {
controlType: google.elements.transliteration.TransliterationControl.
ControlType.SINGLE_LANGUAGE_BUTTON
});
}
google.setOnLoadCallback(onLoad);
</script>
</head>
<body>
<center>Type in Indian languages (Press Ctrl+g to toggle between English and Hindi)</center>
<div id='translControl'></div>
<br>Title : <input type='textbox' id="transl1"/>
<br>Body<br><textarea id="transl2" style="width:600px;height:200px"></textarea>
</body>
</html>
例を見る（singlelangtransliteration.html）
このサンプル コードは上記のコードと非常に類似していますが、ここでは変換後の言語を選択できます。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<link href="http://www.google.com/uds/modules/elements/transliteration/api.css"
type="text/css" rel="stylesheet"/>
<script type="text/javascript">
// Load the Google Transliteration API
google.load("elements", "1", {
packages: "transliteration"
});
function onLoad() {
var options = {
sourceLanguage:
google.elements.transliteration.LanguageCode.ENGLISH,
destinationLanguage:
google.elements.transliteration.LanguageCode.HINDI,
shortcutKey: 'ctrl+g',
transliterationEnabled: true
};
// Create an instance on TransliterationControl with the required
// options.
var control =
new google.elements.transliteration.TransliterationControl(options);
// Enable transliteration in the textfields with the given ids.
var ids = [ "transl1", "transl2" ];
control.makeTransliteratable(ids);
// Show the transliteration control which can be used to toggle between
// English & Hindi and also choose other destination language.
control.showControl('translControl', {
controlType: google.elements.transliteration.TransliterationControl.
ControlType.MULTI_LANGUAGE_BUTTON
});
}
google.setOnLoadCallback(onLoad);
</script>
</head>
<body>
<center>Type in Indian languages (Press Ctrl+g to toggle between English and Hindi)</center>
<div id='translControl'></div>
<br>Title : <input type='textbox' id="transl1"/>
<br>Body<br><textarea id="transl2" style="width:600px;height:200px"></textarea>
</body>
</html>
例を見る（multilangtransliteration.html）
この上級者向けサンプル コードでは、ご自分のカスタム制御を作成して文字変換をコントロールする方法を示しています。英語とヒンディー語間での入力モードを切り替えるチェックボックスと、変換後の言語を変更するドロップダウンが表示されます。また、さまざまなイベントのイベント ハンドラも登録されます。これは TransliterationControl で指定されます。可能なイベントについて詳しくは、API クラス リファレンスをご覧ください。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<link href="http://www.google.com/uds/modules/elements/transliteration/api.css"
type="text/css" rel="stylesheet"/>
<script type="text/javascript">
// Load the Google Transliteration API
google.load("elements", "1", {
packages: "transliteration"
});
var transliterationControl;
function onLoad() {
var options = {
sourceLanguage:
google.elements.transliteration.LanguageCode.ENGLISH,
destinationLanguage:
google.elements.transliteration.LanguageCode.HINDI,
transliterationEnabled: true,
shortcutKey: 'ctrl+g'
};
// Create an instance on TransliterationControl with the required
// options.
transliterationControl =
new google.elements.transliteration.TransliterationControl(options);
// Enable transliteration in the textfields with the given ids.
var ids = [ "transl1", "transl2" ];
transliterationControl.makeTransliteratable(ids);
// Add the STATE_CHANGED event handler to correcly maintain the state
// of the checkbox.
transliterationControl.addEventListener(
google.elements.transliteration.TransliterationControl.EventType.STATE_CHANGED,
transliterateStateChangeHandler);
// Add the SERVER_UNREACHABLE event handler to display an error message
// if unable to reach the server.
transliterationControl.addEventListener(
google.elements.transliteration.TransliterationControl.EventType.SERVER_UNREACHABLE,
serverUnreachableHandler);
// Add the SERVER_REACHABLE event handler to remove the error message
// once the server becomes reachable.
transliterationControl.addEventListener(
google.elements.transliteration.TransliterationControl.EventType.SERVER_REACHABLE,
serverReachableHandler);
// Set the checkbox to the correct state.
document.getElementById('checkboxId').checked =
transliterationControl.isTransliterationEnabled();
// Populate the language dropdown
var destinationLanguage =
transliterationControl.getLanguagePair().destinationLanguage;
var languageSelect = document.getElementById('languageDropDown');
var supportedDestinationLanguages =
google.elements.transliteration.getDestinationLanguages(
google.elements.transliteration.LanguageCode.ENGLISH);
for (var lang in supportedDestinationLanguages) {
var opt = document.createElement('option');
opt.text = lang;
opt.value = supportedDestinationLanguages[lang];
if (destinationLanguage == opt.value) {
opt.selected = true;
}
try {
languageSelect.add(opt, null);
} catch (ex) {
languageSelect.add(opt);
}
}
}
// Handler for STATE_CHANGED event which makes sure checkbox status
// reflects the transliteration enabled or disabled status.
function transliterateStateChangeHandler(e) {
document.getElementById('checkboxId').checked = e.transliterationEnabled;
}
// Handler for checkbox's click event. Calls toggleTransliteration to toggle
// the transliteration state.
function checkboxClickHandler() {
transliterationControl.toggleTransliteration();
}
// Handler for dropdown option change event. Calls setLanguagePair to
// set the new language.
function languageChangeHandler() {
var dropdown = document.getElementById('languageDropDown');
transliterationControl.setLanguagePair(
google.elements.transliteration.LanguageCode.ENGLISH,
dropdown.options[dropdown.selectedIndex].value);
}
// SERVER_UNREACHABLE event handler which displays the error message.
function serverUnreachableHandler(e) {
document.getElementById("errorDiv").innerHTML =
"Transliteration Server unreachable";
}
// SERVER_UNREACHABLE event handler which clears the error message.
function serverReachableHandler(e) {
document.getElementById("errorDiv").innerHTML = "";
}
google.setOnLoadCallback(onLoad);
</script>
</head>
<body>
<center>Type in Indian languages (Press Ctrl+g to toggle between English and Hindi)</center>
<div id='translControl'>
<input type="checkbox" id="checkboxId" onclick="javascript:checkboxClickHandler()"></input>
Type in <select id="languageDropDown" onchange="javascript:languageChangeHandler()"></select>
</div>
<br>Title : <input type='textbox' id="transl1"/>
<br>Body<br><textarea id="transl2" style="width:600px;height:200px"></textarea>
<br><div id="errorDiv"></div>
</body>
</html>
例を見る（customtransliteration.html）
下位 API を使用した文字変換には AJAX Language API が使用されます（他の Transliteration API で使う elements パッケージは使用されません）。ご自分のページに AJAX Language API を組み込むには、Google AJAX API ローダを使用してこちらの指示どおりに操作します。
次のサンプル コードでは、簡単な JavaScript の文字列を変換します。
google.language.transliterate(["Namaste"], "en", "hi", function(result) {
if (!result.error) {
var container = document.getElementById("transliteration");
if (result.transliterations && result.transliterations.length > 0 &&
result.transliterations[0].transliteratedWords.length > 0) {
container.innerHTML = result.transliterations[0].transliteratedWords[0];
}
}
});
現在、Transliteration API では英語から次の言語への文字変換をサポートしています。
showControl メソッドを使用して表示される文字変換制御は、この制御で使用する CSS を変更することで、ウェブページに一体化させることができます。http://www.google.com/uds/modules/elements/transliteration/api.css の CSS ファイルでは、この制御についてのスタイルと変換候補のメニューを定義します。変換候補のメニューは、変換された語をクリックまたは編集する際にポップアップ表示されます。この CSS をカスタマイズする場合は、上記の CSS ファイルをダウンロードして、ファイルの先頭に記載されている指示に従ってご希望のスタイルに変更します。たとえば、goog-transliterate-indic-suggestion-menu の background-color パラメータを変更すると、表示される候補メニューの背景をデフォルトの #F0A000 から別の値に変更できます。
Transliteration API は、Google Indic Transliteration ウェブサイトと同じブラウザでサポートされます。Transliteration API は、ほぼすべてのブラウザで問題なく読み込めますので、互換性を確認する前に安全に読み込むことができます。
互換性のないブラウザを使用しているユーザーのために必要な動作は、アプリケーションによって異なる場合があります。Transliteration API は、互換性を確認するためのグローバルメソッド（google.elements.transliteration.isBrowserCompatible()）を提供していますが、互換性のないブラウザを検出したときの自動動作は用意されていません。このドキュメントに掲載されている例のほとんどでは、ブラウザの互換性が確認されていません。また、古いブラウザに対してエラー メッセージが表示されることもありません。実際のアプリケーションでは、互換性のないブラウザについてなんらかの便宜上の処理が行われるはずですが、このドキュメントでは、例をわかりやすくするためにそのような処理を省略しています。
Transliteration API ではさまざまな UTF-8 のテキストを扱っているため、メタ タグ <meta
http-equiv="Content-Type" content="text/html; charset=utf-8"/> を追加してページのコンテンツ タイプを UTF-8 に設定する必要があります。このメタタグを追加しないと、Indic Transliteration API はウェブページで正しく動作しません。
コードについて問題が発生した場合は、次のことを実行してください。