カテゴリー内の他の記事

「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で確認したものになります。

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

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

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 運営事務局です。

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

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

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

Avatar
cybozu Development team

青葉 様

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

大変お待たせ致しました。
ご指摘頂いた「Icon Button に対しイベントが登録できない」と
「テキストボックスはsetValue('')でクリアされない」問題は修正されましたので、
ご連絡させていただきました。

今後ともよろしくお願いいたします。

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

テーブル内のチェックボックス、複数選択で選択された値が、行追加後の描画未選択のように見えます
(デバックで見たところ、オブジェクト内には選択された値として持っているよう)
ドキュメント内のサンプルコードでも同じようになったのですが、回避方法はありますでしょうか。

Avatar
cybozu Development team

mharum 様

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

> テーブル内のチェックボックス、複数選択で選択された値が、行追加後の描画未選択のように見えます

こちらの文章の状態がくみ取れず、上記の状態について詳細を教えていただくことはできますでしょうか?
説明しにくいようでしたら、コメントに画像を添付することもできます。
また、「kintone UI Componentを利用してチェックボックスを作成する」部分のサンプルコードを試された、と言う認識で合っていますでしょうか?

お手数おかけしますが、よろしくお願いいたします。

 

Avatar
mharum

お世話になっております。

画像を添付いたします。

該当コードは、ドキュメント(https://kintone.github.io/kintone-ui-component/)内のTableのサンプルコードとなります。

複数選択を実施している(初期値にセット)のですが、見た目上は選択されているようには見えず。

また行を追加した際に、選択した値が解除されます。

Avatar
cybozu Development team

mharum 様

返信が遅くなってしまい、申し訳ございません。
状況の詳細を教えていただきありがとうございました。

> 複数選択を実施している(初期値にセット)のですが、見た目上は選択されているようには見えず。

担当チームに確認いたしましたところ、上記につきましては不具合とのことで、今後改修予定だということです。

> また行を追加した際に、選択した値が解除されます。

上記に関しましては、標準機能のテーブルと同じく、仕様となっております。
行を追加した際に、選択した値をセットする場合は、JavaScriptで処理を追加する必要があります。

記事のシナリオと異なる機能拡張のカスタマイズ方法等についてはぜひコミュニティをご活用ください。
https://developer.cybozu.io/hc/ja/community/topics

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

Avatar
ryota

お世話になっております。

kintone UI Componeを利用して一覧画面にボタンを2つ作成したのですが、2つのボタンを横並びにすることはできないでしょうか?

getHeaderMenuSpaceElement()を利用して配置しておりますが、縦に2つ並んでいます。
ご教示いただければ助かります。
Avatar
cybozu Development team

ryota 様

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

ボタンの仕様として、ボタン要素の display プロパティに block が指定されています。
ボタン要素の display プロパティに inline-block を指定したCSSファイルをアプリに適用すれば、横並びのボタンを実装できるかと思います。
具体的には、以下のようなコードになります。

.kuc-btn.normal {
  display: inline-block;
}

お試しいただければと思います。

また、こちらのコメント欄は記事内容のフィードバック目的となっております。
今後、直接的に記事と関連がない、または技術的なご質問はcybozu developer コミュニティをぜひご活用ください。
有志により回答が得られる場所となります。

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

Avatar
mharum

dialog内にテキストエリアを表示させ、その値を取得することは可能でしょうか。

  var textArea = new kintoneUIComponent.TextArea({ value: 'textarea' });
        var myDialog = new kintoneUIComponent.Dialog({
            header: 'コメント入力',
            content: textArea.render(),//'コメントを入力してください',
            isVisible: true,
            showCloseButton: true,
        });
 
上記のtextAreaの値をmyDialog.getContent().getValue()で取得しようとしましたができず。
 
ご教授頂けますと幸いです。
Avatar
wu

お世話になっております。

下記のようにkintone UI Componeのドロップダウンリストの内容をクリアする時、画面上の値クリアされず、

その前に設定した値が画面上に残ったままになってしまいます。

dropdown.setItems([]);
dropdown.setValue('');

_propsの中を見ると、items は length :0になっています。

labelは前の値のままです。

ご確認お願い致します。

Avatar
cybozu Development team

mharum 様

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

textAreaの値を取得するにはtextArea.getValue()を使うかと思います。

また、こちらは記事に対するフィードバックの欄になっておりますので、
記事の内容の発展などはお手数ですがcybozu developer コミュニティをご利用いただけますでしょうか。

コミュニケーションのほうが多くの方が御覧になっているので、アドバスが得やすいかと思います。

Avatar
cybozu Development team

wu 様

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

フィードバックいただきありがとうございました。

ご指摘頂いた現象を確認いたしました。
開発担当チームに確認しますので、少々お待ちください。

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

Avatar
cybozu Development team

wu 様

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

お待たせしました。
担当チームに確認したところ、お問い合わせいただいた挙動は仕様とのことです

理由は次の通りです。
 
>dropdown.setItems([]);
label(バリュー)は前の値のままの挙動はキントン基準を参考して、
選択肢リストからどれかの選択肢を消したら、その前に設定した値を残したまま仕様で実装しました。
 
>dropdown.setValue('');
dropdown.setValue(value)関数について、こちらの valueが itemsリストに存在しないと、設定できないです。  dropdown.setValue('')で行うと、「 '' 」という値はitems リストに存在していないので、consoleでエラーが出力され、その値( '' )が設定できないです。
Avatar
mharum

cybozu developer network 事務局

 

こちらのライブラリはモバイルでも利用可能でしょうか。

Avatar
cybozu Development team
mharum 様
お世話になっております。
cybozu developer network 事務局です。
 
モバイル画面でも表示されますが、
kintone のモバイル画面用のパーツは表示されないので、ご了承ください。
 
よろしくお願いいたします。
サインインしてコメントを残してください。