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

（著者：サイボウズ 宮倉 宗平）

Index

• はじめに
• 検証環境
• 検証
• まとめ

はじめに

 前回の「kintoneプラグイン開発入門　【Part1: メリット編】」にて、カスタマイズではなく、kintoneプラグインを使用するメリットについてお伝えしました。

kintoneプラグインのメリットは

1. JS, cssファイルを一括適用できる
2. 設定画面での設計変更
3. 複数アプリに一括適用&バージョンアップも一括
4. 重要な情報の隠匿

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

kintone.plugin.app.setProxyConfig() と kintone.plugin.app.proxy() をうまく活用すれば、API token などの重要な情報などを kintone サーバー上に保存して、必要な時に取得できます。

このような方におすすめ

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

検証環境

 今回の検証では、

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

を使用しています。 今回は上記の環境で構築しましたが、リクエストのヘッダー情報が確認できる環境であれば、別の環境でも問題ありません。
(例：Apache ＋ PHPなど)
また、検証のブラウザは今回はGoogle Chromeを使用しています。

上記の環境でサーバーサイドを構築し、こちらのサーバーにkintone側からkintoneプラグインJavaScript APIを用いてリクエストを送り、リクエストがどのように送られているのかどうかを実際に確認していきながら、検証したいと思います。

具体的な手順

手順1：プラグイン上で、kintone.plugin.app.setProxyConfig()で情報をヘッダーに設定する（ヘッダーA）
↓
手順2: カスタマイズ用JavaScriptファイル上で、別の情報をヘッダーに設定する（ヘッダーB）
↓
手順3：kintone.plugin.app.proxy()でサーバー側にリクエストを送信する。
↓
手順4：手順3で送信したヘッダー情報の中で、ヘッダーBの情報は確認できるが、ヘッダーAの情報が確認できないかを確認する。
↓
手順5：サーバー側の確認。ヘッダーA,ヘッダーBの情報を見ることができるかどうかを確認する。
↓
プラグイン側で保存した情報が隠匿されていることが確認できる！

サーバーサイド側の環境について

Node.jsの開発環境は、AWS上で以下のような手順で実行し、環境構築しました。

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

今回は、URLのパスを「指定のURL/api/data」、HTTPメソッドをPOSTに指定して、ログを表示するようにしてみます。
これで、サーバーサイド側の準備は完了です。

Node.js,Expressの詳細に関しては、こちらの公式ドキュメントをご確認ください。
Express公式ドキュメント

kintone側の環境について

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

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

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プラグインJavaScript APIのkintone.plugin.app.setProxyConfig()で保存していきます。
以下がサンプルコードです。

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

次に、プラグイン設定画面用のJavaScriptファイルである「config.js」にプラグイン上に情報を保存できるようコードを書いていきます。

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

次にPC上のカスタマイズ用のJavaScriptファイルである「desktop.js」にkintoneプラグインJavaScript APIのkintone.plugin.app.proxy()をkintoneの一覧画面を開いたときに実行するようにコードを書いていきます。

検証用の変数の設定

また、今回はこのようにカスタマイズ環境上でも情報を保存して、

• プラグイン上で保存したpluginHeader変数
• カスタマイズ環境上で保存したdesktopHeader変数

この２つの変数を用意し、これらがどのようにコンソール上などで表示されるのかどうかを見ながら検証していきたいと思います。

※注意点

実際の検証に入る前に、kintoneプラグインJavaScript APIを用いる際の注意点も少し記載しておきます。 kintoneプラグインJavaScript APIを用いてリクエストを送る際の注意点としては、外部のAPIの実行に必要な情報をプラグインに保存するにも記載されているように、 「kintone.plugin.app.setProxyConfig()」で設定した情報と、「kintone.plugin.app.proxy()」で設定した情報の中で

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

の４つの条件が全て一致している必要があります。

検証

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

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

保存した後に、アプリを更新し、レコード一覧画面に戻ると、自動的にkintone.plugin.app.proxy()を実行します。
レコード一覧画面で、Google developer consoleの「Network」の「XHR」欄にある、今回送ったリクエストのヘッダーを見てみると
(こちらが手順4です)

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

プラグイン上で保存した変数も確認することが出来ました！！

まとめ

このように、kintone.plugin.app.setProxyConfig()とkintone.plugin.app.proxy()をうまく活用すれば、API tokenなどの重要な情報などをkintoneサーバー上に保存して、必要な時に取得することができます。
今回は、検証のためサーバーを構築しましたが、実際によく使われるパターンとしては、SlackやGoogle各種サービスなどといった外部サービスとの連携がとても多いです。

一例として、SlackのAPIを使った連携事例は、こちらの続編の記事で公開しているので、よければご覧ください。

「kintoneプラグイン開発入門　【Part3: 情報の隠匿方法 実践編】」

カスタマイズでも外部サービスとの連携は可能ですが、今回の検証で明らかになったように、カスタマイズ画面上でAPI tokenなどの情報を使用してしまうと、Google Developer Consoleなどを用いれば、誰でもその情報を見ることができるようになってしまいます。 なので、安全、確実に運用したいという方は、是非プラグイン制作も検討してみてください。

このTipsは、2018年11月版 kintoneで確認したものになります。