ノーコードでアプリを作ってみる【AdaloとGlideとAppSheet】

ニタバルです。

ここ1、2年ほどで目にする機会が増えたノーコード(NoCode)*1というキーワード。
ノーコードのサービス自体は昔からいろいろありましたが、ここ数年でさらに多様になってきた印象です。最近はモバイル向けのアプリを作成できるサービスも増えてきたので、実際に使ってみました。

AdaloとGlide、そしてAppSheetを使ってみた雑感です。主な機能や操作感を試してみたいだけなので、作成するのはごく簡易的なTo Doリストです。

参考までに私自身のスキルは下記のような感じです。
・XDなどを使った画面デザインやプロトタイプを作成できる
・HTMLとCSSは自分で編集できる。その他のプログラムはできない(ごく簡単なJavaScriptなら編集できるぐらい)

スプレッドシートの基本的な機能は使いこなせる(プログラムに近い複雑な関数はちょっと難しい)

Adalo

まずはAdaloでスマホ版のWebアプリを作成。

www.adalo.com

全体の操作感

とても操作しやすいUI。全体を俯瞰できるので、画面構成はXDとかに近い感覚で編集できます。

AdaloのUI

デザインの自由度

ベースとなるレイアウトはありますが、リストやボタンなどコンポーネント単位で配置することもできるので、レイアウトはある程度自由度がある印象。やりすぎると実際の画面で崩れてしまうこともあるので、そこは注意が必要です。

デザイン(スタイル)を大幅に編集することはできないけど、コンポーネントごとに色やボーダーとかを調整できます。
全体の配色をプライマリ・セカンダリで設定できるのもよい。

データベース

無料版ではデータベースはAdalo内に作成されます。シンプルなデータベースならこれで充分と言えそう。有料版ではサードパーティーのデータも使えるようです。

作成したデータベースをコンポーネントごとに紐付けていく形式。同じ画面内に異なるリストを表示したい時は使い勝手がよさそう。

データベースのフィルタリングやアクション編集は、ステップごとに積み重ねていく感じで、AutomaterやiOSのショートカットアプリみたいな操作感です。

Adaloのコンポーネント編集

マーケットプレイス

Adalo内のマーケットプレイスから地図やスライドショーなど、いろいろなコンポーネントを追加できるのが便利です。うまく活用すればかなりしっかりしたコンテンツが作れそうです。

できあがり

今回はリストを登録するだけの単純なものですが、期限や画像を追加したりすればもっとしっかりしたTo Doリストも作れると思います。
とは言え、機能的な制約もいろいろあるので細かい部分ではできないことも多く、今後に期待したいところ。

Adaloで作ってみたアプリ

Glide

お次はGlideでスマホ版のWebアプリを作成。

www.glideapps.com

全体の操作感

アプリのプレビューを操作しながら、今表示されている画面を編集していく感じなのでノンデザイナーにはわかりやすいかもしれません。逆にどんな画面があるのかを俯瞰できず、全体像が捉えにくいので、XDに慣れている私の場合は少しやりにくかったです。

画面追加はコンテンツ単位。コンテンツごとに一覧や詳細、編集画面などがセットになっているので、必要な画面を漏らさずに作成できます。

GlideのUI

デザインの自由度

どの項目を表示するかは選択できるけど、基本的には用意されているレイアウトから選択するだけなので、レイアウトの自由度はほぼありません。その分、崩れにくく、かっちりしたものを作れる印象。

変更できる配色もアクセントカラー1色だけなので、デザインでの差別化は難しそう。

データベース

データベースはGoogleスプレッドシート上に作成されます。作成されたファイルはGlideの画面内でも編集可能。スプレッドシートで編集した内容をそのままGlideに反映できるので、スプレッドシートに慣れていたらとてもやりやすいです。

データベースはコンテンツごとにシート単位で紐付ける形式。異なるデータベースを1つの画面に表示したりはできなさそうです。

アクション

自分でカスタムアクションを作る時は、視覚的に構造を作成できます。最近はプログラミング的思考を学ぶ機会も増えたので、このUIはわかりやすそうです。

Glideのアクション編集

できあがり

ごくシンプルな構成であれば手間をかけずに短時間で作成できる。ただ、やっぱりレイアウトを変えられないのはちょっと辛いところ。

Glideで作ってみたアプリ

AppSheet

最後にAppSheetです。Googleが買収したことでお馴染み。

www.appsheet.com

全体の操作感

アプリを作るというよりはデータベースを組み立てていく感覚で、初見ではわかりづらく慣れが必要な設定画面。右側のプレビューは自分で操作できるので、左側でいろいろ設定しながら、都度右側のプレビューで確認できます。

AppSheetのUI

デザインの自由度

用意されたレイアウトから選択するだけなので、デザインの自由度はほぼありません。
ただ、項目単位で表示・非表示を選択したり、アクションの割り当てを変更したりできるので、カスタマイズは思ったよりもできる印象。画面内に表示されるテキストのローカライズもできます。

データベース

Googleスプレッドシートをそのまま利用できます。画面単位でデータベースを紐付ける形式ですが、条件で抽出したデータだけを表示することもできるので、1つのスプレッドシートで複数の画面に表示分けすることもできます。
もちろん用途別に分けた複数のスプレッドシートで管理することも可能。

スタイルのフォーマット

条件によってスタイルを変更できます。一つのリストの中で表示分けできるので、画面構成がかなりすっきりします。

条件定義にはスプレッドシートと同様の関数を使うので、関数に慣れていればそれほど難しくはないです。スプレッドシートの条件付き書式みたいな感覚で作成できます。

AppSheetのフォーマット設定

できあがり

レイアウトに制限はあるけれど、データベースの条件付けがちゃんとできれば使い勝手のよいものが作れそうな印象。一覧表示でスワイプ操作のアクション(左にスワイプしたら削除とか)を設定できるのもよい。

AppSheetで作ってみたアプリ

まとめ

AdaloとGlideはデータベースとコンポーネントの構成や紐付け方をちゃんと理解できれば、初心者にも使いやすいサービスだと思います。ただ、どちらも機能的な制約はそれなりにあるので、小規模なアプリであれば活用できそうです。

より初心者向けなのはGlide。自由度は低いけど崩れにくいし、画面構成もほぼ自動的に組み立ててくれるので、ノンデザイナー、ノンプログラマー向け。

自分で画面構成を組み立てらるならAdaloが使いやすいです。画面遷移を俯瞰的に確認できるし、レイアウトを調整できるのもポイント高いです。

AppSheetは初心者には難しそうな印象ですが、データベースのカスタマイズ性が高く、いろいろと条件付けしたい場合に便利です。ノーコードというより、少し踏み込んでローコード(LowCode)で使いこなすとかなり強力なツールかもしれません。

いずれのツールも複雑なアプリを作るのは難しい(もしくはとても手間がかかる)印象ですが、ちょっとしたアイディアを実験的に試してみたい時には活用できそうだなと思いました。あとは個人的に欲しいアプリを自分専用に作ってみるのも楽しそうです。

ニタバル カテゴリーの記事一覧 -

*1:プログラムコードを書かずにサイトやアプリを開発すること