前回の 「kintone プラグイン開発入門【Part2: 情報の隠匿方法編】」では、kintoneプラグインJavaScript APIを用いて安全に情報を隠しつつ外部APIを実行する方法を検証しました。
今回はより実践的に、kintoneとSlackをプラグインを用いて連携しつつ、情報の隠匿ができているのかどうかを検証してみたいと思います。

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

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

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

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

今回使用しているプラグインに関しては、こちらからダウンロードが可能です。

Slack を用いた検証用プラグイン

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

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

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

こちらのサイト にアクセスし、Slack APIを実行するためのアプリを作成します。

「Create an App」をクリックし、アプリの名前と使用するワークスペースを選択します。

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

次に、使用するSlack APIを選択し、APIを使用可能にしていきます。
Basic Informationからのサイドバーの「OAuth & Permissions」を選択し、「Scopes」から、今回使用するAPIメソッドを選択します。
今回は、ユーザーがメッセージを送信するAPIを使用したいため、「Send messages as user」を選択します。
選択後、「Save Changes」で使用するAPI情報を保存します。

保存後、同画面の「OAuth Tokens & Redirect URLs」の「Install App to Workspace」をクリックし、インストールの許可をすると、APIトークンが発行された画面にリダイレクトされます。

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

次にkintone側の設定をします。
まずは「 今回使用するプラグインについて」にある「Slackを用いた検証用プラグイン」というリンクから、Slackプラグインのzipファイルをダウンロードし、kintone上にプラグインをインポートしてください。

kintone アプリの作成

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

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

kintone プラグインの設定

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

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

では実際にアプリにレコードを登録して、Slackにも投稿されているかどうかを確認してみます。

このようにチャンネルを「kintone」とし、テキストを入力して登録をすると、Slackのkintoneチャンネルに投稿されます。

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

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

  $('#submit').on('click', function() {
    var apitoken = $('#apitoken').val();
    var headers = {
      'Content-Type': 'application/json',
      'Authorization': 'Bearer ' + apitoken
    };
    kintone.plugin.app.setProxyConfig('https://slack.com/api/chat.postMessage', 'POST', headers, {});
  });

  $('#cancel').on('click', function() {
    history.back();
  });

})(jQuery, kintone.$PLUGIN_ID);

これは保存ボタンをクリックした後の処理です。
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

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;
});

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

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

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

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

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