[toc]
# LineBot Script Creator 操作手冊

> 本文件為 **LineBot Script Creator (LSC)** 使用教學，協助使用者快速上手腳本編輯器、各類 Node 的操作方式，並完成與 LINE Bot 的串接與部署。

---

## 0. Quick Start（快速體驗）

> 想要快速體驗？按照下列步驟，免設定即可試玩 Demo 腳本！

---

### **步驟 1：加入 Demo Bot**
1. 開啟 LINE，掃描下方 QR Code 加入 Demo Bot：

---

### **步驟 2：體驗腳本**
1. 在對話中輸入 **開始** 或點擊快速選單
2. 跟隨 Bot 對話，體驗預設劇本（含圖片、影片、分支選單）
3. 如果想重新使用，封鎖該linebot後解除封鎖即可重新回到最開始

---

### **步驟 3：查看對應腳本**
1. 登入 [LSC 編輯器](https://yaya200.live/)
2. 使用 Demo 帳號：
- 帳號：demo
- 密碼：demo1234
3. 打開 **Demo Channel**，查看對應腳本設定

> **提示**：想建立自己的腳本？請參考 **[第 5 章：部署與 LINE Bot 串接](#5-部署與-line-bot-串接)**

---

## 1. 專案簡介

**LineBot Script Creator (LSC)** 是一款專為 **密室逃脫、互動遊戲** 等情境設計的腳本編輯工具，支援：
- **可視化腳本設計**：透過拖曳節點(Node)設計互動流程
- **多分支邏輯**：快速建立複雜的遊戲邏輯
- **整合 LineBot**：玩家可直接透過 LINE 與劇本互動

> **目標**：降低 LineBot 腳本開發門檻，讓小型工作室也能輕鬆設計遊戲互動。

---

## 2. 系統頁面導覽

### **2.1 登入與專案選擇**
1. 進入 `https://yaya200.live`
2. 使用帳號密碼登入
- 測試帳號/密碼: `admin/admin2025`
3. 選擇要編輯的 **頻道 (Channel)**

---

### **2.2 腳本編輯頁面**
進入專案後，可看到：
- **工作區 (Canvas)**：顯示所有節點
- **左上角設定列表 (☰)**：
- 編輯：包含**標籤設定**、**圖文選單設定**、**上傳圖片**、**彈性模板設定**、**LineBot設定**。
- 返回
- **右上角搜尋篩選器 (🔍)**：可依節點名稱或標籤快速篩選
- **屬性編輯區**：編輯 Node 內容（文字、圖片、分支等）

---

### **2.3 節點拖曳與連線**
- 使用滑鼠拖曳節點，調整位置
- 點擊節點邊框的 **連線點**，拖曳至另一節點建立流程連線
- 支援 **多前驅節點**（可多條路徑導向同一節點）

---

### **2.4 節點右鍵操作**
- **新增節點**：在空白區域點擊右鍵 → 選擇要建立的 Node 類型
- **編輯節點**：右鍵點擊節點 → 編輯標題、內容、連線設定
- **複製節點**：右鍵點擊節點 → 選擇「複製」，快速建立相同內容的新節點

> **小技巧**：複製節點後，系統會自動在畫布上產生新節點，可拖曳至任意位置並修改內容。

---

## 3. Node 類型與用途

### **3.0 節點速查表**

| Node 類型 | 用途 |
|------------------|--------------------------|
| 入口 Node | 設定腳本進入點 |
| 訊息 Node | 發送文字、圖片或影片訊息 |
| 快速選單 Node | 提供玩家互動選項 |
| 關鍵字判別 Node | 依輸入文字決定分支 |
| 標籤操作 Node | 新增/移除玩家標籤 |
| 標籤判別 Node | 依標籤狀態分流流程 |
| 隨機 Node | 隨機決定分支 |
| 開啟選單 Node | 啟用 LINE Rich Menu |
| 關閉選單 Node | 關閉 LINE Rich Menu |
| 彈性模板 Node | 發送 Flex Message |
| 特殊關鍵字 Node | 處理特殊指令或系統輸入 |

---

> LSC 提供多種節點類型，支援訊息互動、條件判斷、群組操作等功能，以下為各類節點說明：

### **3.1 入口 Node**
- **用途**：腳本進入點，決定互動來源
- **子類型**：
- **User**：加入好友
- **Group**：加入群組

---

### **3.2 訊息 Node**
- **用途**：向玩家發送各種訊息
- **支援類型**：
- **Text**：文字訊息
- **Image**：圖片訊息
- **Video**：影片訊息

---

### **3.3 快速選單 Node**
- **用途**：提供玩家多個快速回覆選項

---

### **3.4 關鍵字判別 Node**
- **用途**：依玩家輸入的關鍵字決定下一個節點

---

### **3.5 標籤操作 Node**
- **用途**：新增 / 移除玩家標籤，用於後續條件判斷

---

### **3.6 標籤判別 Node**
- **用途**：依據玩家目前擁有的標籤，決定流程分支

---

### **3.7 隨機 Node**
- **用途**：隨機決定流程路徑，適合隨機事件或隱藏機制

---

### **3.8 開啟選單 Node**
- **用途**：啟用 LINE Bot 的彈出選單（Rich Menu）

---

### **3.9 關閉選單 Node**
- **用途**：關閉 LINE Bot 的彈出選單

---

### **3.10 彈性模板 Node**
- **用途**：發送 LINE Flex Message，建立自訂樣板訊息
- 完全可自訂
- 以 JSON 格式定義內容，能自由控制圖片比例、文字樣式、顏色、按鈕行為等。
- 多種版型
- Bubble：單一卡片，可用於名片、單一商品介紹、事件宣傳等。
- Carousel：多個 Bubble 組合成橫向輪播，適合展示多個商品、作品或步驟教學。

---

### **3.11 特殊關鍵字 Node**
- **用途**：處理特殊輸入（如系統指令）
- **子類型**：
- **User**：針對個人訊息
- **Group**：針對群組訊息

---

## 4. Node 操作指南

以下為各類 Node 的實際操作方式與可設定內容，請依需求選擇並調整。

---

### **4.1 入口 Node**
- **新增**：在空白畫布右鍵 → **新增 → 入口 Node**
- **編輯**：
- 選擇入口類型(使用不同Node Title當作不同管道入口)：**加入好友**（個人聊天） / **加入群組**（群組入口）
- 可新增描述（方便辨識用途）
- **用途**：作為腳本的進入點，通常為流程的第一步。

---

### **4.2 訊息 Node**
- **新增**：右鍵 → **新增 → 訊息 Node**
- **編輯**：
- 選擇訊息類型：
- **Text**（輸入文字）
- **Image**（圖片上傳）
- **Video**（影片上傳）
- 上傳檔案（支援 FormData 上傳）
- 可新增 **快速回覆選項**（Quick Reply）
- **用途**：發送圖片或影片訊息給玩家，適用於提示或情境敘事。

---

### **4.3 快速選單 Node**
- **新增**：右鍵 → **新增 → 快速選單 Node**
- **編輯**：
- 設定多個選項文字（玩家可快速點擊）
- 每個選項可指向不同的後續節點
- **用途**：提供互動式選單，快速引導玩家行為。

---

### **4.4 關鍵字判別 Node**
- **新增**：右鍵 → **新增 → 關鍵字判別 Node**
- **編輯**：
- 輸入可判斷的關鍵字（支援多組）
- 每組關鍵字可連線至不同的下一個節點
- **用途**：根據玩家輸入的文字決定流程分支。

---

### **4.5 標籤操作 Node**
- **新增**：右鍵 → **新增 → 標籤操作 Node**
- **編輯**：
- 選擇要新增或移除的標籤
- **用途**：動態修改玩家狀態，為後續條件判斷做準備。

---

### **4.6 標籤判別 Node**
- **新增**：右鍵 → **新增 → 標籤判別 Node**
- **編輯**：
- 選擇要判斷的標籤（可多選）
- 為每個標籤設定對應的下一個節點
- **用途**：依玩家狀態（標籤）分流流程。

---

### **4.7 隨機 Node**
- **新增**：右鍵 → **新增 → 隨機 Node**
- **編輯**：
- 設定隨機分支的機率（百分比或均分）
- **用途**：讓流程隨機跳轉，增加互動多樣性或隱藏機制。

---

### **4.8 開啟選單 Node**
- **新增**：右鍵 → **新增 → 開啟選單 Node**
- **編輯**：
- 指定要開啟的 LINE Rich Menu ID
- **用途**：動態啟用 LINE Bot 選單。
- **注意事項**：請先使用[Linebot Designer](https://developers.line.biz/zh-hant/services/bot-designer/)製作圖文選單，再到左上角設定列表(☰)中的**圖文選單設定**上傳圖文選單到LineBot上，後續即可在開啟選單Node中使用。
---

### **4.9 關閉選單 Node**
- **新增**：右鍵 → **新增 → 關閉選單 Node**
- **編輯**：
- 選擇要關閉的 Rich Menu（或全部）
- **用途**：移除目前啟用的 LINE Bot 選單。

---

### **4.10 彈性模板 Node**
- **新增**：右鍵 → **新增 → 彈性模板 Node**
- **編輯**：
- 上傳或編輯 Flex Message JSON
- 可透過模板建立圖文混合訊息
- **用途**：建立自訂樣板訊息，呈現更豐富的互動內容。
- **注意事項**：請先使用[Linebot Designer](https://developers.line.biz/zh-hant/services/bot-designer/)製作彈性模板，如果彈性模板需要使用到圖片可以使用左上角設定列表(☰)中的**上傳圖片**傳到伺服器上，使用複製連結即可獲取該照片在伺服器上的連結。設定完之後到**彈性模板設定**上傳圖文選單到LineBot上，後續即可在彈性模板Node中使用。
---

### **4.11 特殊關鍵字 Node**
- **新增**：右鍵 → **新增 → 特殊關鍵字 Node**
- **編輯**：
- 選擇關鍵字類型：**User** / **Group**
- 設定特殊指令對應的後續流程
- **用途**：處理特定指令或關鍵互動（如系統控制訊息）。

---

### **4.12 過濾標籤 Filter Tag**
- Node編輯頁面左側方框處新增標籤，右鍵可刪除標籤。
- 點選表示Node新增此標籤，再點一次可以刪除，可複選。綠色表示該Node擁有該標籤，灰色則無。
- 可以在Home頁面右上角搜尋該標籤名稱過濾Node。如果想過濾多個標籤則以`,`來區分。
---

## 5. 部署與 LINE Bot 串接

### 5.1 建立 LINE Bot
1. 進入 [LINE Developers Console](https://developers.line.biz/)
2. 建立 Provider 與 Messaging API Channel
3. 取得 **Channel ID / Channel Secret / Access Token**

---

### 5.2 在 LSC 中設定 Bot
1. 進入 LSC 管理頁面 → 左上角設定 (☰)
2. 填入以下資訊：
- **Channel ID**
- **Channel Secret**
- **Access Token**
3. 儲存設定

---

### 5.3 設定 Webhook
1. 在 LINE Developers Console → Messaging API
2. 設定 **Webhook URL**：https://yaya200.live/api/linebot/channel/100/callback
3. 點選 **Verify** 測試，成功會出現Success即可開始使用
---

### 5.4 測試連線
1. 在 LSC 中設定需要的對話框。
2. 於 LINE Bot 對話視窗輸入文字，確認有收到相對應回應。

---

### 5.5 常見問題
- **Q：Webhook 驗證失敗？**
檢查是否返回 `HTTP 200`。
- **Q：Bot 沒反應？**
檢查 Access Token 是否正確、Webhook URL 是否可被外網存取。