Vol.196 BubbleでGoogleサインインを実装する方法

Bubbleというノーコード開発ツールにて、Googleサインインを行う方法について解説していきます。Googleサインインというのはいわゆるアプリケーションに入るさいにメールアドレスを利用しないでGoogleアカウント情報で入ることを指しています。

上記画面がそれに該当しますが、Googleのサインインを果たすために二つの画面を用意します。その一つが、サインイン前の画面です。上記はそれにあたります。そして、サインイン後の画面を用意します。

それが上記の画面です。上記画面では、Nameという項目とImageの項目が二つ並んでいることがわかります。ここに先ほどの画面でサインインしたGoogle情報を埋め込むような形にします。

Googleにサインインする過程は、Airtableと連動するようにしていますが、これは除いても動きます。ここでは、一度Airtableにデータを格納したのち、ページ遷移を行って再度Airtableからデータを取得するという手順を踏んでいます。しかし、単にGoogleサインインを実装したい場合、Airtableの項目はなくても問題ありません。

上記ご覧のように、InputAにGoogleの情報をインプットするような記述にすることでそれが可能になります。

一方でGoogleのOath認証を得る方法は上記の画面にアクセスして行うことになります。こちらのClientIDをBubbleのGoogleプラグインAPIを入れるところにペーストすればGoogle認証が可能になります。

この手順を最後に説明しましたが、どこかのタイミングでGoogle認証を得なければGoogleは立ち上がらないので注意が必要です。

ここまで、BubbleでGoogle認証を行う方法を解説してきましたが、ノーコードで簡単にアプリが作れると聞くと皆さんもやってみたいと思うのではないでしょうか。しかし、実際はそう簡単に作ることはできないのが現状です。いかにその理由を述べます。

ノーコード開発が簡単ではない理由

それは、主に二つあります。それはコストと目的です。コストはわかりやすくお金の問題です。そして、もう一つが何ができるのかという目的に対する問題です。

例えば、ノーコード開発キットであるAdaloはBubbleのように簡単にアプリを作成できますが、Google認証を実装するのに課金を必要とし、さらにリリースまでもっていくのにも課金が必要です。

一方、BubbleはGoogle認証は無料で行えますが、アプリのリリースを行うのに25ドル必要になったり、スプレッドシートとの連携に20ドル必要になったり、メタマスクのプラグインに50ドルかかったりとコストが発生します。とはいっても、このコストに気に病む必要はありません。

ノーコードではないツールでいえば「Flutlab」や「Android Studio」などは比較的簡単に開発を行えるツールといえます。ほかにもWeb3.jsの導入を行ってXfreeなどでサーバーを借りてWebサイトを構築してみるなど、0円からでもいろいろと試せるものもありますし、前回に執筆した多くのノーコードツールを駆使すれば、意外にすごいことができるかもしれません。

しかし、大体のノーコードツールはコストが発生することは忘れてはなりません。