kintone UI Component v1
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
ライセンス
ドキュメント
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 のボタンを追加するサンプルコードです。
|
|
MobileCheckbox
次のコードは、モバイルのレコード詳細画面に、kintone UI Component のチェックボックスを追加するサンプルコードです。
|
|
特徴2:kintone パーツの再現度の向上
kintone UI Component のコンポーネントは、kintone 標準の UI や挙動を忠実に再現しています。
たとえば、必須項目のアイコンの表示や、空欄時の入力例として表示するテキストの設定など、標準機能での設定項目を kintone UI Component でも実装できます。
Dropdown
kintone UI Component
kintone 標準
MobileTextArea
kintone UI Component
kintone 標準
特徴3:プロパティでの宣言
コンポーネントに保存する値は、プロパティでの宣言となっていて、JavaScript の標準関数を用いてコーディングできます。
JavaScript の書き方に近いことで、開発を始めたばかりの方でも使いやすくなっています。
|
|
特徴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 で動作を確認しています。