# 個別の質問に派生したので新規で書きます。

①Dropbox \<-\> Bubbleの連携方法を知りた......

**URL:** <https://www.nocode-faq.com/t/topic/673>\
**Category:** bubble\
**Created:** [2021 年 2 月 2 日午前 10:34 UTC](https://www.nocode-faq.com/t/topic/673 "2021-02-02T10:34:16Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Question\_user](https://avatars.discourse-cdn.com/v4/letter/q/53a042/32.png) [@Question\_user](https://www.nocode-faq.com/u/Question_user)\
**Post date:** [2021 年 2 月 2 日午前 10:34 UTC](https://www.nocode-faq.com/t/topic/673/1 "2021-02-02T10:34:17Z")

</div>

個別の質問に派生したので新規で書きます。

①Dropbox \<-\> Bubbleの連携方法を知りたい  
②Bubbleで毎年1000GBほどの動画をホストする場合の対処法について

---

<div class="post-metadata">

**Author:** ![Answer\_user](https://avatars.discourse-cdn.com/v4/letter/a/eb8c5e/32.png) [@Answer\_user](https://www.nocode-faq.com/u/Answer_user)\
**Post date:** [2021 年 2 月 2 日午前 10:34 UTC](https://www.nocode-faq.com/t/topic/673/2 "2021-02-02T10:34:18Z")

</div>

回答者  
①については、「Dropbox V2」プラグインで可能です。( [Dropbox V2 Plugin | Bubble](https://bubble.io/plugin/dropbox-v2-1543169685024x571194097926930400) )  
以下は実装における流れです。

# Dropbox側の操作

(1) Dropbox上でアカウント登録する  
(2)「[https://www.dropbox.com/developers/apps/」で開発者用トークン生成を行う](https://www.dropbox.com/developers/apps/%E3%80%8D%E3%81%A7%E9%96%8B%E7%99%BA%E8%80%85%E7%94%A8%E3%83%88%E3%83%BC%E3%82%AF%E3%83%B3%E7%94%9F%E6%88%90%E3%82%92%E8%A1%8C%E3%81%86)  
-「Generate access token」ボタンを押してトークンを生成。「Short-lived」は4時間で期限切れになるので永続する場合は「No expiration」を選択。  
-「Permissions」でRead権限を付与する

# Bubble側の操作

(1) Dropbox V2をインストールする  
(2) Authorizationのところに「Bearer \<Dropboxで生成したsl.xxの値を入れる\>」  
(3) デザインタブで対象のAPIをデータとして流し込む

- APIが検索できるルートディレクトリは「Apps \> ユーザ名」配下のフォルダになるので注意。  
後は動画・画像などのコンテンツをDropbox上にアップロードし、ダウンロードURLをAPIにて生成、Bubble上で使えるようにすれば自由な操作が可能です。  
どのような操作ができるかは全てDropbox公式ドキュメント「[https://www.dropbox.com/developers/documentation/http/documentation」に記載があります。](https://www.dropbox.com/developers/documentation/http/documentation%E3%80%8D%E3%81%AB%E8%A8%98%E8%BC%89%E3%81%8C%E3%81%82%E3%82%8A%E3%81%BE%E3%81%99%E3%80%82)  
②については、そもそも論で「Vimeo, Youtube」などの動画配信に特化したサービスに動画をアップロードして、それをiframeタグを使ってBubble上で埋め込むのは駄目なのでしょうか。Dropboxを使って動画配信サービスを作ろうとする場合、非常に大きな労力とコストが掛かるのでオススメしません。  
既に動画配信に特化したサービスを使うことをオススメします

質問者  
ご丁寧にステップごとの解説ありがとうございます。  
頂いた手順を元に再度実装に向けて取り組みます！  
②については、「 Vimeo」だとBubble内からの動画のアップロードが難しいとの回答を公式から得たので、外していました。Youtubeは有料会員のみのコンテンツ作りが難しいとのご回答を皆様から得たのでこちらも外しておりました。  
しかしこれらに関しては再度考え直してみたいと思います。引き続きよろしくお願いいたします。

回答者  
公式の回答はあんまり当てにしない方がいいですよ！１次回答する人は基本的に「テンプレート回答」しかしない「非エンジニア」なので。  
[https://developer.vimeo.com/api/guides/start](https://developer.vimeo.com/api/guides/start)  
VimeoにもAPIが公開されているので「自作プラグイン」を作る、あるいはBubble側のプラグインを試してみるのが良いかな、と！  
個人的にはBubbleは汎用性が高すぎるので基本的なことは別サービスを組み合わせれば何でも出来ます。(ただノーコードの範疇を超えてコードを書くことが前提になります :爆笑: )

質問者  
そうなんですね、全く知りませんでした。この1番上のプラグインを試してみたいと思います。  
コードを書いたりプラグインを自作するのは、私の現状では少々ハードルが高すぎるので、既存の物で解決していければと思います。  
ありがとうございます。

回答者  
1つ考えてるのは、Bubbleとvimeoをそもそもくっつけなくて良いんじゃ無いかな、と。  
有料コンテンツ部分はVimeoに飛ばして管理して、ホームページ部分はBubbleで作る。この仕組みは駄目ですか？

質問者  
その流れを今、私もVimeoのサイトをみて考えていました。  
私の場合、オンラインコーチング関連のアプリで、登録しているトレーナーがそれぞれに動画をアップして指定のユーザーのみに公開するということを実装しようとしています。しかしここで１つの懸念事項は、Vimeoに飛ばす場合、私がDropboxのようなクラウドを用意し、トレーナーに動画をそのクラウド上にアップしてもらい、その後私がVimeoにアップして、Bubbleにリンクを貼り付けて表示させるという作業が必要になるかと思います。  
登録者が増えてくると少大変になりそうですが、この方法が1番現実味があるのではと考えています。

質問者  
Dropboxは必要なく、以下の流れの方が良いですね。

# トレーナ側の操作

(1) Bubble上でVimeoに動画をアップする (プラグインを用いて)  
(2) 動画へのアクセスパスワードを同時に設定する ( [動画にパスワードをかけて共有できる「Vimeo」を使ってみよう！プライベート動画共有にお勧め : ビジネスとIT活用に役立つ情報](https://www.asobou.co.jp/blog/life/vimeo) )  
:右向き指差し:あるいはランダム設定でも可能です。

# 受講者側の操作

(1) Bubble-\>Stripeで決済し、動画視聴権を購入。  
(2) 購入した動画へのリンクをクリック (可能であればiframe/videoタグを用いてvimeoをBubble上で埋め込む)  
(3) 購入した際にアクセスパスワードが購入後画面やマイページなどに表示されるのでそれを使って動画へアクセス  
:右向き指差し:(3)のフローは恐らくBubble側で省略できます。

質問者  
分かり易いご説明ありがとうございます、これなら私でも実装できそうです。  
決済機能などは、前回ご指導頂いたおかげで正常かつ私の思いどうりに作動しているので残りはアップロードと表示の部分を早速実装してみます。  
この度はご丁寧なご説明、誠にありがとうございます。  
またDropboxの使い方を一から説明していただいたにも関わらず、申し訳ございません！

質問者  
現在Vimeoに動画をアップする権限をリクエストし承認されました。  
ここで一点質問があるのですが、Vimeoのプラグインでは動画のアップはURLを用いてのworkflowのみとなっています。  
しかし、私の理解ですとURLの生成はどこかのクラウドサービスに動画をアップしない限りできないと思っています。この場合、動画そのものをVimeoにアップできる様なコーディングやプラグインの自作等が必要になってくるのでしょうか？その他のプラグインもみましたが、なかなか目ぼしいものがありません。この点について、もし何かご存知の場合はご教授いただけると幸いです。

回答者  
既存のプラグインで足りない部分はVimeo公式ドキュメントを確認して必要なものを足していく必要がありますね…。たなべさんのやろうとしてることは複雑なので「プラグインを自作する」前提で作らないと駄目ですね。

質問者  
現状、プラグインの自作が必要な気がしますが、私にとってはかなりハードルが高いです。。  
ですので、もう少し試して無理そうだったら、1番現実的な私がDropboxのようなクラウドを用意し、トレーナーに動画をそのクラウド上にアップしてもらい、その後私がVimeoにアップして、Bubbleにリンクを貼り付けて表示させるという方法を実装しようかと思います。

回答者  
今回のプラグイン作成は1度方法さえ学べば簡単にできる部類なので(ドキュメントを読みながら欲しいAPIをコピペしてくるだけ)、恐らくそちらを試した方が良いです。  
「Bubble → Dropbox → (人力) → Vimeo」はコストも掛かるし正直な話、Vimeoに直接動画を上げた方が断然楽です。  
どう言う手順かだけを教えれば質問者さんなら出来るはずなので今度お話ししましょう！  
せっかく良いアイディアなのに無駄に時間とお金を使う必要はないです。

そして何と無くですが「Thinkific」のようなサイト上にオンラインコースサイトを作るほうがいいのかな、と。

> **[Thinkificの使い方：オンラインコースを販売する方法](https://rikiyaishizaki.com/thinkific/how-to-use-thinkific-and-how-to-sell-oneline-course)**

「[https://www.podia.com/pricing」であれば1人のこうしを追加するのに月20$だそうです。](https://www.podia.com/pricing%E3%80%8D%E3%81%A7%E3%81%82%E3%82%8C%E3%81%B01%E4%BA%BA%E3%81%AE%E3%81%93%E3%81%86%E3%81%97%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%99%E3%82%8B%E3%81%AE%E3%81%AB%E6%9C%8820%24%E3%81%A0%E3%81%9D%E3%81%86%E3%81%A7%E3%81%99%E3%80%82)

さらに究極を言えばBubble → Vimeoじゃ無くても用件を満たせる可能性があります。  
例えば「[https://www.nocode.video/」のサイトはWebflow(ページ)](https://www.nocode.video/%E3%80%8D%E3%81%AE%E3%82%B5%E3%82%A4%E3%83%88%E3%81%AFWebflow(%E3%83%9A%E3%83%BC%E3%82%B8)) → MemberStack(会員機能) → Youtube, Vimeo(動画配信)のような構成になっています。このような構成を会員向けに開放し、会員機能が「講師ごとに振り分け出来るか」は未確定ですが、Vimeoに関してはUploadersと言うロールがあるのでVimeo上で直接アップロードしてもらえれば良いのかな、と。  
いや仕事に振り分ける必要ないですね。必要なのはパスワードの受け渡しなので、講師から直接メンバーにパスワードの受け渡しができれば出来そうです。  
[New ways for teams to collaborate on projects - Vimeo Blog](https://vimeo.com/blog/post/collaborate-private-projects/)

## 参考画像

 ![Screenshot 2020-09-08 at 11.43.26.png](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/1X/7deba33cd84d66c5ddefb1be03b35ca097740340.png)

 ![Screenshot 2020-09-08 at 11.45.31.png](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/1X/871a6ce145eda8cf685e62bf35be735938ba6014.png)

 ![Screenshot 2020-09-08 at 11.46.50.png](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/1X/6f4a0a7e34b823c2b7324b9b1baa79a68d6e6dd5.png)

 ![Screenshot 2020-09-08 at 11.52.40.png](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/1X/6034b471f9ead2338881d4a6b9554b68d5af2fc8.jpeg)

 ![Screenshot 2020-09-08 at 11.53.21.png](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/1X/f0b23f08ab91feba4e072440191f49042c2a7241.png)

 ![Screenshot 2020-09-08 at 13.40.21.png](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/1X/d8045b55822d0b3489457d4d4da4f2e74f89a0c1.png)

![Screen Shot 2020-09-08 at 12.23.45 PM.png](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/1X/ddf7133d593716798894bb8b0d03a3951dea6e52.png)

## 参考URL

> **[Dropbox V2 Plugin for Bubble, by SpeechBooth](https://bubble.io/plugin/dropbox-v2-1543169685024x571194097926930400)**
>
> Dropbox V2 Plugin page on Bubble, by SpeechBooth. Add Dropbox V2 in one click to your app. Bubble lets you build web apps without any code.

> **[Login - Dropbox](https://www.dropbox.com/developers/apps/)**
>
> Login to Dropbox. Bring your photos, docs, and videos anywhere and keep your files safe.

> **[HTTP - Developers - Dropbox](https://www.dropbox.com/developers/documentation/http/documentation)**
>
> Dropbox is a free service that lets you bring your photos, docs, and videos anywhere and share them easily. Never email yourself a file again!

[https://developer.vimeo.com/api/guides/start](https://developer.vimeo.com/api/guides/start)

> **[動画にパスワードをかけて共有できる「Vimeo」を使ってみよう！プライベート動画共有にお勧め | ビジネスとIT活用に役立つ情報](https://www.asobou.co.jp/blog/life/vimeo)**
>
> 友人やサークル仲間、家族などに自身が撮影または編集した動画を共有したい場合があると思います。 動画を特定の人に共有したい時、皆さんはどのように共有しますか？ 多くの人は「YouTubeで」と答えるのではないでしょうか？ ...
