Mila Tokyo Consulting
open main menu
Part of series: kinote beginner's guide

kintoneアプリのデータをAPIで取得する方法

/ 8 min read

この記事の概要

  • kintone APIトークンを取得し、API経由でkintoneアプリのデータを取得する方法を理解する
  • プロキシサーバーを使用して、CORSエラーを回避しながらkintone APIにアクセスする方法を学ぶ
  • **Node.jsとexpress、http-proxy-middleware**を使って簡単なプロキシサーバーを構築する
  • JavaScriptのfetch APIを使用して、活動履歴アプリから対応者と対応日時のデータを取得し、ブラウザで表示する

1. 事前準備

kintone APIトークンの取得

  1. kintone管理画面にアクセスし、活動履歴アプリを選択します。
  2. 「アプリの設定」→「APIトークン」を選択し、新しいAPIトークンを作成します。
  3. レコードの閲覧権限をトークンに付与します。
  4. アプリを更新します。
  5. 「APIトークン」画面に再びアクセスし、APIトークンをコピーして、後で使用できるようにします。

必要な開発環境の準備

  • Node.jsがインストールされていることを確認してください。もしまだインストールしていない場合は、Node.js公式サイトからインストールできます。

2. プロキシサーバーの設定

CORS制約を回避するためには、ローカル環境にプロキシサーバーを立ち上げる必要があります。これは、ブラウザから直接kintone APIにアクセスしようとすると、CORS（Cross-Origin Resource Sharing）エラーが発生するためです。CORSは、異なるオリジン（例: 異なるドメインやポート）間でのリクエストをセキュリティ上の理由から制限するブラウザの機能です。

kintone APIはブラウザからの直接リクエストに対してCORSヘッダーを返さないため、CORSエラーが発生します。しかし、プロキシサーバーを使用することで、ブラウザは同じオリジン（プロキシサーバー）にリクエストを送ることができ、プロキシサーバーが代わりにkintone APIにリクエストを送信します。この方法を使うことで、ブラウザのCORS制約を回避し、kintone APIにアクセスできるようになります。

プロキシサーバーのセットアップ

  1. プロジェクトディレクトリを作成し、Node.jsプロジェクトを初期化します。

    mkdir kintone-api-proxy
cd kintone-api-proxy
npm init -y

  2. http-proxy-middleware と express をインストールします。

    npm install http-proxy-middleware express

  3. プロキシサーバー用のスクリプト proxy.js を作成します。

     const express = require('express');
 const { createProxyMiddleware } = require('http-proxy-middleware');

 const app = express();

 // kintoneのドメインを定義
 const kintoneDomain = 'https://your-subdomain.cybozu.com';

 // CORS設定を追加
 app.use((req, res, next) => {
     res.header('Access-Control-Allow-Origin', '*'); // 全てのオリジンを許可
     res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
     res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept, Authorization, X-Cybozu-API-Token');

     // OPTIONSメソッドに対するプレフライトリクエストに対応
     if (req.method === 'OPTIONS') {
         res.sendStatus(200);
     } else {
         next();
     }
 });

 // kintoneのAPIエンドポイントをプロキシする
 app.use('/kintone', createProxyMiddleware({
     target: kintoneDomain,
     changeOrigin: true,
     pathRewrite: {
         '^/kintone': '', // '/kintone'を削除してリクエストを転送
     },
     timeout: 5000, // タイムアウトを5秒に設定
     onProxyReq: (proxyReq, req, res) => {
         console.log('Proxying request to:', kintoneDomain);
         console.log('Request URL:', req.url);
     },
     onProxyRes: (proxyRes, req, res) => {
         console.log('Response status code:', proxyRes.statusCode);
     },
     onError: (err, req, res) => {
         console.error('Error occurred while proxying request:', err);
         res.status(500).send('Proxy error');
     }
 }));

 // プロキシサーバーを実行
 app.listen(3000, () => {
     console.log('Proxy server is running on http://localhost:3000');
 });

説明:

  • kintoneDomain: kintoneのドメインを指定します。your-subdomainの部分を自分のkintoneのサブドメインに置き換えてください。

  1. プロキシサーバーを実行します。

    node proxy.js

これで、http://localhost:3000/kintone/経由でkintoneのAPIにアクセスできるようになります。

3. HTMLとJavaScriptでkintone APIにアクセス

次に、プロキシサーバーを通してkintone APIにアクセスするHTMLとJavaScriptを作成します。

HTMLファイルの作成

ローカル環境で実行するためのindex.htmlファイルを作成し、以下の内容を記述します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>kintone API Data Fetch</title>
</head>
<body>
  <h1>kintone APIからデータを取得</h1>
  <div id="output"></div>

  <script src="script.js"></script>
</body>
</html>

JavaScriptファイルの作成

次に、script.jsというファイルを作成し、以下の内容を記述します。このファイルは、プロキシサーバー経由でkintoneのAPIからデータを取得します。

// kintoneのサブドメイン、アプリID、APIトークンを設定
const appId = 'your-app-id';         // 活動履歴アプリのアプリID
const apiToken = 'your-api-token';   // 取得したAPIトークン

// kintone APIのURL (プロキシサーバー経由)
const apiUrl = `http://localhost:3000/kintone/k/v1/records.json`;

// kintone APIへのリクエスト設定
const requestOptions = {
    method: 'GET',
    headers: {
        'X-Cybozu-API-Token': apiToken,
    }
};

// データを取得し、HTMLに表示
fetch(`${apiUrl}?app=${appId}`, requestOptions)
    .then(response => response.json())
    .then(data => {
        const records = data.records;
        let output = '<ul>';

        // レコードごとに対応者をリスト表示
        records.forEach(record => {
            const correspondents = record.対応者.value; // 対応者は配列で返される

            // map()を使用して対応者名を取得し、カンマ区切りに
            const correspondentNames = correspondents.map(user => user.name).join(', ');

            output += `<li>対応者: ${correspondentNames}, 対応日時: ${record.対応日時.value}</li>`;
        });

        output += '</ul>';
        document.getElementById('output').innerHTML = output;
    })
    .catch(error => {
        console.error('Error fetching records:', error);
        document.getElementById('output').textContent = 'データの取得に失敗しました。';
    });

説明:

  • appId: 活動履歴アプリのアプリIDを指定します。kintoneのアプリのURLに含まれています。
  • apiToken: 先ほど取得したAPIトークンを指定します。
  • fetch API: プロキシサーバー経由でkintone APIにアクセスし、活動履歴アプリからデータを取得します。

4. 実行方法

  1. プロキシサーバーを実行した状態で、index.htmlとscript.jsを同じディレクトリに保存します。
  2. index.htmlをブラウザで開きます。
  3. 正しく実行されれば、ブラウザに対応者と対応日時の情報が表示されます。

例：

<ul>
  <li>対応者: 田中一郎, 対応日時: 2024-09-23</li>
  <li>対応者: 山田二郎, 対応日時: 2024-09-24</li>
</ul>

5. エラー時の対応

もしエラーが発生した場合、次の点を確認してください：

  • プロキシサーバーが正しく起動しているか。
  • サブドメイン、アプリID、APIトークンが正しいかどうか。
  • APIトークンに必要な権限（レコードの閲覧権限）が付与されているかどうか。

まとめ

プロキシサーバーを使用することで、CORSの問題を回避し、kintone APIにローカル環境からアクセスできるようになりました。この手順では、http-proxy-middlewareを使ってプロキシサーバーを構築し、APIにアクセスしています。今後、さらに複雑な処理やUIへの組み込みを行う際の基礎として活用できます。

kintone APIの詳細については、公式ドキュメントも参考にしてください。