kintone UI Component は、kintone カスタマイズ、プラグインのUI 開発を支援するための UI Component ライブラリです。
ドキュメントページはこちらをご確認ください。
English | 日本語
kintone UI Component は、ダウンロードした kuc.min.js ファイル、npm パッケージ、または CDN として利用可能です。
各バージョン Release 欄の添付のアーカイブフォルダを解凍し、kuc.min.jsを使用してください。
./umd/kuc.min.js
npm で kintone-ui-component をインストールしてご利用ください。
npm install kintone-ui-componentこちらの CDN をご利用ください。
-
バージョン指定して読み込みたい場合（プロジェクト名の後ろにバージョン番号を指定）
https://unpkg.com/[email protected]/umd/kuc.min.js -
最新版の kintone UI Component を読み込みたい場合
https://unpkg.com/kintone-ui-component/umd/kuc.min.js
unpkg はサイボウズが提供している CDN サービスではありません。検証用としてお使いいただくことをお勧めします。
本番環境では、unpkg の障害や不具合による影響を避けるため、GitHub から kuc.min.js ファイルをダウンロードしてご利用ください。
// UMD
const Kuc = Kucs["1.x.x"];
const text = new Kuc.Text({
value: "this is text!"
});// ES modules
import { Text } from "kintone-ui-component/lib/text";
const text = new Text({
value: "this is text!"
});
text.addEventListener("change", event => {
console.log(`text value is changed to ${event.detail.value}`);
});v1.4.0 以降のバージョンを利用する場合は、コンポーネントを呼び出す際に Kuc オブジェクトの代わりに Kucs["1.x.x"] を使ってバージョンを指定してください。（ex.
new Kucs["1.4.0"].Button()）
レンダリングされたコンポーネントのタグとクラス名にはバージョン番号が含まれます。
グローバルオブジェクトとして Kuc を使うこともできますが、2つ以上の kuc.min.js を kintone カスタマイズやプラグインに読み込む場合はバージョンコンフリクトが起きる可能性があるのでご注意ください。この際、Kuc オブジェクトは最後に読み込まれた kuc.min.js を参照します。
システム上に kuc.min.js が 1つしかない、もしくは最後に読み込まれた kuc.min.js の利用で問題ない場合は、Kuc オブジェクトを利用いただいて問題ありません。以下のconst Kuc = Kucs['1.x.x'];の行を削除してください。
v1.3.2 以前のバージョンを利用する場合は、Kuc をグローバルオブジェクトとして使ってください。2つ以上の kuc.min.js を kintone カスタマイズやプラグインに追加すると、バージョンコンフリクト問題が起きるのでご注意ください。 詳しくは、Quick Start と Version conflicts issue and solution 記事をご確認ください。
| Chrome | Safari | Firefox | Edge |
|---|---|---|---|
| ○ | ○ | ○ | ○ |
各対応ブラウザ最新版での動作を確認しております。
v0 と v1 の仕様とインターフェースには違いがあるので、更新時には十分な確認をしてください。
詳細は下記の記事をご参照ください。
v0 で提供していた React 版については、現在 v1 では対応を見送っています。
kintone UI Component へのコントリビュートについて、詳しくは Contributing Guideline をご確認ください。
ご質問やご要望などございましたら、GitHub issue に登録してください。
ご質問については、以下のコミュニティを活用いただくこともできます。有志のメンバーによって運営されています。
また、本プロダクト専用のコミュニティとして GitHub の Discussions 機能を利用しています。
開発ロードマップを公開しています。
詳細はこちらをご確認ください。