ファイルダウンロードで必須となる2つの手順

著者名:菊地 宏司

目次

概要

今回はJavaScriptを使った、kintoneのレコードからファイルをダウンロードする方法を紹介します。

kintoneアプリのレコードには添付ファイルを付けることができます。
JavaScriptでカスタマイズすると、他のアプリと連携したり、一覧画面で画像をグリッド表示にしてアルバムのように見せたりと幅広い使い方ができます。

ただ、このファイル操作「やってみたいけどちょっと敷居が高そう」と思っている方も多いのではないでしょうか。
「まずは基本を知る」ということで、今回は添付ファイルの操作に欠かせないファイルダウンロード処理について紹介したいと思います。

ちなみに、ファイルダウンロードAPIは、 kintone.api() を使ったREST APIリクエスト に対応していません。

処理の流れ

  1. 手順1:レコード情報を取得し、ダウンロードするファイルのfileKeyを取得します。
  2. 手順2:fileKeyを指定してkintoneからファイルをダウンロードします。
  3. (おまけ)ダウンロードしたファイルをローカルに保存します。

手順1:レコード情報からダウンロードするファイルのfileKeyを取得する

まず、 1件のレコードを取得するAPI を使って対象のレコード情報を取得します。
リクエストボディには次の内容を指定します。

1
2
3
4
{
  "app": 6,
  "id": 2
}

kintone.api()を使った1件のレコードを取得するAPIを実行するには、次のように記述します。

1
2
const urlForGetFileKey = kintone.api.url('/k/v1/record.json', true);
kintone.api(urlForGetFileKey, 'GET', {app: 6, id: 2}, (response) => {});

レコード情報は以下のJSON形式で返却されます。
今回対象のレコードにはtxtファイルが設定されていることとします。

 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
{
  "record": {
    "Description": {
      "type": "MULTI_LINE_TEXT",
      "value": "テストファイル.txt"
    },
    "Createdby": {
      "type": "CREATOR",
      "value": {
        "code": "testuser",
        "name": "テストユーザ"
      }
    },
    "レコード番号": {
      "type": "RECORD_NUMBER",
      "value": "2"
    },
    "file": {
      "type": "FILE",
      "value": [
        {
          "contentType": "text/plain",
          "fileKey": "201401240750597F2C2C9FE5EE4F02A05B91A81D1F0D5E320",
          "name": "テストファイル.txt",
          "size": "1503"
        }
      ]
    }
  }
}

次に、取得したレコード情報からfileKeyを取り出してみましょう。
添付ファイルは複数のアイテムが入るフィールドなので、fileKeyを取り出す場合は配列のインデックスを指定する必要があります。

1件のレコードを取得するAPI で取得したfileKeyは、ファイルアップロードでは使用できません。

それでは、ここまでのコードです。
レコード情報の取得からfileKeyの取り出しまでの処理は、次のとおりです。

1
2
3
4
5
6
// 対象のレコードを取得
const url = kintone.api.url('/k/v1/record.json', true);
const response = await kintone.api(url, 'GET', {app: 6, id: 2});
const record = response.record;
// フィールドコードが「file」の添付ファイルのファイルキーを取得
const fileKey = record.file.value[0].fileKey;

手順2:fileKeyを指定してkintoneからファイルをダウンロードする

取得したfileKeyを指定して ファイルをダウンロードするAPI を実行します。
ファイルをダウンロードするAPIには、Content-Typeヘッダーは不要です。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
// 手順1で取得したfileKeyをurlに設定します。
const urlForDownload = kintone.api.urlForGet('/k/v1/file.json', {fileKey: fileKey}, true);

// ファイルダウンロードAPIを実行します。
const headers = {
  'X-Requested-With': 'XMLHttpRequest',
};
const resp = await fetch(urlForDownload, {
  method: 'GET',
  headers,
});
const blob = await resp.blob();

上記のblobにファイルの内容が入っています。

以上でファイルダウンロードは完了です。

(おまけ)ダウンロードしたファイルをローカルに保存する

さて、ここからはおまけです。
前項まででkintoneからのファイルダウンロードは完了となりますが、ここではダウンロードしたファイルをローカルに保存する方法について書いていこうと思います。

以下は、ダウンロードしたファイルをローカルに保存するサンプルです。
URL.createObjectURL()とaタグのclick()メソッドを使います。

1
2
3
4
5
6
7
8
const blobUrl = URL.createObjectURL(blob);

const link = document.createElement('a');
link.download = 'ダウンロードファイル.txt';
link.href = blobUrl;
link.click();

URL.revokeObjectURL(blobUrl);
  • 1行目:URL.createObjectURL()メソッドでBlobオブジェクトのダウンロードURLを生成します。
  • 4行目:downloadプロパティでダウンロードするファイル名を指定します。
    今回はテキストファイルですが、PDFファイルの場合はlink.download = 'test.pdf'のように拡張子込みで指定します。
  • 5行目:生成したURLをaタグのhrefに設定します。
  • 6行目:click()メソッドでダウンロードします。
    リンクをクリックしていなくても、JavaScriptの実行と同時にファイルのダウンロードが開始されます。
  • 8行目:メモリ解放のため、生成したURLを破棄します。

以上でファイルダウンロードは完了です。

注意事項

このカスタマイズは、kintoneモバイルアプリでは動作しません。

information

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

公式コミュニティ

kintone開発者同士で質問や知見を共有し、学び合うことができます。