【kintone】jquery_knobを使ってダイアルのようなUIを実装する

0. 目次

1. 概要

ギークス株式会社CRUD Lab.のKUNISADAです！ jQueryを使ったcanvasベースのUIライブラリ jQuery Knobを使ってkintone上にダイアル(ノブ)のようなUIを実装してみます。

anthonyterrien.com

GitHub - aterrien/jQuery-Knob: Nice, downward compatible, touchable, jQuery dial

2. 完成イメージ

ボリュームとトーンの値をダイアルを回して変更、保存することを目標とします。

http://f.hatena.ne.jp/crud_lab/20160126184747

3. フィールド

利用するフィールドとスペースを用意します。 スペースの中にjQuery_knobを使ってUIを実装します。

フィールド名	フィールドコード	初期値	その他
(スペース)	volume_dial	-	-
(スペース)	tone_dial	-	-
ボリューム	volume	50	max 100 min 0
トーン	tone	50	max 100 min 0

4. javascript/CSSでカスタマイズ

アプリの設定の詳細設定、JavaScript/CSSでカスタマイズからCDNやライブラリを読み込む設定を行います。

kintoneでjQueryを利用する注意点についてはcybozu.com developer networkの以下のリンクが参考になります。 https://cybozudev.zendesk.com/hc/ja/articles/204695384-%E7%AC%AC12%E5%9B%9E-jQuery%E3%82%92%E5%88%A9%E7%94%A8%E3%81%97%E3%81%A6%E3%81%BF%E3%82%88%E3%81%86

jQUery_knobは以下のファイルをダウンロードして、kintoneにアップロードします。

https://github.com/aterrien/jQuery-Knob/blob/master/dist/jquery.knob.min.js

今回はdial.jsでjavascriptの実装を行なっていきます。

5. javascriptの実装

jQuery(function($){
    'use strict';

    //初期値を50に設定
    var _volume = 50,
        _tone = 50;

    //レコードの詳細、追加、編集の際にダイアルUIを実装
    kintone.events.on(['app.record.create.show',
                        'app.record.edit.show',
                        'app.record.index.edit.show',
                        'app.record.detail.show'
                        ], function (event) {

        var rec        = event.record;
        
        //UIの実装
        var keys = ['volume', 'tone'];
        for (var key in keys) {
            var mySpaceFieldButton = document.createElement('input');
                mySpaceFieldButton.id = keys[key] + '_dial';
                mySpaceFieldButton.className = keys[key] + '_dial';
                mySpaceFieldButton.setAttribute('value', rec[keys[key]]['value']);
                kintone.app.record.getSpaceElement(keys[key] + '_dial').appendChild(mySpaceFieldButton);
        };

        $(function() {
            $(".volume_dial").knob({
                'width': 100,
                'height': 100,
                'displayPrevious': true,
                'step': 10,
                'release': function(v){
                    _volume = v;
                    console.info('volume changed to' + _volume);
                }
            });
        });
        $(function() {
            $(".tone_dial").knob({
                'width': 100,
                'height': 100,
                'displayPrevious': true,
                'step': 10,
                'release': function(v){
                    _tone = v;
                    console.info('tone changed to' + _tone);
                }
            });
        });

    });


    //保存時の処理実装 
   kintone.events.on(['app.record.create.submit',
                        'app.record.edit.submit',
                        'app.record.index.edit.submit'], function(event){

        var rec = event.record;

        rec['volume']['value'] = _volume;
        rec['tone']['value'] = _tone;

        return event;
    });
});

6. まとめ

kintoneでは便利なフィールドが用意されていますが、アイデア次第でより場面に適したUIを実装することも可能です。 上記の例ではvolumeとtoneのフィールドをそのまま表示させていますが、グループで囲み「system用」や 「管理者用」として通常時畳んでおけば利用者はダイアル部のみを使って作業を進めることができます。よりユーザーエクスペリエンスを意識した機能実装を進めていきたいところです。