カテゴリー内の他の記事

ファイルダウンロードで必須となる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を元にクエリ文を作成し、kintoneからファイルをダウンロードする

取得したfileKeyから HTTP のクエリ文字列を作成します。(クエリ形式でのリクエスト例)

※Content-Typeヘッダは不要です。(JSON形式のファイルダウンロードでは設定の必要があります)

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

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

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

ダウンロードしたファイルはBlobオブジェクトに格納することでローカルへ保存が出来ます。
以下はダウンロードファイルをaタグに設定して、それをマウスのクリックイベントでDispatch起動した場合です。

ファイル操作関連は、ブラウザによってコードを分ける必要があったり注意が必要です。
その辺の情報はJavaScriptの技術サイト等をご覧ください。
また、PDFなどテキスト以外のファイルをダウンロードする場合、11行目のところで「alink.download = 'test.pdf'」のように拡張子を指定します。

以上でファイルダウンロードが完了となります。

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

記事に関するフィードバック

直接的に記事と関連がないご質問はcybozu developer コミュニティをご活用ください。

Avatar
やーさん

サンプルコードの
 //ファイルがレスポンスとして返却されます
xhr.response  ですが、

ファイルがかえってくるという、そのレスポンスにはどのようなデータがかえってくるのでしょうか?

現在、VBAでKintoneの添付ファイルをダウンロードさせる処理を開発しているのですが、
レスポンスされたデータをどのように任意のローカルフォルダへ保存させればよいかで、難航しております。
そもそも、レスポンスデータはバイナリデータでしょうか?

Avatar
やーさん

自己解決できました。

ログインしてコメントを残してください。
Powered by Zendesk