kintoneのデータをREST API連携で使用する、「ActiveReportsJS」の活用術

JavaScript帳票ライブラリ「ActiveReportsJS」の活用事例

　グレープシティが提供する「ActiveReportsJS」は、サーバサイドの実装を必要とせずにWebブラウザのみで帳票を出力することのできるJavaScriptライブラリです。本記事では、サイボウズ株式会社の提供する「kintone」のデータを、ActiveReportsJSを使って帳票形式で表示する事例を紹介します。最初に、kintoneのREST APIの利用に必要な登録や設定を行い、REST APIの動作を検証します。そして、ActiveReportsJSで作成した帳票からAPIを呼び出すための設定とファイル構成について説明していきます。

必要な環境

　本記事のサンプルコードは、以下の環境で動作を確認しています。

• macOS Ventura
• ActiveReportsJS（3.1.1）
• Node.js（18.12.1）
• Visual Studio Code 1.74（Live Server 5.7.9）

対象読者

• Webページに帳票出力機能を実装したい方
• バックエンド開発よりフロントエンド開発が得意な方
• 外部システムからkintoneのREST APIを使用する方法が知りたい方

kintoneの環境準備

　kintoneは、サイボウズ株式会社（以降、Cybozu）の提供する業務システムのためのWebプラットフォームです。個々の業務システムは「アプリ」と呼ばれ、データベースとコミュニケーションツールで構成されます。これにより、データを蓄積、検索するだけでなく、「いいね」やコメントを付与したりすることができます。本記事では、アプリの一つである「顧客リスト」に蓄積されているデータ（会社名や担当者名など）を、帳票形式でブラウザ画面に表示してみます。

　グレープシティのJavaScriptライブラリ「ActiveReportsJS」で帳票を表示するにあたり、データを取得するkintoneの環境を準備します。Cybozuでは、開発者向けに無料で使えるkintoneの環境を提供しており、いくつかの手続きを踏むことによって利用することができます。

　なお、本記事ではコードエディタと実行環境としてVisual Studio Code（以降、VSCode）とその拡張機能「Live Server」を使うので、あらかじめインストールを済ませておいてください。

cybozu developer networkに登録する

　まずはcybozu developer networkに登録します。「cybozu developer network」から、以下の手順でcybozu developer networkにサインアップします。

　1. ［開発環境を取得］をクリック（図1）

図1　「cybozu developer network」ページ

　2. 「kintone 開発者ライセンス（開発環境）」ページで右上の［サインイン］をクリック

　3. 「cybozu developer networkにサインイン」ページで、［アカウント登録］をクリック（図2）

図2　「cybozu developer networkにサインイン」ページ

　4. 「cybozu developer networkにアカウント登録」ページで、名前とメールアドレスを入力して［アカウント登録］をクリック（図3）

図3　「cybozu developer networkにアカウント登録」ページ

　5. 指定メールアドレスに到着するメールにあるリンクをクリック

　6. パスワードを指定してログイン

開発者ライセンスに申し込む

　cybozu developer networkに登録すると、開発専用のアプリ環境が利用できるようになります。この環境では、開発用途に限定したアプリが利用可能で、サンプルデータを自由にインストールして検証作業に活用することができます。ただし、Cybozuのサービスの中ではkintoneのみが利用可能、実稼働環境としては利用できない、ユーザー数は5個まで、ディスク容量は25GBまで、1年間の利用であるなどの制限があります。同じく「cybozu developer network」から、以下の手順で開発者ライセンスを申し込みます。

　1. ［開発環境を取得］をクリック

　2. 「kintone 開発者ライセンス（開発環境）」ページでサインインする

　3. 「kintone 開発者ライセンス（開発環境）」ページで、登録した名前が右上に表示されていることを確認して［開発者ライセンスを申し込む］をクリック（［利用規約を確認する］をクリックして規約を読んでおく）（図4）

図4　「kintone 開発者ライセンス（開発環境）」ページ

　4. 「kintone 開発者ライセンス 申込フォーム」ページで、フォームに必要事項を記入して［申し込む］をクリック（図5）

図5　「kintone 開発者ライセンス 申込フォーム」ページ

　5. 利用方法などが記載されたメールが到着すれば利用可能

サンプルアプリを追加する

　開発環境を取得できたら、メールに記載されている情報を使ってサンプルアプリを追加します。サンプルアプリにはサンプルデータを含めることができるので、ただちにデータが利用可能になります。ここでは「顧客リスト」アプリを追加することにします。サンプルアプリは以下のように追加します。

　1. メールに記載されているアクセスURL（https://xxxxxx.cybozu.com/、xxxxxは各自のサブドメイン）にWebブラウザでアクセス

　2. ログイン名（メールアドレス）、パスワードを使ってログインする

　3. 「ポータル」ページで、「サービス」ペインの［kintone］をクリック

　4. 「アプリ」ペインの［＋］をクリック（図6）

図6　「ポータル」ページ

　5. 「kintoneアプリストア」ページの「おすすめのアプリ」から［顧客リスト］をクリック（［このアプリを追加する］はクリックしない）（図7）

　6. 「顧客リスト」ページの［サンプルデータを含める］にチェックを入れ、［このアプリを追加］アプリをクリック

図7　「kintoneアプリストア」ページ

　7. 「ポータル」ページの「アプリ」ペインに「顧客リスト」が表示されていれば成功

　8. 「顧客リスト」をクリックして開いたページからアプリIDを控えておく（URL「https://xxxxx.cybozu.com/k/1/」の「1」の部分）（図8）

図8　「顧客リスト」アプリのページ