TableauエンジニアがBubbleとChatGPTでWebサービスを作って気付いたこと
今年は梅雨入りが例年より1週間ほど早いとのこと。
カラッと晴れる日が待ち遠しい一方、一瞬で過ぎてしまう夏がまだ始まって欲しくない気持ちが入り混じった日々を過ごしております。
（共感していただけるでしょうか…😅）
今回はTableauエンジニアの気付きシリーズ第２弾💪
第１弾はこちら↓
今回はこんなところにもTableauの考え方が応用できるんだという気付きをまとめてみました！
きっかけ
「ChatGPT、ちょっとは触っておいた方が良さそうだな〜」と思いながら過ごしていたところ、所属する企業でChatGPTを題材にしたハッカソンが開催されることに。
ちょうど同じ時期に↓の記事を読んだりしてタイミングも良かったので一念発起！（この記事にはかなりモチベーションをもらいました）
とはいえWebサービスもネイティブアプリも開発したことはなかったので、
作るならWebかな？（なんとなく）
↓
コード書けないしノーコード探してみよう（よく聞くしね）
↓
Bubbleが一番メジャーでChatGPTとの連携記事もあるから使ってみよう（なんとかなるでしょ）
といった感じのスタートでした。
とにかく触ってみることが目的だったので安直なスタートでしたが、作ってると愛着が湧いてくるので、最初にもうちょっと吟味しても良かったかもです笑
Bubbleとは？
ノーコード（ドラッグ&ドロップ）でWebサービスを開発できるツールです。
コードを書く必要が無いため比較的取り組みやすく、初心者でもそれなりにデザインの整ったサービスが開発できるのがメリットでしょうか。
こちらの記事にBubbleでできること、便利な点がまとまっています。
動画で見るとドラッグ＆ドロップのイメージがわかりやすいですね。
作ったもの
マクロ栄養素（たんぱく質、脂質、炭水化物）を管理できるWebサービスを作りました。※現在公開はしていません
フィジークの大会に出た（↓記事）際、食事管理アプリとしてMyFitnessPalを使っていたのですが、
大会を目指すようなガッツリ管理というより、食事管理始めてみようかな〜と思った人が簡単に始められるように、というコンセプトで作ってみました。
画面としてはこんな感じ↓
右下の「ChatGPTにきく」の画面で、ChatGPTを使ったマクロ栄養素の計算とメニューの提案ができるようになっています。
マクロ栄養素の計算機能の例として、
例えばとんかつ定食を食べた場合は↓のよう感じ。
お店とかだと正確なグラム数とかは測れないので「茶碗1杯」「山盛り」とかのざっくりでそれっぽい数値が出てくるのが推しポイントですね笑
メニュー提案機能では「今日は残りこれくらいのカロリー食べられる」「食材はこれ使いたい」などの情報を元にメニューを提示してくれます。
作り出すと楽しくなってきて、目標の設定ができる画面なんかも作ってみました笑
TableauとBubbleの似ているところ
ここからが本題です！
実際にBubbleでWebサービスを作ってみて感じたことは、普段Tableauで使っている考え方が活きたということでした。
作成期間はトータル4日くらいで結構スピーディーに作ることができたのですが、Bubbleに関する記事を読む際にTableauの事前知識が役立ったのも大きな要因だったのかなと感じています。
両者の似ているポイントをBubbleの画面ベースでお伝えすることで、
まだBubble触ったことのないTableauユーザーのみなさんにもイメージが伝わると嬉しいなと思います！
1. 画面作りはドラッグ＆ドロップと`アクション`
「Bubbleとは？」にあるリンク先の動画を見た方はお気付きかと思いますが、要素の配置方法はまさにTableauと同じなんですね。
ダッシュボードにテキストやシートを配置している感覚です。
Webサービスに必要なボタンや入力欄、アイコンなどがデフォルトで用意されています。
赤枠にある要素を画面右側にドラッグ＆ドロップしていきます。
ページの遷移など「動き」を扱う機能はワークフローと言って、こちらはTableauでいうところのアクション機能ですね。
使い方の例としては、ボタンにワークフローを設置して「データの追加」「ページの遷移」「ログイン/会員登録」などしていくイメージ。
必要なのはこの設定1つのみ。
ワークフローについてもWeb作成で使う便利機能の大概はデフォルトで用意されてあるみたいなので、一覧を見ているだけでも勉強になりそうです。
ドラッグ＆ドロップと簡単な設定で画面を作っていく様子はまさにTableauと同じですよね。
2. デザインは`水平・垂直オブジェクト`を駆使
Tableauでダッシュボードを作る際、どのように見た目を整えていきますか？
多くの方は水平方向・垂直方向オブジェクトを使って均等配置、パディングなどで整えていくのではないでしょうか。
Bubbleでも同じ考え方でグループを作成していくことができます。
垂直方向オブジェクトで均等配置しているイメージです。
「親要素と子要素でどれくらいパディングをあけようか」「ここに色をつけたいから…」とかは結構Tableauで考えてきたことなので、Bubbleに関するこの辺りのドキュメントを読んだ時、理解が早かったように思います。
また、Bubbleにもエレメントツリーの機能があります。
ドラッグ＆ドロップで配置した要素は、Tableauでいうところの「浮遊」状態になっているため、複雑な画面ではエレメントツリーを使ってグループに追加するのが便利でした。
むしろこれまでTableauでエレメントツリーを見ることがほとんど無かったのですが、Bubbleを体験してから結構使うようになりました。便利ですね。
3. データベース設計も簡単
ここは似ている点というより、Tableauを使うにしてもBubbleを使うにしてもざっくり知っておく必要がある、といったニュアンスでしょうか。
作り始めるまで気付かなかったのですが、Webサービスを作るとなるとデータベースも自分で設定する必要があります。
基本はリレーショナルデータベース形式なので、普段Tableauで取り込む際に扱いやすい形にしておくと、自然といい感じになりそうです。（適当）
フィールドの作成・削除が簡単なので動かしながら作っていくと良さそうですね！
まとめ
今回作ってみたWebサービスは機能も少なく単純なものですが、こんなに簡単に作れるんだという感想が大きかったです。
本文で触れませんでしたが、デプロイもとても簡単でした。
※公開するには有料プランになる必要があり、趣味で公開しておくには安くはない？くらいの値段かなと。
お伝えしたようにTableauとBubbleは似ている点が多いので、
自分でWebサービス作ってみようかなと思い立ったTableauユーザーの方は、思ったより簡単にスタートが切れるかもと思ったいただいて良いのではないでしょうか！
この記事が気に入ったらサポートをしてみませんか？