เกริ่นนำ
เมื่อวันที่ 7 สิงหาคม 2010 deviantART ฉลองวันเกิดปีที่ 10 เราฉลองวันเกิดด้วยการเปิดตัวเครื่องมือวาดภาพ HTML5 ที่ชื่อ deviantART muro เครื่องมือนี้สามารถใช้เป็นเว็บแอปพลิเคชันเดี่ยวๆ รวมทั้งเครื่องมือวาดภาพขนาดเล็กสำหรับเพิ่มรูปภาพในความคิดเห็นในฟอรัม
ชุมชน deviantART ได้ต้อนรับเครื่องมือวาดภาพใหม่นี้ด้วยความกระตือรือร้น และตัวเครื่องมือนี้เองก็มีการเข้าชมมากเท่ากับผลิตภัณฑ์และบริการบนอินเทอร์เน็ตที่มีขนาดเหมาะสม นับตั้งแต่เปิดตัว จะมีการส่งภาพวาดใหม่โดยใช้ deviantART muro ประมาณ 1 ครั้งทุก 5 วินาที นี่เป็นเพียงจำนวนภาพวาดที่ทำเสร็จ มีอีกหลายรูปที่เริ่มแล้วและยังไม่ได้บันทึกไว้
บทความต่อไปนี้ให้ข้อมูลพื้นฐานเกี่ยวกับวิธีที่เราใช้ HTML5 เหตุผลที่เราเลือกใช้เทคโนโลยีที่ใช้ และสิ่งต่างๆ ที่ฉันค้นพบขณะเขียนหนึ่งในแอปพลิเคชัน HTML5 แบบเต็มรูปแบบสำหรับเว็บไซต์ใหญ่ๆ แอปแรก
พื้นหลังของฉัน
เมื่อปลายปี 2005 ผมเป็นหนึ่งในนักพัฒนาซอฟต์แวร์ที่รับผิดชอบเครื่องมือวาดภาพที่ Draw Here ใช้งาน เครื่องมือนี้เป็นเครื่องมือ "กราฟฟิตีบนเว็บ" ที่เปิดตัวโดย bookmarklet ซึ่งใช้วาดภาพบนหน้าเว็บต่างๆ การวาดที่นี่สร้างขึ้นโดยใช้ 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
เมื่อใช้ผืนผ้าใบ คุณจะยิงสิ่งของไปวางบนผืนผ้าใบแล้วคุณจะลืมสิ่งของนั้นไปได้เลย แคนวาสเปล่าและผ้าที่วาดไว้ 1 ชั่วโมงจะทำงานเหมือนกับในโค้ดทั้งหมด และมีหน่วยความจำแทบจะเท่ากัน โปรแกรมวาดแรสเตอร์มักจะใช้ได้ดีกับ ไฟไหม้และลืมเทคโนโลยี ก็อาจทำให้งานยาก เช่น การสร้างฟังก์ชันการเลิกทำอย่างรวดเร็ว ใน Canvas จะยากกว่าใน SVG ใน SVG คุณสามารถจับแฮนเดิลต่อไปจนถึงหลายบรรทัดสุดท้ายที่วาง และการเลิกทำก็เพียงแค่ดึงวัตถุเหล่านั้นออก เมื่อใช้ผืนผ้าใบ เมื่อมีการระบายสีเส้น คุณจะไม่ทราบว่าอะไรอยู่ใต้เส้น ดังนั้นการนำเส้นออกจึงต้องวาดเส้นตรงบริเวณเดิมอีกครั้ง
เมื่อเราเกริ่นนำและตัดสินใจว่าจะใช้ HTML5 สำหรับ Canvas เราได้ตัดสินใจที่จะใช้องค์ประกอบ HTML5 เล็กๆ น้อยๆ จากตรงนี้ ตัวอย่างนี้คือวิธีที่เราใช้ localStorage เพื่อติดตามการตั้งค่าแปรงของผู้ใช้ ด้วยวิธีนี้ เมื่อตั้งค่าแปรงต่างๆ ในแบบที่ชอบแล้ว ก็จะกลับมาใช้การตั้งค่าเหล่านั้นได้ในครั้งต่อไปที่ใช้เครื่องมือของเรา localStorage หมายความว่าเราไม่จำเป็นต้องใช้คุกกี้ของเรา หรือไม่ต้องเดินทางไปที่เซิร์ฟเวอร์เพื่อให้ได้ค่ากำหนดเหล่านั้น
การใช้ Canvas
Canvas พัฒนาขึ้นมากในช่วง 5 ปีที่ผ่านมา สำหรับ "Draw Here" เราไม่ได้เผยแพร่พอร์ต Canvas เพราะมีประสิทธิภาพไม่ดี ตอนนี้ผมคิดว่าเราน่าจะบอกว่าเทคโนโลยีอาจมีประสิทธิภาพดีกว่าที่คุณคิดได้นะ การล้างพื้นที่ผืนผ้าใบขนาดใหญ่และวาดรูปร่างที่ซับซ้อนใหม่อาจเกิดขึ้นด้วยความเร็วที่เร็วกว่าการรับรู้ของมนุษย์ สิ่งเดียวที่ฉันพบว่าช้าเกินไปเป็นครั้งคราวคือการใช้ getImageData() เพื่อสุ่มตัวอย่างพิกเซล ความเร็วของการทำงานขึ้นอยู่กับขนาด Canvas อย่างชัดเจน แต่สำหรับผืนผ้าใบขนาดใหญ่ การทำ getImageData() ในเวลาที่ผิดอาจทำให้ผู้ใช้รู้สึกว่าแอปพลิเคชันตอบสนองช้า
หลังจากอ่านบทแนะนำสำหรับภาพพิมพ์แคนวาสต่างๆ แล้ว เดิมฉันรู้สึกว่านี่เป็นวิธีการใช้งานค่อนข้างใหญ่ โดยอาจใช้เพียง 1-2 ครั้งต่อหน้า ผมไม่รู้ว่าทุกคนจะเข้าใจถูกกันไหม แต่ผมเข้าใจ ผมจึงใช้ตั้งแต่แรกเริ่มเขียนโปรแกรม deviantART muro แต่หลังจากผ่านไปสักพัก ผมก็พบว่ามีพื้นที่เล็กๆ มากมายที่ผืนผ้าใบช่วยให้คุณประหยัดแรงไปได้มาก ตัวอย่างเช่น แบบจำลองของแอประบุว่าควรมีตัวเลือกสีที่เป็นรูปสามเหลี่ยม 2 รูปที่ทับซ้อนกันซึ่งแสดงสีหลักและสีรอง
สัญชาตญาณแรกของฉันคือเริ่มคิดหาวิธีสร้าง UI เล็กๆ นี้โดยใช้ HTML และ CSS แบบดั้งเดิม ผู้ที่เชี่ยวชาญในการแฮ็ก CSS อาจชี้ให้เห็นว่าคุณสามารถดำเนินการทั้งหมดนี้บน CSS ได้อย่างไร แต่รูปสามเหลี่ยมของ 2 ส่วนที่เปลี่ยนสีทำให้ไม่เห็นด้วยตา
เมื่อผมใช้เพียง Canvas ฉันสร้างวิดเจ็ตที่มีองค์ประกอบ DOM เดียวและ JavaScript อีก 2 บรรทัด deviantART muro ใช้โหนด Canvas ทุกส่วนในจุดนั้น แต่ละเลเยอร์คือผืนผ้าใบ และการเปลี่ยนลำดับเลเยอร์ก็เป็นเพียงการเปลี่ยนดัชนีลำดับ Z จานสี "navigator" ซูมที่แสดงมุมมองที่ลดลงของพื้นที่วาดภาพ เป็นเพียงผืนผ้าใบอีกผืนที่เรียกใช้DrawImage() เป็นครั้งคราว โดยใช้ผืนผ้าใบของเลเยอร์เป็นรูปภาพต้นฉบับ แม้แต่เคอร์เซอร์พื้นที่สำหรับวาดภาพ (วงกลม 2 โทนที่ปรับขนาดตามขนาดและการซูมของแปรง) ก็เป็นผืนผ้าใบที่ลอยอยู่ใต้เมาส์
สาเหตุที่เราใช้ Canvas อย่างอิสระมากกว่าเทคโนโลยี HTML5 อื่นๆ ก็คือไลบรารี ExplorerCanvas ของ Google ทำให้สามารถจำลอง Canvas ใน Internet Explorer ได้ ซึ่งนำฉันไปสู่หัวข้อถัดไป
Internet Explorer (IE)
สาเหตุหลักที่เว็บไซต์ใหญ่ๆ จำนวนมากยังไม่ได้ใช้ HTML5 ก็คือ เว็บไซต์เหล่านั้นไม่ต้องการเสียผู้ใช้ Internet Explorer ไป ฉันมั่นใจว่าคำถามแรกในใจของนักพัฒนาซอฟต์แวร์ส่วนใหญ่เมื่อได้ยินว่า deviantART สร้างแอปพลิเคชันวาดภาพ HTML5 คือ "IE ทำอะไรกับ IE ไป"
เราตัดสินใจตั้งแต่แรกเริ่มว่าเราจะพยายามทำให้สิ่งต่างๆ ทำงานได้ใน Internet Explorer อย่างดีที่สุด แต่เราทำการพัฒนาเว็บในรูปแบบตัวส่วนน้อยที่สุด เนื่องจากชุมชนเว็บใช้วิธีทำให้เว็บไซต์ไม่สามารถเปิดใช้งานได้จนกว่าเว็บไซต์จะมีลักษณะเหมือนกันในทุกเบราว์เซอร์ที่รู้จัก ผู้ใช้จึงแจ้งไม่ได้หากเบราว์เซอร์นั้นขาดหายไป สำหรับผู้ใช้ทั่วไป ปัญหาความเร็วจะถูกโจมตีจากการเชื่อมต่ออินเทอร์เน็ต และหน้าเว็บแต่ละหน้าจะแสดงผลเหมือนกันมากขึ้นหรือน้อยลง พวกเขาจึงตัดสินใจเลือกเบราว์เซอร์โปรดตามอินเทอร์เฟซผู้ใช้เล็กๆ น้อยๆ ที่ต้องการ เช่น สีของปุ่มย้อนกลับ
เราตัดสินใจว่าจะสร้างฟีเจอร์เจ๋งๆ ที่ต้องการโดยใช้ข้อกำหนด HTML5 พยายามทำให้ใช้งานได้ใน Internet Explorer และถ้าไม่ได้ผล เราจะแสดงโมดัล อธิบายว่าฟีเจอร์นี้ไม่พร้อมใช้งานเนื่องจากเบราว์เซอร์ยังไม่ได้ใช้มาตรฐานเว็บ
ทีแรกเราได้พยายามทำให้สิ่งต่างๆ ใช้งานร่วมกับ ExplorerCanvas (exCanvas) ของ Google ได้ การเลียนแบบผืนผ้าใบสำหรับสิ่งต่างๆ ส่วนใหญ่ก็ทำงานได้ดีอย่างไม่น่าเชื่อ แต่ก็มีข้อเสียอยู่ 1 ข้อ ทุกสโตรกที่เกิดขึ้นบน Canvas จะเป็นออบเจ็กต์ DOM ในการแปล VML ที่สำคัญ สำหรับสิ่งส่วนใหญ่ที่คุณอาจลองใช้กับ Canvas ก็สามารถทำได้ แต่แปรงของ DeviantART Muro บางส่วนจะสร้างรูปร่างจากการวางเส้นโครงร่างหลายๆ แบบเข้าด้วยกัน เมื่อเจอกับ VML ที่มีโหนดหลายพันโหนดใน Internet Explorer แม้จะใช้เครื่องที่ทำงานเร็ว เครื่องจะล้มตาย ด้วยเหตุนี้ ในการเรียกการวาดภาพจำนวนมาก เราต้องเข้าไปและเขียนโค้ดใน VML จริง และใช้เทคนิคที่เราเชื่อมต่อโหนดเข้าด้วยกันและใช้คำสั่ง Move เพื่อระบุว่าควรมีช่องว่างที่ใด การควบคุมเล็กๆ น้อยๆ มากมายในอินเทอร์เฟซจะใช้แท็ก 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