ค้างเขียนเรื่องนี้มาได้ 2 อาทิตย์ ไม่มีกำลังใจเขียนสักที วันนี้วันดีก็เลยเร่งเขียนเพราะเดี๋ยวจะไม่มีเวลามาเขียน Blog แบบนี้อีก ครั้งนี้จะมาแนะนำเครื่องมือที่ช่วยในการสร้าง Prototype อย่างง่ายๆ เรียกได้ว่าไม่ต้องเขียน HTML กันเลยทีเดียว อ้อ ลืมบอกไปว่าใช้ jQuery Mobile น่ะครับ ถ้าท่านที่ใช้ jQuery Mobile อยู่แล้ว ถ้าไม่เขียน HTML ก็จะหาเครื่องมือแบบ WYSIWYG มาใช้งาน แต่เครื่องมทอที่จะมาแนะนำวันนี้เป็นเครื่องมือ WYSIWYG เช่นกันแต่ทำงานบนเว็บครับ ลาก-วาง กำหนดคณะลักษณะของ widget ต่างๆ ได้เลย เครื่องมือตัวนี้เรียกว่า Codiqa

หากท่านเข้าเว็บ jQuery Mobile ให้เลื่อนลงมากลางๆ หน้าจอ จะพบ Codiqa แบบ mini คือสร้างได้หน้าเดียว preview ได้ เอาเป็นว่ากดๆ เล่นๆ ได้บ้าง ตามที่เขาจะมีมาให้ แต่ถ้าอยากใช้เต็มๆ ให้เข้าไปที่เว็บไซต์ http://codiqa.com สมัครสมาชิกให้เรียบร้อยแล้วเริ่มลงมือทำ App Prototype กันได้เลย สำหรับการ export เพื่อเป็น HTML5 App สำหรับอุปกรณ์ต่างๆ และการบันทึก prpject ต้องจ่ายเงินเพิ่มนะครับ :)

ผมมักจะเขียน HTML5 App แล้วทดสอบบน Tablet ซึ่งมีขนาดหน้าจอใหญ่โต 1280x720px ซึ่งมีพื้นที่เหลือเฟือในการแสดงผล แต่ถ้าหน้าจอเล็กๆ อย่าง 320px, 480px, 640px ล่ะจะทำอย่างไร? ซึ่งแน่นอนว่าการแสดงผล อย่างเช่น ภาพ ขนาดตัวอักษร ฯลฯ จะไม่เหมาะสม ตัวอย่างเช่น

จากภาพจะเห็นว่าเราอ่านการ์ตูน I am Petdo! ได้แค่ครึ่งเดียว ทีนี้ทำยังไงดี วิธีง่ายๆ คือการใช้ความสามารถของ CSS3 ครับ ใน CSS3 จะมีคำสั่งพิเศษชื่อว่า media ซึ่งคำสั่งนี้ใช้เพื่อกำหนดความเหมาะสมของ CSS ในแต่เหตุการณ์ เช่น หน้าจอมีขนาดเล็กบ้าง ใหญ่บ้าง เป็นต้น ทีนี้เราก็มากำหนด CSS ให้ I am Petdo! กันใหม่ เพิ่มคำสั่ง media เข้าไปดังนี้

@media screen and (min-width: 320px) {
img.imagefield {
width:280px;
height:auto;
}
}

@media screen and (min-width: 480px) {
img.imagefield {
width:400px;
height:auto;
}
}

@media screen and (min-width: 800px) {
img.imagefield {
width:563px;
height:auto;
}
}

จากโค้ดข้างต้น หากหน้าจอมีขนาดเล็ก 320px ให้ ภาพที่ใช้ class imagefield มีขนาดความกว้าง 280px ตามลำดับ เท่านี้คุณก็จะได้หน้าจอการแสดงผลที่ดูดีขึ้น ดังนี้

ลองเอาไปประยุกต์ใช้กันดูได้ครับ อ้อและอีกอย่างนึง อย่าลืมกด Like ให้ ThaiOpenSource นะครับ

นักพัฒนา Mobile Web หลายท่านมักจะมีเครื่องไม้เครื่องมืออย่าง Emulator, มือถือ, tablet หลากหลายขนาดเพื่อใช้ทดสอบว่า Mobile Web หรือ HTML5 App ที่พัฒนาขึ้นมานั้นแสดงผลในหน้าจอขนาดต่างๆ เป็นอย่างไร จะต้องแก้ไขหรือปรับปรุงในส่วนใดบ้างเพื่อให้การแสดงผลถูกต้องและลงตัวมากที่สุด ครั้งนี้จะมาแนะนำ Emulator บน Browser เพื่อที่จะช่วยทดสอบ HTML5 App ได้ง่ายมากขึ้น เครื่องมือนี้ชื่อ Ripple แห่งค่ายฮิปโปจิ๋ว (tinyhippos)

ripple จะเปลี่ยน Browser ของคุณให้กลายเป็น Mobile/Tablet Emulator พร้อมฟังก์ชั่นที่เชื่อมต่อกับ JavaScript Framwork ต่างๆ ไม่ว่าจะเป็น PhoneGap, WebWork, WebWork TabletOS, Mobile Web เป็นต้น คุณสามารถทดสอบ App ที่ใช้การเชื่อมต่อ Internet, GPS, Accelerometer ได้ง่ายๆ

สำหรับท่านที่สนใจก็ลองทดสอบดูได้ที่ http://ripple.tinyhippos.com ครับ

ผมพอจะเข้าใจได้เลยว่าการเขียน HTML5 Application เป็นแนวทางอีกแนวทางหนึ่งในการเขียน Application บน Mobile ซึ่งต้องขอบคุณ Apple เพราะกระแสความก้าวล้ำทางด้านเทคโนโลยีของ Webkit ทำให้เกิดแรงผลักดันมาตรฐานที่ควรจะมีให้เกิดขึ้นอย่างรวดเร็ว ทั้ง JavaScript Engine, Local Storage, Local Database และอื่นๆ และอุปกรณ์อย่าง iPhone, iPad ก็รองรับ Mobile (Web) Application ได้อย่างลงตัว โดยการสร้าง Wedget ลงในอุปกรณ์ให้สามารถเรียกใช้ได้เหมือนกับ Application ตัวหนึ่งในเครื่อง จากการพัฒนาดังกล่าวจึงเกิดบริการใหม่ เพื่อช่วยให้นักพัฒนาซอฟต์แวร์และเจ้าของบริการสามารถสร้าง HTML5 App ได้อย่างง่ายๆ เรียกว่า อยากได้อะไร คลิ๊กเอาได้เลย ในครั้งนี้จะมาแนะนำ บริการ SaaS เพื่อช่วยสร้าง HTML5 App กัน 2 ตัวดังนี้

Widget Box

ตัวอย่างการใช้งาน Widget Box Mobile App สร้าง App การ์ตูน IamPetdo จาก RSS Feed

กำหนด Feed URL

กด Save เราก็ได้ HTML5 App มา 1 ตัวใน 3 ขั้นตอน

HTML5 App ที่สร้างขึ้นมาจะอยู่กับ Widget Box หากต้องการติดตั้งลงในอุปกรณ์ต่างๆ เช่น iPhone. iPad, มือถือ Android หรือ Tablet Android ต้องสมัครสมาชิกซึ่งมีค่าใช้จ่ายอยู่นิดหน่อย สำหรับท่านที่สนใจก็ลองไปใช้งานกันดูได้ที่ http://www.widgetbox.com

Tiggzi

Tiggzi (บริการเดิมชื่อ Tiggr) เป็นบริการสำหรับสร้าง Mobile Web และ Mobile App ที่น่าสนใจอีกตัวหนึ่ง ซึ่งตัวระบบให้คุณสามารถวาง Widget เพื่อกำหนดรูปแบบและหน้าตาของ Mobile App ของคุณได้ อีกทั้งยังสนับสนุนการเขียนโค้ดเพื่อควบคุม Widget เหล่านั้นได้อีกด้วย จะคล้ายกับการเขียนโปรแกรมจากเครื่องมือบนระบบปฏิบัติการทั่วไป แต่ตากกันตรงที่เราเขียนและพัฒนาบนเว็บแทน สำหรับ App ที่ได้สามารถใช้งานได้กับ iPhone, Android ได้เลย สำหรับท่านที่สนใจก็ลองทดสอบได้ที่ http://tiggzi.com ครับ

ผมคลั่งการ์ตูนออนไลน์เรื่องหนึ่งมาก ถ้าคุณมีพฤติกรรมที่ออกจะดูแย่ๆ จนคนรอบข้างรับไม่ได้ คุณจะถูกขนานนามว่าเป็น “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 กันแล้ว

บริการคลังเก็บภาพถ่ายอย่าง 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 อีกตัวหนึ่งที่น่าสนใจ แถมยังมีเครื่องไม้เครื่องมืออีกหลายอย่างให้ได้เล่นกัน

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

PhoneGap เป็นแพลตฟอร์มการเขียน Application โดยใช้ HTML5 และ Javascript ซึ่งคุณสามารถใช้ในการสร้าง Application บนมือถือได้หลากหลายแพลตฟอร์ม เช่น iPhone, Android, BlackBerry, webOS, Windows Mobile และ Symbian เป็นต้น PhoneGap จะมาพร้อมกับ PhoneGap API เพื่อใช้ในการเขียน App และ Plugin ต่างๆ ซึ่งทำให้คุณสามารถสร้าง HTML5 Application ได้ง่ายๆ และที่สำคัญหากคุณเขียน Application เป็น HTML5 + PhoneGap API อยู่แล้ว คุณสามารถใช้ PhoneGap Builder ช่วยสร้าง App สำหรับแพลตฟอร์มอื่นๆ ได้เลย โดยไม่ต้องแก้ไขซอร์สโค้ดแต่อย่างใด

สำหรับท่านที่อยากทดลอง ก็สามารถเข้าไปดาวน์โหลด PhoneGap ได้ที่ http://www.phonegap.com สำหรับ PhoneGap Builder สามารถใช้งานได้ที่ https://build.phonegap.com