初心者がノーコード・ローコードソフトbubbleを使ってみた。

初心者がノーコードツールを使ってみた

こんにちは、ノベルワークスで広報・マーケ・デザインを担当しているかみゆと申します。
（久しぶりのノートだ～～～～～うれぴ）

私自身結構幅広くお仕事をさせていていただいているなと感じているのですが、実際ノーコード・ローコードを含めたDX人材教育事業を展開している身にも関わらず「ノーコード・ローコード使ったことがない・・・」と最近気づきまして。（焦り）ちょっと今回は初心者の私がbubbleを使ってみた！の企画です。

（ちなみに、かなり後からの補足となりますが現在弊社ではTritechCamp（トリテックキャンプ）というスタートしたばかりのDX人材育成事業を行っています。）

初回はkintokneなどのノーコードツールを利用しカリキュラムを組んでおりますが、新しくbubble（ノーコードでアプリ開発ができる）なども今後カリキュラムに入れることができたらなんて思い、今回は少し（軽く）触っていきたいと思います！

bubbleを使ってみた感想

良かった点

使ってみた感想。めっちゃ便利やんこれ。
普通だったらコードを書く必要があるものを書かなくても自分でアプリが作れるなんてすごい～～～～～、と感動。

難点

難点としては、実装レベルがちょっと低いところ。
例えばデザインもできる範囲もかなり限られます。ボックス（e-mailなどを打ち込むボックスみたいな）を作るにしても1パターンしかないため、他のアプリとの差別化が難しそうかも。

ボックスの外枠・内色を変えることはできるのですが、ボックスの形を大きく変えたり（そんなに変えることもないけど）はむずい。
その分、操作は色はここ！ボックス要素はここ、で決まっているので変に操作を全部覚えなくても何となくの感覚でアプリを作れちゃうのは良いところかな。

今回は、ボタンなどの要素を配置＋動作設定（アクション）までの流れを軽くご説明できたらと思います！

①サインアップのフォームを作る

左側にある要素をクリック＋ドラッグしたらフォームが作れます。
このフォームに文章などを書き換え（例えばパスワード、メールアドレスなど）完成です。

今回はサインアップ（アカウント登録）＋ログインボタンを作りました。

➁クリック後のアクションを追加

続いて、ボタンをクリックした際のアクションを追加していきます。
どの部分に移動し、ページが変わるのかを「ワークフローの開始」部分で行います。

下部分「click here add ～」部分をクリック。
ボタンを触ることで次にどのようなアクションを起こすか、ここで決めていきます。

アクションにも色々な種類があります。

ちなみにワークフローの要素をクリックすると出てくる下部分の表記は英語なのでわかりにくいかも。
私はサイトで検索し、要素や使い方を理解しました。

【Bubble】よく使っていたワークフローの機能紹介＆解説 | yuta-info (yutainfo.com)

ちなみに、アクションの中でもよく使う要素はナビゲーション（私のサイトだと翻訳がおかしいが、航法という部分かと思われる）、データ、要素アクション（本来は英語表記ですが日本語で書きます）の様。

③よく使うアクション詳細

③ー１ナビゲーション

L　ページ移動や、更新したいアクションがあるときに使う

【ページ移動…】：
移動させたいページにボタンやテキストをクリックすることによって移動させる時に使います。これを設定するのは簡単です。
【ページ移動…】をクリックすると設定画面が出てきて、複数の項目が並んでいるのですが、大事なのは上から一番目のページ移動先の指定と２番目のページ移動する時に送信するデータの設定になります。
そして、【ページ更新】と【前のページに移動】は条件をつけたい時以外はクリックするだけでOKです。

https://yutainfo.com/nocode-bubble-workflow/

③ー２データの変更・削除・更新

アプリのデータベースを操作するものとなっています。
（まずは事前にデータベースを作っておく必要があるみたい）

データ要素についても少し説明をすると、情報を分断していれておこうみたいな感じのもの。
バブル操作の一番左「データ」より作成可能です。

・データタイプ
ここでデータを作成します。（エクセルの中でいう、シートに該当するみたい）
基本的に操作が制限されているので、この状態で「新しいフィールドを作成」をクリック。

https://yutainfo.com/nocode-bubble-db/

そうすると新しいフィールドの追加もできるというわけです～。（私自身あまり理解できていませんが、データなどをこの部分で挿入できるよ！という意味）

③ー３パーツやデータの表示・非表示・リセット

表示：
主にページにポップアップを表示させたい時に使われます。設定は簡単でポップアップならポップアップのパーツを選択するだけで出来ます。
隠す：
表示したポップアップやパーツを非表示にしたい時に使います。
リセット：
検索機能で言えば検索したキーワードを検索BOXから消えるようにすることが出来ます。

https://yutainfo.com/nocode-bubble-workflow/

このような感じでアプリの動作などを一つ一つの要素に加えるわけですね（ふむふむ）

最後に

結構調べているとbubbleは動作が結構複雑だったりするので（私が単に物覚え悪いだけ）もっと深く勉強したいな～～～～～。
アプリ作れたらめっちゃ楽しそうだし色々作りたいもの沢山あるのよね。

また、bubbleでアプリ作れたら記事に書こうかなと思うので、ぜひご参考になれば嬉しいです！

ちょこっと宣伝

現在弊社ではcloudソリューション事業に加え新規事業として、TritechCamp（トリテックキャンプ）というDX人材教育事業＋VRを利用したバーチャル空間を作ろう（VR事業については説明不足ですがかなり面白い事業）としています。 DX人材育成事業としては、学生・社会人の方はもちろん、企業様のOJT研修向けに幅広くカリキュラムをご用意しておりますので、ぜひ気になる方は下記プレスリリース連絡先よりご連絡いただけますと嬉しいです！（エンジニア・広報職も絶賛募集中です！）詳しくはウォンテッドリーよりご連絡ください！（まずは気軽にお話出来たら嬉しいです～～～）

将来のIT基盤を支える、デジタル人材の育成！DXの土台を支える人材教育サービス「PerTech camp(ペルテックキャンプ)」を2022年8月より試験実施開始。現在無償モニター募集中｜株式会社ノベルワークスのプレスリリース (atpress.ne.jp)

https://www.wantedly.com/companies/novelworks

ではでは。