ファイルダウンロードで必須となる2つの手順
概要
今回はJavaScriptを使った、kintoneのレコードからファイルをダウンロードする方法を紹介します。
kintoneアプリのレコードには添付ファイルを付けることができます。
JavaScriptでカスタマイズすると、他のアプリと連携したり、一覧画面で画像をグリッド表示にしてアルバムのように見せたりと幅広い使い方ができます。
ただ、このファイル操作「やってみたいけどちょっと敷居が高そう」と思っている方も多いのではないでしょうか。
「まずは基本を知る」ということで、今回は添付ファイルの操作に欠かせないファイルダウンロード処理について紹介したいと思います。
ちなみに、ファイルダウンロードAPIは、 kintone.api() を使ったREST APIリクエスト に対応していません。
処理の流れ
- 手順1:レコード情報を取得し、ダウンロードするファイルの
fileKeyを取得します。 - 手順2:
fileKeyを指定してkintoneからファイルをダウンロードします。 - (おまけ)ダウンロードしたファイルをローカルに保存します。
手順1:レコード情報からダウンロードするファイルのfileKeyを取得する
まず、
1件のレコードを取得するAPI
を使って対象のレコード情報を取得します。
リクエストボディには次の内容を指定します。
|
|
kintone.api()を使った1件のレコードを取得するAPIを実行するには、次のように記述します。
|
|
レコード情報は以下のJSON形式で返却されます。
今回対象のレコードにはtxtファイルが設定されていることとします。
|
|
次に、取得したレコード情報からfileKeyを取り出してみましょう。
添付ファイルは複数のアイテムが入るフィールドなので、fileKeyを取り出す場合は配列のインデックスを指定する必要があります。
1件のレコードを取得するAPI
で取得したfileKeyは、ファイルアップロードでは使用できません。
それでは、ここまでのコードです。
レコード情報の取得からfileKeyの取り出しまでの処理は、次のとおりです。
|
|
手順2:fileKeyを指定してkintoneからファイルをダウンロードする
取得したfileKeyを指定して
ファイルをダウンロードするAPI
を実行します。
ファイルをダウンロードするAPIには、Content-Typeヘッダーは不要です。
|
|
上記のblobにファイルの内容が入っています。
以上でファイルダウンロードは完了です。
(おまけ)ダウンロードしたファイルをローカルに保存する
さて、ここからはおまけです。
前項まででkintoneからのファイルダウンロードは完了となりますが、ここではダウンロードしたファイルをローカルに保存する方法について書いていこうと思います。
以下は、ダウンロードしたファイルをローカルに保存するサンプルです。
URL.createObjectURL()とaタグのclick()メソッドを使います。
|
|
- 1行目:
URL.createObjectURL()メソッドでBlobオブジェクトのダウンロードURLを生成します。 - 4行目:
downloadプロパティでダウンロードするファイル名を指定します。
今回はテキストファイルですが、PDFファイルの場合はlink.download = 'test.pdf'のように拡張子込みで指定します。 - 5行目:生成したURLをaタグの
hrefに設定します。 - 6行目:
click()メソッドでダウンロードします。
リンクをクリックしていなくても、JavaScriptの実行と同時にファイルのダウンロードが開始されます。 - 8行目:メモリ解放のため、生成したURLを破棄します。
以上でファイルダウンロードは完了です。
注意事項
このカスタマイズは、kintoneモバイルアプリでは動作しません。
このTipsは、2026年6月版kintoneで動作を確認しています。
