おすすめ記事

おすすめ記事一覧

BubbleとGitHubの統合でプラグインのバージョンを保存する方法を解説!

記事作成

皆さん、ごきげんよう!!

今回は、BubbleをGitHubと統合して、自分で構築したプラグインのバージョンを保存・管理する方法を解説していきます。コードを書く人にとってGitHubは馴染み深いシステムであると思うので、今回の記事を参考にして、構築したプラグインのバージョン管理を適切にしていきましょう。

Github の統合

概要

BubbleはGitHubと統合しているので、プラグインのバージョンをリポジトリに保存することができ、Gitのバージョン管理機能の恩恵を受けることができます。主なデータストアは Bubbleのサーバーのままで、GitHubにあるのはプラグインのコピーであることに注意してください。Git上でコードを修正すれば、最新のコミットをBubbleのストレージに取得できるようになります。

GitHubとの接続

まずは、BubbleとGitHubのアカウントを連携させます。GitHubを使ってサインアップしていれば完了ですが、そうでない場合はアカウントページかマイプラグインページでアカウントをリンクさせます。

これが完了すると、プラグインエディタのバージョンタブにあるGitHubセクションを利用できるようになります。

GitHubとの同期

最初の同期化

最初に「Synchronize with GitHub」を押すと、GitHubアカウントに新しいリポジトリが作成されます。Bubbleは、一般タブで定義したプラグイン名に基づいてリポジトリ名を生成します。デフォルトでは、Bubbleはプライベートリポジトリを作成しようとします。GitHubの有料プランを利用していない場合は操作に失敗し、プラグインをオープンソースにした場合はMITライセンスで公開リポジトリを作成できるようになります。

注意点としては、GitHub上のリポジトリを削除すると接続がリセットされ、次の同期は最初の同期と同じようになることです。よって、新しいリポジトリが作成されます。

二回目以降の同期化

接続を設定してしまえば、定期的にGitHbと同期できるようになりますが、以下のの状況が発生することがあります。

1.Bubble のストレージ (Editor にあるもの) のバージョンが、現在のコミットよりも先にある。これは、前回の同期以降に Bubble でプラグインを変更していて、GitHub に直接コミットしていないことを意味します。新しいバージョンのプラグインは、自動コミットメッセージとともに Git にプッシュされます。

2.GitHub でプラグインを変更していて (例えば変更リクエストを引っ張ってきたなど)、Bubble でバージョンを変更していない場合、新しいバージョンがGitHubからフェッチされ、こちらのバージョンを修正することができます。

3.両方のバージョン(BubbleとGitHubの)が修正され、GitHubで新しいコミットが行われ、これをBubbleのバージョンとうまくマージすることができます。同期はGitHubからBubbleに最新バージョンをマージして引っ張ってきます。

4.両方のバージョンが修正されており、いくつかの競合があります。Bubbleのバージョンは修正されず、自分のレポにプルリクエストが作成されます。その後、マージ作業を行い、コンフリクトを解決し、マスターブランチにプルします。これが完了すると、次の同期でコンフリクトのないバージョンが Bubble にフェッチされます。

プラグインのフォーク

GitHubとの統合の主な利点のひとつは、公開されているオープンソースのプラグインをフォークできるようになったことです。その場合、あなたのアカウントにプラグインをフォークするボタンが表示されます。これでプラグインがコピーされ、Gitリポジトリがフォークされ、新しいプラグインが新しいリポジトリに同期されます。これで、プラグインを通常通りに作業することができ、元のプラグインの作者と一緒に作業をする際には GitHub のネイティブ機能を利用することができます。

フォルダとコード構造

プラグインを gitリポジトリに同期させると、構造化された形で全体のデータが同期されます。GitHubでプラグインを修正するとき、あるいは他のコードエディタで修正したときや、他の人の修正をマージしたとき)は、構造を同じにしておくことをお勧めします。ここでは、プラグインのコードやデータがどのように構造化されているかについて、以下で重要なことを説明します。

ファイル形式

データとコードは、JSONファイル、javaScriptファイル、またはHTMLファイルとして表現することができます。ページに注入されるHTMLヘッダーはHTMLファイルになり、異なる要素のコードとアクションのコードはjavaScriptになります。それ以外はすべてJSONファイルとして表現され、BubbleのUIを通して修正することができます。JSONファイルを修正する際には注意してください

フォルダ構造

フォルダはプラグインエディタのアーキテクチャに従う傾向があります。Shared Techタブで見つけられるものはルートレベルにあり、API呼び出し、要素、アクションは3つの別々のフォルダにあります。APIの定義は1つの主要なJSONファイルで、要素とアクションはサブフォルダに分かれています。

ID

フォルダを移動すると、JSONファイルの中にユニークなID(「AED」など)のキーがいくつかあることに気づくと思います。これは、要素やAPI内のパラメータなどに適用されます。これらのエントリは、ユーザーのアプリで異なるエントリを表すために使用されますので、修正しないでください(逆にキャプションなどを修正することもできます)。

個人データと資格情報

プラグイン、特に API をテストする場合、テスト目的でいくつかの資格情報を使用しています。このデータは GitHubと同期されません。

まとめ

今回の記事では、BubbleとGitHubの統合の仕方について解説していきました。上記でも述べた通り、GitHubのレポジトリ上にはあくまで、構築したプラグインのコピーが保存されます。この記事を参考にして、Bubbleにて自ら構築したプラグインをGitHub上に保存・管理していきましょう。

ここまでご覧いただき、ありがとうございました!!

臼井 崇

臼井 崇

テコンドー学生チャンピオン|2010年(H22年)に野村證券入社 ⇒ 5年半ザ・野菜を経験 |2015年10月からみずほFGにて金融商品のリスク管理業務に従事|2020年7月からファウンダーズに|金融からIT 、大手からベンチャーとそれぞれの観点からお役に立ちそうな情報を発信します!
日本に限らず海外のSaaSの紹介や、SaaS特集記事を取り上げていきます!
ご相談・お問い合わせは下記ボタンよりお願いします。







関連記事

  1. 記事作成

    【マーケティング会社必見】LP制作ツール「Unbounce」を徹底解説!

  2. 記事作成

    Bubble・データを保存する&データタブ

  3. 記事作成

    Bubbleのプラグイン基礎を徹底解説!!

  4. 記事画像

    【学生必見】BubbleによるWebアプリ開発のリアルに迫る!

  5. Adalo Resource・ユーザーが他の人をフォローできるようにする方法、フォームにステータス(…

  6. Adalo Resource・空の状態を作る方法、検索バーの作成方法、ユーザーがフィルタリングできる…

  7. SaaSロゴ

    Yelo(Jungleworks)

  8. 記事作成

    【2020年】NoCodeでスタートアップ構築!ツール14選!

  9. 記事作成

    Bubbleアプリに独自ドメイン名を使用する方法を解説してみた!!

人気記事

  1. topimage
  2. 記事画像
  3. 特集記事
  4. top_image

おすすめ記事一覧

  1. 記事画像
  2. 飲食店 会計
  3. top_image
  4. 記事画像
  5. 記事画像
PAGE TOP