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

目次

はじめに

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で動作を確認しています。