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

（著者：菊地 宏司）

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

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

ちなみに、JavaScriptを使ったkintone REST APIリクエストでは、ファイルのダウンロードがサポートされていません。(2014/04 現在)

処理の流れ

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

レコード情報からダウンロードするファイルの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のドキュメントをご参照ください。

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

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

このTipsは、2014年4月版で確認したものになります。