XSLT Transformer: แปลง XML ด้วย Stylesheet ในเบราว์เซอร์ของคุณ

XSLT (Extensible Stylesheet Language Transformations) มีอายุมากกว่ายี่สิบห้าปีแล้ว แต่ยังคงทำงานจริงอยู่ทั่วเว็บ RSS และ Atom feeds จำนวนมากเรนเดอร์ด้วย XSLT publishing pipeline ใช้มันแปลงซอร์ส DocBook เป็น HTML และระบบ integration ในองค์กรก็พึ่งพามัน reshape ข้อความ XML ระหว่างระบบ เป็นเทคโนโลยีที่ไม่เคยเป็นกระแส แต่ก็ไม่เคยหายไป

จุดที่ลำบากมาตลอดคือความสะดวก การทดสอบ stylesheet แบบดั้งเดิมต้องติดตั้ง command-line processor อย่าง xsltproc หรือ Saxon หรือไม่ก็เขียนโปรแกรมเล็กๆ ในภาษาที่ใช้งาน XSLT Transformer ตัดขั้นตอนนั้นออกทั้งหมด วาง XML วาง stylesheet แล้วเห็นผลลัพธ์ทันที ทุกอย่างทำงานบน XSLTProcessor ที่มีอยู่แล้วในเบราว์เซอร์ของคุณ ไม่ต้องดาวน์โหลด ไม่ต้องตั้งค่า และไม่มีค่าใช้จ่าย

เนื่องจากการ transform เกิดขึ้นในเครื่องของคุณ เครื่องมือนี้จึงเหมาะเป็นพื้นที่ทดลองสำหรับเอกสารที่เป็นความลับ เช่น feed ภายใน, XML contract กับพาร์ทเนอร์ หรือเอกสารร่าง โดยไม่มีข้อมูลอะไรถูกอัปโหลดขึ้น server เลย

ทำไมต้องใช้ XSLT Transformer?

• ไม่ต้องติดตั้งอะไรเลย ไม่มี command-line tool, ไม่มี package, ไม่ต้องตั้งค่า runtime วางเอกสารสองชุดแล้ว transform ได้ทันที
• ใช้ XSLTProcessor ตัวจริงในเบราว์เซอร์ เครื่องมือทำงานบน engine เดียวกับที่เบราว์เซอร์ใช้เรนเดอร์ XML ที่แนบ stylesheet ผลลัพธ์จึงตรงกับพฤติกรรมจริงในเบราว์เซอร์
• เป็นส่วนตัว ปลอดภัยกับ XML ที่เป็นความลับ ทุกการ parse และ transform เกิดขึ้นฝั่ง client contract กับพาร์ทเนอร์และ feed ที่ยังไม่เผยแพร่ไม่เคยออกจากเครื่องคุณ
• ไฮไลต์ parse error ทันที เอกสารหรือ stylesheet ที่พังจะถูกรายงานด้วยข้อความ error ที่ชัดเจน ไม่ใช่แค่หน้า output ว่างๆ ให้เดาเอง
• สลับ output method ได้ มุมมอง HTML, XML และ Text ช่วยให้เห็นชัดว่า stylesheet สร้างผลลัพธ์แบบไหนออกมา
• วน iteration เร็ว แก้เอกสารฝั่งไหนก็ได้ แล้ว output รีเฟรชทันที

คุณสมบัติเด่น

• ทุกอย่างที่เขียนต้องอยู่ในกรอบ XSLT 1.0 ซึ่งเป็นเวอร์ชันที่เบราว์เซอร์รองรับ — ดูรายละเอียดด้านล่าง
• แท็บ output เป็นแบบสด สลับระหว่าง HTML, XML และ Text ได้โดยไม่ต้องรันใหม่
• จับคู่กับ XML Formatter เพื่อจัดรูปเอกสารให้สวยก่อนหรือหลัง transform ได้

วิธีใช้งาน XSLT Transformer

1. วาง XML ของคุณ เปิด XSLT Transformer แล้วใส่เอกสารต้นทางลงในช่อง XML ใช้ XML ที่ well-formed อะไรก็ได้ เช่น feed, config file หรือไฟล์ export
2. วาง stylesheet วาง XSLT stylesheet ลงในช่องที่สอง โดยต้องประกาศ XSLT namespace และ version ไว้ ไม่เช่นนั้น processor จะปฏิเสธ
3. รัน transform ผลลัพธ์ปรากฏทันที XSLTProcessor จะ parse เอกสารทั้งสอง นำ template ของคุณไปใช้กับ source tree แล้ว serialize เป็นผลลัพธ์
4. สลับ output method สลับดู HTML, XML และ Text เพื่อเห็นว่า result tree เดียวกัน serialize ออกมาต่างกันอย่างไรในแต่ละโหมด
5. แก้ error ที่รายงาน ถ้าเอกสารฝั่งใด parse ไม่ผ่าน รายละเอียด error จะชี้ตำแหน่งที่แน่นอน เช่น tag ที่ไม่ได้ปิด หรือ ampersand ที่ไม่ได้ escape แก้แล้วรอบถัดไปก็ผ่าน

Template, Matching และ Output Method

หลักการทำงานของ Template Matching

XSLTProcessor จะเดินไล่ source tree แล้วสำหรับทุก node จะหา xsl:template ที่มี pattern match เข้ากับ node นั้นที่สุด template xsl:template match="/" จะทำงานหนึ่งครั้งที่ root ของเอกสาร และเป็นจุดเริ่มต้นปกติของ stylesheet จากนั้น xsl:apply-templates จะส่งการประมวลผลต่อไปยัง node ลูก ถ้าไม่มี template ไหน match กฎ fallback ในตัวจะคัดลอก text ผ่านไปเอง นี่คือเหตุผลที่ XPath แม้แต่จุดเดียวที่ไม่ match มักให้ output ที่เกือบว่างแต่ไม่ว่างซะทีเดียว

xsl:value-of และ xsl:for-each พร้อมตัวอย่างจริง

สองคำสั่งนี้ครอบคลุมงานได้ surprisingly มาก: xsl:for-each วนลูป node set ที่เลือกด้วย XPath และ xsl:value-of คัดลอก string value ของ node ที่เลือกไปไว้ในผลลัพธ์ เริ่มจากซอร์สสไตล์ RSS ง่ายๆ:

<channel>
  <title>Dev Notes</title>
  <item><title>Caching basics</title></item>
  <item><title>Regex recipes</title></item>
</channel>

และ stylesheet ที่เปลี่ยนรายการ item เป็น HTML list:

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:template match="/">
    <ul>
      <xsl:for-each select="channel/item">
        <li><xsl:value-of select="title"/></li>
      </xsl:for-each>
    </ul>
  </xsl:template>
</xsl:stylesheet>

เมื่อตั้ง output method เป็น HTML ผลลัพธ์คือ:

<ul>
  <li>Caching basics</li>
  <li>Regex recipes</li>
</ul>

ลองวางสาม snippet นี้ลงในเครื่องมือ คุณจะได้บทเรียน XSLT ที่ใช้งานได้จริงภายในไม่ถึงหนึ่งนาที

ทำไม Output Method จึงสำคัญ

output method ควบคุมการ serialize ไม่ใช่ result tree เอง แต่ไบต์สุดท้ายต่างกันชัดเจน โหมด HTML เขียน markup แบบที่เบราว์เซอร์คาดหวัง เช่น void element อย่าง br จะไม่ปิดตัวเอง โหมด XML ให้ผลลัพธ์ที่ well-formed อย่างเคร่งครัด ทุก tag ถูกปิดและ escape อักขระพิเศษครบ เหมาะเมื่อโปรแกรมอื่นจะนำผลลัพธ์ไป parse ต่อ ส่วนโหมด Text ตัด markup ออกหมด เขียนเฉพาะ text node ใช้ได้ดีกับงานอย่าง CSV หรือค่า config การสลับดูทั้งสามแท็บกับ stylesheet เดียวคือวิธีเร็วที่สุดที่จะเข้าใจความต่างนี้

ข้อผิดพลาดที่พบบ่อยใน Stylesheet

• Namespace ผิดหรือลืมใส่ ลืม xmlns:xsl="http://www.w3.org/1999/XSL/Transform" หรือพิมพ์ผิด element ของคุณจะกลายเป็น tag แปลกหน้า ไม่ใช่คำสั่ง XSLT
• XPath ไม่ match XPath แยกตัวพิมพ์ใหญ่เล็ก select="Channel/Item" จะไม่เจออะไรเลยถ้าซอร์สใช้ตัวพิมพ์เล็ก channel/item อาการเดียวที่เห็นคือ output หาย
• Version ไม่ตรง ประกาศ version="2.0" แต่เขียน syntax 1.0 อาจทำให้เกิด error ได้

หมายเหตุเรื่อง XSLT 1.0 ในเบราว์เซอร์

เบราว์เซอร์รองรับ XSLT 1.0 ผ่าน XSLTProcessor ในตัว ซึ่งเป็น engine เดียวกับที่เครื่องมือนี้ใช้ ฟีเจอร์ของ XSLT 2.0 และ 3.0 เช่น grouping ด้วย xsl:for-each-group, regular expression functions หรือการจัดการวันที่ที่ละเอียดขึ้น จะใช้ไม่ได้ทั้งที่นี่และในเบราว์เซอร์ใดๆ โชคดีที่ transform ในชีวิตประจำวันส่วนใหญ่อยู่ในกรอบ 1.0 สบายๆ ถ้า stylesheet จากที่อื่นรันไม่ผ่าน ให้เช็กว่ามันพึ่งฟีเจอร์ 2.0 อยู่หรือเปล่า

กรณีการใช้งานจริง

เรนเดอร์ RSS และ Atom Feeds

Feed ก็คือ XML และ XSLT เกิดมาเพื่องานนี้โดยเฉพาะ วาง feed พร้อม stylesheet เพื่อพรีวิวรายการ item เป็น HTML แล้วปรับ title และ summary ให้เรียบร้อยก่อนส่ง stylesheet ขึ้น production

XML Pipeline ในองค์กรรุ่นเก่า

ระบบ B2B, พอร์ทัลภาครัฐ และระบบประกันภัยจำนวนมากยังแลกเปลี่ยน XML ที่ถูก transform กลางทาง เมื่อการเปลี่ยนแปลงจากต้นทางทำให้ transform พัง คุณสามารถจำลองขั้นตอนนั้นในเครื่องแล้วทดสอบ stylesheet ที่แก้แล้วกับ sample จริงได้ก่อน

ตรวจสอบงานพิมพ์ DocBook

เอกสาร DocBook และ DITA ถูกแปลงเป็น HTML และ PDF ผ่าน XSLT stylesheet ถ้าบทไหนเรนเดอร์แปลกๆ ให้แยกส่วนที่มีปัญหาออกมาแล้วรันผ่าน template ที่เกี่ยวข้อง ดีกว่า build หนังสือทั้งเล่มใหม่เพื่อหา element ที่พัง

สอน XPath และ XSLT

ด้วยการ setup ที่เป็นศูนย์ เครื่องมือนี้จึงเหมาะในห้องเรียน นักเรียนวาง XML สามบรรทัด เขียน template match="/" แรกในชีวิต แล้วเห็น output ทันที แท็บ output ช่วยทำให้ความต่างระหว่าง result tree กับ serialized bytes จับต้องได้

แนวปฏิบัติที่ดี

• Validate XML ก่อน transform ที่ล้มเหลวส่วนใหญ่แท้จริงคือ parse ที่ล้มเหลว ตรวจว่าซอร์ส well-formed ก่อนโทษ stylesheet
• เริ่มจาก template ที่เล็ก เริ่มที่ match="/" แล้วขยายทีละ pattern แก้ debug ง่ายกว่า template เบ้อเริ่มใบเดียว
• ทดสอบกับ input ที่เล็กที่สุด item สองตัวเปิดเผย bug เดียวกับสองร้อยตัว แต่ใช้ output เพียงเสี้ยวเดียว
• คง namespace ให้ตรงเป๊ะ copy การประกาศ XSLT namespace ดีกว่าพิมพ์ใหม่ ผิดตัวอักษรเดียวคำสั่งทั้งหมดเงียบไปเลย
• เช็ก output method ทุกแบบ ถ้าโปรแกรมอื่นจะใช้ผลลัพธ์ ให้ยืนยันว่า output แบบ XML well-formed ไม่ใช่เชื่อพรีวิว HTML อย่างเดียว
• ฝึกที่นี่ แล้วค่อยขึ้น production ใช้เครื่องมือจนได้ stylesheet ที่ทำงานได้ แล้วค่อยเอาไฟล์เดิมไปผูกกับ build pipeline

เริ่มแปลง XML ของคุณวันนี้

XSLT ต้องการ feedback loop ที่แคบ และนั่นคือสิ่งที่ XSLT Transformer มอบให้ วางเอกสาร วาง stylesheet สลับ output method แก้จุดที่ error highlighting ชี้ โดยไม่ต้องติดตั้งอะไรและไม่มี XML ของคุณหลุดออกจากเบราว์เซอร์ ลองกับ feed จากเว็บของคุณเองดูสักครั้ง

เครื่องมือที่เกี่ยวข้องที่คุณอาจสนใจ:

• XML Formatter
• JSON to XML Converter
• JSON Formatter

ขอให้สนุกกับการแปลงข้อมูล!

คำถามที่พบบ่อย

ถ: ต้องติดตั้งอะไรก่อนใช้ XSLT Transformer หรือไม่? ตอบ: ไม่ต้องเลย เครื่องมือทำงานในเบราว์เซอร์ทั้งหมดด้วย XSLTProcessor ในตัว ไม่ต้องดาวน์โหลดหรือตั้งค่าอะไร

ถ: เครื่องมือรองรับ XSLT เวอร์ชันไหน? ตอบ: XSLT 1.0 ซึ่งเป็นเวอร์ชันที่เบราว์เซอร์รองรับในตัว stylesheet ที่ใช้ฟีเจอร์ 2.0 หรือ 3.0 จะใช้ไม่ได้

ถ: XML ของฉันถูกอัปโหลดขึ้น server หรือเปล่า? ตอบ: ไม่ parsing, transformation และ serialization เกิดขึ้นฝั่ง client ทั้งหมด เอกสารลับจึงไม่เคยออกจากเครื่องของคุณ

ถ: ทำไม stylesheet ของฉันให้ผลลัพธ์ว่างเปล่า? ตอบ: มักเพราะ template ไม่ match กับซอร์สเลย ให้เช็ก namespace declaration ยืนยันว่า XPath ตรงกับชื่อและตัวพิมพ์ของ element แล้วเริ่มจาก template match="/"