ทุกวันนี้หากใครไม่รู้จัก Twitter ก็คงจะเชยสุดๆครับ เพราะนักการเมือง ดารา นักร้อง หรือ บริษัท ต่้างๆล้วนมี Twitter
แล้วตัว Daydev เองก็มีเช่นกันครับ @daydev มี Client มากมายให้เล่น Seesmic หรือ Twhirl ซึ่งทำให้คุณ
Tweet ผ่าน Desktop Computer ของคุณได้เลยแน่นอน widgetbox เว็บไซต์ที่ทำ Widget ก็มี Twitter
Widget ไว้ โชว์ Log ของการ Tweet ของคุณซึ่งแน่นอน เราจะมาลองทำ Widget อย่างง่ายๆ กันครับ
ผมได้ไปอ่าน Blog ของทางต่างประเทศและลอง ทำตามดูแล้ว มันก็เข้าใจได้ง่ายครับกับ Flash Action Script 3
ตัวนี้เพียงคุณมี Skill ด่้าน XML , PHP และ Flash Action Script หน่อยนึงคุณก็สามารถทำ Widget
ไปแปะบน Blog หรือ เว็บของคุณได้ครับ
แรกเริ่มเลยเราต้องไปใช้ statuses Timeline ของ Twitter ก่อนซึ่งจะเป็น Log ของการ Tweet ล่าสุดของเราครับ
ซึ่งวิ่งไปที่ URL ดังต่อไปนี้
http://twitter.com/statuses/user_timeline.xml?screen_name=USERNAME(ของคุณ)
ซึ่งทางผมจะยกตัวอย่าง @daydev ครับก็ให้กรอก URL ตามตัวอย่างด้านล่าง
http://twitter.com/statuses/user_timeline.xml?screen_name=daydev
ครับลอง Preview ดูจะเห็น XML Data เหมือนดังรูปด้านล่าง
สร้าง เอกสาร XML ขึ้นมา 1 ไฟล์ชื่อว่า crossdomain.xml ให้สร้าง Format ดังรูปแบบด้านล่าง
<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM
"http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
<allow-access-from domain="www.twitter.com" />
</cross-domain-policy>
บันทึกไฟล์ และ สร้าง PHP ไฟล์ขึ้นมา 1 ไฟล์ที่ชื่อว่า twitter.php ครับและเขียน Code ดังต่อไปนี้
<?php
$filename = 'http://twitter.com/statuses/user_timeline.xml?screen_name=daydev';
$handle = fopen($filename, 'r');
$contents = stream_get_contents($handle);
fclose($handle);
echo $contents;
?>
บันทึกไฟล์เช่นเดิมครับ แล้วทำการ Upload File ผ่าน FTP ไปไว้ ที่ Hosting ของเราครับหรือ Localhost ผ่าน
Appserv ก็ได้ครับหากใครที่ยังไม่มี Hostingเว็บไซต์คุณเอง ทำการ Preview ไฟล์ twitter.php ดูนะครับจะได้
log การ tweet มากมายบนเว็บเรา
เปิดโปรแกรม Adobe Flash CS3 ขึ้นมาครับสร้างเอกสาร ตามรูป
ทำการเขียน Code ตามรูปแบบด้านล่างนี้ครับ หรือจะ Copy เลยก็ได้
package
{
import flash.display.MovieClip;
import flash.events.MouseEvent;
import flash.net.navigateToURL;
import flash.net.URLRequest;
import flash.net.URLLoader;
import flash.events.Event;
public class Twitter_Main extends MovieClip
{
public function Twitter_Main():void
{
initButton();
initTwit();
}
private function initButton():void
{
followBtn.buttonMode = true;
followBtn.addEventListener(MouseEvent.MOUSE_OVER, over);
}
private function over(e:MouseEvent):void
{
followBtn.gotoAndStop(2);
followBtn.removeEventListener(MouseEvent.MOUSE_OVER, over);
followBtn.addEventListener(MouseEvent.MOUSE_OUT, out);
followBtn.addEventListener(MouseEvent.MOUSE_DOWN, down);
}
private function out(e:MouseEvent):void
{
followBtn.gotoAndStop(1);
followBtn.addEventListener(MouseEvent.MOUSE_OVER, over);
followBtn.removeEventListener(MouseEvent.MOUSE_OUT, out);
followBtn.removeEventListener(MouseEvent.MOUSE_DOWN, down);
}
private function down(e:MouseEvent):void
{
followBtn.gotoAndStop(3);
followBtn.removeEventListener(MouseEvent.MOUSE_DOWN, down);
followBtn.addEventListener(MouseEvent.MOUSE_UP, follow);
}
private function follow(e:MouseEvent):void
{
navigateToURL(new URLRequest("http://twitter.com/YOURUSER"), "_blank");
followBtn.removeEventListener(MouseEvent.MOUSE_UP, follow);
}
private function initTwit():void
{
var l:URLLoader = new URLLoader();
l.addEventListener(Event.COMPLETE, loaded);
l.load(new URLRequest("http://YOURHOST.COM/twitter.php"));
}
private function loaded(e:Event):void
{
e.currentTarget.addEventListener(Event.COMPLETE, loaded);
var xml:XML = new XML(e.currentTarget.data);
var list:XMLList = new XMLList(xml.status.text);
var boxArray:Array = new Array();
for(var i:int = 0; i < 4; ++i){
boxArray[i] = this.getChildByName("box" + i);
boxArray[i].textBox.appendText(list[i]);
}
}
}
}
ยาว นิดๆ นะครับ แต่ไม่ต้องห่วงมันไม่ยากเกินไป ดังตัวอย่างนี้ ผมจะทำการ Tweet โชว์ แค่ 4 ข้อความล่าสุดนะครับ
หากต้องการโชว์มากกว่า 4 ข้อความให้แก้ไขที่ Code บันทันนี้ครับ แก้ไขตัวเลข จาก 4 เป็น 5 หรือ เลขอะไรก็ใส่ไปครับ
แต่เราต้องแก้ไข Flash Movie Clip ด้วยในส่วนของ Interface
for(var i:int = 0; i < 4; ++i){
boxArray[i] = this.getChildByName("box" + i);
boxArray[i].textBox.appendText(list[i]);
}
เปลี่ยน Service ของ Script 2 ส่วนครับให้เป็น Service ของเรา ซึ่งตัวอย่างจะเป็น Service ของ Daydevให้
ใส่แทนคำว่า YOURUSER ครับ
private function follow(e:MouseEvent):void
{
navigateToURL(new URLRequest("http://twitter.com/daydev"), "_blank");
followBtn.removeEventListener(MouseEvent.MOUSE_UP, follow);
}
และแก้ไข URL ที่เรา FTP ไฟล์ twitter.php ขึ้นไปครับที่ บรรทัดนี้ ซึ่งทางเรา Upload file ไปที่ URL
นี้ครับ http://daydev.com/twitter/twitter.php
private function initTwit():void
{
var l:URLLoader = new URLLoader();
l.addEventListener(Event.COMPLETE, loaded);
l.load(new URLRequest("http://daydev.com/twitter/twitter.php"));
}
บันทึกไฟล์ ชื่อว่า Twitter_Main.as
ในบทความต่อไปจะเป็นการ สร้าง Interface เพื่อลองรับการทำงานของ Action Script ตัวนี้ครับ
ติดตามตอนต่อไป….