検索
Close
カテゴリー内の他の記事

kintone UI Component v1

作成日
更新日

Index

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 の仕様については、テクニカルサポートへお問い合わせいただけます。
    サポートへのお問い合わせ方法をご確認の上、お問合せください。
  • その他 GitHub Issue でもご質問や機能リクエストを受け付けております。
  • ソースコードの変更、再配布および商用利用等は、ライセンスに従ってご利用可能です。
    ライセンスの種別はクライアントライブラリのページまたは GitHub のリポジトリでご確認ください。

導入方法

ドキュメントサイトの Quick Start を参照してください。

v0 をお使いの方は 「kintone UI Component v0」を使って簡単にkintoneライクなUIを設置する をご確認ください。
また、新バージョンへの移行検討をされる場合は v0 と v1 の書き方の違い解説 を参照してください。

特徴

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

デスクトップ版だけでなくモバイル版にも対応した UI パーツが実装されています。
ここでは、Button と MobileCheckbox をご紹介します。

Button

KUCv1_button.png

MobileCheckbox

KUCv1_mobilecheckbox.png

kintone パーツの再現度の向上

各コンポーネントは kintone 標準パーツの UI や挙動を忠実に再現しています。
ここでは、コンポーネントと標準パーツをキャプチャで比較します。

パーツ kintone UI Component 標準パーツ
Dropdown KUCv1_dropdown.png kintone_dropdown.png
Mobile TextArea KUCv1_textarea.png kintone_TextArea.png

必須アイコン表示/非表示の設定が行えたり、空欄時に入力例として表示されるテキストを設定できたりと、
標準機能で行える設定をコンポーネントでも実装できるようになり、より使いやすくなりました。

プロパティでの宣言

コンポーネントに保存する値はプロパティでの宣言となっていて、JavaScript の標準関数を用いたコーディングが可能です。
JavaScript の書き方に近いことで、開発に携わって間もない方にも開発に慣れている方にも使いやすくなっています。

サンプルコード

ClassName、ID の指定

各パーツの ClassName と ID をそれぞれ指定できます。
設定したいパーツごとに CSS を適用したり、ID を指定したりと細かな設定もカスタマイズに反映できます。

アクセシビリティ対応

キー操作、読み上げ等のアクセシビリティに対応しました。
利用する OS ごとに設定方法が異なるため、お使いの OS をご確認して設定してください。

注意事項

  • v1 は JavaScript 版のみの提供です。React 版はありません。
  • IE11 では正常に動作しないためご留意ください。
    詳しくはブラウザ対応状況をご確認ください。

更新履歴

今後の対応コンポーネントの追加など、機能の更新履歴や最新情報は下記の開発元のページをご確認ください。

おわりに

kintone UI Component を使うと、自作では時間のかかるカスタマイズも簡単に行うことができます。
「kintone で使われているボタンやドロップダウンパーツを再現したいけど自作するのは大変だな」と感じている方にも、
より効率的に開発を行いたいと感じている方にも、是非ご利用いただければと思います。

このTipsは、2021年1月版 kintone および kintone UI Component v1.0.0 で確認したものになります。

記事に関するフィードバック

記事のコメント欄は記事に対するフィードバックをする場となっております。
右の記事フィードバックのためのガイドを参照してコメントしてください。
記事のリンク切れなど、気になる点がある場合も、こちらのフォームからフィードバックいただけますと幸いです。

サインインしてコメントを残してください。