kintone プラグイン開発入門【Part2:情報の隠匿方法編】

著者名:宮倉 宗平(サイボウズ)

目次

はじめに

前回の kintone プラグイン開発入門【Part1: メリット編】 にて、カスタマイズではなく kintone プラグインを使用するメリットを説明しました。
そこで紹介した kintone プラグインのメリットは次のとおりです。

  • JavaScript と css ファイルを一括適用できる。
  • 設定画面で設定変更できる。
  • 複数アプリへの適用やバージョンアップを一括で行える。
  • 重要な情報を隠匿できる。

最後の「重要な情報を隠匿できる」に関しては、kintone プラグインでどのようにして情報を隠匿しつつ運用できるのか、伝わりにくかった部分も多かったと思います。
そこで今回の記事では、kintone プラグインを使ってどのように情報を隠すのかを、実際にデモを行いながら解説していきたいと思います。

外部 API の実行に必要な情報をプラグインへ保存する API プラグインから外部 API を実行する API をうまく活用すれば、API トークンなどの重要な情報などを kintone サーバー上に保存して、必要な時に取得できます。

このような方におすすめ

  • kintone プラグイン開発を始めてみたい。
  • kintone プラグインのメリットをもっと詳しく知りたい。
  • kintone プラグイン JavaScript API の使い方を知りたい。

検証環境

今回の検証では、次の環境でサーバーサイドのアプリを構築します。

  • AWS EC2(Linux)
  • Node.js(Express)

リクエストのヘッダー情報が確認できる環境なら別の環境でも問題ありません(例:Apache + PHP など)。
このサーバーサイドのアプリに kintone 側からリクエストを送り、リクエストの内容を実際に確認していきながら、検証したいと思います。

検証のブラウザーには Google Chrome を使用しています。

検証の流れ

  1. プラグイン上で、 外部 API の実行に必要な情報をプラグインへ保存する API(kintone.plugin.app.setProxyConfig() で情報をヘッダーに設定します。
    プラグインの設定側で設定したヘッダーを「ヘッダー A」とします。
  2. カスタマイズ用 JavaScript ファイル上で、別の情報をヘッダーに設定します。
    カスタマイズファイル側で設定したヘッダーを「ヘッダー B」とします。
  3. プラグインから外部 API を実行する API(kintone.plugin.app.proxy() でサーバー側にリクエストを送信します。
  4. 手順 3 で送信したヘッダー情報の中で、ヘッダー B の情報は確認できるが、ヘッダー A の情報が確認できないかを確認します。
  5. サーバー側で、ヘッダー A とヘッダー B の情報を見ることができるかどうかを確認します。
  6. プラグイン側で保存した情報が隠匿されていることを確認できれば成功です。

サーバーサイドのアプリ構築

Node.js の開発環境は、AWS の EC2 のコンソール上で次のコマンドを実行して構築しました。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
# Express のアプリ雛形を生成する「express-generator」をインストール
npm install -g express-generator

# 「kintone-app」という名前で Express アプリを生成
express kintone-app

# ディレクトリ移動&パッケージのインストール
cd kintone-app && npm install

# express 起動
node ./bin/www

今回は、上記の手順で生成したアプリのうち、「./routes/index.js」のみを使用し、進めていきます。
「index.js」を以下のように編集します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
const express = require('express');
const router = express.Router();

// kintoneからのリクエストの受け取り
router.post('/api/data', (req, res, next) => {
  // ログの表示
  console.log(req.headers);
  res.send('send');
});

module.exports = router;

今回は、次のように指定してログを表示することにします。

  • URL のパス:指定の URL/api/data
  • HTTP メソッド:POST

これで、サーバーサイド側の準備は完了です。

Node.js,Express の詳細に関しては、以下の公式ドキュメントを確認してください。
Express 公式ドキュメント (External link)

kintone プラグインの開発

次に、kintone 側で、kintone プラグイン JavaScript API を用いて、上記で構築した情報を保存していきます。
今回はプラグイン設定画面で情報を保存し、kintone レコード一覧画面でサーバー側に API リクエストを送る簡単なプラグインを作成し、それを用いて実行してきます。
今回使用したサンプルプラグインは miyass/kintoneProxySamplePlugin (External link) で公開しています。

フォルダーの構成は以下のようになっています。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
kintoneProxySamplePlugin
├── config_css
│   └── 51-modern-default.css
├── config_js
│   └── config.js
├── contents
│   ├── icon.png
│   └── setting.html
├── desktops
│   └── desktop.js
└── manifest.json
kintone プラグイン設定画面

まず初めに、「setting.html」上にテキストフィールドを作成します。
テキストフィールド内に入力された情報は、 kintone.plugin.app.setProxyConfig() で保存します。
以下がサンプルコードです。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!--
 * Secure plugin configuration
 * Copyright (c) 2018 Cybozu
 *
 * Licensed under the MIT License
 * https://opensource.org/license/mit/
-->

<div>
  <div class="block">
    <label class="kintoneplugin-label">
        <span id ="container_label">プラグイン設定画面</span>
    </label><br >
    <div class="kintoneplugin-desc">プラグイン上に保存するテキストを入力</div>
    <div class="kintoneplugin-input-outer">
      <input id="inputText" class="kintoneplugin-input-text" type="text">
    </div>
    <div class="block">
      <button type="button" id="check-plugin-submit" class="kintoneplugin-button-dialog-ok">保存する</button>
      <button type="button" id="check-plugin-cancel" class="kintoneplugin-button-dialog-cancel">キャンセル</button>
    </div>
  </div>
</div>

kintone プラグイン設定用 JavaScript ファイル

次に、プラグイン設定画面用の JavaScript ファイル「config.js」を編集します。
設定画面の 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
/*
 * Secure plugin configuration
 * Copyright (c) 2018 Cybozu
 *
 * Licensed under the MIT License
 * https://opensource.org/license/mit/
 */

jQuery.noConflict();
(function($, PLUGIN_ID) {
  'use strict';

  $('#check-plugin-submit').on('click', () => {
    const URL = 'こちらにリクエスト先のURLを指定';
    // パスの指定
    const PATH = 'api/data';
    // HTMLのinputFieldのテキスト情報の取得
    const text = $('#inputText').val();
    // 保存したい情報をヘッダーに設定
    const pluginHeader = {
      'CUSTOM-REQUEST-HEADER': text
    };
    kintone.plugin.app.setProxyConfig(URL + PATH, 'POST', pluginHeader, {});
  });

  $('#check-plugin-cancel').on('click', () => {
    history.back();
  });
})(jQuery, kintone.$PLUGIN_ID);

kintone カスタマイズ用 JavaScript ファイル

次に PC 上のカスタマイズ用の JavaScript ファイル「desktop.js」を編集します。
kintone カスタマイズ用 JavaScript ファイルでは、レコード一覧画面を開いたときに kintone.plugin.app.proxy() を実行する処理を記述します。

 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
/*
 * Secure plugin customize
 * Copyright (c) 2018 Cybozu
 *
 * Licensed under the MIT License
 * https://opensource.org/license/mit/
 */

(function(PLUGIN_ID) {
  'use strict';

  kintone.events.on('app.record.index.show', (event) => {
    const URL = 'こちらにリクエスト先のURLを指定';
    // パスの指定
    const PATH = 'api/data';
    // 保存したい情報をヘッダーに設定
    const desktopHeader = {
      DESKTOP_HEADER: 'hoge'
    };
    // サーバ側にリクエスト送信
    kintone.plugin.app.proxy(PLUGIN_ID, URL + PATH, 'POST', desktopHeader, {}, (body, status, headers) => {
      console.log(status, body, headers);
    }, (error) => {
      console.log(error);
    });
    return event;
  });
})(kintone.$PLUGIN_ID);
検証用の変数の設定
14
15
16
17
    // こちらが手順2です
    const desktopHeader = {
      DESKTOP_HEADER: 'hoge'
    };

また、今回は上記のようにカスタマイズファイル上でも情報を保存して、以下の変数がコンソール上などでどのように表示されるかを確認します。

  • プラグイン上で保存した pluginHeader 変数
  • カスタマイズ環境上で保存した desktopHeader 変数
kintone プラグイン JavaScript API でリクエストを送信するときの注意点

kintone.plugin.app.proxy() でリクエストを送る場合、この API に指定した情報と kintone.plugin.app.setProxyConfig() で保存した情報のうち、次の値を一致させる必要があります。

  • アプリ
  • プラグイン
  • HTTP メソッド
  • API の URL の前方

詳細は、 保存した情報がリクエストに加わる条件 を確認してください。

検証

では実際に上記の開発環境を用いて検証していきたいと思います。

まず初めに、プラグイン設定画面で、インプットフィールドに、 kintone.plugin.app.setProxyConfig() で保存するテキストを入力します。
今回は、「kintoneProxyTest」とします。

保存した後に、アプリを更新し、レコード一覧画面に戻ると、自動的に kintone.plugin.app.proxy() が実行されます。
レコード一覧画面で開発者ツールを開き、「Network」タグ「XHR」欄にある、今回送ったリクエストのヘッダーを確認しましょう。

上図のように、カスタマイズ上で保存した変数は headers で確認できますが、プラグイン上で保存した変数は確認出来ないことが分かります。
しかし、Node.js 上のコンソールを確認してみると、プラグイン上で保存した変数も確認することできました。

まとめ

このように、以下の kintone プラグイン JavaScript API をうまく活用すれば、API トークンなどの重要な情報などを kintone サーバー上に保存して、必要な時に取得できます。

今回は、検証のためサーバーを構築しましたが、実際によく使われるパターンとしては、Slack や Google 各種サービスなどといった外部サービスとの連携がとても多いです。

Slack の API を使った連携事例は、続編の記事で公開しています。
kintone プラグイン開発入門 【Part3: 情報の隠匿方法 実践編】

カスタマイズで外部サービスとの連携すると kintone をより便利に活用できます。
しかし、アプリに適用するカスタマイズファイルで API トークンなどの秘匿情報を記載してしまうと、ブラウザーの開発者ツールからその情報を誰でも見ることができるようになってしまいます。
今回の検証で明らかになったように、kintone プラグイン上で保存した情報はブラウザーの開発者ツールからは確認できないため、情報の隠匿が可能になります。
安全、確実に運用したいという方は、ぜひプラグイン制作も検討してみてください。

information

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