Extensible Stylesheet Language Transformations – PlusMagi's Blog By Pitt Phunsanit

ครั้งหนึ่งเคยใช้ XSLT ( Extensible Stylesheet Language Transformations ) แปลง XML ให้แสดงออกมาเป็น photo book ในสมัยที่โปรแกรมดูรูปมันไม่ถูกใจ folder นี้อยากใช้ template นี้ อีก folder อยากใช้อีกแบบ แล้วเขียน CD เก็บไว้ ส่งให้เพื่อน
โดยพื้นฐานมันคือ ภาษาที่ใช้สำหรับ “แปลงร่าง” เอกสาร XML ให้กลายเป็นรูปแบบอื่น เช่น HTML (สำหรับหน้าเว็บ), XML รูปแบบใหม่ หรือแม้แต่ Text ไฟล์ธรรมดา

เพื่อให้เห็นภาพง่ายขึ้น ให้ลองนึกถึง XML เป็น “วัตถุดิบ” และ XSLT เป็น “สูตรอาหาร” ที่บอกว่าต้องหยิบวัตถุดิบชิ้นไหนมาจัดวางอย่างไรเพื่อให้ได้จานอาหารที่สวยงาม

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

XSLT ทำงานโดยการอ่านโครงสร้างต้นไม้ (Tree structure) ของ XML และใช้คำสั่งค้นหาโหนดที่ต้องการผ่าน XPath จากนั้นจึงนำข้อมูลนั้นมาใส่ใน Template ที่เรากำหนดไว้
ส่วนประกอบสำคัญ
- XSLT Processor: ตัวขับเคลื่อนการแปลง ( เช่น Saxon, Libxslt หรือ Browser ทั่วไป )
- XPath: ภาษาที่ใช้ระบุตำแหน่งของข้อมูลใน XML เช่น /root/user/name
- Templates: กฎที่ระบุว่าถ้าเจอ Tag นี้ ให้ทำอะไรต่อไป

ตัวอย่างการเขียน XSLT เบื้องต้น

<library>
 <book>
 <title>Learning XSLT</title>
 <author>Pitt Phunsanit</author>
 </book>
</library>

จากนั้นเขียนไฟล์ .xsl เพื่อแปลงเป็น HTML

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

 <xsl:template match="/">
 <html>
  <body>
  <h2>My Books</h2>
  <table border="1">
   <tr bgcolor="#9acd32">
   <th>Title</th>
   <th>Author</th>
   </tr>
   <xsl:for-each select="library/book">
   <tr>
    <td><xsl:value-of select="title"/></td>
    <td><xsl:value-of select="author"/></td>
   </tr>
   </xsl:for-each>
  </table>
  </body>
 </html>
 </xsl:template>

</xsl:stylesheet>

ข้อดีของ XSLT

Separation of Concerns: แยกข้อมูล (XML) ออกจากการแสดงผล (XSLT) ชัดเจน
Portability: ทำงานได้ทุกที่ที่มี XML Processor
Reusability: เขียน Template ครั้งเดียว ใช้แปลง XML กี่ไฟล์ก็ได้ที่มีโครงสร้างเดียวกัน

สถานะการรองรับในปัจจุบัน

Browser หลัก ๆ ในปัจจุบัน ( Chrome, Firefox, Safari, Edge ) ยังคงมีตัว engine สำหรับประมวลผล XSLT 1.0 อยู่ในตัว และสามารถเรนเดอร์ไฟล์ XML ที่อ้างอิง XSLT stylesheet ได้โดยตรง

Browser	การรองรับ XSLT 1.0	การรองรับ XSLT 2.0 / 3.0
Chrome / Edge	รองรับ ( ผ่าน Blink engine )	ไม่รองรับ (ต้องใช้ Library เสริม)
Firefox	รองรับ ( ผ่าน Gecko engine )	ไม่รองรับ
Safari	รองรับ ( ผ่าน WebKit engine )	ไม่รองรับ

ข้อจำกัดที่สำคัญ ( สิ่งที่คุณต้องเจอ )

CORS & Security ( ปัญหาใหญ่ที่สุด ): ปัจจุบัน Browser มีนโยบายความปลอดภัยที่เข้มงวดมาก หากคุณเปิดไฟล์ XML และ XSL จากเครื่องตัวเอง (file://) Browser ส่วนใหญ่จะ Block การทำงานเพราะถือว่าเป็น Cross-Origin Request คุณต้องรันผ่าน Web Server ( เช่น Nginx หรือ Localhost ) เท่านั้นถึงจะทำงานได้
หยุดอยู่ที่เวอร์ชัน 1.0: Browser แทบทุกค่ายหยุดพัฒนา XSLT ไว้ที่เวอร์ชัน 1.0 ( ซึ่งออกมาตั้งแต่ปี 1999 ) หากคุณต้องการใช้ฟีเจอร์ใหม่ ๆ ใน XSLT 2.0 หรือ 3.0 ( เช่น การจัดการ String ที่ดีขึ้น หรือการคำนวณที่ซับซ้อน ) คุณต้องใช้ Library อย่าง Saxon-JS เข้ามาช่วย
SEO: Search Engine ส่วนใหญ่ ( รวมถึง Google ) มักจะไม่ประมวลผล XSLT บนฝั่ง Client ทำให้หน้าเว็บที่เกิดจากการแปลง XML ด้วย XSLT บน Browser ไม่ถูกเก็บดัชนี (Index) เนื้อหาได้ดีเท่าที่ควร

แนวทางที่แนะนำในปัจจุบัน

Server-Side Transformation: หากเป็นไปได้ แนะนำให้ทำการแปลง ( Transform ) ที่ฝั่ง Server ( เช่น ใช้ PHP, Python, Java หรือ Nginx XSLT Module ) ให้กลายเป็น HTML สำเร็จรูปก่อนส่งมาที่ Browser วิธีนี้จะเสถียรที่สุดและไม่มีปัญหาเรื่อง Security บน Browser
ใช้ JavaScript Library: หากจำเป็นต้องทำบน Browser จริง ๆ การใช้ Library อย่าง Saxon-JS จะช่วยให้คุณใช้ XSLT 3.0 ได้ และควบคุมการทำงานได้แม่นยำกว่าการปล่อยให้ Browser จัดการเอง

น่าเสียดายที่ XSLT ไม่ได้รับการสนับสนุนเท่าที่ควร จะบอกว่าล้าสมัยไปแล้วก็ได้ ส่วนหนึ่งคือเรื่องความปลอดภัย และ JSON ที่ดีกว่าในการเก็บข้อมูล

อ่านเพิ่มเติม

ป้ายกำกับ: Extensible Stylesheet Language Transformations

XSLT ( Extensible Stylesheet Language Transformations )XSLT ( Extensible Stylesheet Language Transformations )