カテゴリー内の他の記事

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

フォローする

Index

はじめに

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

GitHub

https://github.com/kintone/kintone-ui-component

ドキュメント

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

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

 

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

ご注意事項

  • 本プログラムは、動作を保証するものではありません。 
  • ソースコードの変更および再配布、商用利用等はライセンスに従ってご利用可能です。

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

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

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

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

UI_00.png

ステップ2:modern default cssを使用する

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

UI_01.png

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

ステップ3:jQueryを利用する

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

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

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

kintone UI Componentのダウンロード

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

  • kintone-ui-component.min.css
  • kintone-ui-component.min.js

をダウンロードし、kintoneアプリに適用します。

サンプルコード

UI_01_.png

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

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

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

render()

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

UI_render.png

addItem(item)

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

UI_addItem.png

getItem(index)、getItems()

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

UI_getItem.png

removeItem(index)

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

UI_removeItem.png

getValue()、setValue(value)

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

getsetValue.png

disableItem(value)、enableItem(value)

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

UI_disableItem.png

on(eventName, callBack)

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

UI_on.png

show()、hide()

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

UI_hide.png

disable()、enable()

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

UI_disable.png

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

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

Table

 UI_02.png

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

rowAdd

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

rowRemove

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

cellChange

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

cellClick

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

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

NotifyPopup

UI_03.png

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

Spinner

 UI_04.png

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

IconButton

UI_05.png

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

おわりに

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

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

 

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

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

直接的に記事と関連がないご質問はcybozu developer コミュニティをご活用ください。

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