kintoneプラグインで秘匿情報を隠す〜実践編〜

著者名:宮倉 宗平

目次

はじめに

「kintoneプラグインで秘匿情報を隠す」シリーズではkintoneのプラグインのメリットのひとつ「秘匿情報を隠蔽できるためセキュリティが向上する」点を深掘りします。
前編の 隠蔽方法編 では、kintoneプラグインJavaScript APIを用いて安全に情報を隠しつつ外部APIを実行する方法を解説しました。
後編は、より実践的な内容としてkintoneとSlackをプラグインを用いて連携しつつ、情報の隠匿ができているのかを検証してみたいと思います。

具体的な検証内容としては、次のとおりです。

  • kintoneからSlackに投稿できること
  • 投稿の際にAPIトークンなどの重要な情報を隠したまま投稿できていること

Slackとは?

Slackに関しては Slack公式サイト (External link) を確認してください。

今回使用するプラグインについて

今回はこちらで作成した、Slackを用いた検証用プラグインを用いて検証していきます。
検証用プラグインはkintoneで登録したテキストを、指定したチャンネルに投稿できる機能を備えたプラグインです。

今回使用しているプラグインは、次のリンクで公開しています。

Slackを用いた検証用プラグイン (External link)

なお、今回用意したプラグインは、あくまで検証用のため、Slackに投稿できる必要最低限の機能のみを実装しています。

このように、「チャンネル」と「テキスト」を入力してレコードを登録すると、自動的にSlackにも投稿されます。
今回はこのプラグインを用いて、kintoneプラグインJavaScript APIを検証します。

検証準備

Slack側の準備

まず初めに、Slack APIを実行するためのAPIトークンを取得します。

Slack API: Applications | Slack (External link) にアクセスし、Slack APIを実行するためのアプリを作成します。
「Create an App」をクリックします。

次に、「From scratch」をクリックします。

続いて、アプリの名前と使用するワークスペースを選択します。
今回はApp Nameを「kintone App」に設定しました。
Slackのワークスペースに関しては、Slack APIを使用したいワークスペースを選択してください。
選択後、「Create App」をクリックすると、Basic Information画面に遷移します。

次に、使用するSlack APIを選択し、APIを使用可能にしていきます。
サイドバーの「OAuth & Permissions」を選択し、「Scopes」から、今回使用するAPIメソッドを選択します。

今回は、ユーザーがメッセージを送信するAPIを使用したいため、「User Token Scopes」で「chat:write」を選択します。

保存後、同画面の「OAuth Tokens」の「Install to <選択したワークスペース>」をクリックします。

インストールの許可をすると、APIトークンが発行された画面にリダイレクトされます。

今回発行したAPIトークンはこの後kintone上で使用するので、コピーしておいてください。
Slackでの設定はこれで完了です。

kintone側の準備

次にkintone側の設定をします。
まずは「 今回使用するプラグインについて 」にある「Slackを用いた検証用プラグイン」というリンクから、フォルダーごとダウンロードしてください。
続いて、 plugin-packer の手順を参考にパッケージングし、kintone上へプラグインをインポートしてください。

kintoneアプリの作成

kintone上でアプリを新規作成し、以下のフィールドを追加してください。

フィールド名 フィールドコード フィールドの種類
チャンネル channel 文字列(1行)
テキスト text 文字列(複数行)

今回のプラグインではフィールドコードを元にフィールドの情報を取得しているので、大文字などの間違いがないようにしてください。

kintoneプラグインの設定

次にプラグインの設定をします。
プラグインの設定画面上の、「API token」欄に、先ほど取得したSlackのトークンを入力し、保存してください。

これで設定はすべて完了しました!

実行

では実際にアプリにレコードを登録して、Slackにも投稿されているかどうかを確認してみます。
「チャンネル」には、Slack上に存在するチャンネル名を入力してください。
存在しないチャンネル名を入力した場合は、正常に投稿されないので注意してください。

レコードを保存すると、Slackに自動で投稿されていることが確認できます。

コードの検証

以上の流れから、kintoneのプラグインの設定画面上でトークンを入力することによって、kintoneとSlackを連携させることに成功しました。
では、具体的にどのようにして保存したトークンなどを受け渡しているのかを、実際のコードを見ながら確認していきます。

まずはプラグイン設定側のconfig.jsを確認してみます。

16
17
18
19
20
21
22
23
24
25
26
27
28
29
    submitButton.addEventListener('click', () => {
      const apitoken = apiTokenInput.value;
      const headers = {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${apitoken}`
      };

      kintone.plugin.app.setProxyConfig(
        'https://slack.com/api/chat.postMessage',
        'POST',
        headers,
        {}
      );
    });

これは保存ボタンをクリックした後の処理です。
kintone.plugin.app.setProxyConfig()を用いて、入力されたトークンをheader上に登録します。

今回ヘッダー上に保存したトークンの情報は、kintone.plugin.app.proxy()で外部APIを実行する際に用いられます。
外部API実行の際、次の値がすべて一致していないと、登録したトークンの情報は呼ばれないため、トークンの情報が指定したAPIの実行以外で使われることはありません。

  • アプリ
  • プラグイン
  • HTTPメソッド(今回はPOST)
  • APIのURLの前方(今回はhttps://slack.com/api/chat.postMessage

次に実際にAPIを実行している、desktop.jsを確認してみます。

 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
/*
 * SAMPLE-kintone-to-Slack-Plugin Program
 * Copyright (c) 2025 Cybozu
 *
 * Licensed under the MIT License
 * https://opensource.org/license/mit/
 */

((PLUGIN_ID) => {
  'use strict';

  const submitEvent = [
    'app.record.edit.submit',
    'app.record.create.submit',
    'app.record.index.edit.submit'
  ];
  kintone.events.on(submitEvent, (event) => {
    const URL = 'https://slack.com/api/chat.postMessage';
    const record = event.record;
    const channel = record.channel.value;
    const text = record.text.value;
    const body = {
      channel: channel,
      text: text,
      as_user: true
    };

    kintone.plugin.app.proxy(PLUGIN_ID, URL, 'POST', {}, body, (response, status, headers) => {
    }, (error) => {
      console.log(error);
    });
    return event;
  });
})(kintone.$PLUGIN_ID);

これはレコードが保存されたタイミングでSlackにリクエストを送信する処理です。
kintone.plugin.app.proxy()でSlackのAPIを実行しています。
アプリ、プラグイン、HTTPメソッド、APIのURLが一致しているため、先ほどヘッダーに登録したトークンの情報が読み込まれ、実行に成功しています。

desktop.jsのコードの内容はブラウザーからも確認できます。
しかし、コードを見ていただければ分かるように、トークンなどの重要な情報はdesktop.jsには一切記載しておらず、アプリの管理者のみが閲覧できるプラグイン設定画面でトークンを設定します。

もしこれと同様の処理をkintoneカスタマイズで行う場合、kintone.proxy()を用いて行えるのですが、次のようにリクエストヘッダーにトークンの情報を載せる必要があるため、ブラウザー上から情報が確認できてしまいます。
これでは情報を隠しつつ安全に運用できているとはいえません。

まとめ

このように、kintoneプラグインとkintoneプラグインJavaScript APIを用いれば、重要な情報を隠しつつさまざまな外部サービスと連携できます。
今回の検証ではSlackを用いましたが、その他Google各種サービスなどさまざまな外部サービスとも連携可能なので、ぜひいろいろなサービスを連携してみてください!

information

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