kintone UI Component v1

固定リンクがコピーされました

kintone UI Component とは

固定リンクがコピーされました

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

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

GitHub

固定リンクがコピーされました

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

ライセンス

固定リンクがコピーされました

MIT ライセンス

ドキュメント

固定リンクがコピーされました

https://ui-component.kintone.dev/ja/

サポート方針

固定リンクがコピーされました

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

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

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

Quickstart

固定リンクがコピーされました

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

kintone UI Component の特徴

固定リンクがコピーされました

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

固定リンクがコピーされました

v1では、デスクトップ版とモバイル版に対応したUIパーツを公開しています。
対応しているパーツの詳細は、ドキュメントサイトの Components を確認してください。
ここでは、例として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を適用するなど、細かな設定もカスタマイズに反映できます。

固定リンクがコピーされました

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

ブラウザーの対応状況

固定リンクがコピーされました

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

更新履歴

固定リンクがコピーされました

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

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

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

SDK & Tools