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

**URL:** <https://community.cybozu.dev/t/topic/4012>\
**Category:** kintone 開発相談\
**Created:** [2019 年 4 月 26 日午前 5:34 UTC](https://community.cybozu.dev/t/topic/4012 "2019-04-26T05:34:50Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Legacy\_Account1740](https://avatars.discourse-cdn.com/v4/letter/l/ed8c4c/32.png) [@Legacy\_Account1740](https://community.cybozu.dev/u/Legacy_Account1740)\
**Post date:** [2019 年 4 月 26 日午前 5:34 UTC](https://community.cybozu.dev/t/topic/4012/1 "2019-04-26T05:34:50Z")

</div>

添付ファイル操作は、JSカスタマイズの中では少し敷居が高いです。&nbsp;[kintone.api()](https://community.cybozu.dev/hc/ja/articles/202166310#step1)で[file.json](https://community.cybozu.dev/hc/ja/articles/201941824)を扱えないため、[XMLHttpRequest()](https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest/XMLHttpRequest)等を使ったリクエスト方法の知識が必要となります。 ところが、2019年3月にリリースされた[kintone JS SDK](https://community.cybozu.dev/hc/ja/articles/360025484571)を利用すると容易に添付ファイル操作ができます。 使い方は、[https://developer.cybozu.io/hc/ja/articles/360025484571](https://community.cybozu.dev/hc/ja/articles/360025484571)や[https://kintone.github.io/kintone-js-sdk/latest/](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){vardropArea=document.createElement('div');dropArea.id='dropArea';dropArea.innerText='ドロップしてファイルを追加．';dropArea.addEventListener('dragover',function(e){e.preventDefault();
    });dropArea.addEventListener('drop',function(e){e.preventDefault();varkintoneConnection=newkintoneJSSDK.Connection();varkintoneFile=newkintoneJSSDK.File(kintoneConnection);varkintoneRecord=newkintoneJSSDK.Record(kintoneConnection);Promise.all([].map.call(e.dataTransfer.files,function(file){returnkintoneFile.upload(file.name, file);
      })).then(function(responses){returnkintoneRecord.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:1pxdashed#000;text-align:center;
}

```

## コード比較

kintone JS SDKを利用しなかった場合と利用した場合で、ファイルアップロードのコードを比較すると差は歴然ですね。

・kintone JS SDKを利用しなかった場合

```
varformData=newFormData();varxhr=newXMLHttpRequest();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を利用した場合

```
varkintoneConnection=newkintoneJSSDK.Connection();varkintoneFile=newkintoneJSSDK.File(kintoneConnection);kintoneFile.upload(file.name, file).then(function(response){// アップロード後処理});

```

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1075](https://avatars.discourse-cdn.com/v4/letter/l/5f9b8f/32.png) [@Legacy\_Account1075](https://community.cybozu.dev/u/Legacy_Account1075)\
**Post date:** [2019 年 5 月 1 日午前 6:56 UTC](https://community.cybozu.dev/t/topic/4012/2 "2019-05-01T06:56:02Z")

</div>

[江田篤史](https://community.cybozu.dev/hc/ja/profiles/5826575706-%E6%B1%9F%E7%94%B0%E7%AF%A4%E5%8F%B2) 様

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

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

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

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1740](https://avatars.discourse-cdn.com/v4/letter/l/ed8c4c/32.png) [@Legacy\_Account1740](https://community.cybozu.dev/u/Legacy_Account1740)\
**Post date:** [2019 年 5 月 1 日午前 7:49 UTC](https://community.cybozu.dev/t/topic/4012/3 "2019-05-01T07:49:57Z")

</div>

利絵様

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

GIFという画像ファイルフォーマットを利用しています．  
GIFでは，複数の画像を順番に並べることで，パラパラ漫画のようなアニメーションを作ることができます．  
私の場合は，[ScreenToGif](https://www.gigafree.net/media/recording/ScreenToGif.html)という無料アプリを使って，GIFを作成しています．

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

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

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1075](https://avatars.discourse-cdn.com/v4/letter/l/5f9b8f/32.png) [@Legacy\_Account1075](https://community.cybozu.dev/u/Legacy_Account1075)\
**Post date:** [2019 年 5 月 2 日午前 12:46 UTC](https://community.cybozu.dev/t/topic/4012/4 "2019-05-02T00:46:48Z")

</div>

[江田篤史](https://community.cybozu.dev/hc/ja/profiles/5826575706-%E6%B1%9F%E7%94%B0%E7%AF%A4%E5%8F%B2) 様

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

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

試しにやってみます。