Tips

ファイルダウンロードで必須となる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
31
32

{
  "records": [
    {
      "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を元にクエリ文字付きURLを取得し、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を設定したリンク（aタグ）を生成し、クリックされたときにファイルをダウンロードするサンプルです。

なお、JavaScriptによるファイルの扱い方はブラウザーによって異なるため、ブラウザーごとに処理を分ける必要があります。
ここではChromeでの例を記述しています。
ファイル操作処理に関するブラウザーのサポート状況は、 MDNのドキュメント (External link) を参照してください。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

const urlObject = window.URL || window.webkitURL;

// BlobURLの取得
const blobUrl = urlObject.createObjectURL(blob);

// リンクを作成し、そこにBlobオブジェクトを設定する
const alink = document.createElement('a');
alink.textContent = 'ダウンロード';
alink.download = 'ダウンロードファイル.txt';
alink.href = blobUrl;
alink.target = '_blank';

// マウスイベントを設定
const e = new MouseEvent('click', {view: window, bubbles: true, cancelable: true});

// aタグのクリックイベントをディスパッチする
alink.dispatchEvent(e);
  • 4行目：window.URL.createObjectUrlメソッドを利用してBlobオブジェクトのダウンロードURLを生成します。
  • 9行目：ダウンロードするファイル名を指定します。
    今回はテキストファイルですが、PDFファイルの場合はalink.download = 'test.pdf'のように拡張子込みで指定します。
  • 10行目：ダウンロードURLをaタグに設定します。
  • 17行目：リンク（aタグ）のクリックイベントをディスパッチ（発行）します。
    これにより、リンクをクリックしていなくてもクリックイベントが発生するので、JSが実行されたときに自動でファイルダウンロードが実行されます。

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

注意事項

固定リンクがコピーされました

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

information

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