bubbleでテンプレートから画面を追加してみた

前回bubbleのチュートリアルをやってみた記事をアップしていました。 今回は実際にテンプレートからアプリを作成し、自分で画面を追加してみたいと思います。

こんにちは、普段はゲーム開発に携わるフリーランスプログラマのエルと言います。

前回はノーコードサービスの「bubble」のチュートリアルを触ってみました。
話題のノーコード!bubbleを触ってみた!

チュートリアルが次々と出てくるため、全部やるのかな?と思いましたが、一度ブラウザを落としてもう一度bubbleを開き直すと、チュートリアルを選ぶ画面に来ることが出来ました。
そこから新しくアプリを作ることが出来るようだったので、今回は新たにアプリを作成してみることにします。

 

新規アプリ作成

開き直すと、このようなトップページになります。
 

下にスクロールしていくことで、実際にアプリを作るボタンが出てきます。
「Create a new app」のボタンを押して、情報を入力する画面を出しましょう。

ボタンを押すと、この画面になります。
名前や、何に使うか等情報を入れていきます。アプリの名前だけ入れてしまえば、Create a new app のボタンが青くなるので、他は入力しなくても良さそうです。
いつもノーコードではテンプレートを最初に選んでいるので、今回も使おうとどこにあるか探しました。この新規作成部分の右上にある項目でテンプレートを選べるようです。
実際に見てます。

 

テンプレートの導入

テンプレートはマーケットプレイスに

テンプレートがあるページは、マーケットプレイスになっています。
そのため、無料のものから有料のものまでありますね!実際にユーザーが作ったものアップ出来るようです。カテゴリや名前で検索出来るので、お好みのを探してみて下さい。
Previewで実際に見ることが出来ますが、かなりしっかりしたWebサイトが出来ているという印象です。
今回は無料のテンプレートで分かりやすそうだった「Modern Login」というテンプレートをお借りして、作成してみます!

導入

では実際にテンプレートを導入してみたいと思います。
実際に使いたいテンプレートにカーソルを合わせると、「Details」が出てくるのでそこを押すと、そのページに飛ぶことが出来ます。そこで「Use Template」ボタンがあるので、そこを押すと最終的な確認がされます。そこで「Use now」を押すことで使用可能になります。

これで導入完了のため、自分のアプリに戻ってみましょう。先ほどの新規アプリ作成画面まに戻ると、導入したテンプレートがプルダウンから選択できるようになります。
先ほど導入した「Modern Login」を選択し、「Create a new app」でアプリを新規作成してみます。
新規作成すると、実際にアプリの編集画面に来ますが、先ほど選択したテンプレートが実際に適応されているのが分かります。

 

ページを追加・遷移させる

せっかくなので、導入したテンプレートを弄りながら機能を学んでみましょう。
チュートリアルを飛ばした人や、まずやってみる派の人にとっては、お馴染みな流れかもしれません。
実際にPreviewから動作を確認してみると、ログイン後にあるメインページでユーザー情報を確認することが出来ました。
ページを切り替えるときは、左上にあるページの部分にあるプルダウンから、該当のページを選択することが出来ます。実際に「settings」を選択すると、該当するページが読み込まれました。

 

では簡単にページを追加し、ログイン画面に用意したボタンから飛べるように拡張していきます。
先ほどのページ選択の部分に「Add a new page…」を選択すると、作成画面になります。


 

あとはページ名を入力するだけですが、名前は強制的に小文字になるのと、スペースを入れるとアンダーバーが自動で入るようです。もし意図しない動作をする場合でも焦らないように(私は焦りました)。
他のページからクローンを作る必要もないので、名前を入力したら「CREATE」ボタンから作成しましょう。

 

ページを追加

一旦適当に遷移したのが分かるようにUIを作ります。
テキストを真ん中において、分かりやすく適当な文字列を入れてみます。
一先ずこれで終わらせますが、お気づきの方はお気づきですが、このままではこのページに入ったら抜けれません。が、テストなのでOKとします。

 

遷移させる

ログイン画面の下に、先ほどのテストページに遷移するボタンを追加してみて、実際に遷移させてみます。
ログインページにボタンを追加し、そのボタンからワークフローを設定します。

ボタンを押した際のアクションとして「Navigation」→「Go to page… 」を選択します。

次に出てくる「Distination」の部分で、先ほど追加したtestpageを選択します。

これで設定が終わったので、実際にPreviewから動かして見ましょう。
ボタンを押すことで、簡素に作ったtestpage画面に遷移出来るのが確認出来ました!

 

まとめ

今回はテンプレートから、自分でアプリを拡張してみました。
マーケットプレイスを見て、実際にサンプルとしてPreviewして確認してみましたが、想像している以上にしっかりしたウェブサイトが出来上がっている印象でした。
当然有料のものがしっかりとした作りなのは理解出来ますが、無料のものもかなりのクオリティ!
作る側としても、参考になるテンプレートが多いのは助かりますね!
bubbleでは、他のノーコードと比べて機能が多いので、使いこなせれば結構なものが作れそうな感じがしています。
是非興味がある方は、実際に触って試してみてください!
bubbleリンク

 

 

 

私が参加しているギルドプロジェクトでは、こういったbubbleのようなシステム・サービスの導入や、サービス間を連携するプログラムの作成などを通して業務効率化を行っており、様々な効率化事例から業務効率化を代行する「カワリニ」というサービスを展開しています。

お問い合わせは無料で対応させていただいております。
今職場にITの担当者がいらっしゃらず、業務フローに無駄を感じている場合、お気軽にお問い合わせください。
カワリニチームが全力でサポートさせていただきます!