まえがき

　本書を手に取ってくださり、ありがとうございます。本書は、サイボウズ株式会社が提供しているクラウドサービス「kintone」のプラグイン開発をテーマにした書籍です。

　kintoneは、ドラッグアンドドロップの操作でデータベースを作成することで、自社の業務に合わせたシステムを構築できるサービスです。このkintoneには、JavaScriptやCSSを使用してアプリの動作や画面をカスタマイズし、独自の機能を追加できる仕組みがあります。kintoneでは、基本機能と呼ばれるデータベースやワークフローだけでも業務システムを構築できますが、カスタマイズすることでシステムの機能をより柔軟に拡張できます。本書の題材である「プラグイン」は、カスタマイズをより手軽に導入できるようにパッケージ化し、kintoneに追加できる仕組みです。

本書の対象読者

　本書は次の人に向けて書かれています。

　・kintoneカスタマイズとkintoneプラグインの違いを知りたい人

　・kintoneプラグインを作ってみたい人

　・kintoneプラグイン開発のためのツールの使い方を知りたい人

本書の対象でない読者

　次の人には、本書の内容は響きません。

　・kintoneが何か知らない人

　・JavaScriptでのコーディング経験がない人

本書のゴール

　本書を読み終わると、次のことが理解できる状態になっています。

　・kintone JavaScript APIを使ったkintone JavaScriptカスタマイズの基本

　・kintoneプラグインの特長やメリット、JavaScriptカスタマイズとの違い

　・プラグイン作成に必要なファイルとその構成、プラグインの作成手順

　・プラグインの設定画面の作り方と、設定画面で保存した情報をカスタマイズで利用する方法

　・別のサービスと連携するプラグインを作成する際に必要な、セキュアな情報を取り扱う設定画面の作り方

　・プラグイン開発を効率化するためのツールの使い方

本書の構成

　本書では、ハンズオン形式でkintoneプラグインの作成方法を解説しています。プラグインの作成に必要な知識を、実際に手を動かして学べるように構成しています。

　第1章では、kintoneプラグインとは何か、kintone JavaScriptカスタマイズとの違いについて説明します。第2章では、よくあるカスタマイズ例を通して、kintone JavaScriptカスタマイズの基本を解説します。第3章から第7章までは、ステップバイステップでプラグインの作り方を説明します。これらの章ではプラグインのパッケージング方法や設定画面の作り方、プラグインで機密情報を扱う方法、kintoneらしいUIを作るためのライブラリを扱います。第8章では、プラグイン開発を効率化できる便利なツールを紹介します。

　本書に掲載しているハンズオンのソースコードの多くは、差分形式で記載しています。先頭に+が付いている行は追記する行、-が付いている行は削除する行を表します（リスト1）。何もついていない行は変更しない行です。

リスト1: 差分形式の読み方

変更しない行
+ 追記する行
- 削除する行
変更しない行

　なお、各セクションの最後には、そのセクションで作成する最終的なソースコードを掲載しています。

用語の定義

kintone JavaScriptカスタマイズ

個々のkintoneアプリにJavaScriptで書かれたコードやCSSを適用して、kintoneアプリの動作や見た目を変更すること。本書では「JavaScriptカスタマイズ」と記載する。

kintoneプラグイン

kintoneカスタマイズのためのJavaScriptやCSSファイルをひとつのパックにしたファイル、またはそのファイルでkintoneアプリを機能拡張できる仕組み。本書では「プラグイン」と記載する。

免責事項

　本書に記載されている会社名、製品名などは、一般に各社の登録商標または商標、商品名です。会社名、製品名については、本文中では©、®、™マークなどは表示していません。

　本書ではできるだけ正確を期すように努めていますが、著者が内容を保証するものではありません。本書の記載内容に基づいた開発、制作、運用、および読者が被った損害について、著者および関係者はいかなる責任も負いません。

第1章　kintone JavaScriptカスタマイズとプラグイン

　本章では、kintoneカスタマイズの概要や、kintoneプラグインの特長とメリット、プラグインとJavaScriptカスタマイズとの違いを学びます。

1.1　JavaScriptカスタマイズとは

　JavaScriptカスタマイズとは、kintoneアプリにJavaScriptで書かれたコードやCSSを適用することで、アプリの動作や表示を制御するといった機能を追加できる仕組みです。kintoneは基本機能だけでも日々の業務に合わせたシステムを構築できますが、カスタマイズするとkintoneをもっと便利に使いやすくできます。

　JavaScriptカスタマイズの例をいくつか挙げます。

　・特定の条件のときにフィールドを非表示にしたり、入力不可にしたりする

　・基幹システムからデータを取得して、kintoneのフィールドに自動で入力する

　・フィールドに入力された値の妥当性をチェックする

　・フィールドに入力された値に応じてフィールドの背景色を変更する

　kintoneのカスタマイズでは、ユーザーが「どんな操作をしたとき」に「どんな処理を実行するか」をJavaScriptで記述します。たとえば、「レコード追加画面を開いたとき」に「特定の条件を満たすフィールドを入力不可にする」といった処理です。このような処理を実現するために、さまざまなkintone JavaScript APIが提供されています。kintoneでは、kintone JavaScript APIを使って、ユーザーの操作に合わせた処理を記述したJavaScriptファイルをkintoneアプリに適用することで、カスタマイズを適用できます。

　JavaScriptカスタマイズの基本は、第2章で説明します。公式ドキュメントサイトのcybozu developer network（https://cybozu.dev/）にも、JavaScriptカスタマイズの解説やカスタマイズ例の記事があります。cybozu developer networkには、kintoneカスタマイズを始める人向けのチュートリアル「はじめようkintone API」¹もあります。JavaScriptカスタマイズをより詳細に知りたい方は、チュートリアルを参考にしてください。

1.2　kintoneプラグイン

　プラグインは、カスタマイズのためのJavaScriptファイルやCSSファイルをひとつのパッケージにしたファイル、またはそのファイルでkintoneアプリを機能拡張できる仕組みです。JavaScriptカスタマイズでは、JavaScriptファイルやCSSファイルをそれぞれのアプリにアップロードして適用する必要がありますが、プラグインはkintoneにインストールし、プラグインを利用するアプリに追加することで利用できます。JavaScriptカスタマイズもプラグインも、JavaScriptやCSSを使ってkintoneを機能拡張するための仕組みといった点は同じですが、プラグインは複数のアプリで同じ機能を実現したい場合に有効です。

1.3　JavaScriptカスタマイズとプラグインの違い

　JavaScriptカスタマイズとプラグインの違いを、マンションの部屋に設置する家具でたとえてみます。マンションを購入する際、購入者は部屋で暮らす人に合わせてより快適な住居空間にアレンジします。部屋に設置する家具もそのひとつです。

JavaScriptカスタマイズ = 造作家具

造作家具は、オーダーメイドで設計、製作された家具のことです。部屋の壁や天井、床のサイズや色に合わせて作られるため、自分の好みや空間に合わせたデザインが可能です。カスタマイズも造作家具と同じで、部屋、つまりkintoneアプリやそのアプリで行う業務に合わせて処理をオーダーメイドします。

プラグイン = 既製品の家具

プラグインはインテリアショップで売っている既製品の家具にたとえることができます。既製品の家具は造作家具ほど部屋のサイズや色にぴったりサイズではありませんが、購入して設置するだけですぐに使えます。また、「ほかの部屋に同じ家具を置きたい」や「引越し先でも使いたい」を簡単に実現できます。kintoneプラグインも同様で、JavaScriptカスタマイズのようなアプリに合わせた細かい調整ができないこともありますが、インストールしたプラグインをアプリに追加するだけで利用できるため、プラグインを複数のアプリで使うことができます。

1.4　プラグインのメリット

　JavaScriptカスタマイズに比べると、プラグインにはたくさんのメリットがあります。

1.4.1　メリット：利用者の目線

簡単に複数のアプリへ同じ機能を追加できる

　前述のとおり、プラグインの最大のメリットは複数のアプリに同じ機能を追加できることです。たとえば、「郵便番号がハイフンありかどうかをチェックする」といった処理をいくつかのアプリで行いたいとき、そういった機能を提供するプラグインをインストールすることで複数のアプリで利用できます。

kintoneのシステム管理権限なしに利用できる

　JavaScriptカスタマイズをアプリに適用するには、kintoneのシステム管理者の権限が必要です。一般的に、情報システム部門に所属する人がシステム管理者を担当することが多く、kintoneアプリを作って運用する現場担当者はJavaScriptカスタマイズを自由に適用できません。

　プラグインの場合、一度プラグインをkintoneにインストールしてしまえば、アプリの管理者権限だけでアプリに自由に追加して利用できます。現場レベルでどのプラグインを使うのか、どう設定するかを自由に決めることができます。

1.4.2　メリット：開発者の目線

アプリによって微妙に異なる値が設定画面から指定可能になる

　アプリによって微妙に異なる値の代表例として、フィールドコードが挙げられます。kintoneでフィールドに対してカスタマイズする際は、適用先のフィールドのフィールドコードを指定します。JavaScriptカスタマイズの場合は、アプリのフィールドコードに合わせてソースコードを書き換える必要があります。

　プラグインの場合はプラグインの設定画面で適用先のフィールドを設定できるように実装すると、あとはプラグインの利用者であるアプリの管理者が設定画面で設定するだけで、適用先のフィールドを変更できます。

　また、アプリに合わせたソースコードの書き換えも面倒ですが、アプリごとに微妙に違ったソースコードのファイルを管理しておくのも手間がかかります。プラグインであれば、ひとつのプラグインに関するファイルを管理するだけで済みます。

改修時はプラグインのファイルを直すだけでいい

　不具合や法改正に対する対応など、ソースコードを修正して適用し直さなければならない状況はよくあります。JavaScriptカスタマイズだと、アプリに適用しているJavaScriptファイルをひとつずつすべて修正してアップロードし直さなければなりません。どのアプリにどんな処理のカスタマイズを適用しているかは、ひとつずつアプリを開いてソースコードを確認するまでわかりません。

　プラグインであれば、プラグインのソースコードを変更しkintoneに再インストールするだけで、すべてのアプリに修正を反映できます。どのアプリがプラグインを利用しているかも、プラグインの一覧画面で確認できます。

プロキシサーバーを自分で用意することなくAPIトークンなどの秘匿情報を隠すことができる

　基幹システムのような別のサービスとkintoneをデータ連携するユースケースは、よくあります。別サービスと連携するユースケースをカスタマイズで実現する場合、たとえば「kintoneでレコードを登録したら、ほかのWebサービスにもデータを登録する」といったシナリオで実現することがあります。しかし、これをJavaScriptカスタマイズで安易に実現しようとするのは危険です。

　JavaScriptカスタマイズで適用したソースコードは、Webブラウザーの開発者ツールで確認できます。つまり、kintoneアプリにアクセスできれば、誰でもソースコードを確認できます。別のサービスと連携する際には、多くの場合APIトークンといった連携するサービスの認証情報が必要です。JavaScriptカスタマイズで適用するソースコードにこの認証情報が書かれていると、開発者ツールを覗くだけで認証情報が見えてしまいます（図1.1）。

図1.1: JavaScriptカスタマイズのソースコードは開発者ツールで見ることができる

　この問題は、ソースコードを難読化しても解決できません。認証情報がどこに書かれているかの特定がしづらくなるだけで、本質は変わらないからです。また、開発者ツールのネットワークタブでリクエストヘッダーやリクエストボディを覗けば、簡単に認証情報を確認できます。cybozu developer networkの「セキュアコーディングガイドライン」²にも、「JavaScriptカスタマイズとして適用するファイルに認証情報や認可情報といった秘匿情報を記載してはいけない」と書かれています。

　そのため、JavaScriptカスタマイズで秘匿情報を扱う場合には一工夫が必要です。その工夫のひとつに、別のサービスのAPIを実行するためのサーバーを別途用意しておくという解決手段があります。この方法では、JavaScriptカスタマイズでは用意したサーバーへリクエストを送信し、サーバーに置かれたブログラムが別サービスとやりとりします（図1.2）。秘匿情報はサーバーに保存されるため、サーバーの管理者以外に秘匿情報を盗み見ることはできません。しかし、自分でサーバーを用意する必要があるほか、サーバーで動かす、別サービスのAPIを実行するためのプログラムも別途必要です。

　一方でプラグインには、プラグインを適用したアプリの利用者に秘匿情報を隠しながら、別サービスのAPIを実行できる専用のJavaScript APIが用意されています。まず、秘匿情報を保存するためのkintone JavaScript APIを使って秘匿情報を保存すると、kintoneが用意したプロキシサーバー上に秘匿情報が保存されます（図1.3）。

図1.3: kintoneが用意したプロキシサーバー上に秘匿情報が保存されるイメージ

　プラグインのファイルの中で、別サービスのAPIを実行するJavaScript APIを使うと、このプロキシサーバー上で、保存した秘匿情報がリクエストに追加されて実行されます（図1.4）。

図1.4: プラグイン専用のJavaScript APIを使って別サービスのAPIを実行するイメージ

　そのため、自分で別サービスのAPIを実行するためのサーバーを用意する必要がありません。また、秘匿情報を保存できるAPIは、アプリの管理者だけがアクセスできるプラグインの設定画面のみで実行できるため、アプリの利用者に秘匿情報が見えてしまう問題を防げます。

kintone APIを利用した開発を行う人向けのkintone環境

　開発したkintoneカスタマイズやプラグインをデバッグする場合、kintoneに適用しての動作確認が必要です。しかし、実装方法によってはkintoneに負荷をかけたり、最悪の場合はデータを消失したりすることもありえます。開発したカスタマイズやプラグインの動作検証を業務で使用しているkintoneで行うことは、業務に支障を与えることもありえるため、お勧めできません。そのため、サイボウズはカスタマイズ開発を目的に利用できる、開発者向けのkintone環境³を提供しています。この環境は、kintoneのスタンダードコースとほぼ同等の機能を持つkintone環境で、1年間無償で利用できます。

1.5　まとめ

　本章では、kintoneのJavaScriptカスタマイズとプラグインの違いや、プラグインのメリットを学びました。kintoneプラグインはJavaScriptカスタマイズをパッケージ化した機能で、プラグインを利用することでkintoneを手軽に機能拡張できます。利用者の目線のメリットには、プラグインを複数のアプリに簡単に追加できることや、kintoneシステム管理権限なしに利用できることが挙げられます。開発者の目線のメリットには、アプリごとに異なる値を設定可能にすることで改修時の手間を軽減できるほか、プロキシサーバーを自分で用意することなくAPIトークンなどの秘匿情報を隠して、Web APIを実行できることがあります。

目次