บทนำ
เมื่อวันที่ 7 สิงหาคม 2010 deviantART ได้ฉลองวันเกิดครบรอบ 10 ปี เราฉลองวันเกิดด้วยการเปิดตัวเครื่องมือวาดภาพ HTML5 ชื่อ deviantART muro เครื่องมือนี้สามารถใช้เป็นเว็บแอปพลิเคชันแบบสแตนด์อโลนและเครื่องมือวาดภาพน้ำหนักเบาสำหรับเพิ่มรูปภาพในความคิดเห็นของฟอรัม
ชุมชน deviantART ให้การต้อนรับเครื่องมือวาดภาพใหม่นี้อย่างกระตือรือร้น และตอนนี้เครื่องมือดังกล่าวมีจำนวนการเข้าชมเท่ากับเว็บพร็อพเพอร์ตี้ขนาดกลางบางรายการ นับตั้งแต่เปิดตัว มีการส่งภาพวาดใหม่โดยใช้ deviantART muro ประมาณทุกๆ 5 วินาที ตัวเลขเหล่านี้เป็นเพียงจำนวนภาพวาดที่เสร็จสมบูรณ์แล้ว ยังมีภาพวาดอีกมากมายที่เริ่มต้นแต่ไม่บันทึก
บทความต่อไปนี้ให้ข้อมูลเบื้องต้นเกี่ยวกับวิธีที่เราใช้ HTML5, เหตุผลที่เราเลือกใช้เทคโนโลยีดังกล่าว และสิ่งที่ฉันค้นพบขณะเขียนแอปพลิเคชัน HTML5 ที่สมบูรณ์แบบแอปพลิเคชันแรกสำหรับเว็บไซต์หลัก
ภูมิหลังของฉัน
ในช่วงปลายปี 2005 ฉันเป็นหนึ่งในนักพัฒนาซอฟต์แวร์ที่มีส่วนรับผิดชอบในเครื่องมือวาดภาพที่ใช้ใน Draw Here เครื่องมือนี้เป็นเครื่องมือ "เว็บกราฟฟิตี" ที่เปิดใช้งานโดยบุ๊กมาร์กเลต ซึ่งใช้วาดรูปภาพในหน้าเว็บ ฟีเจอร์วาดที่นี่สร้างขึ้นโดยใช้ SVG มาตั้งแต่แรก (Firefox 1.5 เบต้าเพิ่งเปิดตัว ซึ่งเป็นหนึ่งในเบราว์เซอร์แรกที่รองรับ SVG)
ใน Internet Explorer เราสร้าง SVG ในเบื้องหลัง แต่แสดงผลภาพวาดโดยใช้ VML WebKit ไม่รองรับ SVG ในขณะนั้น เราจึงพอร์ตโค้ดของเราให้แสดงผล SVG โดยใช้ Canvas (ซึ่งเป็นเทคโนโลยีใหม่ที่พบใน WebKit เท่านั้นในขณะนั้น) มีอยู่ช่วงหนึ่งที่ฉันยังพอร์ตโค้ด SVG เพื่อให้แสดงผลในเบราว์เซอร์รุ่นเก่าได้โดยใช้องค์ประกอบ div จำนวนมากที่วางต่อกัน (แน่นอนว่านี่เป็นการพูดเล่นเพื่อแสดงให้เห็นว่าทําได้ แต่ใช้งานช้ามาก)
ในช่วงที่ได้รับความนิยมสูงสุด Draw Here มีการใช้วาดภาพประมาณ 100 ภาพต่อวัน เวอร์ชันนี้สมบูรณ์มากพอที่จะเรียกว่ามากกว่าการทดสอบ แม้ว่าจะยังไม่ได้รับการขัดเกลาขั้นสุดท้ายของเว็บแอปพลิเคชันหลักก็ตาม ในช่วงกลางปี 2006 โปรเจ็กต์นี้ถูกยกเลิกไป แม้ว่าเว็บไซต์จะยังทำงานอยู่ในปัจจุบัน แต่ส่วนใหญ่ก็เป็นเพียงการอัปเดตเพื่อความสนุกเท่านั้น
เทคโนโลยีที่ใช้โดย deviantART muro
ประสบการณ์ด้านการใช้เทคโนโลยี HTML5 ต่างๆ ในช่วงแรกทำให้ฉันได้รับเชิญให้เป็นนักพัฒนาซอฟต์แวร์ระดับอาวุโสใน deviantART muro ทุกคนที่อ่านบทความนี้น่าจะเข้าใจเหตุผลที่เราเลือกใช้ HTML5 แทนเทคโนโลยีที่ใช้ปลั๊กอิน เช่น Silverlight หรือ Flash เราต้องการเครื่องมือที่มีประสิทธิภาพและใช้งานได้ตามมาตรฐานแบบเปิด
การเลือกระหว่าง Canvas กับ SVG
เราตัดสินใจที่จะทำเลเยอร์การวาดโดยใช้ Canvas ผู้ใช้บางรายอาจสงสัยว่าควรใช้ canvas หรือ SVG เมื่อใด เทคโนโลยีทั้ง 2 ประเภทนี้มีความทับซ้อนกันมากในสิ่งที่ทำได้ ดังที่ Draw Here พิสูจน์แล้วว่าทั้ง 2 เทคโนโลยีนี้สามารถใช้สร้างแอปพลิเคชันวาดภาพได้
เราพบว่า SVG เหมาะอย่างยิ่งหากคุณต้องการเก็บแฮนเดิลไว้สำหรับวัตถุที่วาดไว้ เช่น หากต้องการให้ผู้ใช้วาดเส้นได้ จากนั้นลากเส้นบางส่วนเพื่อเปลี่ยนรูปร่าง การดำเนินการนี้ทำได้ง่ายมากโดยใช้ SVG แต่การใช้ Canvas นั้นไม่สะดวก
เมื่อใช้ Canvas คุณจะใส่ข้อมูลลงใน Canvas แล้วลืมไปเลย ภาพพิมพ์แคนวาสเปล่าและภาพพิมพ์แคนวาสที่มีภาพวาดอยู่เป็นเวลา 1 ชั่วโมงจะทำงานเหมือนกันทุกประการในโค้ด และมีพื้นที่หน่วยความจำเท่าๆ กัน แม้ว่าโปรแกรมวาดภาพแรสเตอร์มักจะทำงานได้ดีกับเทคโนโลยีไฟและลืม แต่ก็มีบางสิ่งที่ทำได้ยาก เช่น การสร้างฟังก์ชันเลิกทำอย่างรวดเร็วใน Canvas นั้นยากกว่าใน SVG มาก ใน SVG คุณสามารถเก็บแฮนเดิลของเส้นหลายเส้นล่าสุดที่คุณวางไว้ และเลิกทำก็เพียงแค่ดึงออบเจ็กต์เหล่านั้นออก สำหรับ Canvas เมื่อวาดเส้นแล้ว คุณจะไม่รู้ว่ามีสิ่งใดอยู่ใต้เส้นนั้น ดังนั้นการนำเส้นออกจึงต้องวาดพื้นที่ที่มีเส้นนั้นใหม่
เมื่อตัดสินใจแล้วว่าจะใช้ HTML5 สำหรับ Canvas เราจึงตัดสินใจใช้ฟีเจอร์เล็กๆ น้อยๆ อื่นๆ ของ HTML5 เพิ่มเติม ตัวอย่างหนึ่งคือวิธีที่เราใช้ localStorage เพื่อติดตามการตั้งค่าแปรงของผู้ใช้ วิธีนี้ช่วยให้ผู้ใช้สามารถกลับมาใช้การตั้งค่าเดิมได้เมื่อใช้เครื่องมือของเราในครั้งถัดไป localStorage หมายความว่าเราไม่จำเป็นต้องใช้คุกกี้หรือเข้าถึงเซิร์ฟเวอร์เพื่อรับค่ากำหนดเหล่านั้น
การใช้ Canvas
Canvas พัฒนาไปมากในช่วง 5 ปีที่ผ่านมา สำหรับ Draw Here เราไม่ได้ทำพอร์ตเวอร์ชัน Canvas เผยแพร่เนื่องจากประสิทธิภาพไม่ดี เราขอยืนยันว่าประสิทธิภาพของฟีเจอร์นี้น่าจะดีกว่าที่คุณคิด โดยปกติแล้ว การล้างพื้นที่ขนาดใหญ่บนผืนผ้าใบและวาดรูปร่างที่ซับซ้อนอีกครั้งอาจเกิดขึ้นเร็วกว่าที่มนุษย์จะรับรู้ สิ่งเดียวที่เราพบว่าช้าเกินไปในบางครั้งคือการใช้ getImageData() เพื่อสุ่มตัวอย่างพิกเซล ความเร็วของการดำเนินการจะขึ้นอยู่กับขนาดของผืนผ้าใบ แต่สำหรับผืนผ้าใบขนาดใหญ่ การทำ getImageData() ในเวลาที่ไม่ถูกต้องอาจใช้เวลานานพอที่จะทำให้ผู้ใช้รู้สึกว่าแอปพลิเคชันตอบสนองช้า
หลังจากอ่านบทแนะนำต่างๆ เกี่ยวกับ Canvas ตอนแรกฉันคิดว่า Canvas เป็นเครื่องมือที่หนักหน่วงและควรใช้อย่างประหยัด อาจจะ 1-2 ครั้งในหน้า เราไม่รู้ว่าทุกคนจะรู้สึกแบบนี้ไหม แต่เรารู้สึกเช่นนั้น เราจึงใช้ฟีเจอร์นี้อย่างจำกัดเมื่อเริ่มเขียนโค้ด deviantART muro แต่หลังจากผ่านไปสักพัก เราพบว่ามีจุดเล็กๆ มากมายที่ภาพพิมพ์แคนวาสช่วยคุณประหยัดแรงได้มาก ตัวอย่างเช่น ภาพตัวอย่างของแอปของเราระบุว่าควรมีเครื่องมือเลือกสีที่เป็นสามเหลี่ยม 2 รูปซ้อนกันซึ่งแสดงสีหลักและสีรอง
ความคิดแรกๆ ของฉันคือการเริ่มหาวิธีสร้างเครื่องมือเล็กๆ นี้ใน UI ด้วย HTML และ CSS แบบดั้งเดิม ผู้ที่เก่งเรื่องการแฮ็ก CSS อาจชี้ให้เห็นวิธีทำทั้งหมดนี้ผ่าน CSS แต่รูปทรงสามเหลี่ยมของ 2 ส่วนที่มีการเปลี่ยนสีทำให้ไม่ชัดเจนนัก
เมื่อนึกขึ้นได้ว่าจะแค่ใช้ Canvas เลยสร้างวิดเจ็ตด้วยเอลิเมนต์ DOM รายการเดียวและ JavaScript 2-3 บรรทัด deviantART muro ใช้โหนด Canvas อยู่ทั่วทุกที่ แต่ละเลเยอร์คือผืนผ้าใบ และการเปลี่ยนลําดับเลเยอร์ก็เพียงแค่เปลี่ยน z-index จานสี "เครื่องมือนำทาง" สำหรับการซูมซึ่งแสดงมุมมองที่ลดลงของพื้นที่วาดเป็นเพียงผืนผ้าใบอีกผืนหนึ่งที่เรียกใช้ drawImage() เป็นครั้งคราวโดยใช้ผืนผ้าใบเลเยอร์เป็นภาพต้นทาง แม้แต่เคอร์เซอร์ของพื้นที่วาดภาพ (วงกลม 2 โทนที่จะปรับขนาดตามขนาดแปรงและการซูม) ก็ยังเป็นผืนผ้าใบที่ลอยอยู่ใต้เมาส์
สาเหตุที่เราอนุญาตการใช้ Canvas มากกว่าเทคโนโลยี HTML5 อื่นๆ คือไลบรารี ExplorerCanvas ของ Google ช่วยให้สามารถจําลอง Canvas ใน Internet Explorer ได้ ซึ่งนำเราไปสู่ส่วนถัดไป
Internet Explorer (IE)
เหตุผลหลักที่เว็บไซต์หลักๆ จำนวนมากยังไม่ใช้ HTML5 ก็คือเว็บไซต์เหล่านั้นไม่ต้องการสูญเสียผู้ใช้ Internet Explorer เรามั่นใจว่าคำถามแรกที่นักพัฒนาแอปส่วนใหญ่จะถามเมื่อได้ยินว่า deviantART พัฒนาแอปวาดภาพ HTML5 คือ "มีการดำเนินการกับ IE อย่างไรบ้าง"
เราตัดสินใจตั้งแต่ต้นว่าจะทำอย่างดีที่สุดเพื่อให้ทุกอย่างทำงานใน Internet Explorer ได้ แต่จะไม่พัฒนาเว็บในสไตล์ที่ทำงานได้กับทุกเบราว์เซอร์ เนื่องจากชุมชนเว็บใช้แนวทางที่ว่าเว็บไซต์จะเปิดตัวไม่ได้จนกว่าเว็บไซต์จะมีลักษณะเหมือนกันในเบราว์เซอร์ทุกรุ่นที่รู้จัก ผู้ใช้จึงไม่สามารถบอกได้ว่าเบราว์เซอร์ของตนขาดอะไร ผู้ใช้ทั่วไปมักโทษปัญหาด้านความเร็วว่าเกิดจากการเชื่อมต่ออินเทอร์เน็ตของตน และทุกหน้าเว็บแสดงผลช้าเหมือนกัน ดังนั้นผู้ใช้จึงเลือกเบราว์เซอร์ที่ชื่นชอบโดยอิงตามสิ่งเล็กๆ น้อยๆ ในอินเทอร์เฟซผู้ใช้ เช่น สีของปุ่มย้อนกลับ
เราจึงตัดสินใจว่าจะทำฟีเจอร์เจ๋งๆ ที่คิดขึ้นมาโดยใช้ข้อกำหนด HTML5 และพยายามทำให้ฟีเจอร์ดังกล่าวใช้งานได้ใน Internet Explorer หากใช้งานไม่ได้ เราจะแสดงป๊อปอัปอธิบายว่าฟีเจอร์ไม่พร้อมใช้งานเนื่องจากเบราว์เซอร์ของลูกค้ายังไม่ใช้มาตรฐานเว็บ
ตอนแรกเราพยายามทำให้ทุกอย่างทำงานร่วมกับ ExplorerCanvas (exCanvas) ของ Google เครื่องมือนี้เลียนแบบภาพพิมพ์แคนวาสได้ดีมากในเกือบทุกเรื่อง แต่ก็มีจุดเสียอยู่อย่างหนึ่ง เส้นขีดทุกเส้นบนผืนผ้าใบคือออบเจ็กต์ DOM ในการแปล VML ที่เกี่ยวข้อง วิธีการนี้ใช้ได้กับงานส่วนใหญ่ที่คุณอาจลองวาดด้วย Canvas แต่แปรงบางรายการของ deviantART muro จะสร้างรูปร่างจากการวางเลเยอร์การลากเส้นจำนวนมากซ้อนกัน เมื่อ Internet Explorer พบ VML ที่มีโหนดหลายพันโหนดในนั้น แม้แต่ในเครื่องที่เร็วก็อาจทำให้ระบบหยุดทำงาน ด้วยเหตุนี้ เราจึงต้องเข้าไปเขียนโค้ด VML จริงสำหรับคอลการวาดจำนวนมาก รวมถึงใช้เทคนิคในการต่อโหนดเข้าด้วยกันและใช้คำสั่งย้ายเพื่อระบุตำแหน่งที่ควรเว้นวรรค ตัวควบคุมเล็กๆ น้อยๆ จำนวนมากในอินเทอร์เฟซใช้แท็ก Canvas เนื่องจากการใช้งานเล็กๆ น้อยๆ เหล่านั้นมักจะทำงานได้ดีกับ exCanvas
นอกจากการทำให้บางสิ่งทำงานร่วมกับ exCanvas แล้ว เรายังแนะนำให้ผู้ใช้ใช้ Internet Explorer เวอร์ชันของตนต่อไปได้หากติดตั้งปลั๊กอิน Google Chrome Frame Google Chrome Frame เป็นปลั๊กอินที่ฝังเครื่องมือแสดงผลของ Google Chrome ใน Internet Explorer จากมุมมองของผู้ใช้ ผู้ใช้ยังคงใช้เบราว์เซอร์ที่คุ้นเคยอยู่ แต่เบื้องหลัง หน้าเว็บของเราได้รับการแสดงผลด้วยความสามารถของ HTML5 ของ Chrome และ JavaScript ที่เร็วขึ้น
เราทราบดีว่าการพอร์ตแอปต่างๆ ให้ทำงานร่วมกับ Chrome Frame นั้นง่าย แต่เราไม่ได้ตระหนักว่าง่ายเพียงใด คุณเพียงใส่เมตาแท็กเพิ่มอีกรายการ แล้วทุกอย่างก็เริ่มทํางานใน IE
สรุป
เรายินดีที่ได้ทํางานกับเทคโนโลยีใหม่ในข้อกําหนดของ HTML5 และขอยืนยันว่าทุกอย่างที่เราใช้พร้อมใช้งานแล้ว แม้ว่าคุณจะต้องการใช้งานที่ราบรื่นใน IE แต่ก็มีสิ่งต่างๆ มากมายที่คุณทําได้โดยใช้ canvas และ exCanvas และเขียนเลเยอร์การแปลระหว่าง SVG กับ VML ก็ทําได้เช่นกัน เมื่อเริ่มใช้เทคโนโลยีนี้ คุณจะรู้สึกเหมือนได้ก้าวเข้าสู่โลกใบใหม่
ข้อมูลอ้างอิง
- deviantART muro
- ฟอรัมของ deviantART ที่คุณสามารถวาดภาพได้ (ต้องเข้าสู่ระบบ)
- ExplorerCanvas
- Google Chrome Frame