ノーコードツール「Adalo」でアプリを作ってみた
こんにちは。ネクストビートでプロジェクトマネージャーとして働いている一石です。今回はノーコードツール、「Adalo」を使ってアプリを作ってみました。
ネクストビートでもSTUDIOやmabl、KARTE Blocksなど様々なノーコード・ローコードツールを積極的に取り入れています。今回試してみたAdaloはまだ社内では使用されていないものですが、直感的な操作でアプリ開発ができるサービスということで個人的に興味を覚え、どれくらい簡単にできるものなのか試してみることにしました。特徴は以下となります。
- Webアプリだけでなくネイティブアプリも作成可能
- 用意されているUIパーツが豊富で、最初から動くものを簡単に作れる
ネイティブアプリも含め、スマホサービス向けに適応されたサービスです。言語が英語のみとなり最初は抵抗ありますが、直感的な操作で技術者でなくても扱いやすいこと、UIパーツが予め整っているのでデザイン知識なしでもある程度形にできることなど、扱いやすいUIとなっています。
では作っていきます。
- 作ったもの： 日記アプリ
作成画面数：4
作成テーブル数：1
データの登録・編集機能と、作成したデータの閲覧機能を持ったシンプルな日記アプリを作ります。
1. プロジェクトを立ち上げる
新規プロジェクトを立ち上げます。以下3つの項目を選ぶとプロジェクトが作成されます。
- Platform
NativeMobileアプリかDesktopWebアプリかを選びます。
今回はDesktopWebアプリを選択
- Template
作成するアプリのTemplateを選びます。予めいくつかのフォーマットが用意されており、そのままでも動作する状態のものが作られます。
今回は自分でやってみるのが目的なので、Blankを設定。
- Branding
アプリ名と、ベースとなるプライマリー・セカンダリーカラーを設定します。今回はデフォルトのカラーをそのまま使用します。
3つの設定が完了するとアプリのプロジェクトが作成されます。
BlankのTemplateでも、ログイン機能だけはあらかじめ準備されています。とても便利。
Canvasと呼ばれるメイン画面に、作成済みの画面（Screen）と遷移導線が表示されています。Canvasから該当のScreenを選ぶか、左側のツールバーのScreenアイコンから各ページの編集が行えます。
また、ヘッダー部のPREVIEWボタンからいつでも作成中のアプリの動作を確認できるので、都度動作を確認しながら進めていくことができます。
2. DBを作る
日記アプリを作るにあたって、必要な項目をテーブルにまとめます。
シンプルに以下の項目を準備することにしました。
テーブル名:Dialy
- 日付（Date）
- タイトル（Title）
- 本文（Description）
- User（User）
- 画像（Image）
画像やファイルもカラムとしてテーブル上に持たせることが可能です。
また、自分が作成した日記のみが表示されるよう、Users情報ともリレーションを持たせました。
デフォルトでUsersテーブルが用意され、ログイン機能に使用されていたので、こちらのテーブルを利用します。
テーブルはツールバーからデータベースアイコンを選択し、テーブル・項目を自由に追加できます。また登録済みのデータがある場合はレコードの確認も行えます。
3. Screenを作る
使用するテーブルを用意したら、Screenを作っていきます。
Screenでは画面のパーツとなるComponentsを配置し、操作時のActionを設定していきます。
作成した画面は以下4画面になります。
- 一覧画面
- 詳細画面
- 日記作成フォーム
- 日記編集フォーム
ログイン後のトップ画面に、日記の一覧と作成ボタンを表示。
一覧から日記を選ぶと日記の詳細が表示されます。
日記の詳細からは内容を編集できるように編集機能も用意しました。
一覧画面の作成を例に見ていきます。
Screenもあらかじめテンプレートが用意されており、今回はCardListを選択。
デフォルトで配置されているComponentに、要素の参照先を指定していきます。先ほど作ったDiaryテーブルを参照し、ログインユーザーの情報のみが表示されるようFilterをかけます。
表示項目とテーブルカラムが紐づくよう参照情報も設定します。
Actionは次に作る詳細画面のScreenへのリンクを設定しています。
また、新規登録も行えるよう、画面右下に新規登録ボタンのComponentを追加しています。Actionは日記作成フォームへのリンクとなります。他、ヘッダーなど細かい部分の画面と挙動を調整していきます。
同様の手順で、残りの画面も作成していきます。
フォーム画面の作成についても、テンプレートを選択して参照するテーブルを選ぶと自動で画面にフォーマットが流し込まれるので手間いらずでした。
4. 公開する
画面も作り終わると完成です。以下で実際に作成したものを触っていただけます。（デザイン崩れなど作りが雑なのはご容赦ください）
デザインや細かい作りこみなど改良の余地はまだまだありますが、とりあえず最低限の機能を備えた動くものが完成しました。
作業時間は色々試しながらでも1時間強程度でした。0から作ることを考えるとなかなかのスピード感ではないでしょうか。実際に触ってみて、Adaloでのアプリ開発では以下のようなスキルがあれば一定程度のアプリは十分に作れると感じました。
- 簡単なテーブル設計ができる
- 画面遷移図が理解できる
- 各画面での機能要件・挙動を箇条書き程度でリストアップできる
感想
手軽に動くものを作れるのがとても良いです。UIがわかりやすいのと、テンプレートを使えばとりあえず動くので、REVIEWで試しながら調整していけばシステム開発の知見がなくても一定のものは作れそうです。
また、個人的にはデザインノウハウに乏しいので、ベースカラーとテンプレートを選ぶだけである程度形にしてもらえるのはありがたかったです。モックの作成などにもよいのかなと思いました。
一方で製品としてデザインにこだわったり独自の機能を持たせようとすると工夫とセンスが必要と感じました。
色々な制約もありますが、うまく活用すれば最小限の労力でさまざまなことができるノーコードツール。また他のサービスも触ってみて、色々比較していければと思います。最後までご覧いただきありがとうございました。
We are hiring!
「人口減少社会において必要とされるインターネット事業を創造し、ニッポンを元気にする。」
を理念に掲げ一緒に働く仲間を募集しております。
