NoCode開発サービスのAdaloでアプリを作成してみたら想像以上にお手軽だった

# 開発合宿でNoCode開発サービス(Adalo)を触ってみた

弊社、福岡支部にて定期的に行っている開発合宿で今ホットなワードNoCode開発サービスの「Adalo」を使ってどこまでアプリが作れるのかを試してみました。

作るアプリは「お掃除の周期が管理できるアプリ」を題材にしました。
今回、参加する前に何か良いネタはないかと思いながら、嫁に困っていることはないか話していると、掃除する頻度の少ないところを最後いつしたのか忘れてしまう為、それを簡単に管理してもらえると助かるという良い素材を貰いました。

そんな時にNoCodeサービスの話が日経でも取り上げられており、それを使うとどのくらいまで実現できるんだろうと興味が湧き触ってみることにしたという流れです。

## 他のメンバーがやったこと

- Vue.js とFirebase連携
- Goで○×クイズを開発
- ReactとTypeScriptでSPAページの作成

などを行ったようです。

# 画面を用意

ではAdaloの内容に入っていきます。
まず画面を配置します。

配置する時は左メニューバーの + ボタンで ADD SCREEN を選択すると色々用意されています。
ドラッグ & ドロップで置いていきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/190685/095df7ac-22b2-034e-80d9-565695e3d56d.png)

Top画面やLogin画面だと Intro というところにシンプルで良いデザインのなんか良い感じなサンプルを置いてくれてます。
ちょこっとデザイン変えたりするだけで「お、良い感じだね」って言ってもらえそうですね(適当)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/190685/351b23ae-4c98-124a-e438-94ee7eccd57b.png)


List画面だとこのようにCardであったりImage付きのListなどあったりします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/190685/3d563eb0-aa2c-3afe-edc7-f8e3c979f7df.png)

# パーツを用意
画面を置いたら中身を作りますが、 Add COMPONENTから同じように選んで置いていきます。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/190685/f0f6d196-47ee-57de-7ade-deac8a986282.png)

ボタンの選択肢少ないですね。自分で作ってComponentに追加できたりしたら良いのですが、そういうのはできなさそう。
用意されているやつから選ぶしかないですが、今後どんどん追加されていきそうですね。

# データベースを用意
データベースもここで用意していきます。SQLなども不要です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/190685/952c0ba7-779c-bd8c-1a73-d41e53c049c7.png)

今回はとりあえず3つのテーブルを用意しました。
RDBとなっている為、そこの概念がわかってないとちょっと詰まってしまうかもですね。

# 出来上がった画面
5時間くらい作業して出来たのはこんな感じ。
ボタンとリンク先の画面を紐付けたりしてます。

フリー素材のロボット掃除機の画像を設定しましたがこれだとロボット掃除機専用のアプリみたいですね。
(しかもいい感じのトップ画面とか使ってない←)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/190685/32352e76-e851-7b9f-055f-9baeabc82389.png)


# リリース
ではリリースです。もうできます。

Publishというところであっという間です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/190685/733ebf8f-8a5a-5761-f746-20a7828d29ed.png)

Android AppやiOS Appなどありますが、こちらは無料プランでは出来ません。
Progressive Web Appを選ぶとAdaloのドメインを発行してくれています。

Openを選択。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/190685/551e1ab0-4d98-a14a-04dd-e5c301a7e49e.png)

このような画面になり このQRコードを読み取ってもらうと使って頂くことが出来ます。
が所々バグってます。。そこは直せるかも不明です。

あと、無料枠だと保持できるレコードが50行となっている為、すぐに使えなくなっちゃいます。(無料枠はほぼ使えませんね)


# 料金プラン
気になる料金プランですが、

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/190685/76b413d0-aad1-c0fb-a4dc-89c55d723306.png)

このような3つのプランで主に

- 無料プランの場合、 Adaloドメインでwebアプリをリリース
- 50ドルでApple StoreとGoogle Storesにリリース、保持できるデータが5G
- 200ドルでApple StoreとGoogle Storesにリリース、保持できるデータ20G

となります。
なので沢山の人に使ってもらう為には課金は必須ですね。

その他の詳しいことについてはこちらの方の記事などが参考になるので見てみてください。
https://note.com/a_n_do/n/nf32f8059e060


# まとめ
画面を置いてリンク先と動作を設定していき「はい、リリース」でリリースできちゃうのはすごいですね。
そして課金するとiOSとAndroidにリリースできるのも魅力。

Nocode開発サービスはAdalo以外にも色々とあるみたいなですが、Adaloに関していうと

- 細かい要件や細かいデザインとなると難しい
- 開発できたとしても運用が難しくなり1から作り直すということになりそう
- ただ、クライアントの要望をモックとして見せるなどはスピード感を持ってできそう。
- 個人でシンプルなアプリを使う分には超簡単に作れる
- 課金は必須

といった感じです。
で、僕が作ろうとしたお掃除管理アプリですが今回、リリースまでいきましたが、前述した通り所々バグっているので普通にコードを書いて作っていこうかと思っています。(プログラム書いた方がやっぱり楽しいですしね!)
またその内容も記事に書いていきたいと思います。


## ps
弊社の開発合宿第一回目が2019/07/25。そして今回が2020/07/26。早1年が経っておりました。
1月に1回のペースで開催しており、回数は11回ほど。途中コロナの影響も有り1回できませんでした。

ただ、その間、「合宿」は一度もできてません(ドン!!!)

コロナが落ち着いたらそろそろやりたいですね〜〜