新規投稿
フォローする

kintone JS SDKを使って添付ファイル操作

添付ファイル操作は、JSカスタマイズの中では少し敷居が高いです。 kintone.api()file.jsonを扱えないため、XMLHttpRequest()等を使ったリクエスト方法の知識が必要となります。 ところが、2019年3月にリリースされたkintone JS SDKを利用すると容易に添付ファイル操作ができます。 使い方は、https://developer.cybozu.io/hc/ja/articles/360025484571https://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){
  // アップロード後処理
});
2

3件のコメント

Avatar
利絵

江田篤史 様

お世話になっております。

投稿の中身と関連ない質問で大変失礼いたします。

初心者で大変恐縮ではございますが、江田さんのサンプルの動画はどう作成しているでしょうか?自動で再生ができてリアル感あふれて、とても分かりやすいです。私も社内に向け、このような動くマニュアルを作成したいですが、知識が全然なくて、特定なソフトとかweb知識とか必要でしょうか?なにかアドバイスいただければ幸いです。どうぞご指導のほど、よろしくお願いいたします。

0
Avatar
江田篤史

利絵様

お世話になっております.

GIFという画像ファイルフォーマットを利用しています.
GIFでは,複数の画像を順番に並べることで,パラパラ漫画のようなアニメーションを作ることができます.
私の場合は,ScreenToGifという無料アプリを使って,GIFを作成しています.

たいていのウェブブラウザはGIFに対応しているので,ウェブページに埋め込んだり,kintoneに保存しておけば閲覧できます.
また,Microsoft PowerPointでも再生できます.

ただし,Microsoft WordやPDFなどではデフォルトで再生されないので,マニュアルに埋め込む場合は,マニュアル自体のファイルフォーマットを気にする必要があります.
手軽なものですと,GoogleドキュメントがGIF対応しているので,検討してみると良いかと思います.

1
Avatar
利絵

江田篤史 様

お世話になっております。

早速お返事いただき、誠にありがとうございます。

試しにやってみます。

0
サインインしてコメントを残してください。