bubble（チョット）やってみた#00〜bubbleとLessonsページの紹介
Notion、AppSheet、AppGyverとこれまでノーコードツールにチャレンジしてきましたが、今回はノーコード界の人気ツール「bubble」に挑戦してみます。まずはbubbleとは何か？という概要と、そのチュートリアルページを紹介してみます。
bubbleって何？
まずbubbleというツールについて簡単に説明します。
bubbleはアメリカ発のノーコードツールです。ノーコードの世界では知名度が高くいツールで、高いカスタマイズ性が特徴と言われているツールです。最近のニュースでMicrosoftと提携する話がありましたが、いまのところ公式な日本語のコンテンツは全く存在していないので、なかなかの情報不足です。
それでももっともメジャーなノーコードツールということで日本の人によるブログやyoutubeの動画が増えていて、徐々に学びやすい環境が整ってきているようです。
bubbleにログインする
まずはbubbleに右上の「Get started」か「Log in」からログインしてしまいます。このへんは「考えないこと」が大事ですｗｗ
ちなみに下の「Get started free」のボタンからでも入れます。
すると、下のアカウント作成画面になります。Googleアカウントがある場合はそこからサインインすることも出来るみたいです。きっと近い将来にはMicrosoftのアカウントからサインインできるのでしょうかね。
さっそくメールアドレスと設定するパスワードを入力して「Start Building」を押します。ここから自分の環境が自動生成されます。
・・・・・けっこうサクッとできます
タイルが３つ表示されますがfreeとして勉強するのは一番左のタイルです。
選択すると、アンケートが表示されますので適当に回答して進みます。
アンケートを修了すると、なにやら登録したMailアドレスになにか送られたようです。
Mailを見てみると確認のためリンクをクリックする必要がありそうです。
Mail側をクリックすると、BubbleのWebページは次の画面に変わります。「Start Building」で先に進みます。
放っておいても新規アプリ作成の画面に移動します。
アプリの名前を入力して、アプリのタイプや目的を選択肢から選びます。
とりあえず削除を前提としてテキトーに埋めてみました。
「create app」で進みます。
次にコース（無償か優勝か）を聞いてきます。
有償コースも１４日間は試せるようですね
デザイン的に少しビビりますが、容赦なくfreeを選択します。
次にガイダンスが表示されます。わからなければ進むという理論（？）で進んでいきます。
言語も選べるようですね。変数とかは英語のほうが良さそうですが、タイトルとかは日本語でも問題なく動きそうな感じです。
けっこう色んな所が凝っています。
ちょっと「そんなのあとでいいじゃん」と思いながら指定せずに先に進みます。
うーん、こういうのまで先に決めさせるんかいな、という質問が続きます。
このあたりはこのツールのクセなんでしょうかね。
まぁあとで探すのは大変ですが・・・
次は拡張機能についての設定です。
若干イライラしてきましたが、心を落ち着けて次に進みます。
そして！！
ついにbubbleの開発コンソールに到着しました！！
ちょいと開発コンソールを触ってみる
せっかくなので開発コンソールを少し触ってみます。
最初の状態ではメニューが有るのは左側だけです。
「Design」「Workflow」「Data」・・・という基本的な要素の右側に
それぞれのオブジェクト「テキスト」「ボタン」・・・などが並んでいます。
気になるのはよく各オブジェクトプロパティが表示される右側には何も表示されていないことです。
気にはなるものの画面にオブジェクトを配置していきます。
配置したオブジェクトをフォーカスすると右側に浮動式のプロパティウィンドウが表示されます。オブジェクトのグリッドも表示され、かなりかっこいいです。
この辺のかっこよさが人気の秘密なのでしょうか？
次にWorkflowに切り替えてみます。適当にクリックしてフローを繋げてみましたがNode-Redのようなブロック型ではなく独特の表現になっています。
気になるのはなんでも繋がってしまうということ。自由度はかなり高そうですが、その分、まったく動かないものができてしまいそうです。
Dataも見てみましたが、今の段階ではよくわかりません。
ひと通り見ての感想は
なかなかカッコいい
ですね。これで開発している自分に酔いそうですね。
そういうのも大事だと思います。
チュートリアルを探す
bubbleのページ内にある「Academy」からチュートリアルを探してみます。bubbleには学習を支援する様々なコンテンツが揃っているようです。（英語ではありますが）
「By watching」「By reading」「From others」「With a template」の４つが揃っています。探してみると「By watching」にある「Interactive lessons · a few mins each」がチュートリアルの入口になっています。
Lessonsというページになり、下にそのコースが１２個並んでいます。
それぞれ数分の時間設定なので簡単そうです。（完全に油断）
＜Lessonの内容＞
・データの保存
〜住所を保存して地図上に表示（4分）
・サインアップシステムの構築
〜サインアップとログインのワークフローを構築する（4分）
・データの保存と変更
〜都市名に投票する reddit のようなアプリを作成する（6分）
・スライドショーの作成
〜美しい写真のスライドショーを作成する（2分）
・ページへのデータの送信
〜ページ間でデータを共有する（6分）
・使用条件
〜条件を使用してアプリの機能を絞り込む（3分）
・フィールドをリストとして定義する
〜モノのリストを現在のユーザーに添付します（5分）
・API の使用とグループへのデータの送信
〜Giphy アニメーション GIF を検索（3分）
・外部 API の使用
〜iTunes API で曲を検索する（3分）
・グラフ要素の使用
〜グラフ要素を使用して動的データを表示する（5分）
・Facebookでログイン
〜Facebook でログイン/サインアップできるようにする（3分）
・卒業レッスン: To Do アプリ
〜これで基本は完了です（7分）
次回からはこのLessonsを順番に進めていこうと思います。
このbubbleというツール人気があるというだけあって画面を見る限りでは洗練されたイメージです。日本語化されていないとはいえ、コンテンツも充実していそうですし、これからのチャレンジが楽しみです。
挫折してしまうかもしれませんが生暖かい目で見守ってください。
最後にログアウトと再ログイン
最後にログアウトと再ログインについてやってみます。
ログアウトは右上のアイコンを指定して表示されるプルダウンから「log out」を選びます。チョット地味な感じです。
bubbleのトップ画面に戻ります。
ここから再びログインしてみます。
最初のログインのときと同じ画面になります。
登録したMailアドレスとパスワードを入力します。
初期画面になります。初めて見る画面です。
代理店への連絡をうながす画面が表示されていますがここは無視ですね。
下の方に下がると前回さわってみたアプリが表示されます。
今日は個々までで終わりです。次回はLessonにチャレンジしますので、その際もよろしくお願いします。
この記事が気に入ったらサポートをしてみませんか？