node-red-contrib-line-messaging-api 0.4.1 → 0.4.2

package/CLAUDE.md

@@ -0,0 +1,171 @@
+# CLAUDE.md - AI Development Instructions
+
+## Project Overview
+This is a Node-RED custom node package for LINE Messaging API integration that allows developers to build LINE bots using the visual Node-RED flow editor.
+
+**Package Name**: `node-red-contrib-line-messaging-api`
+**Version**: 0.4.1
+**Author**: n0bisuke
+**Main Purpose**: Enable LINE Bot development through Node-RED's visual programming interface
+
+## Architecture & Key Components
+
+### Core Dependencies
+- `@line/bot-sdk`: Official LINE Bot SDK (v9.5.0)
+- `express`: Web framework for HTTP endpoints
+- `body-parser`: Parse incoming request bodies
+- `cors`: Cross-Origin Resource Sharing middleware
+
+### Node Types & Structure
+The package provides 11 different node types for LINE Bot functionality:
+
+#### 1. Configuration Node (`config.js`, `config.html`)
+- **Purpose**: Stores LINE Bot credentials (Channel Secret, Channel Access Token)
+- **Location**: `nodes/config/config.js`
+- **Features**:
+  - Validates credential format and length
+  - Fetches bot info from LINE API
+  - Stores bot name and icon URL
+  - Provides HTTP Admin API endpoint at `/line-config/bot-info`
+
+#### 2. Webhook Node (`webhook.js`, `webhook.html`)
+- **Purpose**: Receives webhooks from LINE platform
+- **Location**: `nodes/webhook/webhook.js`
+- **Features**:
+  - Creates HTTP POST endpoint for LINE webhook events
+  - Processes LINE events and converts to Node-RED messages
+  - Supports all LINE event types (message, postback, follow, etc.)
+  - Automatically responds with 200 OK to LINE platform
+
+#### 3. Reply Message Node (`reply.js`, `reply.html`)
+- **Purpose**: Sends reply messages to LINE users
+- **Location**: `nodes/reply/reply.js`
+- **Features**:
+  - Supports both legacy and new message formats
+  - Handles text, image, and flex messages
+  - Uses reply tokens from webhook events
+
+#### 4. Push Message Node (`push.js`, `push.html`)
+- **Purpose**: Sends push messages to specific users
+- **Location**: `nodes/push/push.js`
+- **Features**:
+  - Sends messages without reply token
+  - Requires target user ID
+  - Supports text messages by default
+
+#### 5. Other Nodes
+- **Broadcast**: Send messages to all bot friends
+- **Notify**: LINE Notify integration (deprecated)
+- **Loading**: Display loading indicators
+- **getProfile**: Retrieve user profile information  
+- **getBotInfo**: Retrieve bot information
+- **Limit**: Rate limiting functionality
+
+## Development Guidelines
+
+### Code Style & Patterns
+- Uses ES6 modules with `module.exports`
+- Consistent error handling with try-catch blocks
+- All nodes follow Node-RED's standard node structure
+- Credential handling through Node-RED's secure credential system
+
+### File Organization
+```
+nodes/
+├── config/          # Bot configuration
+├── webhook/         # Webhook receiver
+├── reply/           # Reply messages
+├── push/            # Push messages
+├── bloadcast/       # Broadcast messages
+├── notify/          # LINE Notify
+├── loading/         # Loading indicators
+├── getProfile/      # User profile
+├── getBotInfo/      # Bot information
+├── limit/           # Rate limiting
+└── _new/           # New implementations
+    ├── reply/
+    ├── push/
+    └── notify/
+```
+
+### Key Implementation Details
+
+#### Credential Management
+- Channel Secret: 32-character string validation
+- Channel Access Token: Minimum 150 characters
+- Stored securely using Node-RED's credential system
+- Validation includes whitespace and full-width character checks
+
+#### Message Processing
+- Webhook events are parsed and converted to Node-RED message format
+- `msg.line.event` contains individual LINE events
+- `msg.payload` contains human-readable event content
+- Support for multiple message types (text, image, flex, etc.)
+
+#### Error Handling
+- Comprehensive validation in configuration UI
+- API error responses are properly handled and logged
+- User-friendly error messages in Japanese
+
+## Testing & Deployment
+
+### Available Scripts
+- `npm run deploy`: Automated git commit and push
+- No test suite currently implemented
+
+### Local Development
+- Playground folder contains test application
+- Express server setup for local webhook testing
+
+## Common Development Tasks
+
+### Adding New Node Types
+1. Create node directory under `nodes/`
+2. Implement `.js` file with Node-RED registration
+3. Create `.html` file with UI definition
+4. Update `package.json` node-red section
+5. Follow existing patterns for credential handling
+
+### Modifying Existing Nodes
+1. Always test with actual LINE Bot setup
+2. Maintain backward compatibility
+3. Update validation logic if changing credential formats
+4. Test both legacy and new message formats
+
+### Debugging
+- Use `console.log` for development logging
+- Check Node-RED debug panel for runtime errors
+- Validate LINE webhook signatures for security
+- Test with LINE Bot Simulator for development
+
+## LINE API Integration Notes
+
+### Webhook Events
+- All events are automatically processed by webhook node
+- Events include: message, postback, follow, unfollow, join, leave, etc.
+- Each event generates separate Node-RED message
+
+### Message Types
+- Text messages: Simple string content
+- Rich messages: JSON objects with type definitions
+- Media messages: Images, videos, audio files
+- Interactive messages: Buttons, carousels, flex messages
+
+### Rate Limits & Quotas
+- Push messages have monthly limits
+- Reply messages are free but must use reply tokens
+- Broadcast messages have restrictions based on friend count
+
+## Security Considerations
+- Never expose Channel Secret or Access Token in logs
+- Use HTTPS for webhook endpoints in production
+- Validate webhook signatures from LINE platform
+- Store credentials securely using Node-RED's credential system
+
+## Common Issues & Solutions
+- **Token validation errors**: Check credential format and length
+- **Webhook not receiving**: Verify URL and HTTP method (POST only)
+- **Reply token expired**: Reply tokens are single-use and time-limited
+- **Message format errors**: Ensure JSON structure matches LINE API specs
+
+This documentation provides AI assistants with comprehensive context for maintaining and extending this LINE Bot Node-RED integration package.

package/nodes/_new/push/push.js

@@ -17,7 +17,7 @@ module.exports = (RED) => {
                     channelSecret: node.lineConfig.credentials.LineChannelSecret,
                     channelAccessToken: node.lineConfig.credentials.LineChannelAccessToken
                 };
-                console.log(`---共通lineConfigから---`);
+                // console.log(`---共通lineConfigから---`);
             } catch (error) {
                 lineconfig = { 
                     channelSecret: node.credentials.channelSecret,

package/nodes/_new/reply/reply.js

@@ -16,7 +16,7 @@ module.exports = (RED) => {
                     channelSecret: node.lineConfig.credentials.LineChannelSecret,
                     channelAccessToken: node.lineConfig.credentials.LineChannelAccessToken
                 };
-                console.log(`---共通lineConfigから---`);
+                // console.log(`---共通lineConfigから---`);
             } catch (error) {
                 lineconfig = { 
                     channelSecret: node.credentials.channelSecret,

package/nodes/config/config.html

@@ -3,9 +3,7 @@
         category: 'config',
         color: '#00afd5',
         defaults: {
-            // botName は既存のまま
             botName: { value: "" },
-            // botIconUrl を追加
             botIconUrl: { value: "" }
         },
         credentials: {
@@ -19,61 +17,121 @@
         oneditprepare: function () {
             const node = this;
 
-            // すでに保存されている botIconUrl があれば表示する
+            // --- バリデーションのための設定 ---
+            const validationTip = $("#node-config-validation-tip");
+
+            function validate() {
+                let errorMessages = [];
+                const hasWhitespace = /\s/;
+                const hasFullWidth = /[^\x00-\x7F]/;
+
+                // 1. Bot Name のチェック
+                if ($("#node-config-input-botName").val() === "") {
+                    errorMessages.push("・Bot Name は必須です。");
+                }
+
+                // 2. Channel Secret のチェック
+                const secret = $("#node-config-input-LineChannelSecret").val();
+                if (secret === "") {
+                    errorMessages.push("・Channel Secret は必須です。");
+                } else if (hasWhitespace.test(secret)) {
+                    errorMessages.push("・Channel Secret にスペースや改行は含められません。");
+                } else if (hasFullWidth.test(secret)) {
+                    errorMessages.push("・Channel Secret に全角文字は含められません。");
+                } else if (secret.length !== 32) {
+                    errorMessages.push("・Channel Secret は32文字で入力してください。");
+                }
+
+                // 3. Channel Access Token のチェック
+                const token = $("#node-config-input-LineChannelAccessToken").val();
+                if (token === "") {
+                    errorMessages.push("・Channel Access Token は必須です。");
+                } else if (hasWhitespace.test(token)) {
+                    errorMessages.push("・Channel Access Token にスペースや改行は含められません。");
+                } else if (hasFullWidth.test(token)) {
+                    errorMessages.push("・Channel Access Token に全角文字は含められません。");
+                } else if (token.length < 150) {
+                    errorMessages.push("・Channel Access Token が短すぎます。正しい値を貼り付けてください。");
+                }
+
+                if (errorMessages.length > 0) {
+                    $("#node-config-dialog-ok").prop("disabled", true);
+                    validationTip.html(errorMessages.join('<br/>'));
+                    validationTip.show();
+                } else {
+                    $("#node-config-dialog-ok").prop("disabled", false);
+                    validationTip.hide();
+                }
+            }
+
+            $("#node-config-input-botName, #node-config-input-LineChannelSecret, #node-config-input-LineChannelAccessToken")
+                .on('keyup input change', validate);
+
+            validate(); // 初期チェック
+
+            // --- アイコン取得機能（復元） ---
+            
+            // 起動時に保存済みのアイコンがあれば表示
             if (node.botIconUrl) {
-                const botIconImg = document.getElementById("node-config-botIcon");
-                botIconImg.src = node.botIconUrl;
-                botIconImg.style.display = "block";
+                $("#node-config-botIcon").attr("src", node.botIconUrl).show();
             }
 
-            // 「Bot名＆アイコンを取得」ボタンイベント
-            const btnFetch = document.getElementById("node-config-fetch-info");
-            btnFetch.addEventListener("click", async () => {
-                const channelSecret = document.getElementById("node-config-input-LineChannelSecret").value;
-                const channelAccessToken = document.getElementById("node-config-input-LineChannelAccessToken").value;
+            // 「Bot名＆アイコンを取得」ボタンのクリックイベント
+            $("#node-config-fetch-info").on("click", async () => {
+                const channelSecret = $("#node-config-input-LineChannelSecret").val();
+                const channelAccessToken = $("#node-config-input-LineChannelAccessToken").val();
 
                 if (!channelSecret || !channelAccessToken) {
-                    alert("Channel Secret と Access Token を入力してください。");
+                    RED.notify("Channel Secret と Access Token を両方入力してから取得してください。", "warning");
                     return;
                 }
 
+                // ★★★ ここからがAPIに問い合わせる復元部分です ★★★
                 try {
                     const response = await fetch("line-config/bot-info", {
                         method: "POST",
                         headers: { "Content-Type": "application/json" },
                         body: JSON.stringify({ channelSecret, channelAccessToken })
                     });
+
                     if (!response.ok) {
-                        throw new Error(await response.text());
+                        const errorText = await response.text();
+                        throw new Error("APIエラー: " + errorText);
                     }
 
                     const botInfo = await response.json();
 
-                    // Bot Name をテキストボックスに反映
+                    // Bot Name をテキストボックスに反映し、バリデーションを再実行
                     if (botInfo.displayName) {
-                        document.getElementById("node-config-input-botName").value = botInfo.displayName;
+                        $("#node-config-input-botName").val(botInfo.displayName).trigger('change');
                     }
 
                     // Icon URL を hidden input にセット + 実際に表示
                     if (botInfo.pictureUrl) {
-                        const botIconImg = document.getElementById("node-config-botIcon");
-                        botIconImg.src = botInfo.pictureUrl;
-                        botIconImg.style.display = "block";
-
-                        document.getElementById("node-config-input-botIconUrl").value = botInfo.pictureUrl;
+                        $("#node-config-botIcon").attr("src", botInfo.pictureUrl).show();
+                        $("#node-config-input-botIconUrl").val(botInfo.pictureUrl);
                     } else {
-                        // pictureUrl がない or 取得失敗時
-                        document.getElementById("node-config-input-botIconUrl").value = "";
+                        $("#node-config-input-botIconUrl").val("");
+                        $("#node-config-botIcon").hide();
                     }
+                    RED.notify("Botの情報を取得しました。", "success");
                 } catch (err) {
-                    alert("Bot情報を取得できませんでした: " + err.message);
+                    RED.notify("Bot情報を取得できませんでした: " + err.message, "error");
                 }
+                // ★★★ ここまでが復元部分です ★★★
             });
         },
 
         oneditsave: function() {
-            // Save 時に hidden input から this.botIconUrl に反映
-            this.botIconUrl = document.getElementById("node-config-input-botIconUrl").value;
+            // ★ alert() を削除し、console.log のみ残しました
+            if (this.isNew) {
+                console.log("新しい設定が追加されました。");
+            } else {
+                console.log("既存の設定が更新されました。");
+            }
+
+            // ★ アイコンURLを保存する処理を有効にしました
+            this.botIconUrl = $("#node-config-input-botIconUrl").val();
         }
     });
 </script>
@@ -110,6 +168,10 @@
         <!-- アイコンURLを保存するための隠し入力項目 -->
         <input type="hidden" id="node-config-input-botIconUrl" />
         
+        <div class="form-row">
+            <div id="node-config-validation-tip" class="form-tips" style="display: none; color: #a94442;"></div>
+        </div>
+
         <div class="form-row">
             <button type="button" id="node-config-fetch-info">Bot名＆アイコンを取得</button>
         </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "node-red-contrib-line-messaging-api",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "description": "Node-REDでLINE Botが作れます。",
   "main": "line.js",
   "repository": {