カテゴリー内の他の記事

「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 コミュニティをご活用ください。

Avatar
jiji

GitHubで最新版(v0.2.0)どうやってダウンロードするんですか?

さっきダウンロードしたjsだと0.1.4っぽかったです・・・

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

jiji 様

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

現在リリースされている kintone UI Component は v0.1.4 のため、
kintone UI Component の扱いについては以下のリファレンスをご参照ください。
https://kintone.github.io/kintone-ui-component/

v0.2.0 は開発中となっていますので、リリースまで今しばらくお待ちいただけますようお願い致します。

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

入力ダイアログを表示し、ボタンを押下されたら任意のアプリへ更新したいのですが、
ダイアログに配置したボタンのイベント捕捉のサンプルコードはないでしょうか。
footer部分に配置したボタン押下で処理を走らせたいのですが。

Avatar
cybozu Development team

青葉様

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

kintone UI Component の各要素のサンプルコードは https://kintone.github.io/kintone-ui-component/latest/versions/ の Reference をご参照ください。

ダイアログのフッターに配置したボタンの要素に対し、
https://kintone.github.io/kintone-ui-component/latest/Reference/Button/#oneventname-callback を設定すればよいかと思います。
サンプルコードについても上記ドキュメントに記載されておりますので、ご参照ください。

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

Avatar
青葉

ご返信ありがとうございます。
ダイアログについてはご教授いただきました方法で実装してみたいと思います。

もう1点、現在利用しているのは最新版(V0.4.3)ですが、Tableの冒頭のサンプルソースを利用しています。

{ header: 'Icon Button', cell: function() { return kintoneUIComponent.createTableCell('icon', 'iconBtn', {onClick:function(event){ alert('icon button clicked') }}) } },

Tableに配置したiconをクリックすると「icon button clicked」とアラートが出力されるサンプルコードですが
私が試したverだけですが、最新版、V0.3.3、V0.3.2はonClickが効いていません。
V0.3.1は想定どおりに動作します(アラートメッセージが出力されます)

V0.3.2以降はtable内でのiconクリックイベントは捕捉できなくなったのでしょうか?

Avatar
cybozu Development team

青葉様

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

回答が遅くなってしまい、失礼いたしました。

v0.3.2 以降で、テーブルに配置した Icon Button に対しイベントが登録できないこと、こちらでも現象確認いたしました。
担当チームにフィードバックさせていただき、今後のバージョンで修正する予定です。

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

Avatar
青葉

ご返信ありがとうございます。
度々で申し訳ないのですが、もう1点教えて下さい。

テキストボックスにsetValue('')にて空文字を設定しても、画面上の値がクリアされず、
その前に設定した値が残ったままになってしまいます。
setValue直後の_propsの中を見ると、valueの値は空文字になっています。
画面上だけ再描画されず値が残っているように見えます。
setValue(' ')など半角スペースやなんらかの文字列を設定すると正常動作しています。

テキストエリアの場合は、setValue('')でクリアされるので、テキストボックスも同じロジックで
空文字設定したいのです。
ご確認よろしくお願いします。

Avatar
cybozu Development team

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

回答が遅くなってしまい、失礼いたしました。

フィードバックいただきありがとうございました。
こちらでも同じ現象確認いたしました。
担当チームにフィードバックさせていただき、今後のバージョンで修正する予定です。

引き続きよろしくお願いいたします。

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