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

著者名:菊地 宏司

目次

概要

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

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

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

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

処理の流れ

  1. レコード情報を取得し、ダウンロードするファイルの fileKey を取得します。
  2. fileKey を元にクエリ文を作成し、kintone からファイルをダウンロードします。
  3. (おまけ)ダウンロードしたファイルをローカルに保存します。

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

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

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

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

1
2
const url = kintone.api.url('/k/v1/record.json', true);
kintone.api(url, '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
7
// 対象のレコードを取得
const url = kintone.api.url('/k/v1/record.json', true);
kintone.api(url, 'GET', {app: 6, id: 2}, (response) => {
  // fileKeyの取得
  const record = response.record;
  const filekey = record.File.value[0].fileKey;
});

fileKey を元にクエリ文字付き URL を取得し、kintone からファイルをダウンロードする

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

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

// ファイルダウンロードAPI を実行します。
const xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
xhr.responseType = 'blob';

xhr.onload = () => {
  if (xhr.status === 200) {
    // ファイルがレスポンスとして返却されます。
    console.log(xhr.response);
  }
};
xhr.send();

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

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

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

ファイル API を使ってダウンロードしたファイルは、Blob オブジェクトに格納することでローカルへ保存できます。
以下は、ファイルのダウンロード URL を設定したリンク(a タグ)を生成し、JS が実行されたときに自動でファイルダウンロードさせるサンプルです。

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

information

先述の例では、XMLHttpRequest で非同期のリクエストをしています。
ローカルにファイルを保存する処理は、 Promise を使ってリクエストの処理が終了するのを待ってから実行してください。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
// Blobオブジェクトにファイルを格納
const blob = new Blob([xhr.response]);
const url = window.URL || window.webkitURL;

// BlobURLの取得
const blobUrl = url.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);
  • 6 行目:window.URL.createObjectUrl メソッドを利用して Blob オブジェクトのダウンロード URL を生成します。
  • 11 行目:ダウンロードするファイル名を指定します。
    今回はテキストファイルですが、PDF ファイルの場合は alink.download = 'test.pdf' のように拡張子込みで指定します。
  • 12 行目:ダウンロード URL を a タグに設定します。
  • 19 行目:リンク(a タグ)のクリックイベントをディスパッチ(発行)します。
    これにより、リンクをクリックしていなくてもクリックイベントが発生するので、JS が実行されたときに自動でファイルダウンロードが実行されます。

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

注意事項

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