Kintone JavaScriptカスタマイズVol.3

#jQueryを使用したカスタマイズ
3回目となる今回は、jQueryを用いた簡単なカスタマイズを行なっていきます。
レコード一覧画面にボタンを配置し、それを押すと任意の場所に動きをつけたメッセージを表示させます。
#jQueryを使用するメリット
jQueryというライブラリを用いる事で、通常のJavascriptのコードよりも簡単に記述する事ができます。
また、HTMLタグの各属性をまとめて指定できたり、CSSのプロパティ名もそのまま使用する事ができます。
#環境と準備
JavaScriptの記述にはプラグインの「JSEdit for kintone」を使用していきます。
また今回は、jQueryを利用していくのでCybozu CDNのライブラリからjQueryのURLをコピーし使用します。
#jQueryの呼び出し方
通常の記述方法だと、以下のように記述しますが

sample.js

(function() {
    "use strict";
    //処理内容
    });;
})();

jQueryを用いる場合は、以下のように記述します。

sample.js

(function($) {
    "use strict";
    //処理内容
 });
})(jQuery);

先頭行と最終行の違いだけですね。
#カスタマイズ
準備ができて、jQueryの呼び出し方と記述方法が分かったところでカスタマイズを行なっていきます。
今回のカスタマイズ手順を確認します。

1. レコード一覧画面にボタンを配置
2. ボタンを押した際の内容を記述
3. 出現アニメーション（動き）を記述

コードの記述内容は以下です。

sample.js

(function($) {
    "use strict";
    kintone.events.on('app.record.index.show', function(event) {
        // 1.レコード一覧画面にボタンを配置
        if ($('#sample_button')[0]) {
            return;
        }
        var $sample_button = $("<button>", {
            id: 'sample_button',
            text: 'こちらを押してください！'
        }).click(function() {
            var myHeaderSpace = kintone.app.getHeaderSpaceElement();
            // 2.ボタンを押したときに表示される内容
            var $myListHeaderDiv = $("<div>", { text: '今日も一日頑張りましょう'}).css({
                "width": '100%',
                "height": '30px',
                "text-align": 'center',
                "font-family": 'ヒラギノ角ゴ Pro W3',
                "font-size": '16px',
                "font-weight": 'bold',
                "background-color": 'rgb(255, 204, 0)'
            });

            // 3.出現時のアニメーション内容
           $(myHeaderSpace).hide().html($myListHeaderDiv).fadeIn("slow");
        });

        $(kintone.app.getHeaderMenuSpaceElement()).append($sample_button);
    });
})(jQuery);

実際にアプリを確認してみると..

ボタンができています。
こちらを押してみると..

動きがわかりませんが、指定した内容で表示させる事ができました。
実際には　.fadeIn("slow")　を指定したので、フワッと表示されます。

#まとめ
簡単ではありますが、今回はjQueryを用いたKintoneカスタマイズを行いました。
このように、jQueryというライブラリを使用することで、JavaScriptの記述も容易に行う事ができ、アニメーション表示なども非常に簡単に行う事ができました。