kintone UI Component とは

kintone UI Component は、kintone ライクな UI パーツを簡単に作ることができるライブラリです。
kintone カスタマイズやプラグインでの UI 開発など、kintone のフォームのパーツを自作するために利用できます。

この記事では、kintone UI Component v1 の機能を紹介します。
v1 では、デスクトップ版とモバイル版が提供されています。
対応しているパーツの詳細は、ドキュメントサイトの Components を確認してください。

v1 は JavaScript 版のみの提供です。React 版はありません。
各ブラウザーの対応状況は、 ブラウザ対応状況 を確認してください。

GitHub

https://github.com/kintone-labs/kintone-ui-component

ライセンス

MIT ライセンス

ドキュメント

https://kintone-ui-component.netlify.app/ja/

kintone UI Component（v1以降）のサポート方針

kintone UI Component の仕様の確認やトラブルは、テクニカルサポート（API 窓口）を通じたお問い合わせに対応しています。
サポートへのお問い合わせ方法 をご確認の上、お問い合わせください。

GitHub Issue でも、質問や機能リクエストを受け付けています。

ソースコードの変更、再配布および商用利用等は、ライセンスにしたがって利用できます。
ライセンスの種別は各クライアントライブラリのページまたは GitHub のリポジトリで確認してください。
ただし、ソースコードを変更していることに起因して発生したトラブルは、サポート対象外です。

Quickstart

ドキュメントサイトの Quickstart で、導入方法や Quickstart を公開しています。

v0 の使い方は、 「kintone UI Component v0」を使って簡単にkintoneライクなUIを設置する を参照してください。
v0 から v1 へ移行を検討している場合には、 v0 と v1 の書き方の違い解説 を参照してください。

補足

kintone UI Component（v1以降）の特徴

特徴 1：デスクトップ版、モバイル版それぞれに対応した UI パーツ

v1 では、デスクトップ版とモバイル版も対応した UI パーツを公開しています。
ここでは、例として Button と MobileCheckbox を紹介します。

Button

次のコードは、レコード一覧画面のメニューの右側の要素に、kintone UI Component のボタンを追加するサンプルコードです。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

(() => {
  'use strict';
  // レコード一覧画面
  kintone.events.on('app.record.index.show', (event) => {
    const header = kintone.app.getHeaderMenuSpaceElement();

    // 読み込んだ kintone UI Component のバージョンを指定する
    const Kuc = Kucs['1.4.0'];
    const button = new Kuc.Button({
      text: 'sample',
      type: 'submit',
      className: 'options-class',
      id: 'options-id',
      visible: true,
      disabled: false
    });
    header.appendChild(button);

    button.addEventListener('click', (clickEvent) => {
      console.log(clickEvent);
    });
    return event;
  });
})();

MobileCheckbox

次のコードは、モバイルのレコード詳細画面に、kintone UI Component のチェックボックスを追加するサンプルコードです。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

(() => {
  'use strict';
  kintone.events.on('mobile.app.record.detail.show', (event) => {
    const space = kintone.mobile.app.record.getSpaceElement('mobileSpace');

    // 読み込んだ kintone UI Component のバージョンを指定する
    const Kuc = Kucs['1.4.0'];
    const checkbox = new Kuc.MobileCheckbox({
      label: 'Fruit',
      requiredIcon: true,
      items: [
        {
          label: 'orange',
          value: 'Orange'
        },
        {
          label: 'apple',
          value: 'Apple'
        }
      ],
      value: ['Orange'],
      itemLayout: 'horizontal',
      className: 'options-class',
      id: 'options-id',
      visible: true,
      disabled: false,
      borderVisible: true
    });
    space.appendChild(checkbox);
    checkbox.addEventListener('change', (changeEvent) => {
      console.log(changeEvent);
    });
    return event;
  });
})();

特徴2：kintone パーツの再現度の向上

kintone UI Component のコンポーネントは、kintone 標準の UI や挙動を忠実に再現しています。
たとえば、必須項目のアイコンの表示や、空欄時の入力例として表示するテキストの設定など、標準機能での設定項目を kintone UI Component でも実装できます。

Dropdown

kintone UI Component

kintone 標準

MobileTextArea

kintone UI Component

kintone 標準

特徴3：プロパティでの宣言

コンポーネントに保存する値は、プロパティでの宣言となっていて、JavaScript の標準関数を用いてコーディングできます。
JavaScript の書き方に近いことで、開発を始めたばかりの方でも使いやすくなっています。

1
2
3
4
5
6
7
8
9

const kintoneHeaderSpace = kintone.app.getHeaderMenuSpaceElement();

// 読み込んだ kintone UI Component のバージョンを指定する
const Kuc = Kucs['1.4.0'];
const button = new Kuc.Button({
  text: 'sample'
});
button.text = 'update';
kintoneHeaderSpace.appendChild(button);

特徴4：ClassName、ID の指定

各パーツには、ClassName や ID を指定できます。
パーツごとに ClassName や ID を指定して CSS を適用するなど、細かな設定もカスタマイズに反映できます。

特徴5：アクセシビリティ対応

各パーツは、キーボード操作や音声読み上げソフトに対応しています。

更新履歴

kintone UI Component の更新履歴や最新情報は、 GitHub Releases や リリースノート を確認してください。

• 2022 年 8 月 10 日
  v1.4.0 から、同時に複数の kintone UI Component を読み込みできるようになりました。
  この記事に掲載しているサンプルコードにおいても、kintone UI Component のバージョンを指定した Kucs オブジェクトから Kuc オブジェクトを生成するように書き換えました。

この記事で紹介しているサンプルコードは、2022 年 7 月版 kintone および kintone UI Component v1.4.0 で動作を確認しています。