HowTo Google Language API einfach nutzen

Mai 25th, 2010 | Tags: , , , , , ,
Anzeige

willkommenLetztens habe ich mal ein wenig mit der Google AJAX Language API herum gespielt. Ich finde da haben sie wieder etwas sehr gutes und einfaches entwickelt. Beispielsweise habe ich das auf meiner (noch nicht fertigen) github Seite (http://sethiele.github.com) eingesetzt um Benutzern meine letzten Tweets und Blogposts in ihrer Sprache anzuzeigen. Im Folgenden möchte ich Schritt für Schritt zeigen wie man das ganze erfolgreich umsetzt. Am Ende soll eine Seite existieren auf der Text je nach vom Besucher eingestellter Browsersprache angezeigt werden soll.

Zur besseren Lesbarkeit teile ich den HTML Code und des benötigte JavaScript (JS) in zwei Dateien. In die Datei content.html und language.js. Beide gibt es am Ende auch zum herunterladen.

Für diese Anleitung sollte man schon ein wenig mit jQuery vertraut sein.

Ein Einfaches Beispiel

<html>
  <head>
    <title>test translate</title>
      <script type="text/javascript" src="http://www.google.com/jsapi"></script>
      <script type="text/javascript" src="language.js"></script>

content.html

Zuerst muss die Google Ajax Api eingebunden werden. In Zeile 4 geschieht das über das herkömmliche <script> Tag.
In Zeile 5 wird noch die JS Datei eingebunden, in der unser JS stehen soll.

  </head>
  <body>
    <div id="inhalt">
      Dank <a href="http://sebastian.thiele.me/blog/howto-google-language-api-einfach-nutzen/1706">dieses</a> tollen Tutorials von <b>Sebastian</b> kann ich meine Seite jetzt auch <i>in mehreren Sprachen</i> anbieten.
    </div>
  </body>
</html>

content.html

Wie Wichtig an dieser Stelle ist die ID des Divs (Zeile 8 ) und der Inhalt (Zeile 9). Alles andere kann beliebig sein. Auch kann CSS angewendet werden wie es beliebt.
Ich habe extra ein Beispiel Text ausgesucht, der mit ein wenig (mehr oder weniger sinnvollen) HTML formatierten Inhalt versehen ist. Um zu zeigen, dass die Formatierung am ende übernommen wird. Die Google Language API verändert keine Formatierung.

Das war auch schon alles an der content.html Datei. Der rest der Magie kommt in der language.js Datei.

// Lade jQuery von Google
google.load("jquery", "1.4.2");
// Lade Language support
google.load("language", "1");
// Wenn Seite geladen beginne mit jQuery Magic
google.setOnLoadCallback(function() {

translate.js

Ich habe mich dazu entschlossen gleich die von Google zur Verfügung gestellte jQuery Version zu nutzen (Zeile 2). Der Vorteil ist (meiner Sicht nach), wenn sie viele Verwenden ist sie schon in vielen Browsercashes drin und muss nicht immer wieder neu geladen werden.
In Zeile 4 Lade ich die Google Language API in der Version eins. Und Zeile 6 öffnet die JS Verarbeitung, sobald  die HTML Seite fertig geladen ist. Okay, man könnte auch direkt die Übersetzung anschmeißen und nicht auf das Ende der Seite warten, doch dann könnte es zu konflikten kommen, falls noch Inhalte geladen werden (Bilder usw.)

  var translate = function(text){
    // Überprüfen welche Sprache der gesendete Text hat
    google.language.detect(text, function(result){
      // Es dürfen keine Fehler aufgetreten sein
      if (!result.error && result.language) {

translate.js

In Zeile 9 wird die Sprache des übermittelten Textes überprüft. Die Spracherkennung ist meiner Erfahrung nach recht gut. In Zeile 11 Wird gezeigt, dass eine Fehlerbehandlung gemacht werden sollte. Sollte keine Schrift erkannt sein oder ist dabei ein Fehler aufgetaucht wird der alte Text angezeigt (er wird nicht übersetzt).

        // Überprüfen welche Sprache im Browser eingestellt ist
        if (navigator.appName == 'Netscape')
          var language = navigator.language;
        else
          var language = navigator.browserLanguage;
        // Wenn eingestellte Sprache gleich übermittelte Sprache dann abbrechen
        if (result.language == language.substring(0,2)) return;

translate.js

Hier wird in Zeile 13 bis 16 die eingestellte Sprache im Browser herausgefunden. Dabei sind zwei unterschiedliche Wege nötig, da mal wieder nicht alle Browser gleich Antwort geben.
In Zeile 18 wird noch überprüft ob die eingestellte Sprache, die gleiche ist, wie die des Textes. Wenn dem so ist, wird die Verarbeitung abgebrochen, und es wird kein anderer Text angezeigt. (Man muss ja den TExt nicht noch mal übersetzen lassen). Zu beachten ist, dass in Zeile 18 .substring(0,2) angewendet wird. Das ist nötig, da einige Browser nicht (z.B.) mit en antworten (was Google verwendet) sondern mit eng. Aber für Google werden nur zei Buchstaben benötigt.

        // Text übersetzen
        google.language.translate(text, result.language, language.substring(0,2), function(result) {
          $('#inhalt').html(result.translation);
        });
      }
    });
  };

translate.js

Die eigentliche Übersetzung geschieht in Zeile 20. Der Google Funktion translate muss als Parameter der zu übersetzende Text, die Quellsprache, die Zielsprache und eine Callback Funktion übergeben werden.
Zeile 21 Schreibt das ganze dann wieder in den DIV (Überschreibt das alte original). Tipp von mir, ich würde immer noch irgendwie kenntlich machen, dass es ein von Google Übersetzer Text ist, um den Besuchern zu zeigen, dass man an einigen Stellen nicht zu doof ist zum übersetzen, sondern dass es maschinell übersetzt wurde.

  // Sende Inhalt zum übersetzen
  translate($('#inhalt').html());
});

translate.js

Fehlt nur noch Zeile 27 um die Übersetzung zu starten.
Mit ein wenig mehr Code kann man die Funktion auch noch so erweitern, dass man mehrere Elemente übersetzen kann. Dazu sollte der Funktion mitgeteilt werden, wo am ende die Übersetzung hingeschrieben werden muss (Zeile 21).

Mit noch ein wenig mehr jQuery Magic kann auch noch ein schönes “AJAX Wait” Bildchen angezeigt werden, und erst nach der Übersetzung (oder auch nicht Übersetzung) wird der Text angezeigt. Aber da zähle ich ganz auf euch und eure Kreativität.

Und wie versprochen wird sogar ein (mehr oder weniger sinnvoll) formatierter, übersetzter Text ausgegeben.

Fragen? Anregungen? Ich bin gerne für Feedback offen.

Quellcode: Google-Language-v1

Lizenz: cc by-nc-sa

Weiter lesen


Keine Kommentare
Kommentieren