Traduzioni con jQuery e Google
Questo tutorial prende spunto da un articolo letto sul blog di Raymond Camden (ex Cold Fusion Jedi) nel quale si spiega come effettuare le traduzioni dei “Tweet” trovati con una ricerca casuale su Twitter, utilizzando le API di Twitter stesso, di Google, il nostro amato framework jQuery e del codice ColdFusion.
Trovando il tutorial molto interessante ho quindi pensato di effettuare un porting utilizzando codice PHP.
Senza entrare nel dettaglio delle API di Twitter (sulle quali si possono trovare maggiori informazioni direttamente nella documentazione tecnica), si può verificare semplicemente che il risultato di una ricerca restituisce una risposta in formato JSON.
Il primo passo è stato quello di verificare cosa in realtà restituisce una richiesta di ricerca tramite le API di Twitter. Per fare ciò ho semplicemente buttato giù due righe di codice:
$contents = file_get_contents("http://search.twitter.com/search.json?&rpp=20&q=STRINGA DA RICERCARE"); $results = json_decode($contents); $temp = $results->results; print_r($temp);
Si può notare che in ogni Tweet restituito c’è una chiave chiamata iso_language_code che descrive il linguaggio del Tweet stesso. Twitter non restituisce in realtà la lingua dall’analisi del testo, ma piuttosto il linguaggio impostato dall’utente. Ciò è comunque sufficiente per il nostro scopo.
A questo punto, scrivo il codice html che servirà a contenere il testo e le relative traduzioni:
foreach ($temp as $k) { echo "<p>"; echo "Scritto da ".$k->from_user."<br />"; echo "il ".$k->created_at."<br />"; echo "<span class=\"text\">".$k->text."</span>"; if ($k->iso_language_code != 'en') { echo "<br/><span class=\"texttranslation lang_".$k->iso_language_code."\"></span>"; } echo '</p>'; }
Ho utilizzato la classe “text” per contenere il testo reale del “Tweet”, mentre la classe “texttranslation” verrà utilizzata per contenere il testo tradotto (solo se la lingua è diversa dall’inglese) associando un’ulteriore classe che specifica appunto la lingua che sarà utile poi nella funzione jQuery.
A questo punto utilizziamo le API di Google per effettuare le traduzioni e una funzione jQuery per inserirle sotto il testo reale.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("language", "1"); google.setOnLoadCallback(initialize); function initialize() { $(".texttranslation").each(function() { var translationarea = $(this) var classes = translationarea.attr("class") //classes is a list of classes applied, we just want the last one var langportion = classes.split(" ")[1] //now get the final code var langcode = langportion.split("_")[1] //now get my sibling text var textSpan = $(this).siblings(".text") var theText = $(textSpan).text() google.language.translate(theText, langcode, "en", function(result) { if (!result.error) { translationarea.hide().html("Translation via Google: " + result.translation).fadeIn("slow"); } }) }) } </script>
La demo di questo articolo è visibile su https://www.jqueryitalia.org/tutorials/translate.php dove è stato aggiunto il form per inserire la stringa da ricercare.