スペースのスレッドにアプリの集計データを投稿する

目次

はじめに

2016 年 8 月のアップデート により追加される新機能「 スペースのスレッドにコメントを投稿する」を使った Tips を紹介します。

追加される REST API の概要

この新機能のために追加される REST API は、リクエストボディでスペース ID とスレッド ID を指定することで、スレッドにコメントを投稿できるというものです。
投稿にはユーザーや組織/グループへのメンション、画像(ファイルキーによる指定)も含めることができます。

指定できるパラメーターの詳細等は、 REST API の説明ページ を参照してください。

今回のシナリオのポイント

カンの鋭い方は機能名からピンと来たかもしれませんが、この REST API でできる HTTP メソッドは現状 POST のみです。

そこで、今回はこの API で実現できる、スレッドへの一方通行的な活用例を考えてみました。
具体的には、アプリ内のボタンを押すとアプリのデータを取得そして集計してスレッドに投稿するというものです。
百聞は一見にしかずということで、次の完成イメージを確認してください。

完成イメージ

まずはアプリ側です。

一覧画面のヘッダーメニュースペースにある「本日の出来高をスレッドに投稿する!」ボタンを押してみましょう。

(注:ダミーデータのため、実際のサイボウズへのお問い合わせ内容ではありません)

のちほど、スレッド側の画面を確認してみます。

最新投稿で、アプリのレコード件数を集計したデータが投稿されています。

下準備

スレッドとアプリ連携の準備として、必要な手順はこちらです。

  1. kintone のポータル画面から、適当なスペースを作成します。
    スペースの ID を控えておきます。
  2. スペースから適当なスレッドを作成します。
    スレッドの ID を控えておきます。
  3. スペースからアプリを作成します。
    今回はアプリストアの「サポート FAQ」を使いました。
  4. アプリにレコードを登録します。

スペース ID とスレッド ID については、kintone スレッドをブラウザーで閲覧した際の URL で確認できます。
URL が https://SUBDOMAIN.cybozu.com/k/#/space/4/thread/5 の場合、スペース ID とスレッド ID は次のとおりです。

  • スペース ID:4
  • スレッド ID:5

アプリ側の作業では、今回はレコードの件数をカウントするだけなので、フィールドを自由に設定して OK です。
また、今回の Tips では、レコード件数の作成日時を見て本日分と今月分をカウントするため、できれば作成日時が 2 日間以上にまたがるようなレコードを複数登録しましょう。

ちなみに、今回は投稿ボタンを押した後の確認画面を Cybozu CDN にある SweetAlert を利用して実装したため、「アプリの設定」画面で CDN の URL を指定するという手順も必要です。
cybozu developer network の以下の記事を参考にしてやってみましたので、カッコいい確認画面にしたい方は合わせて確認してください!
参考: SweetAlert を使って、kintone でメッセージをスタイリッシュに表示させよう!

サンプルプログラムと解説

サンプルプログラム(JavaScript)

サンプルプログラムの概要は以下のとおりです。

  1. ボタン作成
  2. ボタンクリック時の処理を以下ステップ 3 ~ 5 に記述
  3. 今月作成したすべてのレコード情報を REST API で取得
  4. 上記レコードからさらに本日作成分を JavaScript でカウントして変数に代入
  5. 3, 4 の内容をスレッドに投稿

プログラムの全体はこちらです。

 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
74
75
76
77
78
79
80
81
82
83
84
85
/*
 * sample program
 * Copyright (c) 2016 Cybozu
 *
 * Licensed under the MIT License
 * https://opensource.org/license/mit/
 */

(function() {
  'use strict';
  kintone.events.on('app.record.index.show', (event) => {
    if (document.getElementById('my_index_button') !== null) {
      return;
    }
    // ボタンを作成
    const myIndexButton = document.createElement('button');
    myIndexButton.id = 'my_index_button';
    myIndexButton.innerHTML = '本日の出来高をスレッドに投稿する!';
    // ボタンクリック時の処理
    myIndexButton.onclick = function() {
      //  SweetAlertでの確認画面
      swal({
        title: '投稿確認',
        text: '出来高を投稿しますがよろしいですか?',
        type: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#DD6B55',
        confirmButtonText: 'OK',
        cancelButtonText: 'キャンセル',
        closeOnConfirm: false,
        closeOnCancel: false
      },
      (isConfirm) => {
        if (isConfirm) {
          const d = new Date();
          const month = d.getUTCMonth() + 1;
          const hour = d.getUTCHours() + 9;
          const min = d.getUTCMinutes();
          // 今月作成したすべてのレコード情報を取得
          const params = {
            app: 13565,
            query: '作成日時 = THIS_MONTH()', // 今月分を指定
            fields: ['$id', '作成日時'],
            totalCount: true // 今月分件数をカウント
          };
          kintone.api(kintone.api.url('/k/v1/records', true), 'GET', params, (resp) => {
            const monthCount = resp.totalCount;
            // 本日分件数をカウント
            const today = new Date();
            const todayUTC = today.getUTCDate();
            let todayCount = 0;
            for (let i = 0; i < resp.records.length; i++) {
              if (new Date(resp.records[i]['作成日時'].value).getUTCDate() === todayUTC) {
                todayCount++;
              }
            }
            // スレッドに投稿
            const body = {
              space: 524,
              thread: 1044,
              comment: {
                text: '本日 ' + month + '月' + todayUTC + '日 ' + hour + '時' + min +
                    '分 時点のお問い合わせ件数実績をご報告します。\n本日の新規受付: ' + todayCount +
                    ' 件\n今月の累計件数: ' + monthCount + ' 件 です。',
                mentions: [
                  {
                    code: 'カスタマー本部_9tkO30',
                    type: 'ORGANIZATION'
                  }
                ]
              }
            };
            kintone.api(kintone.api.url('/k/v1/space/thread/comment', true), 'POST', body, (res) => {
              swal('投稿済み', 'スレッドに投稿されました', 'success');
            }, (error) => {
            });
          });
        } else {
          swal('キャンセル済み', 'キャンセルされました', 'error');
        }
      });
    };
    kintone.app.getHeaderMenuSpaceElement().appendChild(myIndexButton);
  });
})();

新 API を使用している箇所

ここで、今回の新機能の部分にクローズアップしてみます。

57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
// スレッドに投稿
const body = {
  space: 524,
  thread: 1044,
  comment: {
    text: '本日 ' + month + '月' + todayUTC + '日 ' + hour + '時' + min +
        '分 時点のお問い合わせ件数実績をご報告します。\n本日の新規受付: ' + todayCount +
        ' 件\n今月の累計件数: ' + monthCount + ' 件 です。',
    mentions: [
      {
        code: 'カスタマー本部_9tkO30',
        type: 'ORGANIZATION'
      }
    ]
  }
};
kintone.api(kintone.api.url('/k/v1/space/thread/comment', true), 'POST', body, (res) => {
  swal('投稿済み', 'スレッドに投稿されました', 'success');
}, (error) => {
});

上のようにスペース ID とスレッド ID を指定して POST します。
メンションに、組織コードとタイプを指定します。

その他のポイント

取得可能レコード件数について
39
40
41
42
43
44
45
46
// 今月作成したすべてのレコード情報を取得
const params = {
  'app': 13565,
  "query": "作成日時 = THIS_MONTH() limit 500", // 今月分を指定
  "fields": ["$id", "作成日時"],
  "totalCount": true // 今月分件数をカウント
};
kintone.api(kintone.api.url('/k/v1/records', true), 'GET', params, function(resp) {

REST API の query パラメーターで、何も指定しない場合、取得できるレコード件数の上限は 100 件です。
limit オプションの指定で上限を拡大できますが、指定可能な最大値は 500 のため、このサンプルプログラムで取得できる上限は 500 件です。
REST API の詳細は 複数のレコードを取得する を参照してください。

totalCount の使用

REST API のリクエストパラメーター totalCounttrue で指定することで、レコード件数を簡単にカウントできます。
こちらも詳細は 複数のレコードを取得する を参照してください。

本日作成件数の取得方法(例)
48
49
50
51
52
53
54
55
56
// 本日分件数をカウント
const today = new Date();
const todayUTC = today.getUTCDate();
let todayCount = 0;
for (let i = 0; i < resp.records.length; i++) {
  if (new Date(resp.records[i]['作成日時'].value).getUTCDate() === todayUTC) {
    todayCount++;
  }
}

totalCount で今月作成件数はカウントできますが、今回はさらに本日分のカウントも取得したかったため、JavaScript で上のような for 文でのカウントアップにより取得しました。

使用した API

終わりに

新しく追加された REST API の活用方法を考えて紹介しました。
アプリとスレッドが連携することで、kintone のコミュニケーションツールとしての使い方の幅がさらに広がりそうですね!

information

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