create rich menu operation (#121)

* create six-splited richmenu

* add templates

* create rich-menu folder

* separate the generateRichMenuImage function

* add example images

* refactor some

* add h3 tag on templete 04

* change return messave

* add create richmenu

* add create rich menu command

* update the create rich menu

* change the image size

* create the rich menu

* refactor the code

* change the templetes

* change TempleteNo and height

* change templete actions area

* refactor the codes

* use const variable

* rename the filename

* add the areas and some

* debug

* update the templetes

* self review

* fix the ci

* use puppeteer

* reply successful message

* change the file name

* change the templete to template

* add fonts on docker

* update the tools argument

* add max and min argument

* update chatBarText message

* remove rich menu examples

* change the chatBatText description

* change the font

* add the READMEs

* change the z option

* include finally

* remove end of space

* remove templateNumber

* remove console.log

* npm run format

---------

Co-authored-by: Yuta Euchi <[email protected]>
Co-authored-by: Euchi Yuta <[email protected]>

Author: 4geru

Dockerfile

@@ -11,6 +11,33 @@ RUN --mount=type=cache,target=/root/.npm npm run build
 # --- Release Stage ---
 FROM node:24-alpine AS release
 
+# Install necessary tools and base fonts
+RUN apk add --no-cache \
+    fontconfig \
+    font-noto-cjk \
+    ttf-freefont \
+    curl \
+    unzip \
+    chromium \
+    nss
+
+# Download and install Japanese fonts from GitHub
+RUN mkdir -p /usr/share/fonts/truetype/google && \
+    # Noto Sans JP from GitHub
+    curl -L "https://github.com/googlefonts/noto-cjk/raw/main/Sans/OTF/Japanese/NotoSansJP-Regular.otf" -o /usr/share/fonts/truetype/google/NotoSansJP-Regular.otf && \
+    curl -L "https://github.com/googlefonts/noto-cjk/raw/main/Sans/OTF/Japanese/NotoSansJP-Bold.otf" -o /usr/share/fonts/truetype/google/NotoSansJP-Bold.otf && \
+    # IPAex Gothic font as fallback
+    curl -L "https://moji.or.jp/wp-content/ipafont/IPAexfont/IPAexfont00401.zip" -o ipaex.zip && \
+    unzip ipaex.zip && \
+    cp IPAexfont00401/*.ttf /usr/share/fonts/truetype/google/ && \
+    rm -rf IPAexfont00401 ipaex.zip
+
+# Update font cache
+RUN fc-cache -f -v
+
+# Set Puppeteer to use system Chromium
+ENV PUPPETEER_EXECUTABLE_PATH=/usr/bin/chromium-browser
+
 # Set up a non-root user ('appuser'/'appgroup') to avoid running as root - good security practice!
 # (-S is the Alpine option for a system user/group, suitable here)
 RUN addgroup -S appgroup && adduser -S appuser -G appgroup
@@ -19,6 +46,7 @@ RUN addgroup -S appgroup && adduser -S appuser -G appgroup
 COPY --from=builder /app/dist /app/dist
 COPY --from=builder /app/package.json /app/package.json
 COPY --from=builder /app/package-lock.json /app/package-lock.json
+COPY --from=builder /app/richmenu-template /app/richmenu-template
 
 ENV NODE_ENV=production
 

README.ja.md

@@ -57,6 +57,20 @@ LINE公式アカウントとAI Agentを接続するために、LINE Messaging AP
     - デフォルトのリッチメニューを解除する。
     - **入力:**
       - なし
+11. **create_rich_menu**
+    - 指定されたアクションに基づいてリッチメニューを作成。画像を生成してアップロード。デフォルトとして設定する。
+    - **入力:**
+      - `chatBarText` (string): チャットバー表示、リッチメニュー名にされるテキスト。
+      - `actions` (array): リッチメニューのアクション。最小1つから最大6つのアクションを指定できる。各アクションは以下のいずれかのタイプを指定できる：
+        - `postback`: ポストバックアクションを送信する
+        - `message`: テキストメッセージを送信する
+        - `uri`: URLを開く
+        - `datetimepicker`: 日付/時間選択ツールを開く
+        - `camera`: カメラを開く
+        - `cameraRoll`: カメラロールを開く
+        - `location`: 現在位置を送信する
+        - `richmenuswitch`: 別のリッチメニューに切り替える
+        - `clipboard`: テキストをクリップボードにコピーする
 
 ## インストール (npxを使用)
 

README.md

@@ -59,6 +59,20 @@
     - Cancel the default rich menu.
     - **Inputs:**
       - None
+11. **create_rich_menu**
+    - Create a rich menu based on the given actions. Generate and upload an image. Set as default.
+    - **Inputs:**
+      - `chatBarText` (string): Text displayed in chat bar, also used as rich menu name.
+      - `actions` (array): The actions of the rich menu. You can specify minimum 1 to maximum 6 actions. Each action can be one of the following types:
+        - `postback`: For sending a postback action
+        - `message`: For sending a text message
+        - `uri`: For opening a URL
+        - `datetimepicker`: For opening a date/time picker
+        - `camera`: For opening the camera
+        - `cameraRoll`: For opening the camera roll
+        - `location`: For sending the current location
+        - `richmenuswitch`: For switching to another rich menu
+        - `clipboard`: For copying text to clipboard
 
 ## Installation (Using npx)