kintoneカスタマイズで知っておくと便利なSDK・ツール

1. JavaScript カスタマイズで
知っておくとべんりな
SDK / Tool
cybozu developer network

2. – cybozu developer network では kintone カスタマイズ開発で利
⽤できる、さまざまな SDK や Tool を公開しています
はじめに
SDK
Cybozu CDN
Developer tools
Library

3. – kintone JavaScript カスタマイズで知っておくとべんりな
3つのSDK / Tool を紹介します
– kintone JS SDK
… kintone REST API の実⾏がかんたんに！
– kintone UI Component
… kintone ライクな UI パーツ⽣成がかんたんに！
– customize uploder
… kintone カスタマイズ適⽤がかんたんに！
はじめに

4. kintone JS SDK
– kintone JS SDK とは
– kintone の画⾯カスタマイズや Node.js で利⽤できる
kintone REST API のクライアントライブラリ
– メリット
– 複雑な実装になりがちな kintone REST API をかんたんに実⾏できま
す
– 配布先
– https://github.com/kintone/kintone-js-sdk/
GitHub

5. kintone JS SDK
– REST API 実⾏処理の記述量が約 1/2 になります
SDK を利⽤しない場合 SDK を利⽤した場合

6. – 「JavaScript / CSSでカスタマイズ」画⾯で読み込める
JavaScript ファイルも配布しています
kintone JS SDK
GitHub
ダウンロード 適⽤
+
カスタマイズファイル
kintone-js-sdk.min.js

7. kintone JS SDK
GitHub リポジトリ から kintone-js-sdk.min.js を⼊⼿します
kintone カスタマイズ開発を⾏い、カスタマイズファイル ( js/css )
を準備します
– 導⼊ステップ
kintone に kintone-js-sdk.min.js とカスタマイズファイルを適⽤
します
1
2
3
詳しい導⼊⼿順やサンプルコードは、 の
kintone JS SDK をご参照ください

8. kintone UI Component
– kintone UI Component とは
– kintone のデザインに調和する UI パーツをかんたんに⽣成するため
のライブラリです
– メリット
– kintone の各画⾯やプラグイン設定画⾯などに UI パーツを配置する
とき、かんたんに kintone ライクな UI パーツを実装できます
– 配布先
– https://github.com/kintone/kintone-ui-component/
GitHub

9. kintone UI Component
– ⾃分で CSS を⽤意しなくても kintone ライクな UI パーツを⽣成
できます
– HTML 要素を⽣成するコードの記述も短くなります
kintone UI Component を利⽤しない場合 kintone UI Component を利⽤した場合
kintone UI Component を利⽤しない場合 kintone UI Component を利⽤した場合

10. kintone UI Component
– さまざまな UI パーツを提供しています
Button
CheckBox
Dialog
NotifyPopup
Table
などなど…

11. kintone UI Component
GitHub リポジトリ から kintone-ui-component.min.js と
kintone-ui-component.min.css を⼊⼿します
kintone カスタマイズ開発を⾏い、カスタマイズファイル ( js/css )
を準備します
– 導⼊ステップ
kintone に kintone-ui-component.min.js、kintone-ui-
component.min.css とカスタマイズファイルを適⽤します
1
2
3
詳しい導⼊⼿順やサンプルコードは、 の
「kintone UI Component」を使って簡単にkintoneライクなUIを設置する をご参照ください

12. customize uploader
– customize uploader とは
– kintone へ JavaScript / CSS カスタマイズファイルを適⽤するコマン
ドラインツールです
– メリット
– コマンドを実⾏するだけで、kintone へカスタマイズファイルを適⽤
できます
– 配布先
– https://github.com/kintone/customize-uploader/
GitHub

13. customize uploader
– コマンドで kintone カスタマイズファイルを適⽤できます
Customize uploader を利⽤しない場合
&
Click!
kintone UI Component を利⽤した場合
マニフェストファイル※を指定してコマンド実⾏
※マニフェストファイル：
適⽤先のアプリやアップロードするカスタマイズファイルの情報を記述したファイル

14. customize uploader
npm で customize-uploader をインストールします
kintone カスタマイズ開発を⾏い、カスタマイズファイル ( js/css )
を準備します
– 導⼊ステップ
マニフェストファイルを作成します
1
2
3
詳しい導⼊⼿順やサンプルコードは、 の
customize-uploaderでカスタマイズ⽤のJS/CSSファイルをコマンドラインからアップロードしよう！
をご参照ください
初回のみ
4 コマンドラインからカスタマイズファイルをアップロードします

15. – kintone JS カスタマイズで知っておくとべんりな SDK / Tool
– kintone JS SDK
– https://github.com/kintone/kintone-js-sdk/
– kintone JS SDK
– kintone UI Component
– https://github.com/kintone/kintone-ui-component/
– 「kintone UI Component」を使って簡単にkintoneライクなUIを設置する
– customize uploder
– https://github.com/kintone/customize-uploader/
– customize-uploaderでカスタマイズ⽤のJS/CSSファイルをコマンドラインからアップロードしよう！
まとめ
GitHub
GitHub
GitHub