ノーコード PR

【完全解説】Boxプラグインを用いてBubbleのストレージ容量を拡張する方法

bubble-box
記事内に商品プロモーションを含む場合があります

ノーコードツール「Bubble」のストレージ容量はFreeプランで0.5GB、Personalプランで10GBと、お世辞にも多くないので容量に不安を抱える方も多いのではないでしょうか?

※なお、Professionalプラン以上では、いつでもストレージ容量を追加できますが、10GBあたり月額10ドルとかなり割高です。

そこで本記事ではクラウドストレージサービスである「Box」を利用してBubbleのストレージ容量を拡張させる方法を初学者向けに分かりやすく解説していきたいと思います。

ノーコードの副業におすすめ!

エンジニア、デザイナー向けの週2、3日のお仕事紹介【ITプロパートナーズ】【公式HP】https://itpropartners.com/

  • 週3日〜の案件を数多く扱っている
  • エンド直ゆえに高単価案件が多い
  • フルリモート案件など、柔軟な働き方に対応した案件が多い
  • トレンド技術を取り入れた魅力的な案件が豊富にある
  • 専属エージェントが希望に沿った案件を紹介してくれる

\ 最短60秒で登録可能! /
無料会員登録
案件を探す

nocode-sidejob
【ノーコードWeb制作】副業の始め方とおすすめの案件獲得サイト20選「ノーコードのスキルを活かして副業収入を得たい」「ノーコードの案件を獲得するのにおすすめのサイトがあれば教えて欲しい」このような方向けに本記事ではノーコードツールを使った副業の始め方と土日で稼ぐのにおすすめの案件獲得サイトを紹介します。...

【事前準備編】Boxプラグインのインストール

paiza-job

まずはじめにBubbleのエディタからBoxプラグインをインストールしておきましょう。

「Plugins」→「+Add plugins」をクリックし、”Box”と検索すると対象のプラグインを見つけることができるかと思います。

Boxプラグイン

Boxプラグインのインストールが完了したらboxのプラグイン画面を開いてみましょう。

boxプラグインの情報

次章の作業はBoxプラグインを利用するために必要となるIDやKey情報を取得するためのものとなります。設定値を入力することでBubbleとBoxが連携されるという訳です。

まずはじめに事前準備としてBoxプラグインをインストールしておこう。

 

Box側の作業

box

Boxのアカウント登録

https://ja.developer.box.com/にアクセスしてサインアップを行います。

すでにBoxのアカウント登録が済んでいるという方は本節の内容をスキップしてください。

「サインアップ」ボタンを押下すると、以下の画面に遷移するかと思うので、必要な情報を入力して「開始する」をクリックしましょう。

box登録

すると登録したメールアドレス宛に以下のような認証用メールが届くはずなので、「Verify Email」をクリックしましょう。

box認証

サインインすると以下の画像のようなコンソール画面に遷移するかと思います。

Boxコンソール

以上でBoxのアカウント登録は完了です。

Boxにおける新規アプリの作成

Boxの開発者コンソールで「Create new app」をクリックする。

Boxのアカウント設定画面より言語を日本語に変えられます。以降、日本語の設定を行ったことを前提に説明を続けます。

アプリタイプを「カスタムアプリ」とし、認証方法は「サーバー認証(JWT)」を選択しましょう。アプリ名を入力して「アプリの作成」をクリックすればアプリが作成されます。

カスタムアプリ

公開キーの追加と公開キーIDの取得

次に公開キーを追加しましょう。アプリを新規で作成すると「構成」タブに遷移するかと思うので下にスクロールしていってください。

公開キーの追加と管理の項目にある「公開キーを追加」ボタンをクリックします。

公開キーの追加
この時点で2段階認証をまだ設定していない場合は、設定するように求められるので先に設定を済ませておきましょう。

2段階認証の設定を済ませた状態で「公開キーを追加」ボタンをクリックすると、以下のような公開キーを追加するためのポップアップが表示されるので情報を入力します。

公開キーの追加

なお、公開キーの情報はBubbleエディタを開き、「Settings」→「API」に移動し、「Download public JSON Web Key」をクリックすることで取得可能です。

ダウンロードされたpemファイルをお手持ちのテキストエディタで開いたら、中身をコピーし、Boxのポップアップに貼り付け「確認して保存」をクリックしましょう。

公開キーを追加すると、公開キーIDが表示されるはずなので、その値をBoxプラグインのPublic Key ID(-dev含む)に入力します。

その他IDとシークレット情報のプラグインへの入力

次に、OAuth2.0資格情報の項目にあるクライアントIDをコピーしてBubbleエディタに移動し、BoxプラグインのClient IDAPI Key(-dev含む)欄に入力しましょう。

OAuth資格情報

同様の手順にてクライアントシークレットの値をコピーして、BoxプラグインのClient Secret(-dev含む)欄に入力します。

ユーザーIDとEnterprise IDについては、Boxにてアプリを新規作成したタイミングで生成されるものです。以下の画像のように「一般設定」タブから値を確認することができます。

Boxの資格情報

ユーザーIDの値をBoxプラグインのUser ID(-dev含む)欄に、Enterprise IDの値をBoxプラグインのEnterprise ID(-dev含む)欄に入力して情報の入力は完了となります。

Boxアプリ側の設定を行う

Boxで作成したアプリを開き、構成タブに移動しアプリアクセスレベルを「アプリ+Enterpriseアクセス」に変更します。

アプリアクセスレベル

次に下にスクロールしていくと、高度な機能という項目があるかと思うので、「as-userヘッダーを使用してAPI呼び出しを行う」と「ユーザーアクセストークンを生成する」にチェックを付けましょう。

高度な設定

さらにスクロールしていくと、CORSドメインという項目があるので、許可する送信元を入力します。入力する値は「https://アプリ名.bubbleapps.io/」です。

CORSドメイン

ここまでの設定が完了したら最後に忘れず右上の「変更を保存」をクリックしましょう。

Boxの管理者コンソールにてアプリの追加設定を行う

Boxの画面右上にある「アカウント」アイコンを開いて、ドロップダウンメニューより「管理コンソール」をクリックします。

すると以下の画面に遷移するかと思うので、左側メニューより「アプリ」を選択し、画面右上にある「アプリの追加」を押下します。

Box管理者コンソール

するとクライアントIDを入力するように求められるので、先に取得した値を入力しましょう。入力すべき値はBoxプラグインのClient IDに入力した値と同じものでOKです。

最後に「承認」ボタンを押下すると、サーバー認証アプリ一覧にBubbleで開発したアプリが追加されるはずです。承認ステータスが「承認済み」となっているか確認しましょう。

Box側で新規作成したアプリとBubbleを紐づけるための設定が完了。

 

Bubble側での実装

bubble-security

実は前章までの設定が完了していれば、Bubble側での特段の設定は不要です。

普段通り「File Uploader」エレメントをドラック&ドロップしてエディタを開くと、新たに「Storage service」パラメータが追加されているはずなので、「Box」を選択します。

Storage Service

Storage serviceをBoxとした状態でファイルをアップロードすると、ファイルがBox上にアップロードされるようになるのでPreviewから動作確認してみましょう。

以下のようにBoxの「すべてのファイル」にファイルがアップロードされていればOKです。

Boxすべてのファイル
File Uploaderの「Folder path」パラメータでBoxへのアップロード先のフォルダを制御することができます。
Bubbleストレージ(S3)ではなく、Boxにアップロードすると「Data」→「File Manager」にファイルが表示されません。※あくまでFile Managerで確認できるのはBubbleストレージで管理しているファイルのみのため。

Boxプラグインを用いてBubbleのストレージ容量を拡張する方法|まとめ

bubble-box

ここまで「Box」を利用してBubbleのストレージ容量を拡張させる方法について解説してきましたがいかがだったでしょうか?

手順通り設定を進めれば問題なくBoxとBubbleを連携させることができるはずなので、めげずに設定してみてください(^^)

たろう
たろう
ここまで記事を読んでいただきありがとうございました♪

本記事がBubbleのストレージ容量で頭を悩ませている方のお役に立てたのなら幸いです。

stripe
【Bubble】Stripeプラグインを用いたクレカ決済の実装手順Bubbleで開発したWebアプリにStripeによる決済処理を導入するには?本記事ではStripeを活用した通常課金・返金処理、仮売上と請求確定、サブスクリプション処理とその解約処理の実装方法について解説しております。...
bubble-security
【ノーコード】Bubbleのセキュリティは弱い?懸念と5つの対策についてノーコードツール「Bubble」のセキュリティは弱い?本記事ではBubbleのセキュリティに対する懸念と最低限実施すべきセキュリティ対策について解説しております。...
nocode-sidejob
【ノーコードWeb制作】副業の始め方とおすすめの案件獲得サイト20選「ノーコードのスキルを活かして副業収入を得たい」「ノーコードの案件を獲得するのにおすすめのサイトがあれば教えて欲しい」このような方向けに本記事ではノーコードツールを使った副業の始め方と土日で稼ぐのにおすすめの案件獲得サイトを紹介します。...
nocode-freelance-agent
【2024年最新】ノーコードエンジニアにおすすめのフリーランスエージェント20選ノーコードのスキルを身につけたが営業は苦手だし独立後に案件を獲得できるか不安。そんなノーコードエンジニア向けに本記事ではおすすめのフリーランスエージェントを厳選して紹介しております。...
こちらの記事もおすすめ!

POSTED COMMENT

  1. aa より:

    box画面右上に管理コンソールなんてありません。
    UIが変わったのでしょうか。
    現在のUIではどこに管理コンソールがあるのでしょうか?
    御教授お願いいたします。

    • たろう より:

      ご質問いただきありがとうございます!

      >>Boxの画面右上にある「アカウント」アイコンを開いて、ドロップダウンメニューより「管理コンソール」をクリックします。
      という手順通りにやっても見つかりませんか?
      UIが変更されている可能性もあるかと思い先程確認しましたが、上記の流れで「管理コンソール」が見つかりました

  2. bb より:

    aaさんと同様に管理コンソールは表示されませんでした。
    無料プランでは表示されないのでしょうか。

    • たろう より:

      コメントありがとうございます。無料プランで記事を執筆しているので、有料プランでないと表示されないということはないと考えてます。
      お手数ではございますが、Boxのサポートに問い合わせをお願いできますでしょうか。お力になれず申し訳ないです。

  3. cc より:

    いつも有益な情報ありがとうございます!
    みなさんと同様、表示されませんでした。
    そもそもEnterpriseIDは無料の個人用だと0になりませんか?色々調べて回ってますが、なかなかBOX連携できなく困ってます。。。

COMMENT

メールアドレスが公開されることはありません。 が付いている欄は必須項目です