kintone 플러그인 작가가 되기 위해서, 플러그인의 개발 방법을 조사하면서, 조금씩 공개해 나가려고 생각합니다.

kintone 플러그인이란 무엇입니까?

「kintone 플러그인이란 무엇인가?」를 kintone 커스터마이즈와 비교하는 것으로, 나름대로 생각하고 싶습니다.

kintone 플러그인의 동작 이미지는 이런 느낌이라고 생각합니다.


동작 이미지


JavaScript 사용자 정의

플러그인

킨톤

cybozu 운영 기반


아마도 JavaScript 사용자 정의보다 먼저로드되는 것 같습니다.

플러그인과 사용자 정의의 차이

아마도 플러그인과 자바 스크립트 커스터마이징은 그다지 차이가없는 것 같습니다.



맞춤형
플러그인


개발 언어
자바스크립트
자바스크립트

패키지
특히 없음
plugin-packer 사용

배포
앱 설정에서 업로드
kintone 시스템 관리에서 업로드

설정값 저장
특히 없음
kintone.plugin.app.setConfig()를 이용하여 설정값 저장

기타
사용자 정의 화면 사용 가능
설정 화면용 HTML 파일 사용 가능

Hello,World 플러그인 만들기

약속의 Hello, World를 표시시키는 플러그인을 만들어 보겠습니다.

아이콘 파일 icon.png 생성

customize.js PC 용 JavaScript 파일 작성

매니페스트 파일 (manifest.json) 만들기

plugin-packer로 패키지 작성

배포

다음 번 이후 실제로 작성하겠습니다.

개발 환경 준비

node를 설치한 후 plugin-packer를 설치합니다.
디렉토리를 작성하여 필요한 파일을 작성하십시오.

$npm -v
6.5.0
$ npm install -g @kintone/plugin-packer
Success: "/Users/user/.npm-global/lib/node_modules/@kintone/plugin-packer/node_modules/fsevents/lib/binding/Release/node-v48-darwin-x64/fse.node" is installed via remote
+ @kintone/[email protected]
$ mkdir src
$ cd src
$ mkdir image
$ mkdir js
$ touch manifest.json
$ cd js
$ touch customize.js
$ cd ..
$ tree .
.
├── image
├── js
│   └── customize.js
└── manifest.json

아이콘 파일 만들기

아이콘 파일을 만듭니다. 파일의 크기에 주의가 필요합니다.
참고 : kintone 플러그인 개발 절차

파일 편집

customize.js를 편집합니다. 이번에는 목록 화면이 표시되면 "Hello, world"라고 표시해 보겠습니다.
참고 : 제1회 kintone JavaScript API의 이지리타

customize.js

(function () {
    "use strict";
    kintone.events.on('app.record.index.show', function(event) {
        window.alert('Hello,world');
    });
})();

manifest.json을 편집합니다.

manifest.json

{
    "manifest_version": 1,
    "version": 1,
    "type": "APP",
    "name": { 
        "ja": "サンプルプラグイン",
        "en": "sample plugin"
    },
    "description": { 
        "ja": "これはサンプルプラグインです。",
        "en": "This is sample plugin."
    },
    "icon": "image/icon_helloworld.png",
    "homepage_url": { 
        "ja": "https://example.com/jp/",
        "en": "https://example.com/en-us/"
    },
    "desktop": {
        "js": [
            "js/customize.js",
            "https://example.com/js/customize.js"
        ]
    }
}

포장

kintone-plugin-packer를 이용해 패키지합니다.

$ tree .
.
└── src
    ├── image
    │   └── icon_helloworld.png
    ├── js
    │   └── customize.js
    └── manifest.json
$ ~/.npm-global/bin/kintone-plugin-packer src
Succeeded: /Users/kazoo/local/kintone/plugin/hello_world/plugin.zip
$ tree .
.
├── 秘密鍵ファイル.ppk
├── plugin.zip
└── src
    ├── image
    │   └── icon_helloworld.png
    ├── js
    │   └── customize.js
    └── manifest.json

plugin.zip과 개인 키 파일이 생성됩니다.

배포

kintone 시스템 관리 플러그인 메뉴에서 플러그인 추가를 선택합니다.
plugin.zip을 선택하고 OK를 누릅니다.

플러그인 설치

kintone 앱의 앱 설정 메뉴에서 설정 탭의 플러그인 메뉴를 선택합니다.
플러그인 추가를 누르고 메뉴에서 플러그인을 선택합니다.

앱 실행

앱을 실행하고 확인합니다.