Dropbox Embedderをkintoneに埋め込む方法

自己紹介

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

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

概要

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

操作手順

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

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

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

実装に必要な物

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

公式ドキュメント

実装手順

①dropbox api設定

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

２、App作成

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

３、スコープ設定

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

４、必要なキーを取得

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

５、ドメイン設定

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

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

②kintone環境設定

１、kintoneのアプリ作成方法

２、kintoneの構成

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

３、JavaScriptファイルの追加

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

１、jQuery

２、 Dropbox

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

③JavaScriptコード

(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を使うことで、もっと色んなことができそうです！

以上！