เจาะประเด็น
Tools / Dev
นักพัฒนาเขียน SVG ใน Markdown ได้แล้ว แถมแปลงเป็น MP4 ในเบราว์เซอร์แบบไม่ต้องมีเซิร์ฟเวอร์
เครื่องมือเล็กๆ ที่แก้ปัญหาเฉพาะของคนบ้าคลั่งคนหนึ่ง กลายเป็นของเล่นที่ dev สายเอกสารทุกคนควรได้ลอง
ทีมข่าว เอไอไทย.com
⏱ อ่าน 3 นาที
ถ้าคุณเคยเบื่อว่าทำ SVG สวยๆ ออกมาแล้วแชร์ที่ไหนไม่ได้เพราะแพลตฟอร์มไม่รองรับ นี่คือทางออกที่โคตรจะเนียน
เราคุยกันเรื่องเครื่องมือ dev ที่ฟังดูเล็กๆ แต่แก้ปวดหัวจริงๆ ดีกว่า — นี่คือเรื่องของ Simon Willison เจ้าของบล็อกที่ dev สาย Python รู้จักกันดี เขาเริ่มเขียน tool ตัวหนึ่งชื่อ markdown-svg-renderer ตั้งแต่เดือนพฤษภาคม แต่ตอนนี้เพิ่มฟีเจอร์เข้าไปเยอะพอที่จะต้องมานั่งเล่าให้ฟังอีกรอบ เพราะมันกลายเป็นเครื่องมือในฝันของเขาสำหรับแชร์บทสนทนาที่มี SVG แทรกอยู่
ฟังดูอาจจะงงว่าทำไมต้องมี tool แบบนี้ด้วย? ขอเล่าบริบทหน่อย — Simon เป็นคนที่ชอบวาดรูปนกกระทุงขี่จักรยาน (ใช่ อ่านไม่ผิด) และเขาอยากแชร์งานวาดพวกนี้ในรูปแบบเอกสาร Markdown ที่มี SVG แทรกอยู่ แต่ปัญหาคือการแสดงผล SVG ใน Markdown บนแพลตฟอร์มทั่วไปมันไม่ได้สวยหรูขนาดนั้น เลยต้องสร้าง tool ขึ้นมาเองแก้ปัญหาเฉพาะตัว ซึ่งสุดท้ายกลายเป็นของที่ dev คนอื่นเอาไปใช้ต่อได้ด้วย
การใช้งานมันง่ายมาก แค่เข้าไปที่หน้าเว็บ markdown-svg-renderer วาง Markdown ลงไปก็เห็นผลลัพธ์ทันที หรือถ้าอยากได้หน้าเพจที่แชร์ต่อได้ ก็แค่บันทึก Markdown ไว้ที่ URL ที่รองรับ CORS หรือ GitHub Gist แล้ววางลิงก์เข้าไป มันจะสร้างหน้าเพจที่ bookmark ได้ เช่น ลิงก์ตัวอย่างที่เขาทำไว้ ซึ่งฝัง Gist ไว้ข้างในเลย
จุดที่สนุกจริงๆ อยู่ที่แท็บที่เพิ่มเข้ามาในหน้าต่างแสดงผล — นอกจากการแสดง SVG แบบเรียลไทม์แล้ว มันยังมีแท็บให้แปลงเป็น PNG และ JPEG ได้ในเบราว์เซอร์ เพื่อเอาไปแชร์บนแพลตฟอร์มที่ไม่รองรับ SVG โดยตรง แต่ที่เด็ดสุดคือแท็บ MP4 ที่เพิ่มเข้ามาใหม่วันนี้ — มันจะตรวจสอบว่า SVG มีอนิเมชันไหม แล้วลองเดาว่าควรจะวนลูปยาวแค่ไหน จากนั้นก็เรนเดอร์เฟรมออกมาเป็นชุด แล้วโหลด ffmpeg.wasm ขนาด 30+ เมกะไบต์ เพื่อเอามาประกอบเป็นวิดีโอ MP4 ด้วยพลังเต็มของ FFMPEG ที่ compile เป็น WebAssembly รันในเบราว์เซอร์ล้วนๆ
แบบนี้คืออะไร? คือคุณไม่ต้องมีเซิร์ฟเวอร์ ไม่ต้องติดตั้งอะไร ไม่ต้องส่งข้อมูลไปประมวลผลที่ไหน — ทุกอย่างเกิดขึ้นในเครื่องคุณเอง ฟีเจอร์นี้แก้ปัญหาใหญ่ของคนที่ทำ SVG อนิเมชันแล้วอยากแชร์บนแพลตฟอร์มที่ไม่รองรับ (เช่น Twitter/X หรือ LinkedIn ที่แสดงผล SVG แบบ static เท่านั้น) ได้อย่างเนียนๆ
บอกตรงๆ ว่าตอนแรกที่อ่านจบฉันไม่ได้รู้สึกตื่นเต้นเท่าไหร่ เพราะมองว่านี่คือของเล่นเฉพาะทางสำหรับคนที่ทำ SVG บ่อยๆ เท่านั้น แต่พอคิดอีกที — จำนวน dev ที่เขียนเอกสารด้วย Markdown มีเป็นล้านคน และจำนวนคนที่เริ่มใช้ SVG ในเอกสารก็เพิ่มขึ้นเรื่อยๆ เพราะมันยืดหยุ่นกว่า PNG หรือ JPEG เยอะ โดยเฉพาะเรื่อง responsive และ animation
ที่สำคัญคือวิธีคิดของ Simon ที่น่าสนใจมาก — เขาไม่ได้สร้าง platform ใหญ่โต ไม่ได้ทำ SaaS ไม่ได้พยายาม Monetize อะไรทั้งนั้น แค่สร้าง tool แก้ปัญหาเฉพาะของตัวเอง แล้วเปิดให้คนอื่นใช้ฟรี เพราะงั้น tool แบบนี้เลยมีคุณค่าทางจิตใจสูงกว่าของฟรีที่มาจากบริษัทใหญ่ๆ ที่คอยเก็บข้อมูลคุณไปขายโฆษณา
มุมที่ฉันคิดว่า dev ไทยน่าจะหยิบไปใช้ได้จริงคือการใช้ tool นี้ทำ documentation หรือ proposal ที่ต้องมี diagram หรือ illustration แบบ animated โดยไม่ต้องพึ่งบริการภายนอก — แค่เขียน Markdown แล้วก็ได้หน้าเว็บสวยๆ ที่แชร์ลิงก์ได้เลย หรือถ้าอยากได้ไฟล์วิดีโอไปยื่นส่งงาน ก็แค่กดแท็บ MP4 รอไม่กี่วินาทีก็ได้ไฟล์แล้ว
อีกอย่างที่ควรพูดถึงคือการที่เขาทำทั้งหมดนี้ด้วย ffmpeg.wasm — มันคือการเอา FFMPEG ที่เป็นโปรแกรมระดับตำนานในวงการประมวลผลวิดีโอ มา compile ลง WebAssembly ให้รันในเบราว์เซอร์ได้ แนวคิดแบบนี้แหละที่ทำให้เว็บแอปพลิเคชันสมัยใหม่ทำอะไรได้มากขึ้นเรื่อยๆ โดยไม่ต้องพึ่งเซิร์ฟเวอร์
สรุปคือ — นี่ไม่ใช่แค่ tool เล็กๆ สำหรับคนวาดนกกระทุงขี่จักรยาน แต่มันคือตัวอย่างที่ดีของ "การแก้ปัญหาเฉพาะหน้าที่กลายเป็นของใช้ทั่วไป" และเป็นหลักฐานว่า WebAssembly กำลังทำให้เบราว์เซอร์กลายเป็นคอมพิวเตอร์เครื่องใหม่ที่ทรงพลังพอจะรัน FFMPEG ได้สบายๆ ใครที่เขียน Markdown เป็นประจำ ลองไปเล่นดู รับรองว่าติดใจ
ที่มา: Simon Willison's Weblog — อ่านต้นฉบับ
ความคิดเห็น 5
กำลังโหลดความคิดเห็น...