LIFF圖片測試工具，設計師和工程師從此溝通無礙

1. LIFF圖片測試⼯工具，
設計師和⼯工程師從此溝通無礙
奇步應⽤用 陳佳新
jarsing@chibuapp.com
2020-06-23

2. 陳佳新
2

3. 【精實創業＋駭客松】精神
3

4. 中部⼈人的聊天機器⼈人⼩小⼩小聚
臉書搜尋「Chatbot DevelopersTaiwan」社團
4
活動議程

5. ⼤大家都喜歡漂亮的設計圖片
但是討論起來來很抽象很模糊
5

6. 除非使⽤用視覺化⼯工具，
設計師⾃自⼰己套
6
「奇步老爹」
部落落格

7. 在聊天視窗裡，⽤用Flex訊息
（請看影片）
7

8. 請加【彰化旅⾏行行+】好友
8
「彰化旅⾏行行+」
LINE聊天機器⼈人

9. 在聊天視窗外，⽤用LIFF網⾴頁
（請看影片）
9

10. 把遊戲搬到LIFF網⾴頁上…
（請看影片）
10

11. 請加【網⾴頁圖片瀏覽器】為好友
11
「網⾴頁圖片瀏覽器」
LINE聊天機器⼈人

12. 技術細節
12
使⽤用者 Chatbot
(1) 傳送⼀一張圖片
(2) 偵測到訊息格式為圖片，
呼叫Get content API
從LINE主機下載資料，
並另存圖片在⾃自⼰己主機上
(3) 包裝成Carousel旋轉⽊木⾺馬
API⽂文件：https://developers.line.biz/en/reference/messaging-api/#get-content
(4) 點擊開啟LIFF，
套⽤用網⾴頁語法載入圖片

13. 其他應⽤用⼀一：直式海海報
（請看影片）
13

14. 其他應⽤用⼆二：橫式海海報
（請看影片）
14

15. 請加【網⾴頁圖片瀏覽器】為好友
15
「網⾴頁圖片瀏覽器」
LINE聊天機器⼈人

16. 感謝聆聽
歡迎Q&A