ワンタッチでゲストスペースを作成してみよう!

著者名:菊地 宏司

目次

はじめに

今回はアプリからワンタッチでゲストスペースを作成する JavaScript カスタマイズを紹介したいと思います。
これはテンプレート化されたスペースを、ゲストユーザ別に利用していて、それらのスペースをアプリで管理する場合に有効です。
毎回手動でスペースを作成して、スペース内にアプリを配置~ としていた手間を、レコード詳細画面に配置したボタンワンタッチで解決できます。

ではさっそく見ていきましょう。

サンプルコード

 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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
/*
 * sample program
 * Copyright (c) 2014 Cybozu
 *
 * Licensed under the MIT License
 * https://opensource.org/license/mit/
 */

(function() {
  'use strict';

  // テンプレートゲストスペースID
  const SP_TEMPLATE_ID = 2;

  function createRequestBody() {
    // レコード情報を取得
    const record = kintone.app.record.get().record;
    // ユーザ選択フィールドの取得
    const users = record['ユーザー選択'].value;

    // スペースメンバの設定
    const members = (function() {
      const array = [];
      for (const i in users) {
        if (!Object.prototype.hasOwnProperty.call(users, i)) {
          continue;
        }
        const member = {
          entity: {
            type: 'USER',
            code: users[i].code
          },
          isAdmin: true // 管理者フラグ
        };
        array.push(member);
      }
      return array;
    })(record);

    return {
      id: SP_TEMPLATE_ID,
      name: record['ゲストスペース名'].value,
      isGuest: true, // ゲストスペースフラグ
      members: members,
    };
  }

  function createGuestSpace() {
    // リクエストの作成
    const params = createRequestBody();
    // スペース作成API実行
    const url = kintone.api.url('/k/v1/template/space', true);
    return kintone.api(url, 'POST', params).then((resp) => {
      alert('スペース作成が完了しました');
    }).catch((e) => {
      alert('スペース作成時にエラーが発生しました');
    });
  }

  kintone.events.on('app.record.detail.show', (event) => {
    // 増殖バグ対策
    if (document.getElementById('menuButton') !== null) {
      return;
    }
    const menuButton = document.createElement('button');
    menuButton.id = 'menuButton';
    menuButton.innerHTML = 'ゲストスペース作成';
    menuButton.onclick = function() {
      createGuestSpace();
    };
    kintone.app.record.getHeaderMenuSpaceElement().appendChild(menuButton);
  });
})();

処理詳細

最初に、レコード詳細画面の表示時にスペース作成ボタンを表示します。

60
61
62
63
64
65
66
67
68
69
70
71
72
kintone.events.on('app.record.detail.show', (event) => {
  // 増殖バグ対策
  if (document.getElementById('menuButton') !== null) {
    return;
  }
  const menuButton = document.createElement('button');
  menuButton.id = 'menuButton';
  menuButton.innerHTML = 'ゲストスペース作成';
  menuButton.onclick = function() {
    createGuestSpace();
  };
  kintone.app.record.getHeaderMenuSpaceElement().appendChild(menuButton);
});

次にスペースボタンが押されたときのリクエスト生成処理を行います。

スペース作成 API ではいろいろな設定パラメーターが用意されています。
今回は必要最小限の 4 つのパラメーターを設定していきます。

スペース作成時のパラメーター

  • id:ベースとなるテンプレートスペースの ID
  • name:作成するスペースの名前
  • isGuest:ゲストではないスペースの場合 false、ゲストスペースの場合 true
  • members:スペースに含む正規ユーザ(必ず 1 人以上設定する必要あり)

参考: スペースを作成する

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
function createRequestBody() {
  // 開いているレコード情報を取得
  const record = kintone.app.record.get().record;
  // ユーザ選択フィールドの取得
  const users = record['ユーザー選択'].value;

  // スペースメンバの設定
  const members = (function() {
    const array = [];
    for (const i in users) {
      if (!Object.prototype.hasOwnProperty.call(users, i)) {
        continue;
      }
      const member = {
        entity: {
          type: 'USER',
          code: users[i].code
        },
        isAdmin: true // 管理者フラグ
      };
      array.push(member);
    }
    return array;
  })(record);

  return {
    id: SP_TEMPLATE_ID,
    name: record['ゲストスペース名'].value,
    isGuest: true, // ゲストスペースフラグ
    members: members,
  };
}

最後に作成したリクエストをスペース API を使って登録します。

51
52
53
54
55
56
57
// スペース作成API実行
const url = kintone.api.url('/k/v1/template/space', true);
return kintone.api(url, 'POST', params).then((resp) => {
  alert('スペース作成が完了しました');
}).catch((e) => {
  alert('スペース作成時にエラーが発生しました');
});

information

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