kintone側実装

vue-project/my-kintone-plugin/src/js/KintoneIndexEventHandler.ts

@@ -0,0 +1,49 @@
+import type { SavedData } from "@/types/model";
+import type { Button } from "kintone-ui-component";
+
+export class KintoneIndexEventHandler {
+    private config: SavedData;
+  
+    constructor(config: SavedData) {
+      this.config = config;
+    }
+    
+    public init(): void {
+         this.addButtonToView();
+    }
+  
+    // ボタン追加
+    private addButtonToView(): void {
+      const headerSpace = kintone.app.getHeaderMenuSpaceElement();
+      if (!headerSpace){
+        throw new Error('このページではヘッダー要素が利用できません。');
+      };
+  
+      // ボタン追加
+      if (document.getElementById('btn-data-fetch')) return;
+      const kuc = Kucs['1.18.0'];
+      const button = new kuc.Button({
+        text: this.config.buttonName,
+        type:"submit",
+        id:'btn-data-fetch',
+      });
+  
+      // const button = document.createElement('button');
+      // button.id = 'btn-data-fetch';
+      // button.textContent = this.config.buttonName;
+      // button.style.margin = '0 8px';
+      button.addEventListener('click', () => this.handleButtonClick());
+  
+      headerSpace.appendChild(button);
+    }
+  
+    // ボタンクリック
+    private async handleButtonClick(): Promise<void> {
+      try {
+        console.log('Button clicked! Starting data processing...');
+        alert('データ取得開始');
+      } catch (error) {
+        console.error('Error during data processing:', error);
+      }
+    }
+  }

vue-project/my-kintone-plugin/src/js/desktop.ts

@@ -1,22 +1,28 @@
+import { KintoneIndexEventHandler } from "./KintoneIndexEventHandler";
+
 (function (PLUGIN_ID) {
-  kintone.events.on('app.record.index.show', () => {
-    const spaceEl = kintone.app.getHeaderSpaceElement();
-    if (spaceEl === null) {
-      throw new Error('The header element is unavailable on this page.');
-    }
-
-    const fragment = document.createDocumentFragment();
-    const headingEl = document.createElement('h3');
-    const messageEl = document.createElement('p');
-
+  kintone.events.on('app.record.index.show', (event) => {
     const config = kintone.plugin.app.getConfig(PLUGIN_ID);
-    messageEl.textContent = config.message;
-    messageEl.classList.add('plugin-space-message');
-    headingEl.textContent = 'Hello kintone plugin!';
-    headingEl.classList.add('plugin-space-heading');
+    const handler = new KintoneIndexEventHandler(config);
+    handler.init();
+    // const spaceEl = kintone.app.getHeaderSpaceElement();
+    // if (spaceEl === null) {
+    //   throw new Error('The header element is unavailable on this page.');
+    // }
 
-    fragment.appendChild(headingEl);
-    fragment.appendChild(messageEl);
-    spaceEl.appendChild(fragment);
+    // const fragment = document.createDocumentFragment();
+    // const headingEl = document.createElement('h3');
+    // const messageEl = document.createElement('p');
+
+    // const config = kintone.plugin.app.getConfig(PLUGIN_ID);
+    // messageEl.textContent = config.message;
+    // messageEl.classList.add('plugin-space-message');
+    // headingEl.textContent = 'Hello kintone plugin!';
+    // headingEl.classList.add('plugin-space-heading');
+
+    // fragment.appendChild(headingEl);
+    // fragment.appendChild(messageEl);
+    // spaceEl.appendChild(fragment);
+    return event;
   });
 })(kintone.$PLUGIN_ID);

vue-project/my-kintone-plugin/src/manifest.json

@@ -5,6 +5,7 @@
   "type": "APP",
   "desktop": {
     "js": [
+      "js/kuc.min.js",
       "js/desktop.js"
     ],
     "css": [
@@ -16,14 +17,14 @@
   "config": {
     "html": "html/config.html",
     "js": [
-      "js/config.js"
+       "js/config.js"
     ],
     "css": [
       "css/51-modern-default.css",
       "css/config.css"
     ],
     "required_params": [
-      "message"
+      "buttonName"
     ]
   },
   "name": {
@@ -36,6 +37,7 @@
   },
   "mobile": {
     "js": [
+      "js/kuc.min.js",
       "js/mobile.js"
     ],
     "css": [

vue-project/my-kintone-plugin/src/types/index.d.ts

@@ -0,0 +1,6 @@
+declare global  {
+    const Kucs: {
+      [version: string]: any; 
+    };
+}
+export {};