12
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

NECソリューションイノベータAdvent Calendar 2021

Day 16

ノーコードツール「Bubble」に触れて思うこと

Last updated at Posted at 2021-12-15

こんにちは。
はじめてQiitaのアドベントカレンダーに投稿します。
内容は、今年に入って初めて取り組んだノーコードツール「Bubble」についての体験をお話ししたいと思います。

この手の話(情報)はネット上を探せば山ほどあると思いますが、誰かの参考になれば幸いです。
#ノーコードとの出会い
IT業界で仕事をしているので、OSに関係する機能を開発したり、ユーティリティソフトウェアなどを開発した経験もあるのですが、Webアプリケーションといわれるソフトウェアの開発経験はありませんでした。
ですが昨今、身の回りにはスマートフォンやPCのウェブブラウザを使ったオンラインショッピングなど、Webアプリケーションは身近なソフトウェアになっています。

仕事でソフトウェアのコードを書く現場から離れて久しいですが、Webアプリケーションの開発を体験してみたいと思っていた矢先、"ノーコード"というキーワードが目の前に現れました。言葉だけを見れば”コードを書かなくてアプリケーションが作れる”ということなので、「まゆつばな話」と思いながらも、ちょっとチャレンジしてみたいと思ったのがノーコードに触れるきっかけでした。それからどんなツールや環境があるのか探してみたところBubbleというツールに出会いました。これがノーコードとの出会いでした。

#Bubbleって簡単!
Bubbleはオンラインのサービスで、Webサイトからログインすると初回はチュートリアルが始まる仕組みになっていました。(2021.12.14現在も同じなのかどうか確認してません)
早速、このチュートリアルにチャレンジしました。チュートリアルは、Bubble側から操作の指示が矢印アイコンと文字情報で行われ、そのとおりに進める形式でした。

とりあえず一通りこなしました。ですが、初回のチュートリアルをこなしただけでは消化不良で分かったような、分からないような状態でした。
操作の指示に従っているときに「これは何をしているのか?」という意識が不足していて、使っているツールの意味や特徴を把握できなかったのが原因だと思います。そのため、チュートリアルをさらに数度こなしました。

チュートリアルの範囲が理解できると、Bubbleという世界観が以前に見たことのある世界に見えてきました。
それは、昔々に趣味で夢中になったApple社のOSにバンドルされていたHyperCardという道具(ソフトウェア開発・実行環境?)の世界です。

HyperCardが登場した頃、オブジェクト指向プログラミングが脚光を浴びていた時期だったと思うのですが(ずれてたらゴメンナサイ)、HyperCardはそのオブジェクト指向プログラミングを実践できるような道具だったと思います。
HyperCardがどんな感じの物かというと(表現できるか心配)、カード(四角い領域)上に、ボタンやテキスト領域やリスト領域などのオブジェクトをマウスを使って配置して、そのオブジェクトに対するイベント(マウスでクリックしたとか、マウスカーソルが上にあるなど)に応じた処理を対象のオブジェクトに作りこんでソフトウェアを開発するものです。
Bubbleのグラフィカルなエディタを使って、ボタンやテキスト領域などのオブジェクトをマウスで配置する、配置したオブジェクトの色や形や条件設定を加える属性を持っている点などが、まさに当時のHyperCardと重なって見えました(片方はオブジェクト指向なので違う点も多々あります)。

このチュートリアルをマスターした時点では「Bubbleって簡単!」と思っていました。
ただそれは、敷かれたレールの上の進んでいる状態なので、なにも分かっていない状態だったのでした。

#Bubbleって難しい!
チュートリアルをマスターした後、いざ、自分でアプリケーションを作り始めると直ぐに壁にぶち当たります。その壁は、Bubbleのデータタイプという物でした。

BubbleにはBubbleが用意したビルトインのデータタイプがあり、テキストや数値やリストなど基本的なものがあります。Bubbleを始めた頃、データタイプはこれらの基本要素だけのように思い込んだ事が壁を作り出していました。
実際には、開発者がアプリケーション作成環境上で新たに定義するデータ構造も、データタイプとして新たに追加されます。

このデータタイプの意識が低い(無い)状態で、Bubbleでアプリケーションを作ると、データのやり取りでデータタイプが違うと言われてエラーを頻発します。扱うデータが文字だとか、数値だとかでは無く、扱うデータのデータタイプが何なのかを意識する必要があります。

この壁も、振り返って見ればとても当り前の事なのですが、不慣れな環境/不慣れな道具の中で手探りで進んでいる最中には気付かなかったポイントでした。

このように、新しい物にチャレンジすると、簡単だ→難しい→簡単だ...を繰り返しながらスキルアップして行くと思います。今後も「難しい!」と思う事が現れると思います。でも、Bubbleに関する日本語での情報も増え続けているので、いろいろな壁を乗り越えて行けると思います(英語での情報は日本語以上にあるのでそちらも参考になります)。

#Bubbleっていろいろできそう!
いろいろと試行錯誤しながら、アプリケーションを作っているとAPIが提供されているサービスと連携したくなります。そんなとき、BubbleではBubble社が無償で提供しているAPI Connectorが利用でき、とても便利です。

Bubbleでは他にもプラグインが用意されていて、アプリケーションの機能を拡張できます。

そして、Bubbleのプラグインは自作することも可能です。自作のプラグインによって、新しいオブジェクト(Bubbleの用語ではエレメント)やワークフロー用にあらたな機能などを追加して利用することもできそうです(ここまでくるとノーコードの域を出てしまっていると思いますが、そこまで広がっているということです)。

#Bubbleを拡張したい!
作っているアプリケーションの都合でAWSのS3にデータを格納したり取り出したりする処理が必要となり、プラグインの自作を試みました。

BubbleのプラグインはJavaScriptで記述するようで、jQueryに対応しているとどこかに書かれていました。しかしながら、私自身はJavaScriptを使ったことが無く、全く知らないのでJavaScriptとjQueryの勉強が必要で一旦プラグイン作りをあきらめました(一人で作っているので他者に頼めません)。

アプリケーションのAWSのS3へのアクセスは、幸いな事に、プラグインのマーケットプレイスに幾つか希望する機能があったのでその中から選んで実装しました。

#Bubbleを極めたい!
これまでの経験から、プラグインなどを利用することで幅広く処理を実装できそうな気がしているので、まずは自作プラグインが作れるスキルを身に着け、さらにBubbleを極めて行きたいと考えています。

12
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
12
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?