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の書き方の違い解説を参照してください。
v0とv1の書き方の違い解説 (External link)
また、v1ではJavaScript版だけを提供しています。React版はありません。

GitHub

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

ライセンス

MITライセンス (External link)

ドキュメント

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

サポート方針

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

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

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

Quickstart

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

kintone UI Componentの特徴

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

v1では、デスクトップ版とモバイル版に対応したUIパーツを公開しています。
対応しているパーツの詳細は、次のドキュメントサイトのComponentsを確認してください。
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やリリースノートを確認してください。
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で動作を確認しています。