Claire's Blog

列出快速回覆選項

官網教學：https://developers.line.biz/en/docs/messaging-api/using-quick-reply/#set-quick-reply-buttons

可在訊息中加入快速回覆按鈕，讓使用者能夠快速回應。快速回覆功能可在一對一聊天、群組聊天和多人的聊天中使用，每則訊息最多可設定 13 個快速回覆按鈕。

快速回覆按鈕的消失時機：

• 當使用者點擊快速回覆按鈕時，按鈕會消失（相機、相簿、日期時間選擇器和位置資訊等動作除外，這些按鈕會保留直到使用者提供所需資訊）。
• 如果聊天室中有新的訊息（無論是來自官方帳號、使用者或其他成員），快速回覆按鈕也會消失。若新訊息被刪除，按鈕會重新出現。

LINE Front-end Framework

LINE 前端框架（LIFF，LINE Front-end Framework）是由 LINE 提供的網頁應用程式框架，透過將 LIFF SDK 整合至您的網頁應用程式，您可以存取 LINE 平台提供的資訊，或使用 LINE 應用程式的功能。

主要功能：

• 與 LINE Login 和 LINE 平台整合： LIFF 與 LINE Login 整合，可以透過 LINE 平台的授權流程，安全地存取使用者的個人資料。
• 分享目標選擇器： 這是一個強大的工具，允許使用者透過 LIFF 應用程式，選擇 LINE 好友並傳送訊息。

為了協助新手快速上手，LINE 提供了 LIFF 起始應用程式，這是一個包含基本功能的範本，開發者可以在此基礎上進行自訂和開發。

開始使用 LIFF 起始應用程式的步驟：

1. 環境準備：
   • Node.js： 確保已安裝 Node.js，建議版本為 16.13.1。
   • Yarn： 使用 Yarn 作為套件管理工具，建議版本為 1.22.17。
   • Netlify CLI： 若計劃使用 Netlify 部署，建議版本為 9.16.3。
2. 下載並執行原始碼：
   • 下載原始碼： 在終端機中執行以下指令，下載 LIFF 起始應用程式的原始碼：bash複製程式碼git clone https://github.com/line/line-liff-v2-starter.git
   • 選擇實作版本： 在 line-liff-v2-starter/src/ 目錄下，有三種實作版本可供選擇：
     • Vanilla JavaScript： line-liff-v2-starter/src/vanilla
     • Next.js： line-liff-v2-starter/src/nextjs
     • Nuxt.js： line-liff-v2-starter/src/nuxtjs
   • 安裝依賴套件並啟動： 進入所選目錄後，執行以下指令安裝套件並啟動應用程式：bash複製程式碼yarn install yarn dev 啟動後，可在瀏覽器中訪問 http://localhost:3000 查看應用程式。
3. 部署至伺服器：
   • 使用 Netlify 部署： 若尚未有 Netlify 帳號，請先註冊。安裝 Netlify CLI 後，執行以下指令部署應用程式：bash複製程式碼netlify deploy 按照指示完成部署流程。
4. 取得並設定 LIFF ID：
   • 建立 LINE Login 頻道： 在 LINE Developers Console 中，建立一個 LINE Login 頻道。
   • 新增 LIFF 應用程式： 在該頻道中，新增 LIFF 應用程式，並設定相關資訊，如端點 URL。
   • 設定 LIFF ID： 取得 LIFF ID 後，將其設定為環境變數，確保應用程式能正確運行。

LIFF視窗的大小可以以以下三種大小之一顯示。

要在 LINE 平台上運行 LIFF（LINE Front-end Framework）應用程式，您需要將其新增至 LINE Login 頻道。以下是詳細步驟：

取得 LIFF ID 和 URL： 新增成功後，系統會生成 LIFF ID 和 LIFF URL，您可在應用程式中使用這些資訊。

1. 準備工作：
   建立頻道： 在 LINE Developers Console 中，建立一個 LINE Login 頻道。
   部署應用程式： 將您的 LIFF 應用程式部署至伺服器，確保其可透過 HTTPS 存取。
2. 新增 LIFF 應用程式：
   登入 LINE Developers Console： 使用您的帳號登入。
   選擇頻道： 在主控台中，選擇您要新增 LIFF 應用程式的 LINE Login 頻道。
   進入 LIFF 頁籤： 點擊「LIFF」頁籤。
   新增 LIFF 應用程式： 點擊「新增」按鈕，開始設定。
3. 設定 LIFF 應用程式資訊：
   應用程式名稱： 輸入 LIFF 應用程式的名稱，請避免使用「LINE」或類似字樣。
   視圖大小： 選擇應用程式的視圖大小，可選擇「Compact」、「Tall」或「Full」。
   端點 URL： 輸入您的 LIFF 應用程式的 HTTPS URL，請確保該 URL 可正常存取。
   權限範圍（Scopes）： 根據應用程式需求，選擇所需的權限範圍，如 openid、profile、email 等。
   加好友選項： 設定使用者在使用應用程式時，是否顯示加好友選項。
4. 完成設定：確認並新增： 檢查所有設定，確保無誤後，點擊「新增」按鈕。

選單功能

在 LINE 的 Messaging API 中，圖文選單（Rich Menu）是一種可自訂的互動式選單，可提升使用者與您的 LINE 官方帳號之間的互動體驗。

圖文選單的結構：

• 選單圖片： 一張 JPEG 或 PNG 格式的圖片，包含選單項目。
• 可點擊區域： 在圖片上定義的區域，每個區域可設定不同的動作，如開啟網址或發送訊息。
• 聊天列： 位於聊天視窗底部的選單，可自訂其顯示文字，用於開啟或關閉圖文選單。

設定圖文選單的方法：

1. 使用 LINE 官方帳號管理後台：
   • 透過圖形介面快速建立和設定圖文選單。
   • 適合需要快速開發且不需高度自訂的情境。
2. 使用 Messaging API：
   • 提供進階自訂功能，如設定 postback 動作或日期時間選擇器。
   • 適合需要高度自訂和動態管理圖文選單的情境。

在 LINE 的 Messaging API 中，您可以為特定使用者設定專屬的圖文選單（Rich Menu）

https://developers.line.biz/en/docs/messaging-api/use-per-user-rich-menus/#unlink-the-rich-menu-from-user

同一個使用者可設定多個選單來切換

Flex Message

Flex Message 是 LINE 提供的一種訊息格式，允許開發者透過 JSON 定義訊息的結構和樣式，以實現高度自訂的訊息內容。這種訊息格式適用於各種情境，如商品推薦、訂單確認等，提供豐富的視覺效果和互動性。

這個模擬器可以線上模擬呈現效果: https://developers.line.biz/flex-simulator/

Flex Message 的結構：

Flex Message 的結構由三個主要部分組成：

1. 容器（Container）： 最外層的結構，包含訊息的主要內容。主要有兩種類型：
   • Bubble： 單一訊息泡泡。
   • Carousel： 多個訊息泡泡的輪播。
2. 區塊（Block）： 組成 Bubble 的部分，包括：
   • Header： 標題區塊。
   • Hero： 主要圖片或影片區塊。
   • Body： 主要內容區塊。
   • Footer： 底部區塊。
3. 元件（Component）： 構成區塊的元素，如文字、圖片、按鈕等。