ผมได้รับ Invite จาก HP เพื่อเข้าทดสอบใช้งาน HP Cloud ต้อนรับวันวาเลนไทน์กันเลยทีเดียว เบื้องหลังของ HP Cloud ใช้ OpenStack เป็น Cloud Platform ซึ่งท่านที่สนใจสามารถสมัครและเปิดใช้งานได้เลย บริการที่ HP Cloud มีให้ได้แก่

  • HP Cloud Compute
  • HP Object Storage

นอกจากนี้คุณยังบริหารจัดการผ่านทาง Web Management Console หรือใช้งานผ่าน REST APIs ได้อีกด้วย สำหรับท่านที่เปิดใช้งานจะได้รับ HP Compute 2 ชุด และ Object Storage 1 ชุด สำหรับท่านที่ต้องการ Activate เพื่อใช้งาน โปรดเตรียมบัตรเครดิต กรอกข้อมูล Payment Method ให้เรียบร้อยแล้วเปิดใช้งานได้เลย ข้อมูลเพิ่มเติมดูได้จาก Video ข้างล่าง

HP Cloud Services: Getting Started from HP Cloud on Vimeo.

หลังจากที่ได้แนะนำแนวทางการเขียน HTML5 App และใช้เครื่องมือหลายตัวไปบ้างแล้ว ครั้งนี้ผมจะมาแนะนำเครื่องมือท่อน้ำสุดมหัศจรรย์ ชื่อเป็นทางการเรียกว่า Yahoo! Pipes เครื่องมือนี้ช่วยให้คุณตัดต่อ เชื่อมโยงข้อมูล ผสมข้อมูลต่างๆ ที่มาจากหลากหลายเว็บได้ และที่สำคัญสามารถส่งออกผลลัพท์ได้หลากหลายรูปแบบไม่ว่าจะเป็น RSS, JSON, KML และรูปแบบอื่นๆ

การใช้งาน Pipes ง่ายมากเพียงเลือกเครื่องมือให้เหมาะสมแลัวลากเส้นเชื่อมโยงข้อมูลตั้งค่าตามต้องการจากนั้น Pipes ก็จะทำงานให้คุณพร้อมผลลัพท์ที่น่ามหัศจรรย์ จากตัวอย่างผมต้องการเชื่อมโยงข้อมูลจาก 3 เว็บไซต์เข้าด้วยกัน และใช้ keyword คำว่า Ubuntu ในการ filter ข้อมูลพร้อม เรียงลำดับเหตุการณ์ และหยิบเอาเฉพาะ 10 รายการล่าสุดมาใช้ เขียน Flow ได้ดังภาพ

เมื่อเชื่อมโยงข้อมูลต่างๆ เข้าด้วยกันได้เรียบร้อยแล้ว คุณจะได้หน้า Publish ของคุณขึ้นมาพร้อมลิงค์เพื่อ export ข้อมูลต่างๆ ที่สามารถใช้งานต่อได้ เช่น เพิ่ม Widget ลงใน Google, เพิ่ม Widget ลงใน Yahoo!, Export ข้อมูลเป็น RSS, JSON หรือแม้กระทั่งซอร์สโค้ดภาษา PHP :)

เมื่อเราได้ชนิดของข้อมูลที่เราต้องการ เราก็เอาข้อมูลเหล่านี้มาเขียนโปรแกรมเพื่อใช้งานข้อมูลเหล่านี้ต่อได้ สำหรับท่านที่สนใจก็ทดลองใช้ Yahoo! Pipes ได้ครับ แล้วคุณจะรู้ว่าท่อน้ำมหัศจรรย์มีจริงๆ

ผมคลั่งการ์ตูนออนไลน์เรื่องหนึ่งมาก ถ้าคุณมีพฤติกรรมที่ออกจะดูแย่ๆ จนคนรอบข้างรับไม่ได้ คุณจะถูกขนานนามว่าเป็น “Petdo!” ใช่ครับ การ์ตูน I am Petdo! เป็นการ์ตูนสร้างสรรค์มากในยุคนี้ หากใครไม่ได้อ่านเชยมากๆ ครับ ในครั้งนี้ผมจะมายกตัวอย่างการเขียน HTML5 + jQuery + jQuery Mobile + YQL กัน เว็บไซต์การ์ตูน I am Petdo! มีช่องทางให้คุณอ่านการ์ตูนผ่านทาง RSS Feed ได้ ซึ่งคุณสามารถใช้ RSS reader ตัวไหนก็ได้ในการอ่านการ์ตูนเรื่องนี้ โดยไม่ต้องเข้าเว็บและเราก็สามารถเขียน HTML5 App ในการ Feed เนื้อหาจาก RSS ได้เช่นกัน เครื่องมือที่จะมาแนะนำเพิ่มเติมวันนี้คือ YQL

YQL หรือ Yahoo! Query Language เป็นเครื่องมือคล้ายกับคำสั่ง SQL ใช้ในการ query, filter, join ข้อมูลข้ามเว็บเซอร์วิส คุณสามารถใช้ YQL ในการสร้างชุดข้อมูลที่คุณต้องการได้ง่ายเลยทีเดียว

จากภาพจะเห็นได้ว่าเราสามารถใช้คำสั่ง SQL เพื่อ filter ข้อมูลจาก RSS Feed ได้ YQL มีคุณสมบัติอีกอย่างคือสามารถ แสดงผลลัพท์ในรูปแบบ XML หรือ JSON ได้ ในที่นี้เราจะใช้ผมลัพท์จาก JSON ส่งต่อให้ jQuery ประมวลผล คุณสามารถใช้ Query URL เอาไปใช้งานได้เลย ตัวอย่างเช่น

http://query.yahooapis.com/v1/public/yql?q=select%20title%20from%20rss%20where%20url%3D%22http%3A%2F%2Frss.news.yahoo.com%2Frss%2Ftopstories%22&format=json&diagnostics=true&callback=cbfunc

ผลลัพทที่ได้จะเป็นข้อมูลในรูปแบบ JSON เมื่อได้ข้อมูลมาแล้วก็เขียน jQuery ผ่านทาง jsfiddle เช่นเคย ปรับแต่ง CSS ตามใจชอบ

ตอนนี้เราก็ได้ jQuery ในส่วนที่จำนำไปใช้งานกันแล้ว จับใส่ jQuery Mobile อีกนิดหน่อยเราก็จะได้ HTML5 App สำหรับ Mobile กันแล้ว

ข่าวสั้นแต่อาจทำให้แฟนๆ KDE ตกใจได้ เมื่อ Canonical ตัดสินใจหยุดให้การสนับสนุนทางการเงินกับโครงการ Kubuntu หลังจากออก Kubuntu 12.04 แล้ว โดยเหตุผลของการหยุดการสนับสนุนคือ Kubuntu ไม่ประสบผลสำเร็จทางธุรกิจหลังจากที่ได้พยายามมาแล้วถึง 7 ปี

แน่นอนว่า Kubuntu จะยังคงมีอยู่ภายใต้การดูแลของ Community เช่นเดิม ซึ่ง Canonical ยังให้การสนับสนุนในส่วนของ Infrastructure เหมือนกับโครงการอย่าง Xubuntu หรือ Edubuntu อยู่ เช่น Server, Domain เป็นต้น

ที่มา: OMG! Ubuntu!

นักพัฒนาแอนดรอยด์ชาวไทยทั้งหลาย ไม่ว่าจะมือใหม่หรือมือเก๋า ต้องไม่พลาดงานนี้ “Global Android DevCamp 2012 – Thailand Camp” เพื่อสร้างและเฟ้นหาสุดยอดแอพพลิเคชันสุดเจ๋ง

Global Android DevCamp เป็นกิจกรรมที่จัดขึ้นพร้อมกันกว่า 50 ประเทศทั่วโลกในวันที่ 17-19 กุมภาพันธ์ 2555 นี้ โดยรูปแบบของกิจกรรมจะเป็นการพัฒนาแอพพลิเคชันสำหรับแอนดรอยด์ภายในเวลา 48 ชั่วโมง ทั้งนี้นักพัฒนาที่มีไอเดียเจ๋งๆ แต่ยังขาดทีมในการพัฒนา ก็สามารถที่จะรวมทีมกันได้ภายในงาน แต่ถ้านักพัฒนาคนไหนอยากที่จะฉายเดี่ยว เราก็ไม่ว่ากัน

ในระหว่างการพัฒนาแอพพลิเคชัน จะมีทริปเทคนิคในการพัฒนาดีๆ รวมถึงตัวอย่างในการพัฒนาจากผู้ที่มีประสบการณ์ในการพัฒนาแอนดรอยด์มาอย่างยาวนาน มาแนะนำกันอีกด้วย

สำหรับประเทศไทย (Thailand Camp) จะจัดขึ้นที่ If It Is (ดูสถานที่ตั้งและการเดินทาง) งานนี้ฟรีตลอดทั้งงาน หากนักพัฒนาคนไหนยังไม่ได้ลงทะเบียนสามารถลงทะเบียนเข้าร่วมงานได้ที่นี่

ดูข้อมูลและรายละเอียดเพิ่มเติมได้ที่ เว็บไซต์ Global Android DevCamp 2012 – Thailand Camp

ที่มา – Thailand GTUG

เนื่องจากไม่ได้ไปอัดรายการวิทยุที่ศูนย์เทคโนโลยีการศึกษามานานก็เลยนึกถึงตอนอัดรายการและห้องอัดดรามา 1 ซึ่งตอนนี้เปลี่ยนแปลงไปมาก เครื่องไม้เครื่องมือทันสมัยขึ้นอัดตัดต่อแล้วเอาออกอากาศได้เลยหรือจะทำ Radio Broadcast กันสดๆ ก็ยังได้ ทำให้รู้สึกว่า เทคโนโลยีเหล่านี้ราคาแพง แค่ไมค์ก็ราคาหลายแสนเข้าไปละ พอนึกถึงเรื่องนี้ทีไรก็จะทำให้นึกถึงซอฟต์แวร์ตัวนึงขึ้นมา เจ้าตัวนี้มีชื่อว่า Airtime

Airtime เพิ่งจะเปิดตัวเป็นโอเพนซอร์สไปเมื่อไม่กี่เดือนมานี้ ซอฟต์แวร์ตัวนี้มีลักษณะเด่นคือสามารถทำสถานีวิทยุเองได้ง่ายๆ และควบคุมผ่านหน้าเว็บเบราเซอร์ นอกจากนี้คุณยังสามารถจัดรายการเพลง จัดตารางเวลาออกอากาศได้เอง เชื่อมโยงกับ SoundCloud ได้ และที่สำคัญ stream ไปยัง streamming server อย่าง Icecast หรือ Shoutcast ได้ สำหรับท่านที่ต้องการข้อมูลเพิ่ใเติมสามารถค้นหาเพิ่มเติมได้ที่เว็บไซต์ sourcefabric.org อยากทดสอบก็ทดลองได้ที่ Demo Site ครับ

บริการคลังเก็บภาพถ่ายอย่าง Flickr มีช่องทางสำหรับนักพัฒนา App สามารถที่จะเรียกใช้งานได้ซึ่งมีมาตั้งนานแล้ว ผ่านทาง Flickr API ซึ่งแน่นอนว่าสามารถอัพโหลดภาพผ่านทาง API ได้ และดึงข้อมูลภาพเอามาแสดงผลได้เช่นกัน วิธีการก็ง่ายมากครับ

  1. ต้องสมัคร Flickr API กันก่อน
  2. เลือกช่างกล้องที่เราชื่นชอบ ผมชอบงานถ่ายภาพของนักพัฒนาซอฟต์แวร์ท่านหนึ่ง คือ คุณFordAntiTrust ครับ
  3. ดู Flickr API ที่เราสามารถเลือกใช้ได้ http://www.flickr.com/services/api

มีแค่นี้ครับ ผมเลือกใช้ Method ที่ชื่อว่า flickr.photosets.getPhotos ค่าตัวแปรที่ต้องใช้งานกับ Method นี้คือ API_KEY และ PhotoSet ID ให้เราลองสร้าง REST Request เพื่อให้ได้ข้อมูลเล่นๆ บน Browser กันก่อน ดังนี้

http://api.flickr.com/services/rest/?&method=flickr.photosets.getPhotos&api_key=YOUR-KEY&photoset_id=YOUR-PHOTOSET-ID&format=json&jsoncallback=?

เปลี่ยนค่าตามค่าที่คุณต้องการ ก็จะได้ค่า JSON กลับมาแบบงงๆ อย่างนี้

jsonFlickrApi({"photoset":{"id":"72157626549802465", "primary":"5523106788", "owner":"14143570@N00", "ownername":"Ford AntiTrust", "photo":[{"id":"5523106788", "secret":"ff8af2e14e", "server":"5057", "farm":6, "title":"dear - cu-cheer-66 (2)", "isprimary":"1"}, {"id":"5522518723", "secret":"b006460b92", "server":"5292", "farm":6, "title":"dear - cu-cheer-66 (6)", "isprimary":"0"}, {"id":"5522517811", "secret":"a3e3900d7f", "server":"5252", "farm":6, "title":"dear - cu-cheer-66 (4)", "isprimary":"0"}, {"id":"5522518261", "secret":"e4c4373a3f", "server":"5219", "farm":6, "title":"dear - cu-cheer-66 (5)", "isprimary":"0"},"page":1, "per_page":500, "perpage":500, "pages":1, "total":"29"}, "stat":"ok"})

เรียกได้ว่าสุดมึน คำถามคือ “ภาพอยู่แห่งหนใด” แล้วจะเอามันออกมาโชว์ได้ยังไง? ต่อให้ Parse JSON ได้แลัวภาพอยู่ไหนอ้ะ T_T วิธีการแปลข้อมูลอยู่ที่ Flickr Photo Source URLs ซึ่งข้อมูลจะใช้ REST เช่นเคย ในการแสดงข้อมูลภาพ งงไหม REST ซ้อน REST ไม่ต้องสนใจก็ได้ครับ มันเป็นเรื่องของโครงสร้างการจัดการข้อมูล เอาเป็นว่าโครงสร้าง URL ที่เราจะใช้กันมีดังนี้

http://farm{farm-id}.staticflickr.com/{server-id}/{id}_{secret}_[mstzb].jpg

ค่าที่เราจะเอามาใช้จาก JSON ข้าต้นได้แก่ farm-id, server-id, id, secret และ option ภาพที่เราต้องการ แบ่งเป็น

  • s ภาพขนาด 75×75
  • t ภาพ thumbnail 100px
  • m ภาพขนาด 240px
  • z ภาพขนาดกลาง 640px
  • b ภาพขนาดใหญ่ 1024px
  • o ภาพต้นฉบับ

จากตัวอย่าง JSON ข้างต้น เราลองมาหาภาพแต่ละขนาดกันครับ

แทนค่าสมการกันดีกว่า http://farm6.staticflickr.com/5057/5523106788ff8af2e14ez.jpg เราจะได้ภาพดังนี้

เอาล่ะเริ่มมีกำลังใจกันแล้วใช่มั๊ยครับ เราก็ใช้ http://jsfiddle.net ในการเขียนโค้ดและทดสอบโค้ดกัน

เมื่อได้ทดสอบ jQuery Code และ CSS กันอย่างพอใจแล้ว ก็มาประกอบร่างกันใน jQuery Mobile แล้วไป Build ต่อโดยใช้ PhoneGap Build เราก็จะได้ HTML5 App สำหรับ Mobile ในค่ายต่างๆ ได้แล้วครับ ตัวอย่างพอหอมปากหอมคอ

คิดว่าน่าจะเป็นแนวทางในการพัฒนา HTML5 App ผนวกกับ APIs ต่างๆ บน Cloud ได้ครับ ตัวอย่างในครั้งต่อไปยังนึกไม่ออกครับ คิดว่าคงมีโอกาสมาเขียนอีกครับ :)

ผมมักจะชินกับการใช้เครื่องไม้เครื่องมือที่ออกจะดูวิเศษเสมอๆ อย่าง Adobe Dreamweaver, Web Matrix แต่เมื่อไม่มีตังค์ซื้อก็เลยต้องประยุกต์บริการต่างๆ เข้ามาเพื่อให้การเขียน App ทำได้ง่าย สะดวก และรวดเร็ว คิดว่าหลายๆ ท่านคงเคยใช้ Notepad ในการเขียน HTML ใช่มั๊ยครับ แน่นอนมันยากและมึนด้วย วันนี้เลยจะมาแนะนำเครื่องมือในการเขียน HTML5 App สำหรับ Desktop, Mobile, Tablet App กันครับ เครื่องมือที่ผมใช้แบ่งออกเป็นกลุ่มดังนี้

เครื่องมือเกี่ยวข้องกับ Editor

  • gEdit เครื่องมือปกติที่ผู้ใช้ Ubuntu หรือ Gnome Based Distribution ใช้กันอยู่แล้ว ข้อดีของ Gnome คือมันมีสีแยกแยะ Syntax ทั้ง HTML, Javascript และ CSS ทำให้เห็นข้อผิดพลาดของโค้ดจากสีที่แสดงผลได้ง่าย
  • Eclipse สำหรับตัวนี้ผมมักจะใช้เขียน Android App มากกว่าที่จะเขียน HTML5 App แต่ก็สามารถใช้งานได้เป็นอย่างดี เพราะ plugin ที่เราสามารถติดตั้งเพิ่มเติมเองได้ ก็ทำให้คุณสมบัติของ Eclipse เพิ่มมากขึ้นด้วย

เครื่องมือทดสอบ/ทดลองโค้ด

  • JSONLint เป็นเครื่องมือตรวจสอบความถูกต้องของ Syntax แบบ JSON ข้อดีนอกจากการ Validate แล้วยังมีในเรื่องของการจัดรูปแบบของข้อมูลทำให้เราเข้าใจได้ง่ายมากขึ้นด้วย
  • JSFiddle เป็นเครื่องมือสารพัดประโยชน์ที่รวมรวมเอาการเขียนโค้ดทั้งในรูปแบบของ HTML, CSS, Javascript พร้อมการแสดงผลลัพท์ให้ดู ที่สำคัญยังสามารถเรียกใช้ Javascript Framwork ดังๆ อย่าง jQuery, Mootools, Prototype, YUI เป็นต้น

เครื่องมือคิวรีและดัดแปลงข้อมูล

  • YQL หรือ Yahoo! Query Language สามารถทำให้เราสามารถใช้คำสั่ง SQL ง่ายๆ อย่าง SELECT ในการจัดการข้อมูลบน Internet ได้ง่ายๆ จากหลากหลายบริการ เช่น Yahoo answer, AppDB, Flickr, RSS เป็นต้น โดยคุณสามารถกำหนดข้อมูล output ที่ต้องการได้ด้วย ซึ่งมีให้เลือก 2 รูปแบบคือ XML และ JSON
  • Pipes เป็นเครื่องมือดัดแปลงข้อมูลจาก Internet เพื่อให้ได้ข้อมูลที่เราต้องการ Pipes เป็นอะไรที่สนุกมาก คุณสามารถเชื่อมโยงข้อมูลจากบริการที่แตกต่างเพื่อสร้างชุดข้อมูลใหม่ได้ เช่น เอา Youtube มาผนวกกับ Twitter เป็นต้น

เครื่องมือที่เกี่ยวกับ JavaScript Framework

  • jQuery Mobile ใช้สำหรับทำ Mobile Web หน้าตาจะออกแนวๆ iPhone App ใช้งานง่าย มีเครื่องมือที่เหมาะสำหรับการเขียน Mobile App เช่น Touch UI เป็นต้น
  • PhoneGap เป็น JavaScipt + SDK ทำให้เราสามารถใช้งานอุปกรณ์ที่อยู่ในมือถือหรือ tablet ได้ง่ายๆ ผ่านทาง JavaScript เช่น กล้องถ่ายรูป, GPS, โทรศัพท์ ฯลฯ PhoneGap ยังมี Build Server สำหรับสร้าง App เพื่อใช้งานในมือถือค่ายต่างๆ ได้อีกด้วย จำได้ว่าเคยเขียน blog เกี่ยวกับ PhoneGap Builder ไปแล้ว
  • Sencha เป็นเครื่องมือ Javascript Framework อีกตัวหนึ่งที่น่าสนใจ แถมยังมีเครื่องไม้เครื่องมืออีกหลายอย่างให้ได้เล่นกัน

พอแค่นี้ก่อนก็แล้วกันครับ :)

อัพเดทล่าสุดจาก Mozilla Firefox ออกรุ่นใหม่แล้ว Firefox 10 พร้อมสนับสนุน CSS 3D สร้างประสบการใหม่ให้กับผู้ออกแบบเว็บไซต์ หลังจากให้คู่แข่งอย่าง WebKit นำหน้านาน สำหรับ CSS 3D เป็นยังไงดูได้ที่หน้าเว็บ Mozilla Hack ในส่วน WebGL ดูเนียนมากขึ้นใน Firefox 10 เนื่องจากสนับสนุนการแสดงผลแบบ anti-aliasing สำหรับ HTML5 ใน Firefox 10 รุ่นนี้สนับสนุน tag อีกด้วย สำหรับท่านที่ต้องการใช้งาน Firefox 10 ก็อัพเดทกันได้เลยครับ หากต้องการดาวน์โหลดมาติดตั้งก็สามารถดาวน์โหลดได้ที่ mozilla.org