feat:ボタンをスペースに配置

plugin/kintone-addins/src/actions/button-add.css

@@ -0,0 +1,24 @@
+.alc-button-normal {
+    display: inline-block;
+    box-sizing: border-box;
+    padding: 0 16px;
+    margin-left: 16px;
+    margin-top: 8px;
+    min-width: 100px;
+    outline: none;
+    border: 1px solid #e3e7e8;
+    background-color: #f7f9fa;
+    box-shadow: 1px 1px 1px #fff inset;
+    color: #3498db;
+    text-align: center;
+    line-height: 32px;
+}
+.alc-button-normal:hover {
+    background-color: #c8d6dd;
+    box-shadow: none;
+    cursor: pointer;
+  }
+.alc-button-normal:active {
+    color: #f7f9fa;
+    background-color: #54b8eb;
+}

plugin/kintone-addins/src/actions/button-add.ts

@@ -8,12 +8,18 @@ import { IAction, IActionProperty, IActionNode, IActionResult } from "../types/A
 interface IButtonAddProps {
     //ボタン表示名
     buttonName: string;
+    space?:ISpace;
     //配置位置
     position: string;
     //イベント名
     eventName:string
 }   
 
+interface ISpace{
+    type:string,
+    elementId:string
+}
+
 export class ButtonAddAction implements IAction {
     name: string; 
     actionProps: IActionProperty[]; 
@@ -47,43 +53,19 @@ export class ButtonAddAction implements IAction {
             }
             this.props = actionNode.ActionValue as IButtonAddProps; 
             //ボタンを配置する
-            const menuSpace = kintone.app.record.getHeaderMenuSpaceElement();
-            if(!menuSpace) return result;
-            if($("style#alc-button-add").length===0){
-                const css=`
-                .alc-button-normal {
-                    display: inline-block;
-                    box-sizing: border-box;
-                    padding: 0 16px;
-                    margin-left: 16px;
-                    margin-top: 8px;
-                    min-width: 100px;
-                    outline: none;
-                    border: 1px solid #e3e7e8;
-                    background-color: #f7f9fa;
-                    box-shadow: 1px 1px 1px #fff inset;
-                    color: #3498db;
-                    text-align: center;
-                    line-height: 32px;
-                }
-                .alc-button-normal:hover {
-                    background-color: #c8d6dd;
-                    box-shadow: none;
-                    cursor: pointer;
-                  }
-                .alc-button-normal:active {
-                    color: #f7f9fa;
-                    background-color: #54b8eb;
-                }`;
-                const style = $("<style id='alc-button-add'>/<style>");
-                style.text(css);
-                $("head").append(style);
+            let buttonSpace;
+            if(this.props.space && this.props.space.elementId){
+                buttonSpace = kintone.app.record.getSpaceElement(this.props.space.elementId);
+            }else{
+                buttonSpace = kintone.app.record.getHeaderMenuSpaceElement();
             }
+            if(!buttonSpace) return result;
+  
             const button =$(`<button id='${this.props.eventName}' class='alc-button-normal' >${this.props.buttonName}</button>`);
             if(this.props.position==="一番左に追加する"){
-                $(menuSpace).prepend(button);
+                $(buttonSpace).prepend(button);
             }else{
-                $(menuSpace).append(button);
+                $(buttonSpace).append(button);
             }
             const clickEventName = `${event.type}.customButtonClick.${this.props.eventName}`;
             button.on("click",()=>{
@@ -98,7 +80,6 @@ export class ButtonAddAction implements IAction {
         }
     }
   
-
     register(): void {
         actionAddins[this.name] = this;
     }

plugin/kintone-addins/src/index.ts

@@ -1,9 +1,3 @@
-// export const sum = (a: number, b: number) => {
-//   if ('development' === process.env.NODE_ENV) {
-//     console.log('boop');
-//   }
-//   return a + b;
-// };
 import $ from 'jquery';
 import { ActionProcess } from './types/action-process';
 import { ActionFlow } from './types/ActionTypes';