昨天有提到 LINE 的圖文訊息(Flex Message)是非常複雜的 JSON 架構，而且每個屬性都有多個參數可以選擇。如果傻傻地手刻程式碼，不只麻煩而且容易打錯，也不能即時看目前刻的圖文訊息長怎樣。我一開始要做的時候看到落落長的 JSON 快崩潰，差點放棄整人😥 好險被我發現 FLEX MESSAGE SIMULATOR 這個好東西!

FLEX MESSAGE SIMULATOR 是什麼

FLEX MESSAGE SIMULATOR 是 LINE 提供的開發者工具之一，可以用來排版圖文訊息並產出圖文訊息的 JSON 程式碼，還可以傳送排版好的測試圖文訊息到你的 LINE 聊天室看測試結果。下列是 FLEX MESSAGE SIMULATOR 的使用方法：

1. 登入 FLEX MESSAGE SIMULATOR 網站
   網址：https://developers.line.biz/flex-simulator/
   

2. 首頁會有預設模板，點擊 Showcase 可更換模板
   
   
   ⬆ 模板包括 Flex Message 和 Template Message

3. 點擊每個屬性名稱，右側就會跳出屬性參數的設定：
   
   ⬆ Bubble 是這個圖文訊息的模板類型，direction 是圖文訊息內的文字排列方式，size 是圖文訊息的大小，Action 的 type 是點擊該範圍的圖文訊息會執行的動作。每個選項都有下拉式選單可以將參數的改變即時顯示：

• direction 參數
  
  ⬆ 全部文字靠左/靠右
• size 參數
  
  ⬆ 共有五種大小可選擇
• Action type：點擊該範圍的動作
  
  message 選項代表按下該區塊時會傳送指定的文字訊息。
  url 選項代表按下該區塊時會導向指定的連結，因為我們除了要讓點擊的人可以傳送文字訊息還要傳送圖片，所以統一都選擇 url 當作 Action type。

4. 要刪除 / 增加物件區塊可以按 X 號和 十 號

• 刪除圖片物件
  
  
• 增加物件
  在想要增加物件處按 十 號，該物件會新增在該處的下方區塊，有三種物件可做新增：
  
  box 物件可以放入任何物件，image 和 video 只能放圖片和影片。

5. 查看製作好的圖文訊息 JSON 程式碼
   點擊首頁的 View as JSON 會出現當前編輯的圖文訊息程式碼：
   

6. 寄出當前編輯的圖文訊息到個人 LINE 聊天室
   想看實際訊息寄出的效果時，可以點擊 Send... 分享到自己的 LINE 聊天室內，不過這個功能只能分享訊息給自己：
   
   
   ⬆ 寄出後會在自己的 LINE 和 Flex Message Sim 官方帳號的聊天室看到訊息，因為沒辦法把訊息傳送給別人，所以還是需要和昨天講的 Share Target Picker 結合使用。