添付ファイルの取得について(その後、send gridへ連携するために)

apiの扱いが初心者です。

試しに、レコード番号22について添付ファイルをダウンロードし、

そのデータをsend gridへ連携させたいです。

現状、下記コードは、うまく動いておりません。

アドバイスいただけないでしょうか?

shigeyoshi tsujiuchi さん

現在のコードですと、レコード取得API の処理終了を待たずに、ファイル取得APIが実行されます。

さらに、ファイル取得APIの処理終了を待たずに、btoa 変換が行われます。

promise か、callback のしくみで、API終了後に後続処理が実行されるようにしてください。

rex0200さん

コメントいただきありがとうございます。

promiseもしくはcallbackについて理解が浅く、現在こちらを参考にしています。

https://developer.cybozu.io/hc/ja/articles/202166310-kintone-REST-API-%E3%83%AA%E3%82%AF%E3%82%A8%E3%82%B9%E3%83%88 

取得した値を後続処理で使いたい場合は、さらに、どのような書き方にすれば良いでしょうか?

(下記の例) 取得した "key"を後続処理で用いたい。

 

 

rex0200さん

連投でのコメントとなり、すいません。

Promiseを勉強しているのですが、後続の処理は、thenやcatchの中に書けば良いというのが理解できました。

下記理解は正しいでしょうか?


APIを使って取得した値は、この枠の中でしか使うことができない。

※枠の外(=さらに続いている後続処理)の変数にセットできる方法はない。


理解が間違っているよでしたら、ご指摘やアドバイスいただけますと幸いです。

Promise 関連は、下記に参考になりそうなものをまとめています。

kintone カスタマイズ関連リンク集 Promise 関連

 

あと、ファイルのダウンロードのPromise 対応については、下記が使えると思います。

kintone ファイルのダウンロードとアップロード

>APIを使って取得した値は、この枠の中でしか使うことができない。
>※枠の外(=さらに続いている後続処理)の変数にセットできる方法はない。

これは、APIを呼ぶ前に連携用のオブジェクトの枠を用意しておけば対応できます。

var obj ={};
kintone.api(...).then(function(resp) {
obj.rs1 = resp;
return kintone.api(....);
}).then(function(resp) {
obj.rs2 = resp;
return kintone.api(....);
}).then(function(resp) {
obj.rs3 = resp;

console.log(obj);

}).cath(function(error) {
console.log(error);
});

 

rex0220 さん

ありがとうございます。

ダウンロードしたデータは、brob型です。

このデータをbase64に変換し、sendgridで使いたいです。

 

brob型をどのような処理でbase64に変換すれば良いかご存知でしょうか?

 

私は、試していませんが、検索するといくつか出てきます。

JavaScriptによるファイルとバイナリデータの扱い

javascriptでBase64

試してみてください。

rex0220さん

回答いただきありがとうございます。

上記を参考に、blobからbase64への変換が実現できました。

(blobのテストデータを生成し、正しく変換されたことを確認しました。)

 

たびたびのご質問で申し訳ございません。

http://qiita.com/rex0220/items/ba644c916ff2c46fdd48

kintoneから取得したデータを上記のbase64への変換処理に渡した結果、blobではないためエラーとなりました。

コンソールで見ると[PromiseValue]の中にblobデータが格納されているように思いますが、それの扱い方がわからず、まだ苦戦しております。

var blob = fileDownload(test);
console.log(blob);

関数を代入するのではなく、戻り値を使用します。

kintone.api(...).then(function(resp) {
...
// ファイルダウンロード
return fileDownload(fileKey);
}).then(function(resp) {
console.log('blob', resp);
...
});

rex0220さん

状況としては、promiseの書き方が今ひとつうまく行ってないせいか、

最終的なログ出力ができておりません。

 

jQuery.noConflict();
(function() {
"use strict";
kintone.events.on("app.record.index.show", function(e) {
   var params = {
     app: 61,
      id: 1
    };

   function functest() {
       var filekey = resp['record']['File']['value'][0].fileKey;
      return filekey;
}

function fileDownload(fileKey) {
     下記サイトのコードを引用
※http://qiita.com/rex0220/items/ba644c916ff2c46fdd48

xhr.send();
       return blob;
}


//promiceの書き方で、挑戦してみました。最後のログ出力ができていないです。
kintone.api('/k/v1/records', 'GET', params).then(function(resp){
  return functest(resp);
}).then(function(resp) {
  return fileDownload(filekey);
}).then(function(resp) {
  var reader = new window.FileReader();
  reader.readAsDataURL(blob);
  reader.onloadend = function() {
  var base64data = reader.result;
   console.log(base64data);
  }
});


});
})(jQuery);

変数の使い方がいろいろ間違っているようです。

ブラウザーのデバッグツールを使うとエラー表示されていると思います。

また、ステップ実行すると間違いもわかりやすいと思います。

下記は、切り貼りしただけですので、検証してください。

jQuery.noConflict();
(function() {
"use strict";
kintone.events.on("app.record.index.show", function(e) {   
var params = {      app: 61,       id: 1     };

function functest(resp) {      
var filekey = resp['record']['File']['value'][0].fileKey;      
return filekey;
}

function fileDownload(fileKey) {    
下記サイトのコードを引用※ http: //qiita.com/rex0220/items/ba644c916ff2c46fdd48

xhr.send();       
return blob;
}

//promiceの書き方で、挑戦してみました。最後のログ出力ができていないです。
kintone.api('/k/v1/records', 'GET', params).then(function(resp) {
return fileDownload(functest(resp));
}).then(function(resp) {
var reader = new window.FileReader();
reader.readAsDataURL(resp);
reader.onloadend = function() {
var base64data = reader.result;
console.log(base64data);
}
});


});
})(jQuery);

rex0220さん

お忙しい中、いつもアドバイス下さり、本当にありがとうございます。

コンソールログで解析しながら、なんとか連続処理が正常に繋がり、正しい結果が得られました。

 

ありがとうございました。