# 在網頁上使用開源專案預覽 LINE Flex 訊息
大家好，我是做出「LINE 數位版名片」的 LINE API 專家均民。
2021/04/07，泰國的 LAE PamornT 在 LINE Developers Thailand (opens new window) 上發佈了一個開源專案 PamornT/flex2html (opens new window)，可以讓我們在網頁上預覽 LINE 的 Flex 訊息！
自從 LINE 發佈了 Flex 訊息格式以及 liff.shareTargetPicker() 這兩個功能以後，相信應該不少人嘗試使用這兩大功能來讓使用者分享很酷炫的內容給好友，就像我之前做的「LINE 數位版名片」 (opens new window)一樣。
因為 Flex 訊息是一個很複雜的 JSON，相信很多人也都和我一樣有一個困擾，就是在透過 liff.shareTargetPicker() 真的把訊息分享出去以前，沒辦法在網頁上面先預覽分享的訊息，而是必須真的分享到任一好友或群組以後，才能夠看到傳送出來的訊息。
但現在只要使用這個 PamornT/flex2html 開源專案，就可以在網頁上面預覽 LINE 的 Flex 訊息囉！
# 使用教學
- 請在 HTML 的
<head>標籤中，引用以下的 CSS：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/PamornT/flex2html@main/css/flex2html.css">
- 請在 HTML 的
<body>標籤中，引用以下的 JS：
<script src="https://cdn.jsdelivr.net/gh/PamornT/flex2html@main/js/flex2html.min.js">
- 請在 HTML 的
<body>標籤中，放上一個div來顯示 Flex 訊息，這個div的id屬性是可以自由定義的：
<div id="flex2html"></div>
- 最後，透過 JS 程式碼呼叫這個開源套件所提供的
flex2html函式，並且給予指定的參數，來把 Flex 訊息顯示在指定的div裡面：
flex2html('flex2html', flexJson)
# 範例
我自己製作了一個範例網頁，網址是：https://taichunmin.idv.tw/pug/line-flex2html.html (opens new window)，歡迎大家可以從「Flex 訊息模擬器」 (opens new window)上面複製 JSON 然後貼到我的網頁去預覽訊息！
在 PamornT/flex2html 的專案中也有提供一個範例，網址是 https://pamornt.github.io/flex2html/sample.html (opens new window)，打開之後會看到以下的畫面：
 |  |  |  |  |
|---|---|---|---|---|
# 原始碼與相關連結
TIP
本文範例程式的原始碼授權為 MIT License，如果有疑問可以透過 Facebook (opens new window) 跟我交流。