他サービスの API からデータを取得して kintone に表示してみよう

著者名: KADOYA Ryo (External link)

目次

kintone のプロキシ機能を利用すると、kintone 以外のサービスとデータを連携できます。
以下にその方法を説明します。

利用するAPIについて

例として、気象庁が提供している天気予報を取得できる URL を利用します。
取得した天気予報のデータは、 政府標準の利用規約 (External link) に準拠して使用できます。

地域別に定義された ID をパラメーターとして渡すことで、天気データを取得できます。
たとえば東京都(ID:130000)の天気データを取得する場合、以下の URL を使用します。
https://www.jma.go.jp/bosai/forecast/data/forecast/130000.json (External link)

kintoneから外部APIを呼び出す

kintone から外部 API を呼び出すには、kintone.proxy API を利用します。
kintone.proxy は kintone を経由してリクエストを送信するため、外部のサービスへ Cookie は送信されません。
Cookie やその他のヘッダーが必要な API については、適宜 kintone.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
29
30
31
/*
 * kintone.proxy Sample Code
 * Copyright (c) 2014 Cybozu
 *
 * Licensed under the MIT License
 * https://opensource.org/license/mit/
 */
(() => {
  const recordIndexShowHandler = (e) => {
    const header = kintone.app.getHeaderSpaceElement();
    kintone.proxy(
      'https://www.jma.go.jp/bosai/forecast/data/forecast/130000.json',
      'GET',
      {},
      {},
      (body, status, headers) => {
        if (status >= 200 && status < 300) {
          const result = JSON.parse(body);
          const wArea = result[0].timeSeries[0].areas[0].area.name;
          const wToday = result[0].timeSeries[0].areas[0].weathers[0];
          const telop = document.createElement('span');
          telop.textContent = `${wArea}${wToday}`;
          header.appendChild(telop);
        }
      }
    );
    return event;
  };

  kintone.events.on('app.record.index.show', recordIndexShowHandler);
})();

画面サンプル

API トークンなどの秘匿情報の取り扱い

今回の例で使用した API では、API トークンなどの認証情報の指定が必要ありませんでした。
しかし、一般的な API では、認証情報をリクエストヘッダーやリクエストボディに指定する必要があります。

kintone.proxy() では、リクエストヘッダーやリクエストボディを引数で指定します。
kintone カスタマイズのソースコード上で、これらの引数に認証情報を直接記述すると、Web ブラウザーの開発者ツールを通じて見えてしまいます。
これは大きなセキュリティリスクとなります。

そのため、API トークンなどの秘匿情報は、フロントエンドのコード内に直接記述するのではなく、プラグイン化するなどしてサーバーサイドに隠蔽することを推奨します。
詳細は、 kintone セキュアコーディングガイドライン:認証情報や認可情報を適切に取り扱う を参照してください。

information

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