Dropbox Embedderをkintoneに埋め込む方法

#自己紹介

今回ノベルワークスにインターンとして参加させていただいてます、よっぴーです！

案件でDropbox Embedderを使うことがあり調査したので、今回のこの記事としてまとめておきます。

#概要

今回は、Dropbox Embedderをkintoneの詳細画面に埋め込み既存のフォルダーを表示する手順について解説していきます。

操作手順

１、文字列フィールドに表示したいフォルダ名を記入（既にフォルダーを作成している必要があります。）

２、「Dropbox表示」ボタンをクリック

３、スペースフィールド内に、1で入力したフォルダがDropbox Embedderによって表示される

<img width="300px" alt="スクリーンショット 2020-09-14 16.02.53.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/707402/490e503a-725f-3f12-c069-8b1f4e6d4f5f.png">




##実装に必要な物

・Dropboxアカウント
・kintoneアカウント

##公式ドキュメント

https://www.dropbox.com/developers/embedder


##実装手順

###①dropbox api設定

####１、アプリコンソールをクリック

https://www.dropbox.com/developers

![スクリーンショット 2020-09-09 21.02.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/707402/a4a208b8-7841-1f5c-b98c-373b06582eec.png)


####２、App作成

初めて開発者登録した場合は、すぐに最初のアプリを作る画面になりますが、過去に一度でもアプリを作った事がある方なら、App Consoleにはアプリの一覧が表示されます。その場合は「Create App」を押して新規のアプリを作成しましょう。

![スクリーンショット 2020-09-09 21.14.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/707402/2bc36a88-8bae-9e02-d078-bbe700d41b3d.png)



####３、スコープ設定

「Scoped access」を選び、「Full Dropbox– Access to all files and folders in a user's Dropbox」を選択します。
最後に「Name your app」に作成するアプリの名前を記述します。

![スクリーンショット 2020-09-14 6.31.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/707402/97610e80-0712-1ef2-8597-421ae5cea340.png)

####４、必要なキーを取得

この画面では、「App key」と「Generate」をクリックして「access token」を入手します。

![スクリーンショット 2020-09-09 21.27.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/707402/04a0895e-37d5-4b30-1faa-e5409ba21dac.png)

####５、ドメイン設定

最後に、kintoneドメインを取得し再度、Dropbox APIを開きkintoneのドメインを「Chooser / Saver / Embedder domains」に追加します。

例）xxxxxxxx.cybozu.com がドメインになります。

![スクリーンショット 2020-09-14 7.43.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/707402/e82130df-30f1-fd3e-17f9-050543689a2c.png)


###②kintone環境設定

####１、kintoneのアプリ作成方法

https://jp.cybozu.help/k/ja/user/create_app/tutorial.html

####２、kintoneの構成


|フィールド名|フィールドタイプ|フィールドコード|
|:---|:---|:--|
|文字列 (1行)|文字列(1行)|文字列__1行_|
|-|スペース|button|
|-|スペース|dropbox|


![スクリーンショット 2020-09-14 11.13.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/707402/5e777d53-a88b-3778-ed50-434073f19554.png)


####３、JavaScriptファイルの追加

カスタマイズに必要なライブラリを追加します。

１、jQuery

https://js.cybozu.com/jquery/2.2.4/jquery.min.js

２、 Dropbox

https://unpkg.com/dropbox/dist/Dropbox-sdk.min.js

以下のサイトから取得することができます。

https://dropbox.github.io/dropbox-sdk-js/tutorial-Getting%20started.html


![スクリーンショット 2020-09-14 12.00.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/707402/76633601-d3c5-9b33-5bcf-5567820b8291.png)



###③JavaScriptコード

```js

(function() {
  'use strict';
  kintone.events.on('app.record.detail.show', function(event) {
    $("head").append(`<script type="text/javascript" src="https://www.dropbox.com/static/api/2/dropins.js" id="dropboxjs" data-app-key="App key"></script>`)//属性「data-app-key」にdropboxのapiで作成した、「App key」を設定します。

    var text = event.record.文字列__1行_.value

    // ボタン配置
    var mySpaceFieldButton = document.createElement('button');
    mySpaceFieldButton.id = 'my_space_field_button';
    mySpaceFieldButton.innerText = 'Dropbox表示';
    kintone.app.record.getSpaceElement('button').appendChild(mySpaceFieldButton);

    var element = kintone.app.record.getSpaceElement('dropbox')
    $(element).height('500px');
    $(element).width('500px');

    mySpaceFieldButton.onclick = function () {
      var dbx = new Dropbox.Dropbox({ accessToken: 'accessToken' });//'accessToken'にdropboxのapiで作成した、「Generated access token」を設定します。
      dbx.sharingCreateSharedLink({"path": '/' + text})
      .then(function(response) {
        console.log(response)
        var options = {
          // Shared link to Dropbox file
          link: response.url,
          file: {
            // Sets the zoom mode for embedded files. Defaults to 'best'.
            zoom: "fit" // or "fit"
          },
          folder: {
            // Sets the view mode for embedded folders. Defaults to 'list'.
            view: "list", // or "grid"
            headerSize: "normal" // or "small"
          }
        }
        Dropbox.embed(options, element);
      })
      .catch(function(error) {
        console.log(error);
        alert("フォルダーが見当たりません")
      });
    }
  });
})();

```





##コード解説


- 属性「data-app-key」に①４で作成した、「App key」を設定します。


- 「'accessToken'」に①４で作成した、「access token」を設定します。


- sharingCreateSharedLinkのメソッドで共有リンクを作成してます。


フォルダーアップロードAPIやファイルアップロードAPIを使うことで、もっと色んなことができそうです！

以上！