カテゴリー内の他の記事

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 版はありません。
  • 各ブラウザの対応状況は、ブラウザ対応状況をご確認ください。

更新履歴

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

おわりに

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

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

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

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

Avatar
T-y

kintone-ui-componentも各バージョンのjs, cssファイルをCybozu CDNで配信して頂きたいので、ぜひご検討よろしくお願い致します。

Avatar
cybozu Development team

T-y 様

フィードバックをありがとうございます。内容を確認し検討させていただきます。

Avatar
wu

JSEdit for kintoneにおける導入方法をご紹介頂けたいです。宜しくお願い致します。

 

 

早速ご回答ありがとうございました。

ご案内通り解決できました。ありがとうございました。

 

wuにより編集されました
Avatar
cybozu Development team

wu 様
お世話になっております。
cybozu developer network 運営事務局でございます。

JSEdit for kintone を利用する場合も、 Quick Start の 導入と実装方法 の記載通り、
アプリ設定画面の「JavaScript /CSS でカスタマイズ」にてCDN URL を指定する、などの方法でご利用頂けます。

引き続きご活用いただけますと幸いです。
どうぞよろしくお願いいたします。

Avatar
wu

textコンポーネントを利用しおります。幅を調整したいですが、可能でしょうか。

カスタマイズの方法をご教授いただければ幸いです。宜しくお願い致します。

Avatar
cybozu Development team

wu 様

お世話になっております。cybozu developer network 運営でございます。

> textコンポーネントを利用しおります。幅を調整したいですが、可能でしょうか。

こちらのドキュメントに示してあるように幅の変更自体はオプションにはありません。

変更するとすれば、CSSなどでカスタマイズしていくことになると思いますが、恐れ入りますが、こちらのコメント欄は記事内容のフィードバック目的となっているため、
記事から派生した技術的なご質問はcybozu developer コミュニティをご活用ください。

よろしくお願い致します。

 

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