ファイルダウンロードで必須となる 2 つの手順
概要
今回は JavaScript を使った、kintone のレコードからファイルをダウンロードする方法を紹介します。
kintone アプリのレコードには添付ファイルを付けることができます。
JavaScript でカスタマイズすることで他のアプリと連携したり、一覧画面で画像をグリッド表示にしてアルバムのように見せたりと幅広い使い方ができます。
ただ、このファイル操作「やってみたいけどちょっと敷居が高そう」と思っている方も多いのではないでしょうか。
「まずは基本を知る」ということで、今回は添付ファイルの操作に欠かせないファイルダウンロード処理について紹介したいと思います。
ちなみに、ファイルダウンロード API は、 kintone.api() を使った REST API リクエスト に対応していません。
処理の流れ
- レコード情報を取得し、ダウンロードするファイルの
fileKey
を取得します。 fileKey
を元にクエリ文を作成し、kintone からファイルをダウンロードします。- (おまけ)ダウンロードしたファイルをローカルに保存します。
レコード情報からダウンロードするファイルの fileKey
を取得する
まず、
1 件のレコードを取得する API を使って対象のレコード情報を取得します。
リクエストボディには次の内容を指定します。
|
|
kintone.api()
を使った 1 件のレコードを取得する API を実行するには、次のように記述します。
|
|
レコード情報は以下の JSON 形式で返却されます。
今回対象のレコードには txt ファイルが設定されていることとします。
|
|
次に、取得したレコード情報から fileKey
を取り出してみましょう。
添付ファイルは複数のアイテムが入るフィールドなので、fileKey
を取り出す場合は配列のインデックスを指定する必要があります。
1 件のレコードを取得する API で取得した fileKey
は、ファイルアップロードでは使用できません。
それでは、ここまでのコードです。
レコード情報の取得から fileKey
の取り出しまでの処理は、次のとおりです。
|
|
fileKey
を元にクエリ文字付き URL を取得し、kintone からファイルをダウンロードする
取得した fileKey
を指定して
ファイルをダウンロードする API を実行します。
ファイルをダウンロードする API には、Content-Type ヘッダーは不要です。
|
|
上記の xhr.response
にファイルの内容が入っています。
(おまけ)ダウンロードしたファイルをローカルに保存する
さて、ここからはおまけです。
前項までで kintone からのファイルダウンロードは完了となりますが、ここではダウンロードしたファイルをローカルに保存する方法について書いていこうと思います。
ファイル API を使ってダウンロードしたファイルは、Blob オブジェクトに格納することでローカルへ保存できます。
以下は、ファイルのダウンロード URL を設定したリンク(a タグ)を生成し、JS が実行されたときに自動でファイルダウンロードさせるサンプルです。
なお、JavaScript によるファイルの扱い方はブラウザーによって異なるため、ブラウザーごとに処理を分ける必要があります。
ここでは Chrome での例を記述しています。
ファイル操作処理に関するブラウザーのサポート状況は、
MDN のドキュメント
を参照してください。
先述の例では、XMLHttpRequest で非同期のリクエストをしています。
ローカルにファイルを保存する処理は、
Promise を使ってリクエストの処理が終了するのを待ってから実行してください。
|
|
- 6 行目:
window.URL.createObjectUrl
メソッドを利用して Blob オブジェクトのダウンロード URL を生成します。 - 11 行目:ダウンロードするファイル名を指定します。
今回はテキストファイルですが、PDF ファイルの場合はalink.download = 'test.pdf'
のように拡張子込みで指定します。 - 12 行目:ダウンロード URL を a タグに設定します。
- 19 行目:リンク(a タグ)のクリックイベントをディスパッチ(発行)します。
これにより、リンクをクリックしていなくてもクリックイベントが発生するので、JS が実行されたときに自動でファイルダウンロードが実行されます。
以上でファイルダウンロードは完了です。
注意事項
このカスタマイズは、kintone モバイルアプリでは動作しません。