แสดงผล Flex Message ใน HTML เสมือนอยู่บน LINE
แจกของค้าบบ!!! Library สำหรับแปลง Flex message ให้แสดงผลบน HTML ได้เสมือนอยู่บน LINE เรียกได้ว่าเอาใจเพื่อนๆ ชาว LINE Dev ที่อยากแสดง Flex message สวยๆ ที่ระบบหลังบ้านของตัวเองกันโดยเฉพาะเลยย 😃
การจะออกแบบระบบหลังบ้านให้ admin ใช้งานได้สะดวก และตอบลูกค้าได้ถูกต้องรวดเร็ว สิ่งหนึ่งที่ช่วยได้ก็คือ การแสดงผลให้ admin เห็นเหมือนกับที่ลูกค้าเห็น เพื่อจะได้เข้าใจในสิ่งที่ลูกค้าได้รับ
แต่อย่างที่เรารู้กัน Flex message มี JSON ที่ค่อนข้างซับซ้อน และมีแนวโน้มจะซับซ้อนเพิ่มขึ้นเรื่อยๆ ตาม feature ที่เพิ่มขึ้นมา อย่ากระนั้นเลยเรามาช่วยกันพัฒนา lib ที่ไว้แปลง JSON ให้แสดงเป็น HTML สวยๆ กันดีกว่าครับ
ก่อนใช้งาน
ก่อนเริ่มใช้งานไป clone code มาจาก GitHub ตามลิงก์ด้านล่างนี้เลยครับ
git clone https://github.com/PamornT/flex2html.gitอธิบายวิธีใช้งานเบื้องต้น
วิธีใช้งานง่ายๆ ตามด้านล่างนี้เลยค้าบบ
1. include CSS file
<link rel=”stylesheet” href=”css/flex2html.css”>2. include JS file
<script type=”text/javascript” src=”js/flex2html.min.js”></script>3. create HTML layer
สร้าง div layer ที่ต้องการให้แสดงผล
<div id=”flex1"></div>4. call function
เรียกใช้ function flex2html โดยส่ง parameter ไป 2 ค่าคือ
1. layer element ID ที่ต้องการแสดงผล
2. JSON Flex message
flex2html(elementId, JSONFlexMessage)ตัวอย่าง
flex2html(“flex1”, {“type”:”flex”,”altText”:”Flex Message”,”contents”: {“type”:”carousel”, ……}})เท่านี้ก็เรียบร้อยแล้วค้าบบบ
ลองทดสอบเอาตัวอย่าง Flex JSON ใน Flex Simulator มาใส่ดูหน่อยสิ
https://pamornt.github.io/flex2html/sample.html
ถือว่าแสดงผลได้ถูกต้องสวยงามเลยทีเดียว เย้ๆๆ 😆
Change Log
- 2023–06–16 : Support Video on Hero
ลองเอาไปปรับใช้ดูนะครับ หวังว่าจะมีประโยชน์กับเพื่อนๆ ชาว LINE Dev นะครับ
แล้วพบกันบทความถัดไปครับ ขอบคุณครับ 😄
