プラグインの設定でカスタマイズビューを作成する方法

著者名: 門屋 亮 (External link) (クローバ株式会社)

目次

はじめに

kintone の一覧ビューを取得、設定する API を利用すれば、他のドメインやアプリの一覧ビューをコピーしたり、複数の一覧ビューを一括設定したりできます。
今回はこの機能を使って、プラグインの設定画面からカスタマイズビューを作成する方法を紹介します。

利用用途

プラグインでオリジナルの画面やグラフを表示したい場面はよくあると思います。
kintone にはカスタマイズビューと呼ばれる機能があり、一覧ビューの見た目や動作を JavaScript で自由にカスタマイズできます。
下記は参考 Tips です。

カスタマイズビューは JavaScript カスタマイズを想定した機能のため、これまでプラグインには対応していませんでした。
しかし、一覧ビューの取得、設定 API を使えば、カスタマイズビューに対応した kintone プラグインを制作できます。
これにより、自由な見た目のプラグインを開発、配布できます。

以下に手順を説明します。

作成方法

プラグインのひな型を作成する

kintone プラグイン開発手順 にしたがって、manifest ファイルを作成します。

設定画面の実装

ここでは、単純な保存ボタンのみの設定画面を作成します。
保存ボタンのクリックイベントで既存の一覧情報を取得し、カスタマイズビューの設定を加えて保存します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
/*
 * sample program
 * Copyright (c) 2016 Cybozu
 *
 * Licensed under the MIT License
 * https://opensource.org/license/mit/
*/
jQuery.noConflict();

(($) => {
  'use strict';
  const $submit = $('#plugin-submit');
  const VIEW_NAME = 'カスタムビューサンプル';
  // 保存ボタンのクリックイベント
  $submit.click((e) => {
    kintone.api(kintone.api.url('/k/v1/preview/app/views', true), 'GET', {app: kintone.app.getId()}).then((resp) => {
      const req = $.extend(true, {}, resp);
      req.app = kintone.app.getId();

      // カスタムビューが存在しなければ追加
      if (!req.views[VIEW_NAME]) {
        // 先頭にする
        for (const key in req.views) {
          if (req.views.obj.hasOwnProperty) {
            req.views[key].index = Number(req.views[key].index) + 1;
          }
        }
        req.views[VIEW_NAME] = {
          type: 'CUSTOM',
          name: VIEW_NAME,
          html: '<div id=\'custom-view-container\'></div>',
          filterCond: '',
          sort: 'レコード番号 asc',
          pager: false,
          index: 0
        };
      }

      kintone.api(kintone.api.url('/k/v1/preview/app/views', true), 'PUT', req).then((resp2) => {
        // 作成したビューIDを保存する
        const viewId = resp2.views[VIEW_NAME].id;
        kintone.plugin.app.setConfig({viewId: viewId});
      });
    });
  });
})(jQuery);

一覧画面の実装

プラグインの設定で保存したビュー ID かどうかを判定して、カスタマイズビューを描画します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
/*
 * sample program
 * Copyright (c) 2016 Cybozu
 *
 * Licensed under the MIT License
 * https://opensource.org/license/mit/
*/
jQuery.noConflict();
(($, PLUGIN_ID) => {
  'use strict';

  kintone.events.on('app.record.index.show', (event) => {
    const config = kintone.plugin.app.getConfig(PLUGIN_ID);
    if (!config) {
      return false;
    }

    // プラグインで作成したカスタムビューかどうかのチェック
    if (event.viewId !== config.viewId) {
      return event;
    }

    // カスタムビューにデータをセット
    const $container = $('#custom-view-container');

    // レコード取得(ページネーション:false なので自分で取得する必要がある)
    const query = kintone.app.getQuery();
    kintone.api(kintone.api.url('/k/v1/records', true), 'GET', {
      app: kintone.app.getId(),
      query: query
    }).then((resp) => {
      for (let i = 0; i < resp.records.length; i++) {
        const record = resp.records[i];
        $container.append($('<div></div>').text(record['文字列__1行_'].value));
      }
    });
    return event;
  });
})(jQuery, kintone.$PLUGIN_ID);

動作の確認

プラグインの設定保存ボタンをクリックすると、カスタマイズビューが作成されています。

保存ボタンをクリックすると、カスタマイズビューが作成されています。

一覧画面を開くと、プラグインで実装されたカスタマイズビューが表示されます。

おわりに

いかがでしたでしょうか。
カスタマイズビューを使ったガントチャートプラグインやオセロプラグインなど、夢が膨らみますね!

information

この Tips は、2015 年 7 月版 kintone で動作を確認しています。