kintoneプラグイン《カレンダーPlus》のアドオン開発のススメ

Calendar Plus JavaScript API

カレンダーPlusには Calendar Plus JavaScript API という仕組みが用意されており、カレンダーPlus本体に手を加えずとも、カレンダーPlusの標準的な動作をある程度カスタマイズすることができます。

APIとはなんぞや？という方もいらっしゃるかもしれませんが、Calendar Plus JavaScript APIでは、この記事の執筆時点で以下の9種類のイベントが提供されており、それぞれの動作や表示が行われたタイミングで別のJavaScriptプログラムを動作させることができます。

1. カレンダー画面の描画後イベント
2. イベントレコード描画時イベント
3. タイトル入力ダイアログからのイベントレコード新規保存前イベント
4. マウスドラッグによるイベントレコード更新前イベント
5. コンテキストメニューからのイベントレコード複製前イベント
6. コンテキストメニューからのイベントレコード削除前イベント
7. イベントレコードクリックによる詳細画面遷移前イベント
8. イベントレコードのマウスオーバーイベント
9. イベントレコードのマウスアウトイベント

その他、Calendar Plus JavaScript APIの詳細は下記リファレンスをご参照ください。

Calendar Plus JavaScript API リファレンス

やること

今回の記事を執筆するにあたり、Calendar Plus JavaScript APIを使った何かということで考えていましたが、今回は

• イベントレコードクリックによる詳細画面遷移前イベント
• イベントレコードのマウスオーバーイベント

を使い、カレンダーPlusの標準的な動作を変えてみたいと思います。
やることは以下の2つです。

1. イベントレコードにマウスを合わせると、そのレコードの内容の一部が吹き出しで表示されるようにする。
2. イベントレコードをクリックするとカレンダー画面上にそのレコードの詳細画面を表示する。

１．イベントレコードにマウスを合わせると、そのレコードの内容の一部が吹き出しで表示されるようにする

カレンダーPlusの標準的な動作では、イベントレコードにマウスを合わせるとHTMLのtitle属性によってツールチップが小さく表示されるだけです。そしてその内容も表示用タイトルとしてイベントレコードに表示されているものがそのまま表示されるだけです。
これを「イベントレコードのマウスオーバーイベント」とTippy.jsといういい感じのツールチップを表示するJavaScriptライブラリを使い、そのレコードの内容の一部をいい感じの吹き出しで表示されるようにしてみます。

※その他、画面表示用にjQueryを、時刻処理用にLuxonというライブラリを使用しています。

このような画面表示となります。

プログラムは以下の通りです。（一部抜粋）

    // 一覧画面表示時
    kintone.events.on(['app.record.index.show'], function(event) {
         // カレンダーPlus：イベントレコードのマウスオーバーイベント
        calendarplus.events.on(['cp.event.mouseover'], function(e) {
            let rec = e.record;
            let $elm = $(e.jsEvent.target);

            let start = rec['開始日時']['value'];
            let end = rec['終了日時']['value'];
            let title = rec['表示用タイトル']['value'] || '';
            let room = rec['会議室']['value'] || '';
            let d_start = luxon.DateTime.fromISO(start).toFormat('HH:mm');
            let d_end = luxon.DateTime.fromISO(end).toFormat('HH:mm');
            let content = d_start + '～' + d_end + '
タイトル：' + title + '
会議室：' + room;
            tippy($elm.get(0), {
                allowHTML: true,
                content: content
            });
        });

        return event;
    });

プログラムの詳細な解説は割愛しますが、まずCalendar Plus JavaScript APIのイベントハンドラーはkintone JavaScript APIの「レコード一覧画面の表示後イベント（app.record.index.show）」の中に記述する点にご注意ください。

そして「イベントレコードのマウスオーバーイベント（cp.event.mouseover）」では、そのレコードの内容（e.record）やHTML上の要素（e.jsEvent.target）が取得できますので、これらを利用して、開始時刻・終了時刻・タイトル・会議室を吹き出しに表示しています。

２．イベントレコードをクリックするとカレンダー画面上にそのレコードの詳細画面を表示する

カレンダーPlusの標準的な動作では、イベントレコードをクリックすると画面全体がそのレコードの詳細画面に遷移してしまいますが、画面遷移をさせずにカレンダー画面のままで詳細画面を表示してしまおうというものです。

このような画面表示となります。背景の薄いグレーのところをクリックすると詳細画面が消えます。

プログラムは以下の通りです。（一部抜粋）

    // 一覧画面表示時
    kintone.events.on(['app.record.index.show'], function(event) {
        $('#calendarPlus').after(
            $('<div>').prop('id', 'detail_window').css({
                'position': 'fixed',
                'width': '100%',
                'height': '100%',
                'padding-top': '40px',
                'top': '0px',
                'z-index': '100',
                'text-align': 'center',
                'background-color': 'rgba(0, 0, 0, 0.5)'
            })
        );
        $('#detail_window').hide();

        $('#detail_window').on('click', function() {
            $('#detail_window').hide();
        });

        // カレンダーPlus：イベントレコードクリックによる詳細画面遷移前イベント
        calendarplus.events.on(['cp.event.click'], function(e) {
            let rec = e.record;

            let recId = rec['$id']['value'];
            let detail_url = '/k/' + appId + '/show#record=' + recId;

            $('#detail_window').hide();
            $('#detail_window').empty();
            $('#detail_window').append(
                $('<iframe>').prop('src', detail_url).css({
                    'width': '80%',
                    'height': '80%',
                    'background-color': 'rgb(200, 200, 200)'
                })
            );
            $('#detail_window').show();

            return false;
        });

        return event;
    });

こちらもプログラムの詳細な解説は割愛しますが、一覧画面が表示された時点で、詳細画面表示用の領域を非表示状態で作成しておき、「イベントレコードクリックによる詳細画面遷移前イベント（cp.event.click）」では、該当レコードの詳細画面を予め作成しておいた領域に<iframe>で表示させています。そして大事なのが最後の return false; です。これにより通常であれば画面全体が詳細画面に遷移してしまう動作をキャンセルすることができるのです。

ちなみに、今回使用した

• イベントレコードクリックによる詳細画面遷移前イベント
• イベントレコードのマウスオーバーイベント

はサポートされていませんが、その他のいくつかのイベントはアールスリー社が提供するノーコード開発プラットフォーム「gusuku Customine」でもサポートされていますので、JavaScriptプログラムはちょっと書けないなという方でも、Calendar Plus JavaScript APIを使ったカスタマイズにチャレンジすることができます。

カレンダーPlusアドオン

kintone自体、JavaScriptカスタマイズができるように、カレンダーPlusもJavaScriptカスタマイズができるということをご覧いただきました。

ただ、kintoneにおけるJavaScriptカスタマイズでも、生のJavaScriptプログラムを各アプリに適用するよりも、プラグイン化しておいた方が、汎用性が増し、使い回しが効くのと同様に、今回のカスタマイズもプラグイン化しておいた方が良いのではないかと考えました。つまり、kintoneプラグインであるカレンダーPlusにも更にプラグインがあっても良いのではないか？と思った次第です。ということで、先のプログラムをプラグイン化してみました。プラグインという言葉だとちょっとわかりづらいので、ここではプラグインのプラグインのことをアドオンと呼ぶことにします。

一足早いクリスマスプレゼントということで、作成したアドオンをこちらに置いておきましたので、ぜひ一度動かしてみてください。割と雑に作りましたので、怪しい挙動が残っているかもしれません。（無償・PC版表示のみ・MITライセンス・無保証・サポート無し）

カレンダーPlusアドオンダウンロード

※このアイコンは、kintone（キントーン）無料アイコン配布サイト「ICONE」さんのアイコン生成機能を使って作成しました。

このアドオンはカレンダーPlusを適用しているアプリに更にプラグインとして適用すると動作します。プラグイン設定画面で「アドオンを有効にする」にチェックを入れてご利用ください。また、アプリに開始日時、終了日時、表示用タイトル、会議室というフィールドコードを持つフィールドが必要ですので、カレンダーPlusのサンプルアプリあたりを使うと素直に動作するかと思います。また、JavaScriptプログラムは難読化していませんので、ソースコードを読んで参考にしていただくのもOKです。

おわりに

今回試してみたカスタマイズは、Calendar Plus JavaScript APIを使って実現しましたが、カレンダーPlus本体に備わっていてもいい機能なんじゃないの？という声も聞こえてきそうな内容で、なんだか自分の首を絞めるような記事になってしまいました（笑）

今回の記事でお伝えしたかったのは、kintone界隈でプラグインメーカーがエコシステムを形成しているのと同様、カレンダーPlusアドオンを開発・販売するメーカーさんが出てくるということもあり得るのではないかなあということです。
カレンダーPlus有りきの純粋なカレンダーPlusアドオンではありませんが、プラグイン単体でも動作するものの、カレンダーPlusと一緒に使うとより便利になるようなプラグイン達が既に出てきています。

• 【ノベルワークス】キン助～kintone×Googleカレンダー双方向連携プラグイン～
• 【rex0220】計算式プラグイン（製品版・試用版）
• 【かりんこラボ】 日付計算プラグイン
• 【かりんこラボ】 年度記録プラグイン

もし、カレンダーPlus有りきの純粋なカレンダーPlusアドオンを開発・販売してみようと思われる方がいらっしゃいましたら、ぜひご一報いただければと思います。

最後に...

カスタマイズの世界に足を踏み入れようとしている
全ての人達にメリークリスマス♬