メインコンテンツまでスキップ
バージョン: 1.0.2

Quick Start

kintone UI Component は、kintone カスタマイズやプラグインの UI 開発を支援するための UI Component ライブラリです。
以下のような kintone ライクな UI を簡単に作成できるので、フォーム部品を自作したい場合に便利にお使いいただけます。

Desktop 用コンポーネント例

desktop components

Mobile 用コンポーネント例

mobile components

下準備:アプリ作成

ここでは既定の kintone 一覧画面のヘッダーメニュースペースに Button コンポーネントを配置します。
まず kintone UI Component を設置するアプリを用意します。

  1. 空のアプリを作成します。(アプリをはじめから作成する
    特にフィールドの設置は必要ありません。

導入と実装方法

kintone UI Component では UMD と CDN と npm パッケージを用意しています。
ブラウザ環境や Node.js 環境など開発環境に合わせていずれかを選択して読み込み、実装してください。
本記事では、それぞれの導入・実装方法を紹介します。

ヒント

各コンポーネントのリファレンスについてはサイドバーの Components カテゴリよりご確認ください。
(順次対応コンポーネントも追加予定です。)

UMD を利用する

  1. kintone UI Component リポジトリ内の各バージョン Release 欄に添付のアーカイブフォルダ(kintone-ui-component-{version}.tgz)を解凍し、以下のファイルを kintone アプリ設定の JavaScript / CSS でカスタマイズにて指定します。
./umd/kuc.min.js
  1. index.js ファイルを作成します。
kintone.events.on('app.record.index.show', event => {
const header = kintone.app.getHeaderMenuSpaceElement();

const button = new Kuc.Button({
text: 'Submit',
type: 'submit'
});
button.addEventListener('click', event => {
console.log(event);
});

header.appendChild(button);
return event;
});
  1. index.js を kintone アプリ設定の JavaScript /CSS でカスタマイズにアップロードしてカスタマイズを適用します。(JavaSriptやCSSでアプリをカスタマイズする

button customize

CDN を利用する

  1. 以下の CDN URL を、作成した kintone アプリ設定の JavaScript /CSS でカスタマイズにて指定します。(JavaSriptやCSSでアプリをカスタマイズする
    CDN を読み込むと、グローバルオブジェクトとして Kuc が追加されます。

    • 最新版の kintone UI Component を読み込みたい場合

      https://unpkg.com/kintone-ui-component/umd/kuc.min.js
    • バージョン指定して読み込みたい場合(プロジェクト名の後ろにバージョン番号を指定)

      https://unpkg.com/kintone-ui-component@1.0.0/umd/kuc.min.js
  2. 以降は上記 UMD と同様。

ヒント

unpkg はサイボウズが提供している CDN サービスではありません。検証用としてお使いいただくことをお勧めします。
本番環境では、unpkg の障害や不具合による影響を避けるため、UMD の kuc.min.js をご利用ください。

npm パッケージを利用する

  1. my-customization というフォルダを作成し、その配下で以下のコマンドを実行します。
mkdir my-customization && cd my-customization
npm install kintone-ui-component
npm install webpack
ヒント

必要に応じて、babel-loadercss-loader もインストールしてお使いください。

  1. 利用したいコンポーネントをインポートし、index.js ファイルを src フォルダ配下に作成します。
import { Button } from 'kintone-ui-component/lib/button';

kintone.events.on('app.record.index.show', event => {
const header = kintone.app.getHeaderMenuSpaceElement();

const button = new Button({
text: 'Submit',
type: 'submit'
});
button.addEventListener('click', event => {
console.log(event);
});

header.appendChild(button);
return event;
});
  1. プロジェクトのルート配下に以下の webpack.config.js ファイルを作成します。
const path = require('path');
module.exports = (env = {}) => {
return {
entry: {
"my-customization": './src/index.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].min.js',
},
watch: env.watch
}
}
  1. package.json に webpack でビルドするためのスクリプトを追加します。
"scripts": {
"build:webpack": "cross-env NODE_ENV=production webpack",
...
}
  1. 以下のコマンドを実行し、カスタマイズ用のファイルを生成します。
npm run build:webpack
出力結果:
./dist/my-customization.min.js
  1. 上記でバンドルしたファイルを、作成した kintone アプリ設定の JavaScript /CSS でカスタマイズにアップロードしてカスタマイズを適用します。(JavaSriptやCSSでアプリをカスタマイズする

button customize

ブラウザ対応状況

ChromeSafariFirefoxEdgeIE11
備考

各対応ブラウザ最新版での動作を確認しております。
kintone UI Component v1 系 は現在 kintone で使用しているライブラリとの兼ね合いで、IE11 では正常に動作しません。

各コンポーネントのリファレンスページでは、Overview にてコンポーネントのプレビュー表示をしています。
IE11 では動作しない点、ご了承ください。