【NoCode】Bubbleを使って内省のWebサービス作った話

はじめに

こんにちは。この記事ではNoCode ツールのBubble を使って内省(リフレクション)のためのWebサービス(β版)を作ったのでその経緯と工夫したポイントを紹介していきたいと思います！

▼作ったWebサービスはこちらです。
https://leprofront.bubbleapps.io/

開発した経緯

私は内省についての研究と情報発信をブログで行っています。
https://tielec.blog/index.php/category/reflection/

その過程で自分自身と丁寧に向き合い内省を効果的に行うためのメソッド(ORIMDループ)を考えました。
https://tielec.blog/index.php/effective-reflection-process/

私が考えた内省のフレームワークをもっと世の中の人に使ってもらい、自分との対話をする機会を増やしてほしいと思いWebサービスを作ることにしました。

じゃあどうやってWebサービスを作ろうかということで、今回ピン止めしたのは開発のスピード感です。0からWebサービスを作るということで失敗も多いと思いますし、使ってもらって大幅な改善が必要という判断を迫られたときに柔軟に対応できるようにしたいと思いました。そこで、年末からNoCodeツールのBubbleのキャッチアップをしつつ、1月末にβ版をリリースしました。

Bubbleにキャッチアップをしつつ、普段の仕事と並行しつつでしたが、1カ月足らずでリリースできたのはやはりBubbleによる開発を選択したからだと思います。0からWebサービスを作ろうと考えている方に少しでも参考になる情報となれば幸いです。

意識したいポイント・工夫しところ

Bubbleを使って開発するにあたってここ初めに意識した方がいいだろうなというところと、自分自身が工夫したところを紹介していきます。

キャッチアップ

まずは情報のキャッチアップについてです。

• 「NoCode School - ノーコードスクール -」さんのYouTube
  https://www.youtube.com/channel/UCa3cFggd3BrJ6qq5lw8P_9w

• 「ノーコード ラボ」さんのブログ
  https://blog.nocodelab.jp/

この二つは非常に参考にさせていただきました。

開発するにあたりの全体像をつかむ際にYouTubeでキャッチアップ、細かな設定について気になる部分をブログから情報収集させていただきました。本当に参考になるのでおすすめです。

全体像をキャッチアップしたら、後は実際に手を動かしながらやってみることにつきます。Bubbleの良いところはレゴブロックで遊ぶような感覚で手を動かしながら創意工夫をして作りこんでいくことができるところです。このコンポーネントを置いてどんな事ができるかなと想像しながら作っていくことができるのが面白いポイントだと思います。

画面のレイアウト

サービスを作っていて画面のレイアウトをどうするかは重要なポイントですね。Bubbleを使って開発する際にもそこはあらかじめ設計というか思想を持っておいた方が良いと思います。特にモバイルのページ、PCのページのレイアウトをどのようにするのかはぶつかりやすい問題だと思うので最初に意識しておくと良いと思います。

私は最初はそこについて深く意識していなかったので、デフォルトのページ幅で画面を作成していました。デフォルトのページ幅だと通常はPC向けのサイズで作り始めることになります。簡単なレイアウトであればモバイルから見たときもそれほど違和感は生じないかと思いますが、少し複雑な画面構成にするとモバイルの画面に最適化することは難しいかもしれません。

PC版レイアウト

最初に作った機能のページはこんなレイアウトです。

モバイル版レイアウト

PC版レイアウトをモバイルで表現するのは細かな調整も難しく諦めました。
そこで、モバイル用のページを別で用意することにしました。このようにモバイルで見たときにもみやすいように縦型のレイアウトで設定しています。

モバイルバージョン設定

Bubbleには「Mobile version」という便利な設定があります。これを設定してあげることでモバイルからアクセスしたときに同じURLでも違うページを表示させることができます。このようにPC版の画面の設定部分にMobile versionでモバイル用ページの設定をしてあげることで端末に応じたページの切り替えが行えます。

たどり着いたやり方

しかしモバイルバージョン設定で画面を作ろうとするとどうしてもPC版とモバイル版の二つの画面をメンテナンスしなければいけなくなるので保守性が悪くなります。そこで色々と模索をした結果ページ幅を660pxで設定して作っていくことで、比較的モバイルでもPCでも扱いやすい画面を作成できそうだということにたどり着きました。そして、幅660pxで作った機能の画面はこんな感じです。このページ幅だとレスポンシブデザインで画面を整えていくときにも調整がしやすくなりました。もちろん状況に応じての使い分けが一番だとは思いますが、まずはこのページ幅でレイアウトを考えるということからスタートとするのが扱いやすいのではないかと思います。

DBの設計

次はDBの設計ですがこれも意識した方が良いと思う点があります。

DBの命名規則を考える

ひとつめはDBの命名規則を整えながら作ることを意識したほうが良いです。というのはBubbleで開発をしていくときにDBのテーブル名やカラム名を使って設定を行う場面や、Develop環境から、Production環境にデータをコピーするということ場面が良くあります。こういう作業を行う際に命名規則が整っていないとミスが起きやすくなります。後々の作業効率を上げるためにも命名規則を意識しながら作っていくことがポイントだと感じました。ただし、Bubbleは後からでもDBの名称を変えるのが簡単なので、最初は雑に作って後から整えるというやり方でも十分だとは思います。

参考までに私はDBのテーブル名をこのように設計しています。

• Master Dataset xxxx
  ユーザーからのデーターアクセスを必要としない設定系のデータを持つテーブルです。

• User Dataset xxxx
  ユーザーからのデータアクセスを行うためのテーブルです。

BubbleではDevelopで開発したデータをProductionにもっていくという操作が良くあるのですが、この際にユーザーの登録データを上書きしないように細心の注意を払う必要があります。このように命名規則を分けてあることでそのリスクを下げることができます。Master Dataset xxxx データ以外のデータは移行しないと認識できるのでオペレーションの怖さが相当減るのでおすすめです。

DBのprivacy設定

もう一つ大事なのがDBのプライバシー設定を正しく管理することです。一見するとこの設定がなくてもアプリの構築ができてしまうのですが、この設定をしておかないとあるユーザーの登録したデータが他のユーザーにだだ洩れになってしまうということが起きるのできちんと設定しましょう。

この設定では作成したデータをログインユーザー以外は見れないようにしています。

プライバシー設定についてはこちらに非常にわかりやすく解説されているので一読をおすすめします。
https://blog.nocodelab.jp/entry/privacy

プラグインの活用

最後はプラグインの活用についてです。Bubbleには本当に多くのプラグインがあるので組み合わせによってできることの範囲が大きく広がります。また有料のプラグインもありますが、買い切りのものも多いので、長く使っていきたいと思うものがあれば買い切りで購入してしまうのも選択肢としてありだと思います。2000~3000円ほどで便利な機能を導入できるので自分で作りこむよりは圧倒的に早くやりたいことを実現できます。

有料のおすすめプラグイン

私が有料で購入したプラグインを紹介します。

• "A+ Onboarding" - Product tour
  こちらはサービスのチュートリアルを設定できるプラグインです。初めてのユーザーに操作方法をナビゲートしながら使い方をレクチャーするということを簡単に実現できます。使いやすいUI/UXにするために強力にサポートしてくれるプラグインだと思います。
  https://bubble.io/plugin/a+-onboarding---product-tour-1605374038476x675095182407893000

• Feedback Screenshot Widget
  このプラグインは画面のスクリーンショットにコメントを付けてBubbleのDBに保存することができるプラグインです。機能に関する要望や、不具合の報告などを集めたいというときに活用できると思い導入しました。モバイルからの操作はちょっと厳しい気がしていますが、PCから操作では十分威力を発揮してくれます。
  https://bubble.io/plugin/feedback-screenshot-widget-1585773166741x344001413254479900

組み合わせと活用例

一つ組み合わせの活用例を紹介します。わたしは先ほど紹介したFeedback Screenshot Widgetとタスク管理ツールのTrelloを組み合わせて利用しています。Feedback のプラグインでフィードバックのための画像とコメントを取得し、Trelloのプラグインを用いてタスクを起票するようにしています。こうすることで、フィードバックとタスク管理ツールの連携を行えるように組み合わせて使っています。

まとめ

この記事ではBubbleを使って内省(リフレクション)のためのWebサービスを作ったときに意識したポイント、工夫したポイントを整理しました。自分自身もまだまだBubbleについて勉強中の身ではありますが少しでも参考になれば幸いです。また、自分と向き合って深く内省してみたいという方はぜひWebサービスの方もご利用いただけると嬉しいです。内省が苦手という方でも自然と自分自身と向き合うことができるツールになっています。

▼Webサービスはこちらです。
https://leprofront.bubbleapps.io/