Dropbox Embedderをkintoneに埋め込む方法
自己紹介
今回ノベルワークスにインターンとして参加させていただいてます、よっぴーです!
案件でDropbox Embedderを使うことがあり調査したので、今回のこの記事としてまとめておきます。
概要
今回は、Dropbox Embedderをkintoneの詳細画面に埋め込み既存のフォルダーを表示する手順について解説していきます。
操作手順
1、文字列フィールドに表示したいフォルダ名を記入(既にフォルダーを作成している必要があります。)
2、「Dropbox表示」ボタンをクリック
3、スペースフィールド内に、1で入力したフォルダがDropbox Embedderによって表示される
実装に必要な物
・Dropboxアカウント
・kintoneアカウント
公式ドキュメント
実装手順
①dropbox api設定
1、アプリコンソールをクリック
2、App作成
初めて開発者登録した場合は、すぐに最初のアプリを作る画面になりますが、過去に一度でもアプリを作った事がある方なら、App Consoleにはアプリの一覧が表示されます。その場合は「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行 |
- | スペース | button |
- | スペース | 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を使うことで、もっと色んなことができそうです!
以上!
Author And Source
この問題について(Dropbox Embedderをkintoneに埋め込む方法), 我々は、より多くの情報をここで見つけました https://qiita.com/yoppywork/items/51589f113db33318689a著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .