最近はNOCODEという言葉をよく聞いたりしますね。コードを書かずにwebサービスを作ることができるなんて夢のようです。でも、本当ですかね？そんな簡単にいろいろできたら世の中のエンジニア需要は減ってもいいと思うんだけどなあ。以前NOCODEについてこんな記事を書きました。
ノーコードの力は何となくわかった。今回はこの記事ではあまり触れていないbubbleを使ってアプリケーションを作ってみたい。
目次
NOCODEとは
NOCODEとはその名前の通り、コードを書かずにアプリケーションを作ることのできるサービスです。Webサービスを作るとなるとコードを書いて書いて何かを作り上げるという時間のかかる作業が必要だけど、ノーコードならそんなことはいらないです。
画面上のものをドラッグアンドドロップして画面を作っていったりとプログラミングの知識がなくてもできてしまうのが魅力。ノーコードって今に始まったことじゃないけど、どんどんこういうツールでできることが増えているような気がします。そこで今回はノーコードで何かアプリケーションを作ってみたいと思います。ノーコードのサービスはいくつかあるけど、今回はbubbleというものを使っていきましょう。
ノーコードツール - bubbleの使い方
bubbleは登録しないと使うことができないので、まずは登録です。[Get started]ボタンを押したら、登録処理をしてログインします。
するといくつかlessonが出てきますね。入力したデータの保存方法ユーザーの登録方法などなど様々です。これらをこなしていくとなんとなく使い方が掴めてきます。
Start lessonをクリックするとそのレッスンを始めることができます。lesson中は作り方を指示してくれるので、英語が読めるのであれば迷うことはないです。こういった画面ですね。
この画面の使い方の流れとしては、こんな感じです。
- 左側のメニューから欲しい素材を右側の画面にドラッグアンドドロップ
- ドロップした素材のデザインを編集
- 素材にアクションを割り当てる
3のアクションを割り当てるっていうのは、例えばボタンを置いたらそのボタンを押した時にどんな動作をさせたいのか？っていうことです。ユーザー名とパスワードを入力させたら、ボタンにはそれらを登録させる処理をしたいですよね。そんな感じでいろんなものを配置してそれぞれに動作を割り当てていきます。
素材を配置する画面
左側のDesignって書かれているタブですね。ここに表示されるものを右側にドラッグ&ドロップで持っていけます。それぞれ持ってきた素材は、Placeholderを設定したり、サイズを調整したりすることができる。ここらへんに表示される文言は、エンジニアやデザイナーならお馴染みだけど、全く知らない人からしたら何のことか分からないかもしれないですね。
動作を割り当てる画面
素材を配置してデザインを調整したら、ボタンなんかに動作を割り当てることができます。押したら何をするのか？っていうことですね。結構種類あるから、一般的なものはできてしまいそうですね。
プレビュー
アプリケーションを作ったら、プレビューしてその動きを確かめることもできる。これは町の名前を入力するとその下に入力したものが表示されるっていうアプリケーション。
ハートボタンを押すと、その町のカウントが+1されていく投票アプリのようなもの。
ちなみにこれは、lessonにある「Saving and modifying data」っていうものだからよかったら試してみてください。
bubbleでTodoアプリを作ってみる
さあ、bubbleの使い方はよくわかりました。きっともういけるはずなので、lessonの最後にあるTodoアプリに挑戦しましょう。Graduation lesson: a to-do appっていうやつですね。全部のlessonをやってからやった方がわかりやすいんだろうけど、この感覚ならいけます。最初の3つはやりました。
まあ、他のlessonとやり方は同じです。さっきと同じようにTextやButtonを配置していきます。
並び順も指定できるみたいですね。sort byでいくつかTodoの並び順の方法を選択できる。
そして雑に進んでいった結果 、途中でミスってしまったようで英語での案内も止まってしまいました。残念です。ただ、雑になってしまったけどこんな感じで動くものにはなりました。入力するとそれが下に出てきます。
なんか点線の位置とかバグってんな・・・速度を求めて雑にやりすぎたかな。この後はクリックした時に何かしらのアクションを与えるボタンを追加するんだったと思うけど、そこで僕は終わりました。ありがとうございます。ただ、これ作るのに10分ぐらいしかかかっていないっていうのは、やっぱりNOCODEの力ですね。
これ、DateTimePickerとかしれっと導入されているのやりますね。
bubbleでどんなサイトやサービスを作ることができるのか
lessonをこなせば、何となく「あー、こういう使い方するんだな」っていうのはわかると思います。じゃあそのbubbleを使ってどんなサービスやサイトを作ることができるのか？っていうのを知りたかったら、bubbleの公式サイトからshowcaseをみてみるといいと思います。bubbleでどんなものが作れるのかの紹介がされています。
ざっとみた感じ、一般的なものはできてしまいそうですね。
本格的にbubbleを使ってサービス・サイト制作をしたい方は
本格的にbubbleでノーコードのサービスを作りたいなら。有料プランも検討してみるといいでしょう。有料だとできることが増えます。PersonalでCustom domainと書かれているので、最低限web上に公開するならPersonal以上にはした方が良さそうですね。
調べておいた方が良さそうな点
今回bubbleを使ってTodoアプリを作ったけど、これをやっただけでは分からない点もいくつかあります。
- データの保存先はどうなるのか
- APIを使いたいときとかはどうなのか
- 運用はどうするのか
などなどやってみると、これどうなるんだろうなあ・・・っていう点が出てきます。データベースはbubble側で用意してくれるのか？や画面だけbubbleで作って別で作られたAPIを呼び出したいときはどうするのか？改善したくなった時にそれはやりやすいのか？などなど。
以前AdaloっていうNOCODEのサービスを使ってみた時にも同じようなことを感じたので、ノーコードのサービス使ってWebサービス作ってやるぜ！って方は調べておいた方が後で後悔せずに済みそうです。
まとめ
コードを書かずにWebサービスなんかを作れてしまうというのはやっぱり楽ですね。実際にコードを書くのとはスピードが段違いです。ただ、その分決まり切ったものを使うので、自分好みに細かくいじってっていうことはできないですけどね。それと、こういうサービスを使うにしてもある程度Web開発の知識があった方がいいと思ったので、基本的な開発のことは知っておくのが良さそうです。
ノーコードで言えば、AppSheetかなり楽でした。
