자기소개

이번 노벨 웍스에 인턴으로서 참가하겠습니다, 요삐입니다!

안건에서 Dropbox Embedder를 사용하는 경우가 있어 조사했으므로, 이번 이 기사로서 정리해 둡니다.

개요

이번에는 Dropbox Embedder를 kintone의 상세 화면에 포함 기존 폴더를 표시하는 순서에 대해 설명합니다.

작동 절차

1, 문자열 필드에 표시하고 싶은 폴더명을 기입(이미 폴더를 작성하고 있을 필요가 있습니다.)

2, 「Dropbox 표시」버튼을 클릭

3, 스페이스 필드 내에, 1로 입력한 폴더가 Dropbox Embedder에 의해 표시된다

구현에 필요한 것

· Dropbox 계정
· kintone 계정

공식 문서

구현 절차

①dropbox api 설정

1, 앱 콘솔을 클릭

2, App 작성

처음으로 개발자를 등록한 경우에는 즉시 첫 앱을 만드는 화면이 됩니다. 그렇다면 "Create App"을 눌러 새로운 앱을 만드십시오.

3, 스코프 설정

Scoped access를 선택하고 Full Dropbox – Access to all files and folders in a user's Dropbox를 선택합니다.
마지막으로 'Name your app'에 만들 앱의 이름을 설명합니다.

4, 필요한 키를 취득

이 화면에서 'App key'와 'Generate'를 클릭하여 'access token'을 얻습니다.

5, 도메인 설정

마지막으로 kintone 도메인을 검색하고 Dropbox API를 다시 열고 kintone 도메인을 Chooser/Saver/Embedder domains에 추가합니다.

예) xxxxxxxx.cybozu.com이 도메인입니다.

②kintone 환경 설정

1, kintone의 앱 작성 방법

2, kintone의 구성

필드 이름
필드 유형
필드 코드


문자열 (1 행)
문자열(1행)
문자열_1행

-
공간
버튼

-
공간
dropbox

3, JavaScript 파일 추가

사용자 지정에 필요한 라이브러리를 추가합니다.

1, jQuery

2, 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」에 ①4에서 작성한 「App key」를 설정합니다.

''accessToken''에 ①4에서 작성한 'access token'을 설정합니다.

sharingCreateSharedLink 메서드에서 공유 링크를 만듭니다.

폴더 업로드 API와 파일 업로드 API를 사용하면 더 많은 것을 할 수 있습니다!

이상!