BackOffice Tech Hack！

こんにちは、管理課の田村です。普段はバックオフィス業務を行っています。今回はアドベントカレンダーの企画で、TECH blogに初参加です。

導入
kintone テック
kintone テック改
最後に

導入

センスタイムジャパンの管理課とはどんな役割？というところから少し話をしたいと思います。オフィスの管理、契約書関連作業、備品発注、給与計算、労務管理、採用等を行う所謂「間接部門」にあたります。

「あれ？バックオフィス業務なのにテック？技術あまり関係ないんじゃ…？」と思われますよね？一般的にはバックオフィス業務はアナログに流れがちなので、テックの対極にあるような部署ですが、アナログ作業が多いからこそ、テックの力で改善活動を行うのに適している部署とも言えます。ちょっとしたエクセル作業、メール作業でも VBA （Visual Basic for Applications）や GAS （Google Apps Script）などを使うことによって、格段に手間が減るなどの効率化をすることができます。今流行りの DX （Digital transformation）ですね！

またセンスタイムジャパンではサイボウズ株式会社さんの kintone を導入しており、社内のワークフローは kintone アプリで運用しています。kintone には JavaScript　や　CSS　でカスタマイズできるライセンスがあり、ローコードでの開発が可能です。ノーコードで作成できる部分も多いので、普段プログラムなんてしないというバックオフィスの方にはおすすめです。

センスタイムジャパンでは、もう一機能欲しいな！という、社員のリクエストに応えるため JavaScript を用いたローコード開発を行ってます。開発担当は私です。（勿論、給与計算、発注、各種手続きなどの一般的なバックオフィスの作業も行っていますよ！！）

今回はそんな kintone で実装した機能の一部をお披露目させていただきたいと思います。

kintone テック

ちょっとした注意書きってあると嬉しいですよね。普段はそんなに気にならないけど、ふとした時に確認できるイケてるポップアップ表示があれば、デザインも崩れないし最高ですよね。

クリスマス会の配役アプリを例に、注意書きを kintone 標準のラベル機能を使って配置してみました。

注意書きはバッチリ目に付きますがスタイリッシュ感がなんとなく足りません！！
また今回はフィールド数が少ないので良いですが、フィールド数が多い場合、それぞれに注意書きをつけると、ラベルだらけになってしまいます。

そこでポップアップの機能を追加してみることにしました。
前準備として、jQuery・Tippy.js・Font Awesomeを kintone にインポートします。

その上で、下記のようなソースコードを登録してみると…
※ DOM操作を行っておりますので、kintone のバージョンアップ時には利用できなくなる可能性があります

jQuery.noConflict();
(function($) {
    "use strict";

    kintone.events.on(["app.record.create.show", "app.record.edit.show"], function (event) {
        //ポップアップに表示するメッセージ
        const message = `サンタ役の人は文末には「〜じゃ」とつけて、メッセージを書いてください。<br>
        トナカイ役の人は英語でメッセージを記載してください。<br>
        プレゼント役の人は喋りませんので空白で問題ありません。`;
        //Font Awesomeの設定
        const myIconField = document.createElement("icon");
        myIconField.className = "fa fa-question-circle";
        tippy(myIconField, {
            arrow: true,
             content: message
        });
        //label-xxxxxxxのxxxxxxx部分は、Google Chromeのディベロッパーツール セレクトモードなどでフィールドタイトルをクリックすると取得可能
        $(".label-xxxxxxx").append(myIconField);
        return event;
    });

})(jQuery);

ちょっとだけスタイリッシュになりましたが、まだなんとなくもっさり感が否めません。
ポップアップの内容が複数行に分かれてしまっているし、サンタ役の人にはトナカイ役やプレゼント役の注意書きは不要ですよね。

kintone テック改

前述のコードを下記のように調整してみました。
※ DOM操作を行っておりますので、kintone のバージョンアップ時には利用できなくなる可能性があります

jQuery.noConflict();
(function($) {
    "use strict";

    kintone.events.on(["app.record.create.show", "app.record.edit.show", "app.record.create.change.配役", "app.record.edit.change.配役"], function (event) {
        //ポップアップに表示するメッセージ
        const castMessages = {
            サンタ: "サンタ役：文末には「〜じゃ」とつけて、メッセージを書いてください",
            トナカイ: "トナカイ役：英語でメッセージを記載してください ",
            プレゼント: "プレゼント役：喋りませんので空白で問題ありません。"
        };
        const cast = event.record["配役"].value;
        const message = castMessages[cast] || "";
        //Font Awesomeの設定
        const myIconField = document.createElement("icon");
        myIconField.className = "fa fa-question-circle";
        tippy(myIconField, {
            arrow: true,
            content: message
        });
        //label-xxxxxxxのxxxxxxx部分は、Google Chromeのディベロッパーツール セレクトモードなどでフィールドタイトルをクリックすると取得可能
        $(".label-xxxxxxx").children(".fa-question-circle").remove();  //増殖バグを封じる
        $(".label-xxxxxxx").append(tips);
        return event;
    });

})(jQuery);