kintone×Dropbox連携JS公開
Dropbox→kintone連携プログラムできました。
Dropboxにファイルを保存しており、kintoneから参照したい！というニーズにお応えし、連携プログラムを開発しましたので、公開いたします。
機能としては任意のフォルダを マウスで参照、指定してkintoneのレコードと関連付け、一覧表示します。
下記画面の 任意のフォルダをクリックすると、フォルダに移動して、指定可能です。
シンプルですが、使い勝手は悪くありませんし、任意でDropboxフォルダを指定できるのは快感です！！
無償版発表時よりも、さらにパワーアップしてのご提供ができました。
御希望の方は、申込フォームより、お申し込みください。
組込用のJSプログラム、CSSを記載したメールが自動返信されます。
「kintone×Dropbox連携JS」 は MIT Licenseです。
機能
1，kintoneのレコード詳細画面より、任意にDropboxのフォルダ指定が可能
2，表示しているDropboxフォルダへクリック1つで移動可能（Web画面）
3，kintoneのレコード編集画面にせずとも、ファイル操作可能
4，ファイル一覧の縮小版が表示されます。
今のところは単純な機能ですが、要望が多ければ更なるバージョンアップも検討します。
個人的には、kintoneのレコードから自由自在にファイルが見られるのは快感以外の何者でもありません。
こんなに快適になるなんて、想像しておりませんでした。
利用イメージ
「Dropbox開発用アプリ」インストール手順
概要
1，Dropbox アクセス トークンの取得（Dropbbox Access Token）
2，Kintoneのフォームの設定
3，「dropbox.js」の設定
4，kintoneのJavascriptの設定
Dropbox API トークンの取得
1) 自分のDropboxにログイン
2) https://www.dropbox.com/developers/ にアクセス
3) 画面右上の「App console」をクリック
4) 「Create app」ボタンをクリック
4-1) 「1. Choose an API」で 「Dropbox API」を選択
4-2) 「2. Choose the type of access you need」で
「 Full Dropbox? Access to all files and folders in a user’s Dropbox.」を選択
4-3) 「3. Name your app」で任意のアプリ名を設定
例）kintone など任意の名前を付ける
4-4) 「Create App」をクリック
↓イメージ画像
5）4-3 の「3. Name your app」で指定した「My App」を開く
6) タブ「Settings」項目「OAuth 2」の「Generated access token」欄の「Generate」をクリック
7) 「Wh_」で始まるDropboxのアクセス トークンが生成されるので、コピーして、一次的にメモ帳などへ貼り付け
※必ずしもwh_で始まる訳では御座いませんが、アルファベットを全てコピーなさってください。
↓イメージ画像
kintoneのフォームの設定
1) kintoneの「アプリの設定」の「フォーム」タブを開く
2) 「文字列（１行）」を
フィールドコード「DROPBOX_CURRENT_DIR」として配置
（Dropboxのパスを保存するフィールド）
3) 「スペース」を 要素ID「dropbox」として配置
（Dropboxのリストを表示する領域）
↓フィールドの設定イメージ
dropbox.js の設定
dropbox.js をテキストツールで開いて編集します。
WindowsはTerapadなどお勧め。
1) 「dropbox.js」の中「設定」の「DROPBOX_ACCESS_TOKEN」に「Wh_」で始まるDropboxアクセストークンを設定
2) dropbox.js 「設定」 の「TARGET_ID」に「dropbox」と設定（デェフォルトで設定済み）
3) dropbox.js 「設定」 の「FIELDE_CODE」に「DROPBOX_CURRENT_DIR」と設定（ディフォルトで設定済み）
4) dropbox.js 「設定」 の「DOCUMENT_ROOT」にDropboxのパスを設定するとアクセスできる最上位ディレクトリを設定することができます
（デェフォルトでは制限なしの空の値が設定されています。つまり、ROOTフォルダからのアクセスとなります。）
例）DOCUMENT_ROOT:”” → DropboxのRoot（最上位の表示で、全フォルダ）が閲覧可能
DOCUMENT_ROOT:”/photo” → Rootフォルダの直下にある 「photo」フォルダが表示
※ Javascript内でのみ有効な制限になります。
↓ dropbox.js を開いて、「設定」箇所の編集イメージ
5) ファイルを保存してkintoneに組込みます。 ※以下参照
kintoneのJavascriptの設定
1) kintoneの組込みたいアプリを開きます。
2)「アプリの設定」の「設定」タブを開く
3) 「JavaScript / CSSでカスタマイズ」をクリック
4) 項目「PC用のJavaScriptファイル」の欄に下記の順で追加する
4-1) 「URL指定で追加」で 「https://unpkg.com/dropbox/dist/Dropbox-sdk.min.js」を追加
4-2） 「アップロードして追加」で「dropbox.js」を追加
5) 項目「PC用のCSSファイル」の欄に下記を追加する
5-1) 「アプロードトして追加」で「dropbox.css」を追加
6) 「保存」ボタンを押し「アプリを更新」を押す
↓JSファイル＆cssファイル＆DropboxのJS 組込イメージ
その他の無料JavaScript
kintone用 JavaScript 第1弾「タブメニューJS」
https://niconico-news.com/archives/1184
申し込み
kintone×Dropbox連携JSの配布は終了いたしました。
LINEビジネスアカウントでも様々なＤＸ経営のノウハウ、考え方などを発信中！
kintone×Dropbox連携JS公開
Dropbox→kintone連携プログラムできました。
Dropboxにファイルを保存しており、kintoneから参照したい！というニーズにお応えし、連携プログラムを開発しましたので、公開いたします。
機能としては任意のフォルダを マウスで参照、指定してkintoneのレコードと関連付け、一覧表示します。
下記画面の 任意のフォルダをクリックすると、フォルダに移動して、指定可能です。
シンプルですが、使い勝手は悪くありませんし、任意でDropboxフォルダを指定できるのは快感です！！
無償版発表時よりも、さらにパワーアップしてのご提供ができました。
御希望の方は、申込フォームより、お申し込みください。
組込用のJSプログラム、CSSを記載したメールが自動返信されます。
「kintone×Dropbox連携JS」 は MIT Licenseです。
機能
1，kintoneのレコード詳細画面より、任意にDropboxのフォルダ指定が可能
2，表示しているDropboxフォルダへクリック1つで移動可能（Web画面）
3，kintoneのレコード編集画面にせずとも、ファイル操作可能
4，ファイル一覧の縮小版が表示されます。
今のところは単純な機能ですが、要望が多ければ更なるバージョンアップも検討します。
個人的には、kintoneのレコードから自由自在にファイルが見られるのは快感以外の何者でもありません。
こんなに快適になるなんて、想像しておりませんでした。
利用イメージ
「Dropbox開発用アプリ」インストール手順
概要
1，Dropbox アクセス トークンの取得（Dropbbox Access Token）
2，Kintoneのフォームの設定
3，「dropbox.js」の設定
4，kintoneのJavascriptの設定
Dropbox API トークンの取得
1) 自分のDropboxにログイン
2) https://www.dropbox.com/developers/ にアクセス
3) 画面右上の「App console」をクリック
4) 「Create app」ボタンをクリック
4-1) 「1. Choose an API」で 「Dropbox API」を選択
4-2) 「2. Choose the type of access you need」で
「 Full Dropbox? Access to all files and folders in a user’s Dropbox.」を選択
4-3) 「3. Name your app」で任意のアプリ名を設定
例）kintone など任意の名前を付ける
4-4) 「Create App」をクリック
↓イメージ画像
5）4-3 の「3. Name your app」で指定した「My App」を開く
6) タブ「Settings」項目「OAuth 2」の「Generated access token」欄の「Generate」をクリック
7) 「Wh_」で始まるDropboxのアクセス トークンが生成されるので、コピーして、一次的にメモ帳などへ貼り付け
※必ずしもwh_で始まる訳では御座いませんが、アルファベットを全てコピーなさってください。
↓イメージ画像
kintoneのフォームの設定
1) kintoneの「アプリの設定」の「フォーム」タブを開く
2) 「文字列（１行）」を
フィールドコード「DROPBOX_CURRENT_DIR」として配置
（Dropboxのパスを保存するフィールド）
3) 「スペース」を 要素ID「dropbox」として配置
（Dropboxのリストを表示する領域）
↓フィールドの設定イメージ
dropbox.js の設定
dropbox.js をテキストツールで開いて編集します。
WindowsはTerapadなどお勧め。
1) 「dropbox.js」の中「設定」の「DROPBOX_ACCESS_TOKEN」に「Wh_」で始まるDropboxアクセストークンを設定
2) dropbox.js 「設定」 の「TARGET_ID」に「dropbox」と設定（デェフォルトで設定済み）
3) dropbox.js 「設定」 の「FIELDE_CODE」に「DROPBOX_CURRENT_DIR」と設定（ディフォルトで設定済み）
4) dropbox.js 「設定」 の「DOCUMENT_ROOT」にDropboxのパスを設定するとアクセスできる最上位ディレクトリを設定することができます
（デェフォルトでは制限なしの空の値が設定されています。つまり、ROOTフォルダからのアクセスとなります。）
例）DOCUMENT_ROOT:”” → DropboxのRoot（最上位の表示で、全フォルダ）が閲覧可能
DOCUMENT_ROOT:”/photo” → Rootフォルダの直下にある 「photo」フォルダが表示
※ Javascript内でのみ有効な制限になります。
↓ dropbox.js を開いて、「設定」箇所の編集イメージ
5) ファイルを保存してkintoneに組込みます。 ※以下参照
kintoneのJavascriptの設定
1) kintoneの組込みたいアプリを開きます。
2)「アプリの設定」の「設定」タブを開く
3) 「JavaScript / CSSでカスタマイズ」をクリック
4) 項目「PC用のJavaScriptファイル」の欄に下記の順で追加する
4-1) 「URL指定で追加」で 「https://unpkg.com/dropbox/dist/Dropbox-sdk.min.js」を追加
4-2） 「アップロードして追加」で「dropbox.js」を追加
5) 項目「PC用のCSSファイル」の欄に下記を追加する
5-1) 「アプロードトして追加」で「dropbox.css」を追加
6) 「保存」ボタンを押し「アプリを更新」を押す
↓JSファイル＆cssファイル＆DropboxのJS 組込イメージ
その他の無料JavaScript
kintone用 JavaScript 第1弾「タブメニューJS」
https://niconico-news.com/archives/1184
申し込み
kintone×Dropbox連携JSの配布は終了いたしました。