Tips

他サービスの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で動作を確認しています。