logo

Překládejte obsah pomocí rozhraní Google Translate API a JavaScriptu

Poznámka: Pro tento výukový program používám verzi 1 rozhraní Google Translate API. K dispozici je novější verze založená na REST.

V ideálním světě by všechny webové stránky měly funkci, která by uživateli umožňovala přeložit webovou stránku do jejich rodného jazyka (nebo ještě ideálněji by překlad byl proveden dříve, než uživatel na stránce něco uvidí). V reálném světě si většina malých podniků nemůže dovolit investovat peníze do překladu webových stránek. Naštěstí malý startup s názvem „Google“ poskytuje vynikající Překladač API pro překlad jednoduchého textu z jednoho jazyka do druhého!

Zobrazit ukázku

Ukázka HTML

Úžasné rozhraní Google Translate API vám umožňuje odesílat HTML – nemusíte text extrahovat sami! To je obrovská funkce, protože analyzovat HTML a vrátit to všechno zpět by byla noční můra! Pojďme dát dohromady nějaký ukázkový obsah:

<script src="https://www.google.com/jsapi?key=YOUR_GOOGLE_KEY"></script>
<div id="languages"><p>
	<a href="?lang=en" rel="en">English</a> / <a href="?lang=es" rel="es">Spanish</a> / <a href="?lang=it" rel="it">Italian</a> /
	<a href="?lang=fr" rel="fr">French</a>
</p></div>

<div id="languageBlock">
	<p>Lights go out and I can't be saved <br />
	Tides that I tried to swim against  <br />
	Brought me down upon my knees  <br />
	Oh I beg, I beg and plead </p>

	<p>Singin', come out if things aren't said  <br />
	Shoot an apple off my head  <br />
	And a, trouble that can't be named  <br />
	Tigers waitin' to be tamed </p>

	<p>Singing, yooooooooooooo ohhhhhh  <br />
	Yoooooooooooo ohhhhhh </p>

	<p>Home, home, where I wanted to go <br /> 
	Home, home, where I wanted to go  <br />
	Home, home, where I wanted to go  <br />
	Home, home, where I wanted to go</p>
</div>

Tento prvek #languageBlock použijeme k odeslání do Googlu k překladu. Všimněte si, že každý odkaz má atribut rel, který obsahuje kód jazyka, na který se má přepnout.

Google Translate API JavaScript

Aby byl kód krátký, používám MooTools pro přístup k prvkům a přidávání událostí DOM. Neváhejte se držet jednoduchého JavaScriptu nebo vašeho rámce. 

// Set the original/default language
var lang = "en";
var currentClass = "currentLang";

// Load the language lib
google.load("language",1);

// When the DOM is ready....
window.addEvent("domready",function(){
	// Retrieve the DIV to be translated.
	var translateDiv = document.id("languageBlock");
	// Define a function to switch from the currentlanguage to another
	var callback = function(result) {
		if(result.translation) {
			translateDiv.set("html",result.translation);
		}
	};
	// Add a click listener to update the DIV
	$$("#languages a").addEvent("click",function(e) {
		// Stop the event
		if(e) e.stop();
		// Get the "to" language
		var toLang = this.get("rel");
		// Set the translation into motion
		google.language.translate(translateDiv.get("html"),lang,toLang,callback);
		// Set the new language
		lang = toLang;
		// Add class to current
		this.getSiblings().removeClass(currentClass);
		this.addClass(currentClass);
	});
});

Prvním krokem v procesu je použití google.load k načtení rozhraní Translate API. Když je API načteno, uchopíme DIV, který má být přeložen. Poté definujeme zpětné volání, až se překlad vrátí od Googlu. Toto zpětné volání jednoduše aktualizuje obsah DIV. Posledním krokem je přidání obsluhy události kliknutí ke každému odkazu na jazyk. Volání google.language.translate odešle obsah do Googlu k překladu. Když se přeložený obsah vrátí, obsah je aktualizován naším zpětným voláním!

Zobrazit ukázku

Díky Google Translate API můžeme bez námahy překládat data! Je důležité, abych si všiml, že limit velikosti obsahu Google je poměrně malý, takže byste se neměli spoléhat na to, že překlad stránky kompletně přeloží. Je to však vynikající způsob, jak přeložit upozornění nebo stavovou zprávu do daného jazyka!