添付ファイル操作は、JSカスタマイズの中では少し敷居が高いです。 kintone.api()でfile.jsonを扱えないため、XMLHttpRequest()等を使ったリクエスト方法の知識が必要となります。 ところが、2019年3月にリリースされたkintone JS SDKを利用すると容易に添付ファイル操作ができます。 使い方は、https://developer.cybozu.io/hc/ja/articles/360025484571やhttps://kintone.github.io/kintone-js-sdk/latest/で紹介されています。 今回は、kintone JS SDKの利用例を紹介します。
サンプル
詳細画面で、ファイルをドロップするとレコードの添付ファイルに追加します。
フォーム設定
コード
JavaScript
「kintone-js-sdk.min.js」を読み込み後、下記「sample.js」を読み込みます。
・sample.js
(function() {
"use strict";
kintone.events.on([
'app.record.detail.show',
], function(event){
var dropArea = document.createElement('div');
dropArea.id = 'dropArea';
dropArea.innerText = 'ドロップしてファイルを追加．';
dropArea.addEventListener('dragover', function(e){
e.preventDefault();
});
dropArea.addEventListener('drop', function(e){
e.preventDefault();
var kintoneConnection = new kintoneJSSDK.Connection();
var kintoneFile = new kintoneJSSDK.File(kintoneConnection);
var kintoneRecord = new kintoneJSSDK.Record(kintoneConnection);
Promise.all([].map.call(e.dataTransfer.files, function(file){
return kintoneFile.upload(file.name, file);
})).then(function(responses){
return kintoneRecord.updateRecordByID(
kintone.app.getId(),
kintone.app.record.getId(),
{添付ファイル:
{value: event.record.添付ファイル.value.concat(responses)}
}
);
}).then(function(){
location.reload();
});
});
kintone.app.record.getSpaceElement('space').appendChild(dropArea);
});
})();
CSS
下記「sample.css」を読み込みます。
#dropArea{
padding: 100px;
border: 1px dashed #000;
text-align: center;
}
コード比較
kintone JS SDKを利用しなかった場合と利用した場合で、ファイルアップロードのコードを比較すると差は歴然ですね。
・kintone JS SDKを利用しなかった場合
var formData = new FormData();
var xhr = new XMLHttpRequest();
formData.append('__REQUEST_TOKEN__', kintone.getRequestToken());
formData.append('file', file, file.name);
xhr.open('POST', encodeURI('/k/v1/file.json'));
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
xhr.addEventListener('load', function(){
// アップロード後処理
});
xhr.send(formData);
・kintone JS SDKを利用した場合
var kintoneConnection = new kintoneJSSDK.Connection();
var kintoneFile = new kintoneJSSDK.File(kintoneConnection);
kintoneFile.upload(file.name, file).then(function(response){
// アップロード後処理
});
3件のコメント
江田篤史 様
お世話になっております。
投稿の中身と関連ない質問で大変失礼いたします。
初心者で大変恐縮ではございますが、江田さんのサンプルの動画はどう作成しているでしょうか？自動で再生ができてリアル感あふれて、とても分かりやすいです。私も社内に向け、このような動くマニュアルを作成したいですが、知識が全然なくて、特定なソフトとかweb知識とか必要でしょうか？なにかアドバイスいただければ幸いです。どうぞご指導のほど、よろしくお願いいたします。
利絵様
お世話になっております．
GIFという画像ファイルフォーマットを利用しています．
GIFでは，複数の画像を順番に並べることで，パラパラ漫画のようなアニメーションを作ることができます．
私の場合は，ScreenToGifという無料アプリを使って，GIFを作成しています．
たいていのウェブブラウザはGIFに対応しているので，ウェブページに埋め込んだり，kintoneに保存しておけば閲覧できます．
また，Microsoft PowerPointでも再生できます．
ただし，Microsoft WordやPDFなどではデフォルトで再生されないので，マニュアルに埋め込む場合は，マニュアル自体のファイルフォーマットを気にする必要があります．
手軽なものですと，GoogleドキュメントがGIF対応しているので，検討してみると良いかと思います．
江田篤史 様
お世話になっております。
早速お返事いただき、誠にありがとうございます。
試しにやってみます。