OECDE
2024 年 2 月 16 日午前 6:26
1
Kintoneのレコード詳細画面にボタンを設置し、
をという形で実現できるのでは？と考えているのですが、
まず、ダウンロードが出来ているのか確認したいと思い、
コードをここに入力または貼り付け
kintone.events.on([‘app.record.create.show’, ‘app.record.edit.show’,‘app.record.detail.show’], event => {
var filekey=event.record['添付ファイル_0'].value[0].fileKey;
var url2=kintone.api.urlForGet('/k/v1/file.json', {fileKey: filekey}, true);
alert(url2);
// ファイルダウンロードAPI を実行します。
const ret = (url) => {
alert(url);
return new Promise((resolve,reject) => {
const xhr = new XMLHttpRequest();
xhr.open('GET', url,true);
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
xhr.responseType = 'blob';
xhr.onload = () => {
if (xhr.status === 200) {
// ファイルがレスポンスとして返却されます。
console.log(xhr.response);
alert(JSON.stringify(xhr.response));
}
};
xhr.send();
});
};
ret(url2).then((res) => {
const blob = new Blob(res);
alert(blob);
}).catch((err) =>{
alert(err);
});
}
return event;
OECDE
2024 年 2 月 21 日午前 7:13
2
上記、修正してダウンロードの方は成功していることが確認できましたが、
コミュニティをしらべて
みなさまのお知恵をお貸しいただければと思います
kintone.events.on(['app.record.create.show', 'app.record.edit.show','app.record.detail.show'], event => {
const sp2 = kintone.app.record.getSpaceElement('button_space_1');
const btn2 = document.createElement('button');
btn2.textContent='ボタン2';
sp2.appendChild(btn2);
btn2.onclick=()=>{
var subdomain = "xxxxx";
var kt_token = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";
var cw_token = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
var room_id = 'xxxxxxx';
var filekey=event.record['添付ファイル_0'].value[0].fileKey;
var url2=kintone.api.urlForGet('/k/v1/file.json', {fileKey: filekey}, true);
//ファイルのダウンロード
const ret = (url) => {
return new Promise((resolve,reject) => {
const xhr = new XMLHttpRequest();
xhr.open('GET', url,true);
xhr.setRequestHeader("X-Cybozu-API-Token", kt_token);
xhr.onload = () => {
if (xhr.status === 200) {
console.log(xhr.response);
resolve(xhr.response);
}
};
xhr.onerror=function(){
reject("ERROR"+xhr.statusText);
};
xhr.send();
});
};
//CWに送信
const pos = (url3,formData3) => {
return new Promise((resolve2,reject2) => {
const xhr2 = new XMLHttpRequest();
xhr2.open('POST', url3,true);
xhr2.setRequestHeader('X-ChatWorkToken', cw_token);
// xhr2.setRequestHeader('Content-Type', `multipart/form-data`);
xhr2.setRequestHeader('Content-Type', `application/json`);
xhr2.onload = function(){
if (xhr2.status === 200) {
resolve2(xhr2.response);
}else{
resolve2("ERR"+xhr2.statusText);
}
};
xhr2.onerror=function(){
reject2("ERROR_POS"+xhr2.statusText);
};
xhr2.send(formData3);
});
};
ret(url2).then((res) => {
var blob = new Blob([res]);
var url = 'https://api.chatwork.com/v2/rooms/'+ room_id +'/files';
var headers = {
'X-ChatWorkToken': cw_token,
};
var formData = new FormData();
formData.append('file',[res]);
pos(url,formData).then((res2) => {
alert("Suc?"+res2);
}).catch((res2) => {
alert("ERR"+JSON.stringify(res2));
});
}).catch((res) => {
alert(res);
});
}
return event;
});
OECDE
2024 年 2 月 22 日午前 6:42
3
不明な点が少しずつ変わってきたので、再度質問です。
kintone.events.on(['app.record.create.show', 'app.record.edit.show','app.record.detail.show'], event => {
const sp2 = kintone.app.record.getSpaceElement('button_space_1');
const btn2 = document.createElement('button');
btn2.textContent='ボタン2';
//スペースフィールドにボタンを追加する
sp2.appendChild(btn2);
//ボタンをクリックしたときの動作
btn2.onclick=()=>{
var subdomain = "xxxxxxx";
var kt_token = "xxxxxxxxxxxxxxxxxxxxxxxxx"; //このアプリのAPIトークン
var cw_token = 'xxxxxxxxxxxxxxxxxxxxxxxxxxx'; //CWのトークン
var room_id = 'xxxxxxx'; //CWのroomId
//初期設定ここまで
var filekey=event.record['添付ファイル_0'].value[0].fileKey;
var filename=event.record['添付ファイル_0'].value[0].name;
alert(filename);
var url=kintone.api.urlForGet('/k/v1/file.json', {fileKey: filekey}, true);
const xhr = new XMLHttpRequest();
xhr.open('GET', url,true);
xhr.setRequestHeader("X-Cybozu-API-Token", kt_token);
xhr.onreadystatechange = function(){
if ((xhr.readyState == 4) && (xhr.status == 200)){
// ファイルがレスポンスとして返却されます。
alert("xhr.response="+xhr.response); //ファイルのデータは閲覧できます
var urlPOST = 'https://api.chatwork.com/v2/rooms/'+ room_id +'/files';
var formData = new FormData();
var blob= new Blob([xhr.response]);
formData.append('file',blob,filename);
var xhrPOST = new XMLHttpRequest();
xhrPOST.open('POST',urlPOST,true);
xhrPOST.setRequestHeader('Accept', 'application/json');
xhrPOST.setRequestHeader('X-ChatWorkToken', cw_token);
xhrPOST.onload = function(){
alert("POST="+xhrPOST.status+"/"+xhrPOST.response);
if ((xhrPOST.status == 200)){
alert("POSTSUCCESS"+xhrPOST.response);
}else{
alert("POSTERR"+JSON.stringify(xhrPOST.response));
}
};
xhrPOST.onerror=function(){
alert("ERR"+JSON.stringify(xhrPOST)); //毎回、この部分のアラートが表示される
};
xhrPOST.send(formData);
}
};
xhr.onerror=function(){
alert("ERROR"+xhr.responseText);
};
xhr.send();
};
return event;
});
OECDE
2024 年 2 月 23 日午前 12:03
4
ブラウザのデベロッパーツールで確認したところ、
Access to XMLHttpRequest at 'https://api.chatwork.com/v2/rooms/{room_ID}/files' from origin 'https://{サブドメイン}.cybozu.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Google翻訳すると
『オリジン「https://{サブドメイン}.cybozu.com」から「https://api.chatwork.com/v2/rooms/{room_ID}/files」の XMLHttpRequest へのアクセスは CORS ポリシーによってブロックされています: プリフライト リクエストへの応答は行われませんアクセス制御チェックに合格しました: 要求されたリソースに「Access-Control-Allow-Origin」ヘッダーが存在しません。』
となり、要はChatwork側の返信に「Access-Control-Allow-Origin」ヘッダーが無いためエラーになっているようなので、
xhrPOST.setRequestHeader('Origin', 'https://'+subdomain+'.cybozu.com');
xhrPOST.withCredentials = true;
を加えてsendしてみましたが、結果は変わりません。
「いいね！」 1
mura
2024 年 3 月 5 日午後 11:26
5
こちら、時間が経ちましたが解決はされましたでしょうか？
Chartworkのファイル送信APIは multipart/form-data 形式で受け付けてそう
kintone.proxy.upload() はその形式でuploadできない（のでご認識の通りChatwork（に限らず多くのAPIで）は、セキュリティ対策の為CORS による制約があり、ブラウザから直接利用できない、ので、xhrで処理できない
という前提があります。
ただし、ファイル送信は不可能か、という問に対してはNoで、具体的には、
もしくは、バッチ処理で、自前のサーバーからkintone REST API経由でデータを取得し、Chatworkに送る方法も取れると思います。