kintone UI Component とは
kintone UI Component とは、kintone ライクな UI パーツを簡単に作ることができるライブラリで、
kintone カスタマイズやプラグインでの UI 開発など、フォームパーツを自作するために利用できます。
この記事では、kintone UI Component v1 の機能についてご紹介します。
v1 では、デスクトップ版とモバイル版が提供されています。
対応しているパーツについては、ドキュメントサイトの Components をご確認ください。
Github
ドキュメント
リリースノート
リリースノートでは v1 リリースの背景やアップデート内容を紹介しています。
kintone UI Component（v1以降）のサポート方針
- kintone UI Component の仕様の確認やトラブルは、テクニカルサポート（API 窓口）を通じたお問い合わせに対応しています。
サポートへのお問い合わせ方法をご確認の上、お問合せください。 -
その他 GitHub Issue でもご質問や機能リクエストを受け付けております。
-
ソースコードの変更、再配布および商用利用等は、ライセンスに従ってご利用可能です。
ライセンスの種別はクライアントライブラリのページまたは GitHub のリポジトリでご確認ください。
ただし、ソースコードを変更していることに起因して発生したトラブルは、サポート対象外となります。
導入方法
ドキュメントサイトの Quick Start を参照してください。
また、新バージョンへの移行検討をされる場合は v0 と v1 の書き方の違い解説 を参照してください。
特徴
デスクトップ版、モバイル版それぞれに対応した UI パーツ
デスクトップ版だけでなくモバイル版にも対応した UI パーツが実装されています。
ここでは、Button と MobileCheckbox をご紹介します。
Button
MobileCheckbox
kintone パーツの再現度の向上
各コンポーネントは kintone 標準パーツの UI や挙動を忠実に再現しています。
ここでは、コンポーネントと標準パーツをキャプチャで比較します。
| パーツ | kintone UI Component | 標準パーツ |
| Dropdown |  |
 |
| Mobile TextArea |  |
 |
必須アイコン表示/非表示の設定が行えたり、空欄時に入力例として表示されるテキストを設定できたりと、
標準機能で行える設定をコンポーネントでも実装できるようになり、より使いやすくなりました。
プロパティでの宣言
コンポーネントに保存する値はプロパティでの宣言となっていて、JavaScript の標準関数を用いたコーディングが可能です。
JavaScript の書き方に近いことで、開発に携わって間もない方にも開発に慣れている方にも使いやすくなっています。
サンプルコード
ClassName、ID の指定
各パーツの ClassName と ID をそれぞれ指定できます。
設定したいパーツごとに CSS を適用したり、ID を指定したりと細かな設定もカスタマイズに反映できます。
アクセシビリティ対応
キー操作、読み上げ等のアクセシビリティに対応しました。
利用する OS ごとに設定方法が異なるため、お使いの OS をご確認して設定してください。
注意事項
- v1 は JavaScript 版のみの提供です。React 版はありません。
- 各ブラウザの対応状況は、ブラウザ対応状況をご確認ください。
更新履歴
今後の対応コンポーネントの追加など、機能の更新履歴や最新情報は、GitHub Release やリリースノートをご確認ください。
- 2022年8月10日
v1.4.0 から、kintone UI Component のバージョンを指定した Kucs オブジェクトから Kuc オブジェクトを生成することで、複数の kintone UI Component を読み込みできるようになりました。
参考ページ：Version conflicts issue and solution
この記事に掲載しているサンプルコードにおいても書き換えを行いました。
おわりに
kintone UI Component を使うと、自作では時間のかかるカスタマイズも簡単に行うことができます。
「kintone で使われているボタンやドロップダウンパーツを再現したいけど自作するのは大変だな」と感じている方にも、
より効率的に開発を行いたいと感じている方にも、是非ご利用いただければと思います。
このTipsは、2022年7月版 kintone および kintone UI Component v1.4.0 で確認したものになります。
kintone-ui-componentも各バージョンのjs, cssファイルをCybozu CDNで配信して頂きたいので、ぜひご検討よろしくお願い致します。
T-y 様
フィードバックをありがとうございます。内容を確認し検討させていただきます。
JSEdit for kintoneにおける導入方法をご紹介頂けたいです。宜しくお願い致します。
早速ご回答ありがとうございました。
ご案内通り解決できました。ありがとうございました。
wu 様
お世話になっております。
cybozu developer network 運営事務局でございます。
JSEdit for kintone を利用する場合も、 Quick Start の 導入と実装方法 の記載通り、
アプリ設定画面の「JavaScript /CSS でカスタマイズ」にてCDN URL を指定する、などの方法でご利用頂けます。
引き続きご活用いただけますと幸いです。
どうぞよろしくお願いいたします。
textコンポーネントを利用しおります。幅を調整したいですが、可能でしょうか。
カスタマイズの方法をご教授いただければ幸いです。宜しくお願い致します。
wu 様
お世話になっております。cybozu developer network 運営でございます。
> textコンポーネントを利用しおります。幅を調整したいですが、可能でしょうか。
こちらのドキュメントに示してあるように幅の変更自体はオプションにはありません。
変更するとすれば、CSSなどでカスタマイズしていくことになると思いますが、恐れ入りますが、こちらのコメント欄は記事内容のフィードバック目的となっているため、
記事から派生した技術的なご質問はcybozu developer コミュニティをご活用ください。
よろしくお願い致します。
cybozu Development team 様
いつもお世話になります。
こちらを使ってでのDropdownの作成ですが、なぜDropdown作成時のstyle.widthが180px固定なのでしょうか？
appendChildをawait で同期処理させて、id取得してstyle.widthを指定の値に変えてもDropdownを変えるたびに戻ってしまいます。
チェンジイベントを使用すれば対応できるかと思いますが、少し面倒だと感じてしまいます。
こちらは、今後なにかオプションか何かでサイズの指定などができる予定などございませんか？
お手数ですが、お答えいただけると幸いです。
Yuki Minaminani 様
お世話になっております。cybozu developer network 事務局です。
ドロップダウン作成時の style.width は、ドロップダウン内に指定されるコンテンツによって伸び縮みしてしまうのを避けるために、可能な限り width のデフォルト値を用意するようにしております。
DOM 操作することなく安全に CSS のアレンジをしていただけるように Custom CSS の機能を一部のコンポーネントで提供しています。
現在は Button と Text のみの提供となっております。
Dropdown 含めて他のコンポーネントも順次対応予定なので、お待ちいただけると嬉しいです。
https://kintone-ui-component.netlify.app/docs/ja/getting-started/custom-css
また、kintone UI Component の仕様については、テクニカルサポートへお問い合わせいただけます。
サポートへのお問い合わせ方法をご確認の上、お問合せください。
その他 GitHub Issue にてご質問や機能リクエストを受け付けております。
合わせてご確認いただけると幸いです。
https://kintone-ui-component.netlify.app/ja/
cybozu Development team様
ご回答ありがとうございます。
かしこまりました、KUCのドキュメントを適時確認するようにして、希望する変更があればそのように致します。