「kintone UI Component v0」を使って簡単にkintoneライクなUIを設置する

Index

• はじめに
• kintoneライクなチェックボックス設置までの流れ
• kintone UI Componentを利用してチェックボックスを作成する
• kintone UI Component独自の関数について
• チェックボックス以外のUIについて（一部）
• おわりに

はじめに

2018年5月に、下記のGitHub上に、「kintone UI Component」が公開されました。
「kintone UI Component」は、kintone技術者のために開発された、kintoneライクなUIを簡単に作成できるライブラリです。

GitHub

・https://github.com/kintone-labs/kintone-ui-component/tree/v0_dev

ドキュメント

・https://kintone-labs.github.io/kintone-ui-component/

「kintone UI Component」を使用することで、JavaScript内でHTMLの要素や属性を書いたり、
cssで色や、大きさなどを変更する必要なく、簡単にkintoneライクなUIを作成することができます。
当記事では、今までkintoneライクなUIを作成するために書いていたコードと、
「kintone UI Component」を使用したコードを比較しながら、使い方を紹介していきたいと思います。

比較を飛ばして読みたい方は「kintone UI Componentを利用してチェックボックスを作成する」からお読みください。

ご注意事項

ソースコードの変更および再配布、商用利用等はライセンスに従ってご利用可能です。

2021年3月5日追記
kintone UI Component v1 をリリースしました。使い方などの詳細は、kintone UI Component v1 をご参照ください。
この記事で利用している v0 は、メンテナンスモードに移行しています。

kintoneライクなチェックボックス設置までの流れ

ステップ１：通常のチェックボックスを設置する

まずは、JavaScriptでチェックボックスを作成します。

この段階では、コードはそこまで読みづらくはないですが、デザインがkintoneに合っていません。
次のステップでは、CSSを用いてデザインを変更します。

ステップ２：modern default cssを使用する

先ほど作成したチェックボックスのデザインをkintoneライクなUIにするためには、cssを適用させ、デザインを変更する必要があります。
kintoneライクなUIをデザインするcssは、GitHub上の「51-modern-default.css」が用意されているので、
対象のファイルをダウンロードしてアプリに適用し、
こちらの記事を参考に、チェックボックスのDOM構造をJavaScriptのコード内で再現する必要があります。

kintoneライクなUIを作成することができましたが、JavaScriptのコードは、
コード内でHTML要素の各属性を宣言しており、読みづらいコードとなっています。

ステップ３：jQueryを利用する

次に、読みやすいコードにするため、cybozuCDNでも公開されているjQueryを利用してみます。

先ほどより読みやすくなりましたが、まだclass指定や細かいHTMLの要素を指定する必要があり、少し手間がかかります。

kintone UI Componentを利用してチェックボックスを作成する

kintone UI Componentのダウンロード

今回公開された、kintone UI Componentを使用すれば今までより簡単にkintoneライクなUIを設置することが可能です。

以下の手順でダウンロードおよびkintoneアプリに適用します。

1. https://github.com/kintone-labs/kintone-ui-component/releases を開きます。
2. v0.〜で始まる最新バージョン（2021年03月05日時点の最新は v0.7.7）の「Assets」からkintone-kintone-ui-component-0.x.tgzをダウンロードします。
   0.xはバージョン番号です。
3. ダウンロードしたtgzファイルを解凍します。
4. 解凍後のフォルダー package > dist 以下のkintone-ui-component.min.jsとkintone-ui-component.min.cssを kintoneアプリに適用します。
   参考：JavaScriptやCSSでアプリをカスタマイズする

サンプルコード

いかがでしょうか。今までとは違い、特にHTML要素や属性を指定することなく、簡単にkintoneライクなUIが作成できます。
簡単にコード解説すると、
6行目の「items」に要素を追加することで簡単にチェックボックスの要素を増やすことが可能です。
また、23行目の「value」に「items」の要素を追加することでチェックの初期状態を変更することが可能です。
作成した要素はコンポーネントの関数である「render()」でDOM要素として扱うことが可能です。

kintone UI Component独自の関数について

kintone UI Componentには、先ほどチェックボックスで紹介した、「render()」以外にも、
コンポーネントを扱うための独自の関数が用意されています。
先ほど作成したチェックボックスを例に、コンポーネントの独自関数を紹介していきます。
他のUIについてはドキュメントをご覧ください。

render()

作成したコンポーネントをDOM要素として扱うための関数です。

addItem(item)

チェックボックスに選択肢をふやします。

getItem(index)、getItems()

チェックボックスの選択肢を取得します。

removeItem(index)

チェックボックスの選択肢を削除します。

getValue()、setValue(value)

チェックが入っている選択肢の値を取得、または、設定します。

disableItem(value)、enableItem(value)

選択肢の無効、有効を設定します。

on(eventName, callBack)

コンポーネントに対して、特定のイベントが発生した際に発火するcallBack関数です。
チェックボックスでは、「eventName」は「'change'」で、チェックボックスのチェックを変更した際に発火します。
その他のコンポーネントでも同様の「on(eventName, callBack)」が用意されています。
例えば、ボタンでは「eventName」は「'click'」で、ボタンをクリックした際に発火します。
他にもコンポーネント毎にイベントが用意されているので、詳細はドキュメントをご覧ください。

show()、hide()

コンポーネントを表示、非表示に設定します。

disable()、enable()

チェックボックス全体の無効、有効を設定します。

チェックボックス以外のUIについて（一部）

この記事ではチェックボックスについて紹介しましたが、他にも実装の大変なTableや、
「51-modern-default.css」では実装できなかったUIを簡単に実装することが可能です。
一部について紹介していきます。詳しい実装方法はドキュメントの方をご覧ください。

Table

 

TableのcallBack関数である、on()には、様々なイベントが実装されています。

rowAdd

行が追加された際に発火します。イベントオブジェクトには、Tableの値や、追加ボタンを押した行番号が含まれます。

rowRemove

行が削除された際に発火します。イベントオブジェクトには、Tableの値が含まれます。

cellChange

セルの値が変更された際に発火します。イベントオブジェクトには、Tableの値やセルの値、変更されたセルの位置が含まれます。

cellClick

セルがクリックされた際に発火します。イベントオブジェクトには、Tableの値やセルの値、クリックされたセルの位置が含まれます。

コールバック関数で受け取るデータの詳細はドキュメントをご覧ください。
上記のイベントを使うことで、様々な動きを実装することが可能です。

NotifyPopup

ポップアップも簡単に実装することが可能です。

Spinner

 

ロード中の画面に使えるスピナーもkintone UI Componentを使用することで、簡単に作成できます。

IconButton

「＋」「－」「×」ボタンを作成することができます。
IconButtonのon()関数には、クリックイベントがあるので、ボタンを押下した際の処理も簡単に実装することが可能です。

おわりに

kintone UI Componetは、簡単にkintoneライクなUIを作成するだけでなく、
UIの動きに対応したイベントが用意されているため、さまざまな処理を実装することが可能です。

ドキュメントをご覧になりながらお使いください。

このTipsは、2018年4月版 kintoneで確認したものになります。