Adaloの使い方を5分で解説!実際にToDoアプリを開発してみよう!

こちらの記事では、ノーコードツールAdalo(アダロ)について解説しています。

Adaloのできること・できないこと・使い方・料金・事例について知りたい方は、参考にしてください。

 

\開発実績100件突破!ノーコードのプロ集団!/

Adaloの開発はお任せ

 

ノーコードツールAdalo(アダロ)とは?

Adalo ロゴ

Adalo(アダロ)とは、アプリ開発に適したノーコードツールの一つです。

Adaloは、ネイティブアプリの開発ができ、デザインも簡単に仕上げることができる点から多くの人々に利用されています。

他のアプリ開発に適しているノーコードツールとしてBubbleが有名ですが、Bubbleはネイティブアプリの開発が難しく、デザインが難しいです。

Bubbleは、柔軟な開発が可能であり、カスタマイズ性が高いため、多くのユーザーに利用されていますが、Adaloと比較すると上級者向けのアプリになります。

Adaloは開発経験が浅く、スマホアプリなどの開発をしたい方におすすめのノーコードツールとなっています。

 

Adaloのできること

Adalo のできることとして、以下の点が挙げられます。

  • テンプレートを利用することでデザイン性の高いアプリを簡単に開発できる
  • ネイティブアプリの開発
  • アプリ内課金
  • 外部サービス(API)連携

 

Adaloでできないこと

Adaloのできないこととして、以下の点が挙げられます。

  • ios Widget
  • 音を出せない
  • ゲームを開発できない

 

 

Adalo料金プランは3つ!

画像出典:Pricing

Adaloの料金プランは、「Explore」「Pro」「Business」の3つに分けられます。

プラン Explore Pro Business
料金/月額 無料 $50 $200
アプリ作成数 無制限 無制限 無制限
データ容量 最大50レコード 最大5GB 最大20GB
独自ドメイン
アプリのリリース
追加ユーザー 1人 5人
サポート
おすすめな方 初めて利用する方 本格的に開発を行いたい方
アプリをリリースしたい方
大規模な開発を行う場合

上位の料金プランになるほど、使用できる機能が増える仕組みです。

それぞれの料金プランについて詳しく知りたい方は、以下の記事を参考にしてください。

Adaloの料金を解説!無料プランと有料プランの違いは?

 

Adaloの使い方:登録~実際にToDOリストを作成

Adaloを実際に使ってみましょう!

 

まずはアカウントを作成!

まず、Adaloの導入方法を解説します。

以下の手順を参考にしてAdaloを導入してください。

STEP.1

Adalo公式サイトにアクセスする。

STEP.2
「GET STARTED FOR FREE」をクリック。

STEP.3
登録情報を入力する。

入力後、チェックボックスにチェックを入れて「LET’s DO THIS」をクリック。

 

まずはテンプレートを元にアプリを開発

実際にアプリを開発してみましょう!

STEP.1
ネイティブアプリかWebアプリを選択。

ネイティブを選択してもWebに対応しています。

STEP.2
テンプレートを選択。

今回は、「To Do List」を選択。

  • blank:自分で一から作成
  • Appointments:メモアプリの作成
  • Ordering:オーダーアプリの作成
  • Directory:日記アプリの作成
  • To-Do-List:タスク管理アプリの作成
  • Coaching:マッチングアプリの作成
  • Chat:チャットアプリの作成

STEP.3
アプリの情報を入力して完成

  • App Name(アプリ名)
  • Primary Color(原色)
  • Secondary Color(二次色)

 

データベースの説明

データベースとは、アプリの開発で使用するデータが保管してある場所です。

テンプレートを使用してアプリを開発する場合はすでにデータベースにデータが入っており、テンプレートを使用しない場合は、一からフォルダ作成し、データを入力する必要があります。

アプリを開発する前にどの程度の規模か、スクリーンシートはどれくらい作成するかを考える

今回は、テンプレート「to do list」を使用して解説します。

テンプレートによってデータベースに格納されているデータが違いますので、ご注意ください。

データベースは、画像の赤枠部分から確認できます。

「Users」「Takes」の2つがデータになります。

  • Users
  • Takes

Usersを例に詳しく解説します。

Usersの中身を見てみると、以下のデータがあります。

  • Email
  • Password
  • Username
  • Full name

それぞれの項目にデータが入ります。データはカテゴリに分けて入力してください。

プロパティの追加をしたい場合は「ADD PROPERTY」からできます。

「︙」をクリックすることで、データの確認をすることができます。

  • View/Edit Records(レコードの表示/編集)
  • API Documentation(APIドキュメント)

View/Edit Recordsを開くとデータが確認できます。

以上、データベースの解説になります。

一からアプリを開発する場合は、これらのデータベースを自身で作成する必要があります。

テンプレートを利用することで、自動でデータベースを作成できますので、開発に不慣れな方はテンプレートを利用することをおすすめします。

 

実際にToDoリストを一から作成してみよう

この章では、いちからToDoリストを作成します。

ToDoリストは、たった3つの画面で作成することが可能です。

3つの画面

画面は左からログイン画面、新規登録画面、ホーム画面です。

それでは、作成手順を解説します。

最初にやることリストアプリがどのような動作をできるのか簡単に解説します。

ToDoリストの作成1
Adaloは実際にiPhoneで触った時の画面をすぐに確認することが可能です。

非常にわかりやすいですね。

画面の通り、シンプルなやりたいことリストのアプリです。

todoを追加して+を押すとやるべきことが追加され、左の丸(ラジオボタン)を押すことで、やることが完了になり、下に表示されます。

右からは、間違えてしまったり、もう必要無くなったやることを削除することも可能です。

このアプリの応用として、SNSアプリや、マッチングアプリ、予約アプリ等作成することが可能です。

次に、画面を詳しく解説していきます。

【ログイン画面】

ToDoリストの作成2
使用しているコンポーネントは、以下の4点です。

  • テキスト
  • ボタン
  • フォーム
  • テキストインプット

ログインに関しては、Adaloの元々用意されているコンポーネントのフォームを使用することで、非常に簡単にログインを実装することが可能です。

また、パスワードを忘れた方は、AdaloのアクションでForgot passwordがあるので、楽々実装することが可能です。

この画面について特に難しい動作はありません。

 

【新規登録画面】

ToDoリストの作成3
使用しているコンポーネントは、以下の5点です。

  • テキスト
  • ボタン
  • フォーム
  • ライン
  • レクタングル

先ほどのコンポーネントフォームを使用することで、新規登録に関しても簡単に実装することが可能です。

こちらに関してもログイン画面が攻略できた方は特にいうことがないので、今回はデザインにこだわってみました。

ToDoリストの作成4

ToDoリストの作成5

バックグラウンドを透明の色にしています。これにより背景を写しつつ表示することができます(詳しくはアプリプレビューを触ってみてください)

さらにレクタングルで、白背景を入れることで、このようなおしゃれな画面を実装することが可能ですので、ぜひ参考にしてください。

【やることリストの画面】

ToDoリストの作成5

使用しているコンポーネントは、以下の8点です。

  • テキスト
  • テキストインプット
  • ボタン
  • フォーム
  • ライン
  • アイコン
  • アップバー
  • シンプルリスト

新たに出たコンポーネントから解説していきます。

テキストインプットに関しては、To doを追加するというところに文字を入れるためのコンポーネントです。

またその横の+がアイコンですね。

記入したやることを追加するためのアイコンです。

そして下にシンプルリストが2つ並んでいます。

ToDoリストの作成6

最初にその人のtodoを作る方法を解説します。

nameに関しては、コンポーネントのテキストインプットの内容をマジックテキストで選択することで設定することが可能です。

次にOwnerです。

Ownerとは、その人専用のtodoであることを表すためのタグのようなものです。

これがない場合には、全員で同じtodoリストを共有することになります。

ですから、その人専用のtodoリストにする場合には、このOwnerでログインユーザーというタグをつける必要があります。

そして、最後のステータスとして、true/falseを使用しています。

初期はfalseに設定することで、まだ完了していないtodoと完了したtodoで識別することが可能です。

上記で設定は可能です。

ToDoリストの作成7次に上部のリストと下部のリストを解説します。

上部リストには、どのリストを表示するかと表示されているので、Tasksを選択しています。

そしてフィルターにはログインユーザーのタスクを表示するようにし、追加でフィルターでまだ完了していないtodoを表示するために、Statusがfalseの状態のものを表示するようにしましょう。

ToDoリストの作成8その他に左の○(ラジオボタン)を押したときに、todoが完了になる動作を追加しましょう。

アクションのアップデートで、statusをtrueに変更する動作を入れましょう。

ToDoリストの作成9

最後にデリートです。todoの削除です。

写真の通りに、削除の動作を入れましょう。

下部のリストに関しては、trueを表示するようにすることで、問題なく表示することが可能です。

いかがでしょうか。Adaloを使うことで非常に簡単かつスピーディーにアプリ制作を行うことができました。

このようにして制作したアプリは、App storeやGoogle play storeでリリースすることが可能です。

※別途費用が必要です。(Adalo proプラン、Apple developer登録料、Googleプレイストア公開料金)

また、今回作成したアプリは実際に使ってみることも可能ですので、ぜひご利用ください

今回作成したToDOリスト

 

初心者の方におすすめの学習方法

Adaloの学習には、自身でアプリを開発しながら覚えることが効率が良いですが、自身で1から学習することに自信のない方は、「Udemy」などの学習サービスがおすすめです。

学習コースにすべて30日間の返金保証が付いている点も安心です。

書籍では、「基礎から学ぶノーコード開発」でノーコードツール(Glide、Adalo、Bubble)の使い方を解説していますので、参考にしてください。

また、英語のみの対応になってしまいますが、Adalo公式のドキュメントサイトの「Adalo ResourcesAdalo利用者のコミュニティの「Adalo Forum」を活用する方法もあります。

 

\Adaloの開発はお任せください/

Adaloの開発はお任せ

 

Adaloで作られたアプリの開発事例を紹介!

実際にAdaloで開発された事例をご紹介します。

Adalo初心者の方は、紹介するアプリを開発する際の参考にしてください。

 

Union

Appleストア版:https://apps.apple.com

Googleストア版:https://play.google.com

 

Sabinuky

Appleストア版:https://apps.apple.com

Googleストア版:https://play.google.com

 

より多くのAdaloの開発事例を知りたい方は、以下の記事を参考にしてください。

合わせて読みたい

 

Adalo|まとめ

Adalo ロゴ

Adaloについて解説しましたが、参考になったでしょうか?

Adaloは、モバイルアプリの開発に特化したアプリです。

テンプレートを利用することで簡単にデザイン性の高いアプリを開発できる点がポイントです。

アプリ開発に適したノーコードツールとしてBubbleが挙げられますが、Adaloの方が綺麗なデザインを作成しやすいです。

しかし、カスタマイズ性を比較するとBubbleの方が高く、より多くの機能の実装や本格的な開発を行いたい方は、Bubbleの方がおすすめです。

開発経験が浅い初心者の方にAdaloは最適なツールです。

基本的な操作でしたら無料から始められますし、有料プランであっても無料トライアルから始められますので、ご活用ください。

最後まで読んで頂きありがとうございました。

\Adaloの開発はお任せください/

Adaloの開発はお任せ