（著者：菊地 宏司）
今回はJavaScriptを使った、kintoneのレコードからファイルをダウンロードする方法を紹介します。
kintoneアプリのレコードには添付ファイルを付けることができます。
JavaScriptでカスタマイズする事で他のアプリと連携したり、一覧画面で画像をグリッド表示にしてアルバムのように見せたりと幅広い使い方ができます。
ただ、このファイル操作 「やってみたいけどちょっと敷居が高そう・・・」と思っている方も多いのではないでしょうか。
まずは基本を知る。ということで、今回は添付ファイルの操作に欠かせないファイルダウンロード処理についてご紹介したいと思います。
ちなみに、ファイルダウンロード API は、kintone.api() を使った REST API リクエストに対応していません。
処理の流れ
- レコード情報を取得し、ダウンロードするファイルのfileKeyを取得します。
- fileKeyを元にクエリ文を作成し、kintoneからファイルをダウンロードします。
- (おまけ)ダウンロードしたファイルをローカルに保存します。
レコード情報からダウンロードするファイルのfileKeyを取得する
まず、対象のレコード情報を取得します。
リクエストのBodyを記載します。
RequestData
レコード詳細情報取得のAPIの呼び出しはこうなります。
レコード情報は以下のJSON形式で返却されます。
今回対象のレコードにはtxtファイルが設定されています。
ResponseData
※ ここで取得したfileKeyはファイルアップロードで使用することはできません。
次に、取得したレコード情報からfileKeyを取り出してみましょう。
添付ファイルは複数のアイテムが入るフィールドなので、fileKeyを取り出す場合は配列のindexを指定する必要があります。
それでは、ここまでのコードです。 レコード情報の取得～fileKeyの取り出しまでの処理がこんな感じになります。
fileKeyを元にクエリ文字付きURLを取得し、kintoneからファイルをダウンロードする
取得した fileKey を指定してファイルダウンロードAPI を実行します。
※Content-Typeヘッダは不要です。(JSON形式のファイルダウンロードでは設定の必要があります)
上記のxhr.responseにファイルの内容が入っています。
(おまけ)ダウンロードしたファイルをローカルに保存する
さて、ここからはおまけです。
前項までで kintone からのファイルダウンロードは完了となりますが、ここではダウンロードしたファイルをローカルに保存する方法について書いていこうと思います。
ファイル API を使ってダウンロードしたファイルは、Blobオブジェクトに格納することでローカルへ保存できます。
以下は、ファイルのダウンロードURLを設定したリンク（aタグ）を生成し、JSが実行されたときに自動でファイルダウンロードさせるサンプルです。
なお、ファイル操作関連は、ブラウザによってコードを分ける必要があり注意が必要です。ここでは Chrome での例を記述しています。
ファイル操作処理に関するブラウザのサポート状況は、MDNのドキュメントをご参照ください。
ローカルにファイルを保存する処理は、Promiseを使ってリクエストの処理が終了するのを待ってから実行してください。
6行目：window.URL.createObjectUrl メソッドを利用して Blob オブジェクトのダウンロードURLを生成します。
11行目：ダウンロードするファイル名を指定します。今回はテキストファイルですが、PDF ファイルの場合は「alink.download = 'test.pdf'」のように拡張子込みで指定します。
12行目：ダウンロードURL を a タグに設定します。
19行目：リンク（aタグ）のクリックイベントをディスパッチ（発行）します。
これにより、リンクをクリックしていなくてもクリックイベントが発生するので、JSが実行されたときに自動でファイルダウンロードが実行されます。
以上でファイルダウンロードは完了です。
サンプルコードの
//ファイルがレスポンスとして返却されます
xhr.response ですが、
ファイルがかえってくるという、そのレスポンスにはどのようなデータがかえってくるのでしょうか？
現在、VBAでKintoneの添付ファイルをダウンロードさせる処理を開発しているのですが、
レスポンスされたデータをどのように任意のローカルフォルダへ保存させればよいかで、難航しております。
そもそも、レスポンスデータはバイナリデータでしょうか？
自己解決できました。
お世話になっております。
こちらの記事で解説されているファイルをローカルに保存する手順ですが、
iOS の Safari で実行すると正しくファイルがダウンロードできますが、
kintone モバイルアプリで実行すると画面最上段に「フレームの読み込みが中断しました。」と表示され
ダウンロードが行えません。
また Android でも同様で、 Chrome では正しくダウンロードが行えますが
やはり kintone モバイルアプリではファイルのダウンロードは行えず
リンクをクリックしても無反応となっています。
ただ、レコード詳細画面の添付ファイルからはファイルを閲覧できています。
（これは恐らくダウンロードの動作とは違いますよね）
kintone モバイルアプリでもファイルをダウンロードできるようにするにはどのようにすれば良いでしょうか？
それとも kintone モバイルアプリでは JavaScript でファイルのダウンロードはできない仕様と言う事になるでしょうか？
shimesaba-hamachi 様
お世話になっております。
cybozu developer network 運営局です。
kintone モバイルアプリで実行する際の状況について、ご教示くださりありがとうございます。
開発している担当の部署に共有し、確認いたします。
また、今後の機能改善のため、開発部署へフィードバックをさせて頂きたく、
モバイルアプリを使ってローカルにファイルをダウンロードする操作は、
shimesaba-hamachi 様の場合、どのような作業を行う際に必要でしょうか。
差し支えなければ、ご教示いただけますと幸いです。
よろしくお願いいたします。
cybozu Development team 様
ご返信ありがとうございます。
> モバイルアプリを使ってローカルにファイルをダウンロードする操作は、
> shimesaba-hamachi 様の場合、どのような作業を行う際に必要でしょうか。
カスタマイズビュー上でレコードの添付ファイル一覧を表示するカスタマイズをしておりますが、
当該ファイルをタップした際にブラウザでは正しくダウンロードできるのにモバイルアプリでは正常に行かないため、
ユーザー体験が異なるのが問題になるのではないかと懸念している次第です。
あくまで憶測ですが、アプリからローカルのストレージにアクセスする権限の問題なのではないかなーと考えています。
shimesaba-hamachi 様
お世話になっております。
cybozu developer network 運営局です。
実際の利用状況についてご教示くださり、ありがとうございます！
開発している担当の部署で調査を行いましたが、
仕様として、JavaScript でのファイルダウンロードは、
kintone モバイルアプリでは動作しないことを確認いたしました。
ご希望に添えず、大変申し訳ございません。
今後ともよろしくお願いいたします。