jQueryTips by Tee++; » API http://www.jquerytips.com Coding is fun. Sun, 25 Apr 2010 11:30:33 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 มา Translate กันเถอะ พี่ GG เค้าจัดมาแล้ว http://www.jquerytips.com/2009/03/06/jquery-with-gogole-translate/ http://www.jquerytips.com/2009/03/06/jquery-with-gogole-translate/#comments Fri, 06 Mar 2009 16:36:05 +0000 Tee++; http://www.jquerytips.com/?p=261 Google Translate

ว้าว ขณะที่ Post ข้อความอยู่นี้ เชื่อมั้ยครับว่าผมเขียนบทความ ลงใน jQueryTips นี้ทั้งหมดกี่บทความแล้ว 80 !!!!! ใช่แล้วตั้ง 80 แน่ะ รวมบทความนี้ก็จะเป็นบทความที่ 81 ไม่น่าเชื่อเลย ว่าตัวเองจะเขียนได้มาไกลถึงขนาดนี้ 555++

ตอนแรกก็กะเขียนเล่นๆ คิดว่า วัน สองวันตัวเอง คงเบื่อ ไปๆมาๆ นี่เขียนกันเป็นปีเลย อืมม์ คิดๆแล้วก็ ภูมิใจแฮะ วันนี้เดี๋ยว export มา backup ซะหน่อยดีกว่า ^^

เอาล่ะๆ มาเข้าเรื่องที่จะเขียนวันนี้กันเลยดีกว่า “ภาษาอังกฤษ” -*- เชื่อแน่ๆ เลยครับว่าปัญหาเรื่อง ภาษา ไม่แข็งแรงนั้น สั่งสมอยู่กับคนไทย มานานแสนนาน ทำให้เราขาดโอกาส และการเรียนรู้ที่ดีๆ จาก international website, e-book หรือสื่อ ภาษาต่างประเทศ อะไรต่อมิอะไรไปไม่ใช่น้อย

แต่ผมคิดว่า ต่อไปนี้ปัญหาอาจจะเบาบางลง ด้วยท่านเทพแห่งโลกไซเบอร์อย่างพี่ Big Google เพราะตอนนี้ ท่านได้ออก Language Service ชุดของการ Translate ใน version th -> en, en -> th หรือ ภาษาอื่นๆ อีกเยอะแยะมาแล้ว

จะแปลทั้งเวบ หรือจะแปลเป็นประโยค ก็สะดวกสบาย รวดเร็ว ไปลองกันดูได้ ที่นี่ Google Translate

เห็นมั้ย เจ๋งโครต แต่ถ้าคิดว่าวันนี้ ผมจะมาแนะนำ Service แค่นี้ล่ะก็ ผิดถนัดครับ ผมมีอะไรๆ ทีเด็ดกว่านี้เยอะรอให้ไปอ่านกันอยู่แล้ว……

รู้มั้ยครับว่า Google AJAX Language ก็มี API ด้วย ซึ่งการใช้งานก็โครตจะง่าย เพราะมันถูก plug เข้ามาอยู่ในชุดของ Google JS API แล้ว ทำให้เราเรียกโหลดมาจาก Google ได้เลย โดยไม่จำเป็นต้องมา include อะไรวุ่นวาย

ไม่เชื่อเอาโคดชุดนี้ไปรันดู

  1. <html>
  2.   <head>
  3.                 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  4.     <script type="text/javascript" src="http://www.google.com/jsapi"></script>
  5.     <script type="text/javascript">
  6.  
  7.     google.load("language", "1");
  8.  
  9.     function translate() {
  10.       var text = document.getElementById("text").innerHTML;
  11.       google.language.detect(text, function(result) {
  12.         if (!result.error && result.language) {
  13.           google.language.translate(text, result.language, "en",
  14.                                     function(result) {
  15.             var translated = document.getElementById("translation");
  16.             if (result.translation) {
  17.               translated.innerHTML = result.translation;
  18.             }
  19.           });
  20.         }
  21.       });
  22.     }
  23.  
  24.     </script>
  25.   </head>
  26.   <body>
  27.     <div><span id="text">สวัสดี ชาวโลก</span><input type="button" value="translate" onclick="translate()" /></div>
  28.     <div id="translation"></div>
  29.   </body>
  30. </html>

ซึ่งใน API ชุดนี้ของ GG จะประกอบไปด้วย สองส่วนหลักๆก็คือ
1. Detect language
ตัวนี้เป็นตัวตรวจสอบภาษาที่จะแปลครับ ว่าเป็นภาษาอะไร โดยเราไม่จำเป็นต้องบอก GG ว่าเรากำลังจะแปลจาก ภาษาอะไรเป็นภาษาอะไร โดยแค่เราส่ง กลุ่มที่จะแปลเข้าไป GG จะบอกมาเองว่าเรากำลังทำงานกับภาษาอะไร จะคืนค่าเป็น th, en, jp หรือ ภาษาอื่นๆ

2. Translate
แน่นอนอีกตัวคือหัวใจครับ ตัวแปลนั่นเอง โดยตัวแปลนี้เราสามารถส่ง text เข้าไปแปล โดยต้องระบุ

text = ประโยคที่จะทำการแปล
source = แปลจากภาษาอะไร เช่น en (ตรงนี้เราจะสามารถใช้ api ชุด detect lang ทำงานแทนได้)
destination = แปลมาเป็นภาษาอะไร เช่น th

ซึ่งจากที่ผมเอา Firebug จับมา การทำงานของ API Google ชุดนี้ก็คือ JSONP นั่นเอง

  1. http://www.google.com/uds/Gtranslate?callback=google.language.callbacks.id101&context=22&q=สวัสดีชาวโลก&langpair=th|en&key=notsupplied&v=1.0

เอาล่ะๆ ไอ้ที่บอกมาทั้งหมด มันแค่เกริ่นเท่านั้นเองอ่ะ ที่เป็นบทความวันนี้จริงๆ มันต้องเป็น jQuery แน่นอนอยู่แล้ว นี่ครับ

Sunday Morning jQuery Google Translate API

ซึ่งหน้าตาโดยรวมแล้ว ให้ 9/10 ครับ สวยงามน่าใช้ แถมใช้งานง่ายด้วย สามารถแปลแบบ กลุ่มคำ หรือแบบ คำเดี่ยวก็ได้ ใช้เป็น Dict ภายในเวบเลยก็ยังได้

ยังไงก็ลองไปเล่นกันดูนะครับ ผมคงไม่เขียนอธิบายวิธีใช้ เพราะเค้าเขียนไว้หมดแล้ว ไม่เข้าใจยังไง view source ดูกันเอาก็น่าจะพอเข้าใจอยู่ ตัวนี้ส่วนตัวผมถือว่าเป็น Plugin น้ำดี ตัวนึงเลยทีเดียว

อันนี้เป็นตัวอย่างที่ผมลองเอามาเขียนเล่นๆครับ

  1. http://www.jQueryTips.com/example/GTranslate/

เอ แต่ถ้าอ่าน เว็บเค้าแล้วไม่เข้าใจ ก็ลองอย่าลืมใช้ Google Translate มาเป็นภาษาแม่ เราดูนะครับ 555++

วันนี้ลาไปก่อนแค่นี้ล่ะ จะไปแรดข้างนอกละ ^^

]]> http://www.jquerytips.com/2009/03/06/jquery-with-gogole-translate/feed/ 4 ลองมาแล้ว Yahoo! Search BOSS http://www.jquerytips.com/2008/07/14/yahoo-search-boss/ http://www.jquerytips.com/2008/07/14/yahoo-search-boss/#comments Mon, 14 Jul 2008 16:39:39 +0000 Tee++; http://www.jquerytips.com/2008/07/14/yahoo-search-boss/ “BOSS (Build your Own Search Service)” API ใหม่แจ่มๆ จาก Yahoo ผมจะไม่ขอพูดถึง ข้อดีข้อเสียอะไรนะแล้วกัน มันต้องไปลองใช้ แล้ว วิเคราะห์กันเอาเอง แต่จะมาบอกถึงขั้นตอนการใช้งาน และ implement เลย

ก่อนอื่นก็ไปสมัคร API Key กันมาก่อน ที่นี่ จากนั้นได้มาแล้วมาทำตามข้างล่างกัน

จากนั้นลองมา implement กันดู เช่นผมจะทำ เกี่ยวกับเรื่องของการ Search Web ก็เรียกง่ายๆ ไม่ยุ่งยากอะไร

  1. http://boss.yahooapis.com/ysearch/web/v1/<strong>jquerytips.com</strong>?AppID=YOUR_APP_ID&format=xml

เท่านี้ผมก็จะได้ xml ที่เป็นข้อมูลที่ผมต้องการค้นหา มาทันทีแล้วนำไปใช้ต่อได้เลย ไม่ยุ่งยาก

ส่วน Arguments ต่างที่ ใส่ไปได้ก็ดูที่นี่
http://developer.yahoo.com/search/boss/boss_guide/univer_api_args.html

ถ้าอยากลองเล่นอย่างละเอียดก็ดูข้อมูลที่ทาง Yahoo! จัดทำไว้ได้เลย
http://developer.yahoo.com/search/boss/boss_guide

API ชุดนี้ของ Yahoo เค้ามันง่ายจริงๆ ครับ api ที่ผมใช้ส่วนใหญ่มักจะต้อง post ค่าผ่าน SOAP, XMLRPC, CURL หรือ อื่นๆ แต่ตัวนี้มันแค่ pass parameters ผ่าน query ไปไม่กี่ตัวก็ได้ค่ามาหมดแล้ว ที่สำคัญมันยังคืนค่ามาได้หลาย format เช่น

- XML
- JSON
- PHP Serialize

การเขียนเราก็อาจจะเขียนแค่

$params['appid'] = ‘xxxx’; //หามาใส่เอง
$params['count'] = 30;
$params['lang'] = ‘en’;
$params['format'] = ‘xml’;

$query = http_build_query($params);

$urlRequest = sprintf(‘http://boss.yahooapis.com/ysearch/web/v1/%s?’.$query, $search);

$xml = file_get_contents($urlRequest);

หลังจากได้ xml ก็เอา SimpleXML อ่าน ง่ายมากๆ

หรือถ้าเลือกรับ respond เป็น json ก็ยิ่งง่ายใช้คำสั่ง json_decode ถอดออกมาอ่านได้เลย

ปล. api ตัวนี้ของ yahoo unlimited นะครับ

“Flexibility to reorder results. Full control over presentation. Ability to blend any data source with search results. Unlimited queries.”

วันนี้จบแค่นี้ละกันเนอะ ^^

]]> http://www.jquerytips.com/2008/07/14/yahoo-search-boss/feed/ 2 การทำ URL Shorten แบบเหยียบเมฆ ด้วย Tinyurl http://www.jquerytips.com/2008/06/23/shorten-url-tiny-php/ http://www.jquerytips.com/2008/06/23/shorten-url-tiny-php/#comments Sun, 22 Jun 2008 17:11:57 +0000 Tee++; http://www.jquerytips.com/2008/06/23/shorten-url-tiny-php/ วันนี้มาว่ากันด้วยบทความของ PHP กันสักหน่อยนะครับ กับการย่อ url ให้สั้นลง เพื่อสะดวกในการเก็บข้อมูล ที่มีพื้นที่จำกัด

หลายๆ คนคงจะเคยทำ url shorten ง่ายๆ แบบนี้

  1. http://www.jquerytips.co….view.html

แต่วันนี้ผมมีวิธีเหนือชั้นกว่านั้นจะมาบอก นั่นคือการใช้ Service ของ tinyurl โดย url ที่ได้จะออกมาเป็น ลักษณะ

  1. http://www.jquerytips.com/2008/06/22/markitup-jquery-plugin/
  2. – จากด้านบนเป็นด้านล่าง –
  3. http://tinyurl.com/6m8vkl

ดังนั้นเราจึงเอามาประยุกต์ได้เช่น user post ข้อความมา ยกตัวอย่างเช่น

  1. <?php
  2. $content = "สวัสดีครับวันนี้ผมไปดูหนังเรื่องนึงมาสนุกมากลองไปดู review ได้ที่ http://movie.sanook.com/news/news_14287.php กันนะครับ";
  3.  
  4. function tinyurl($url)
  5. {
  6.   $url = stripslashes($url);
  7.   if ($url != "" && substr($url, 0, 7) == "http://")
  8.   {
  9.     $tinyurl = @file_get_contents("http://tinyurl.com/api-create.php?url=".$url);
  10.     $tinyurl = (!$tinyurl) ? $url : $tinyurl;
  11.   }
  12.   else
  13.     $tinyurl = $url;
  14.  
  15.   return "<a href=’".$tinyurl."’>".$tinyurl."</a>";
  16. }
  17.  
  18. echo preg_replace(‘#(http|HTTP|ftp)(s|S)?://([^\s<>\.]+)\.([^\s<>]+)#e’, ‘tinyurl(\’$1://$2$3.$4$5\’)’, $content);
  19.  
  20. // Output
  21. /*สวัสดีครับวันนี้ผมไปดูหนังเรื่องนึงมาสนุกมากลองไปดู review ได้ที่ http://tinyurl.com/563ubl กันนะครับ*/
  22. ?>

จะเห็นได้ว่าวิธีการนี้เป็นการทำ url shorten รูปแบบใหม่ที่สะดวกดีไม่เลวทีเดียวนะครับ ^^

]]> http://www.jquerytips.com/2008/06/23/shorten-url-tiny-php/feed/ 2 Ajax Cross Domain ใครว่าทำไม่ได้ http://www.jquerytips.com/2008/04/26/ajax-cross-domain/ http://www.jquerytips.com/2008/04/26/ajax-cross-domain/#comments Fri, 25 Apr 2008 18:56:32 +0000 Tee++; http://www.jquerytips.com/2008/04/26/ajax-cross-domain-%e0%b9%83%e0%b8%84%e0%b8%a3%e0%b8%a7%e0%b9%88%e0%b8%b2%e0%b8%97%e0%b8%b3%e0%b9%84%e0%b8%a1%e0%b9%88%e0%b9%84%e0%b8%94%e0%b9%89/ เรื่อง cross domain กับ ajax จริงๆแล้วในทางทฤษฎี มันควรจะทำได้ครับ แต่ทางปฎิบัติเราติดปัญหาเรื่อง Security เลยไม่อนุญาติให้ทำกัน แต่ทีนี้ผมจะมาพูดถึง ajax cross domain อีกรูปแบบ ในกรณีที่อีก page ต่าง domain ยินยอมให้เข้าไป get ข้อมูล โดย register method ไว้ก่อน ซึ่งลักษณะนี้เรามักเรียกว่า Web Service หรือ API นั่นเอง

  1. var base_url = ‘http://www.jquerytips.com/debug/jsonp.php’;

 

  1. <!– JavaScript –>
  2. $(document).ready(function() {
  3.   $(‘.doajax’).click(function() {
  4.                 $.ajax({
  5.                         url: base_url,
  6.                         dataType: ‘jsonp’,
  7.                         data: ‘id=10′,
  8.                         jsonp: ‘jsoncallback’,
  9.                         success: function(str) {
  10.                                 $.each(str, function(i, item) {
  11.                                         alert( i + ‘=’ + item );
  12.                                 });
  13.                         }
  14.                 });
  15. });
  16. <!– JavaScript –>

 

  1. <a href="javascript:void(0);" class="doajax">Ajax Call</a>

ตามตัวอย่างโคดด้านบนจะเห็นได้ว่า dataType เราเป็น jsonp โดยที่เรามี callback ชื่อว่า jsoncallback ที่นี้เรามาดูโคดทางฝั่ง server ว่าจะคืนค่ามายังๆไง (ในที่นี้ผมใช้ php เป็น server side script)

  1. <?php
  2. require_once(‘JSON/JSON.php’);
  3. $json = new Services_JSON();
  4.  
  5. $arr[‘uri’] = $_SERVER[‘REQUEST_URI’];
  6. $arr[‘query’] = $_SERVER[‘QUERY_STRING’];
  7.  
  8. echo $_GET[‘jsoncallback’].‘(‘.$json->encode($arr).‘)’;
  9. ?>

สังเกตุว่าผมมีการ set ค่า $_GET['jsoncallback'] ก่อนที่จะ return data คืนให้นั่นคือตัวบอกครับ ว่าเราจะ allow callback ตัวนี้ เท่านี้เราก็จะได้ data ที่เป็น json กลับไปแล้วครับ ถึง 2 script นี้จะอยู่ต่าง domain กัน

จริงๆ แล้ว jQuery ในส่วนของ ajax request เรายังเขียนได้สั้นกว่านี้อีกนะครับ โดยเขียนแค่

  1. $.getJSON(base_url + ‘?jsoncallback=?’, function(obj) {
  2.                         $.each(obj, function(i, item) {
  3.                                 alert( i + ‘=’ + item );
  4.                         });
  5.                 });

ก็ยังทำงานได้เหมือนกันตามปกติ

ทีนี้เราลองมาคิดดูว่าการทำแบบนี้จะมีประโยชน์ยังไงบ้าง

1. ลด resource ของการทำงาน โดยเราไม่จำเป็นต้องใช้ server เดียวในการ return data
2. สามารถทำ Web Service เพื่อให้ชาวบ้านมาใช้ได้ง่ายๆ

ตอนนี้คิดประโยชน์ได้แค่นี่ แหะๆ ^^

]]> http://www.jquerytips.com/2008/04/26/ajax-cross-domain/feed/ 6