วิธี Invite Friend หรือส่ง Request ใน Facebook ด้วย Javascript SDK by heha
Oct0
ก่อนจะอ่านต่อ แนะนำให้ไปอ่านการใช้งาน Facebook Javascript SDK เบื้องต้นที่บทความเก่าของผมอันนี้ก่อนครับ คือต้องสั่ง FB.init ก่อนจะใช้งานครับ จากนั้นเรามาดูรูปแบบคำสั่งกันเลยดีกว่าครับ (ถ้าใครใช้กับ app เก่าที่มีอยู่แล้ว ให้ปรับที่หน้า developer ของ app tab Advanced ให้ Requests 2.0 Efficient เป็น enable เอาไว้ด้วยครับ)
Request Dialog 2.0
หยุดลูปไม่รู้จบ จากการแรนดอม by dekunderkover
Oct0
จากการแรนดอมเพื่อเรียงตัวเลขใหม่ที่จะใช้ในการสับเปลี่ยนอาร์เรย์
นี่คือการเขียนแบบตรงๆ ดิบๆ เถื่อนๆ ไม่แนะนำให้ทำตาม!!!
var intArray:Array = new Array();
var i:int = 50;
var j:int = 0;
while (i > 0){
var rand:int = Math.floor(Math.random());
for (var k:int = 0; k < intArray.length; k++){
if (rand != intArray[k]){
intArray[j] = rand;
i–;
j++;
}
}
}
ดูเยอะแยะ วุ่นวายมาก ลูปซ้อนลูป
นี่ยังเขียนไม่เสร็จเลยนะ ได้แค่ตัวเลข 0-49 ที่แรนดอมแล้ว ต้องนำไปดึงอาร์เรย์ตัวเก่ามาเรียงใหม่อีกที
แค่ตรงส่วนนี้ ทำให้เกิดปัญหาหลายอย่าง
1. เกิดการวนลูปซ้ำๆ จากการแรนดอมหลายครั้ง แต่ตัวเลขซ้ำๆกับที่เคยแรนดอมมาในช่วงท้ายๆ
2. หลังจากแรนดอมนานจนเกินไปทำให้เกิด error timeout ซึ่ง timeout โดยทั่วไปจะอยู่ที่ 15 วินาที แล้วทำให้โปรแกรมหยุดการทำงานไปเลย
แต่……..
นี่คือหนทางใหม่ ที่จะไม่เกิดปัญหาเดิมๆนั้น
// arr คือ อาร์เรย์ที่มีข้อมูลอยู่แล้ว ต้องการนำมา shuffle ลำดับใหม่
var randomArray:Array = new Array();
while (arr.length > 0){
var tmp:Array = arr.splice(Math.floor(Math.random()*arr.length), 1);
randomArray.push(tmp[0]);
}
ห๊ะ!!! เสร็จแล้วเหรอ ได้อาร์เรย์ที่สับเปลี่ยนลำดับกันแล้วในอาร์เรย์ที่ชื่อ randomArray
หลักการทำงานคือ นำ arr มา splice ออก ในจุดที่เราแรนดอมออกมา 1 ตัว ได้ออกมาเป็น tmp แล้วเราจึงนำไปใส่ในอาร์เรย์ randomArray
อธิบายง่ายกว่านั้นได้อีกคือ เราเอา arr มาแรนดอมหยิบออกทีละอัน มาโยนใส่ randomArray
ตามโค้ดด้านต้น ท้ายสุด arr จะไม่มีข้อมูลเหลือ ถ้าอยากเก็บข้อมูลแบบเก่าไว้ด้วย อย่าลืมโคลนเก็บไว้ก่อนนะ 
หัดสร้าง Application บน Facebook ด้วย Heroku (Free Cloud Hosting) by heha
Sep4
บทความนี้จริงๆ ก็เหมือนของเก่าเล่าใหม่ เพราะเคยเขียนไปนานมากแล้ว แต่ครั้งนี้ Facebook ได้ประกาศจับมือกับ Heroku ทำให้เรามี Cloud Hosting ได้ใช้กันฟรีๆ ไม่ต้องไปหา host เองให้วุ่นวาย (แต่เฉพาะการทำ app ง่ายๆ เล็กๆ น้อยๆ นะครับ ถ้าจะทำจริงจัง ควรไปเช่า host แบบจ่ายเงินจริงจังอยู่ดี) ซึ่งตัว Heroku นั้นมีข้อดีอย่างมากอย่างแรกคือมี https ในตัว ทำให้ผู้ที่ต้องการจะสร้าง application บน facebook แบบง่ายๆ ไม่ต้องไปวุ่นวายหา Host ใช้งาน และหาทางจดค่าโดเมนและค่า https certificate แบบรายปีให้วุ่นวาย ผมจึงขอเขียนเป็นบทความใหม่ดังนี้ครับ
องค์ประกอบจำเป็นสำหรับนำ application ขึ้น Facebook
รูปแสดง Architecture ของเกม facebook ทั่วๆ ไป
- เตรียม Hosting สำหรับเก็บไฟล์ รองรับ load การใช้งานทั่วไป (ในที่นี้ของเราคือ Heroku ครับ)
- สร้าง Application ใน Developer ของ Facebook
- SDK สำหรับติดต่อกับ Facebook ภาษาต่างๆ (หลักๆ ที่ใช้คือ PHP SDK และ Javascript SDK)
- ตัวเกม ตัว app ที่เราสร้างขึ้น
การแก้ไข ปรับเปลี่ยนเว็บไซต์ให้รองรับ HTTPS by heha
Sep0
เนื่องด้วย facebook บังคับให้ application ทุกตัวใช้งาน HTTPS ภายในวันที่ 1 ตุลาคมนี้ ทำให้ผมต้องนั่งปรับแก้ยกใหญ่ โดยสิ่งที่ต้องแก้มีดังนี้
ต้องแก้อะไรบ้าง?
1. ทำ self-signed certificate (ใช้งาน https ได้แต่ browser จะขึ้นเตือนว่าไม่ปลอดภัย และไม่สามารถใช้งานกับ facebook app ที่อยู่ใน canvas ได้) หรือไปขอ certificate จากผู้ให้บริการต่างๆเช่น Thawte, RapidSSL, Godaddy, Verisign ฯลฯ ซึ่งต้องเสียค่าจดทะเบียน ซึ่งจะแตกต่างกันไป
2. แก้ไข code ของเราในการ link ไปแต่ละหน้าจาก http:// ให้เป็น https:// ทั้งหมด เพื่อให้คนที่ใช้งานเว็บไซต์อยู่ไม่หลุดออกจากการเชื่อมต่อ https เพียงเพราะคลิก link เปลี่ยนหน้า
3. แก้ไข code ของเราที่ call ไปยัง external site ต่างๆ เช่น banner exchange ต่างๆ (ที่จริงพวก widget เช่น google+, facebook like หรือ google analytic ก็เข้าเคสนี้ แต่เนื่องจาก code ที่ให้มาจะ auto detect ให้เองว่าเป็น https หรือไม่อยู่แล้วจึงไม่ค่อยมีปัญหานัก ยกเว้นเรา call หาไฟล์ javascript ข้างนอกเองตรงๆ ก็ต้องแก้จาก http:// เป็น https:// ด้วยเช่นกัน)
ผู้ให้บริการ SSL แต่ละเจ้าต่างกันอย่างไร?
วิธีการทำให้เกมเฟลกซ์เป็นแบบเต็มจอ by Ziah
Sep0
จากประสบการณ์เกม Flex ที่ผ่านมา ที่ตอนแรกคิดว่าการกดเต็มจอคงเป็นอะไรที่ไม่ยาก ก็ต้องมานั่งงมพอสมควร วันนี้เลยจะมาบอกวิธีการทำใหเกมของเราเป็นแบบเต็มจอ(ฟูลสกรีน)ให้ครับ
โดยตอนแรกโค้ดที่คิดไว้เป็นดังนี้
public function setFullscreen():void {
stage.displayState = StageDisplayState.FULL_SCREEN; //ทำให้เต็มจอ
}
public function unsetFullscreen():void {
stage.displayState = StageDisplayState.NORMAL; //ทำให้กลับเป็นปกติ
}
แต่ปรากฎว่าผลที่ได้คือเข้าโหมดฟูลกรีนจริงครับ แต่ตัวเกมยังขนาดเท่าเดิมชิดมุมซ้ายบนของจอ
ที่นี้เราจะทำอย่างไรให้ Flex เกมของเราขยายเต็มจอ ก็ทำตามนี้เลยครับ
public function setFullscreen():void {
stage.align = StageAlign.TOP; //สั่งให้ตัวเกมจัดกลางจอชิดด้านบนก่อนครับ
stage.displayState = StageDisplayState.FULL_SCREEN;
}
public function unsetFullscreen():void {
stage.align = StageAlign.TOP_LEFT; //ให้เกมไปชิดซ้ายบนตามปกติ
stage.displayState = StageDisplayState.NORMAL;
}
ทีนี้เราก็ทำการขยายขนาดของเกมดังนี้ครับ
public var DEFAULT_WIDTH:int = 760; //ค่าความกว้างพื้นฐานของตัวเกม เซ็ทไว้เท่ากันกับ Group ที่ครอบทั้งเกมไว้ด้วย
public var DEFAULT_HEIGHT:int = 600; //เช่นเดียวกันกับความสูง
public function setFullscreen():void {
stage.align = StageAlign.TOP;
stage.displayState = StageDisplayState.FULL_SCREEN;
allApp.width = stage.width; // allApp ของผมคือ Group ที่ครอบตัวเกมทั้งหมดไว้ครับเราก็ทำการขยายมันให้เท่ากัน stage.width ซึ่งก็มีค่าเท่ากับความกว้างของจอในขณะนั้นแล้ว
allApp.height = stage.height; //เช่นเดียวกับบรรทัดก่อนหน้าแต่เป็นความสูง
}
public function unsetFullscreen():void {
stage.align = StageAlign.TOP_LEFT; //ให้เกมไปชิดซ้ายบนตามปก
ติstage.displayState = StageDisplayState.NORMAL;
allApp.width = DEFAULT_WIDTH; //สั่งให้ค่ากลับเป็นค่าพื้นฐาน
allApp.height = DEFAULT_HEIGHT; //เช่นกันกับความกว้าง
}
ที่นี้ขนาดของหน้าจอเกมก็จะถูกต้องแล้ว ที่เหลือก็แค่ทำการปรับขนาดของส่วนต่างๆในเกม เช่นบาร์ด้านบนและล่าง และการขยายตัวเกม
public function setFullscreen():void {
stage.align = StageAlign.TOP;
stage.displayState = StageDisplayState.FULL_SCREEN;
allApp.width = stage.width;
allApp.height = stage.height;
component.scaleX = stage.height/DEFAULT_HEIGHT; //ทำการขยายขนาดขอคอทโพเนนท์ตัวหนึ่งๆ ซึ่งจะทำให้มีขนาดเท่ากับจอที่ทำการขยายแล้วด้วยสเกลเมื่อเทียบกับขนาดจอแล้วมีขนาดเท่าเดิม
component.scaleY = stage.height/DEFAULT_HEIGHT; // ที่ต้องใช้ height มาคำนวนไม่ใช้ width เพราะ Resolution ของจอคอมพิวเตอร์จะมีด้านกว้างมากกว่าด้านสูงดังนั้นวัตถุที่มีขนาดใหญ่เท่าขนาดเกมก่อนหน้าก็จะพอดีกับความสูงของขนาดจอครับ
component.x -= ((component.width*stage.height/DEFAULT_HEIGHT) - (component.width))/2; //ทำการเลื่อนแกน x ของวัตถุต่างๆ จากที่ยกตัวอย่างจะเป็นวัตถุที่ขนาดเต็มจอ ทำให้ไม่ต้องเลื่อนแกน y
//จากนั้นเราก็ทำการปรับค่าส่วนต่างๆของเกมให้ตรงกับที่ต้องการครับ
}
public function unsetFullscreen():void {
stage.align = StageAlign.TOP_LEFT; //ให้เกมไปชิดซ้ายบนตามปก
ติstage.displayState = StageDisplayState.NORMAL;
allApp.width = DEFAULT_WIDTH;
allApp.height = DEFAULT_HEIGHT;
component.scaleX = 1; //ปรับกลับเป็นขนาดปกติ component.scaleY = 1;
component.x = 0; //เลื่อนกลับที่ปกติ
//ทำตรงข้ามกับด้านบน
เท่านี้เราก็จะมีฟังก์ชั่นการปรับเต็มจอที่ใช่ได้แล้วล่ะครับ
Who are we?
