kintone UI Component v1

目次

kintone UI Component とは

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

なお、kintone UI Component v0 は、セキュリティアップデートを含めたすべての開発を終了しています。
今後は、この記事で紹介している kintone UI Component v1 への移行を推奨しています。
v0 から v1 へ移行を検討している場合には、 v0 と v1 の書き方の違い解説 (External link) を参照してください。
また、v1 では JavaScript 版だけを提供しています。React 版はありません。

GitHub

https://github.com/kintone-labs/kintone-ui-component (External link)

ライセンス

MIT ライセンス (External link)

ドキュメント

https://kintone-ui-component.netlify.app/ja/ (External link)

サポート方針

kintone UI Component v1 の仕様の確認やトラブルに関する質問は、API サポート窓口に問い合わせ可能です。
問い合わせ方法は、次のページを確認してください。
サポートへのお問い合わせ方法 (External link)

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

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

Quickstart

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

kintone UI Component の特徴

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

v1 では、デスクトップ版とモバイル版に対応した UI パーツを公開しています。
対応しているパーツの詳細は、ドキュメントサイトの Components (External link) を確認してください。
ここでは、例として 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 でも実装できます。

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:アクセシビリティ対応

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

ブラウザーの対応状況

ブラウザ対応状況 (External link) を参照してください。

更新履歴

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

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

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