kintone UI Component を試してみた

「kintone UI Component」が公開されたので試してみた。
「kintoneライクな UI が簡単に」が売りのライブラリだが、使いこなしには少しノウハウがいる。

参考にした記事

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

「kintone UI Component」の使い方はこのとおりにしましょう。
細かい仕様は、マニュアルにあります。

テスト用アプリ

新規アプリを作って、カスタム一覧に「kintone UI Component」の部品を配置してみます。

カスタム一覧の設定

div を一つ配置します。

<div id="xxx-space"></div>

カスタマイズ内容

とりあえず表示される部品を見たかっただけなので、簡単なオプションのみ指定しています。
部品をおもいどおりに配置するには、div 階層と CSS 指定が必要です。
DOM の階層を作るのが面倒だったので、jQuery を使っています。

テキストボックスのサイズ変更は、直接 width, height を変更しました。
オプション指定に、width, height などは無いのでこれでいいのかな？

もう少し row の構成、ラベルと部品の配置など簡単に指定できるようにしたい。

jQuery.noConflict();
(function($) {
    "use strict";
    kintone.events.on("app.record.index.show", function(event) {
        console.log(event);
        if (event.viewId !== 5521048) return event;

        var $sp1 = $('<div id="xxx-button" class="xxx-button"></div>');
        var $sp2 = $('<div id="xxx-content" class="xxx-content"></div>');
        $('#xxx-space').append($sp1);
        $('#xxx-space').append($sp2);

        var button1 = new kintoneUIComponent.Button({ text: 'キャンセル' });
        $sp1.append(button1.render());
        button1.on('click', function() {
            alert('This is my customization1');
        });

        var button2 = new kintoneUIComponent.Button({ text: '保存', type: 'submit' });
        $sp1.append(button2.render());
        button2.on('click', function() {
            alert('This is my customization2');
        });

        var $row1 = $('<div class="xp-row"></div>');
        $sp2.append($row1);
        var $fd1 = $('<div id="xp-fd1" class="xp-fd"></div>');
        $row1.append($fd1);
        var labele1 = new kintoneUIComponent.Label ({ text: 'テキスト' });
        $fd1.append(labele1.render());
        var text1 = new kintoneUIComponent.Text ({ text: 'テキスト' });
        $fd1.append(text1.render());

        var $fd2 = $('<div id="xp-fd2" class="xp-fd"></div>');
        $row1.append($fd2);
        var labele2 = new kintoneUIComponent.Label ({ text: 'チェックボックス1' });
        $fd2.append(labele2.render());
        var options = {
            items: [
                {
                    label: 'Orange',
                    value: 'Orange',
                    isDisabled: false
                },
                {
                    label: 'Banana',
                    value: 'Banana',
                    isDisabled: false
                },
                {
                    label: 'Lemon',
                    value: 'Lemon',
                    isDisabled: true
                },
            ],
            value: ['Orange']
        };
        var checkbox = new kintoneUIComponent.CheckBox (options);
        $fd2.append(checkbox.render());

        var $fd3 = $('<div id="xp-fd3" class="xp-fd"></div>');
        $row1.append($fd3);
        var labele3 = new kintoneUIComponent.Label ({ text: 'チェックボックス2' });
        $fd3.append(labele3.render());
        var checkbox2 = new kintoneUIComponent.CheckBox (options);
        $fd3.append(checkbox2.render());

        var $fd4 = $('<div id="xp-fd4" class="xp-fd"></div>');
        $row1.append($fd4);
        var labele4 = new kintoneUIComponent.Label ({ text: 'ドロップダウン1' });
        $fd4.append(labele4.render());
        var op2 = {
            items: [
                {
                    label: 'Orange',
                    value: 'Orange',
                    isDisabled: false
                },
                {
                    label: 'Banana',
                    value: 'Banana',
                    isDisabled: false
                },
                {
                    label: 'Lemon',
                    value: 'Lemon',
                    isDisabled: true
                },
                {
                    label: 'Grape',
                    value: 'Grape',
                    isDisabled: false
                },
            ],
            value: 'Orange'
        };
        var dropdown = new kintoneUIComponent.Dropdown (op2);
        $fd4.append(dropdown.render());


        var $row2 = $('<div class="xp-row"></div>');
        $sp2.append($row2);
        var $fd21 = $('<div id="xp-fd21" class="xp-fd"></div>');
        $row2.append($fd21);
        var labele21 = new kintoneUIComponent.Label ({ text: 'テキスト' });
        $fd21.append(labele21.render());
        var text21 = new kintoneUIComponent.Text ({ text: 'テキスト' });
        $fd21.append($(text21.render()).find('input').width(300).height(38));

        var $fd22 = $('<div id="xp-fd22" class="xp-fd"></div>');
        $row2.append($fd22);

        var iconAdd = new kintoneUIComponent.IconButton ({ type: 'insert' });
        $fd22.append(iconAdd.render());
        var iconRemove = new kintoneUIComponent.IconButton ({ type: 'remove' });
        $fd22.append(iconRemove.render());
        var iconClose = new kintoneUIComponent.IconButton ({ type: 'close' });
        $fd22.append(iconClose.render());

        return event;
    });
})(jQuery);

CSS は、横並びの指定などを行っています。
inline-block がいいのか、table-cell がいいのかいろいろ試す必要がありそうです。

.xxx-button > div {
    display: inline-block;
    margin: 6px;
}
.xp-row {
    margin: 6px;
    padding: 0 6px;
    border: ridge 4px aliceblue;
    display: table;
}
.xp-row > div {
    display: table-cell;
}
.xp-fd {
    padding: 6px;
}

あとがき

kintone ライクな UI を作るのは結構面倒な作業でしたが、これを使うと少し楽になりそうです。
使いこなすことができれば、プラグイン開発などに応用したいと思います。