【Adaloの使い方】ノーコード開発ツールを使って無料でフードデリバリーサービスを作ってみよう

皆さんこんにちは。近年、日本でもAdaloを利用し、コードを一行も書くことなくアプリを作成する人が増えています。世界各国で売却事例が生まれ、日本でも今年、Adaloで開発されたオンライン就活プラットフォームSPOTTOが買収され、話題となりました。

しかしAdaloの公式ドキュメントは全て英語であり、まだまだ日本語での使い方の解説記事も少ない状況です。

プログラミングをやったことない方の中には、ノーコード開発ツールといえども、それなりに敷居を感じるかたもいるかも知れません。

そこで今回は、プログラミングを一切やったことのない人に向けて、日本でもコロナの流行を機に普及した「Uber eats」「出前館」のようなフードデリバリーアプリを作成しながら、Adaloのメインとなる機能を概観していきたいと思います。

1．ノーコード開発ツールAdaloとは？

まずAdaloとは何なのか、Adaloを使うと何が出来るのかを確認していきましょう。

Adaloは、アメリカ発のアプリケーション開発用ノーコードツールの一つです。GUIをパワーポイントのスライドを操作するように直感的に操作することで、プログラミングの工程を踏むことなく、アプリケーションを開発することが可能です。

AdaloではWebのブラウザで閲覧するWebアプリケーション、スマートフォンで操作するネイティブアプリのいずれも無料で開発することが可能です。

スマートフォンのネイティブアプリについては、iOS、Androidのいずれも作成することができ、月額課金の有料ユーザーとなることでストアへの公開も自動で実行してくれます。

作成においては、一から画面の遷移やレイアウトをカスタマイズすることもできますが、タスク管理アプリや予約サイトなどの開発頻度の高い複数のユースケースに即したテンプレートが用意されており、アプリ開発をしたことのないユーザーでもテンプレートに従うことで、配色、レイアウトなどを自動で最適化したアプリを作成することができます。

では早速、Adaloの世界へ飛び込んでみましょう。

2．Adaloを使うための準備をしよう

Adaloは基本的な機能を触るだけであれば無料で利用することができますが、会員登録をする必要があります。

公式サイトへジャンプし、右上のSIGN UPをクリックしましょう。

メールアドレスの入力画面に遷移するので、メールアドレスと使用したいパスワード、ユーザーネームを入れ、「LET’S DO THIS!」をクリックしましょう。メールアドレス宛に確認用メールアドレスが配信されるので、アドレスを認証すれば、Adaloをアクティベートできるようになります！

なおAdaloは無料ユーザーであってもアプリを作成することが可能ですが、一部の機能に制限があり、たとえばスマートフォンのアプリを作成しapp storeやgoogle playにデプロイするには月額課金ユーザーとなる必要があります。

それぞれのプランは下記のとおりです。

これで認証は完了です！Adaloを使う準備ができました。

3．ノーコードでアプリを実際に作ってみる

認証を完了したところで、さっそくアプリを作成していきましょう。

テンプレートの使用有無・選択

まず、作成したいアプリをスマートフォンのネイティブアプリまたはWebアプリから選択します。

今回はスマートフォンのネイティブアプリを選択してみましょう。

NEXTをクリックすると、テンプレートの選択画面に移動します。

テンプレートでは下記の9つが用意されています。

今回は宅配アプリを作成しますので、Orderingをクリックし、NEXTを押下しましょう。

最後にアプリの配色と名前を決めます。

デフォルトでもおしゃれな配色となっていますので、こだわりがない方は配色はそのままでもよいでしょう。

今回はアプリの名前欄(App Name)に「super ordering」と入力し、配色はデフォルトでセットされた黒とピンクのまま、右下のCREATEボタンを押してみます。

CREATEボタンを押下すると、Adaloが入力内容をもとにしてアプリの生成を開始します。

ホーム画面の見方

完成すると、下記のような操作用ホーム画面が表示されます。

特に赤枠①と②が重要となりますので、順番に見ていきましょう。

①アプリのフロントエンドを中心とした操作です。各画面の遷移や、画面の名前、画面内の項目名などを追加・変更・削除することができます。

②アプリのデータベースや設定を中心として操作です。データベースの行・列に格納する項目の指定、新規画面の追加、ボタン・画像などの各コンポーネントの追加・更新・削除などが可能です。

また①②のほかにも下記のような機能がついています。

• 右上のPREVIEWボタンで作成したアプリのプレビューが表示され、実際にボタンをクリックしながら挙動をテストすることができます。
• 右上のSHAREボタンから、他の人に作成したアプリをシェアすることが可能です。無料ユーザーであればAdaloドメインの、有料ユーザーであれば独自ドメインのURLおよびQRコード形式で下記のようにシェアすることが可能です。

さて、ここまででAdaloが自動生成してくれたフードデリバリーアプリができていることになります。

Adaloで作ったアプリを操作する

さっそく右上のPREVIEWボタンを押して実際のスマートフォンでの見え方を確認してみましょう。

ホーム画面が表示されます。デフォルトでセットされているのはiPhone 11 Proですが、他の機種での見え方を確認したいときは右上のプルダウンから他iPhoneやiPad、android端末を選択できます。

「SIGN UP」から新規アカウント登録、すでにユーザーを持っているユーザーはLOG INから認証を行います。

今回は新規登録のため、SIGN UPをクリックしましょう。

本来正しく認証機能を作りこめば、メールアドレスに仮登録・確認のメールを送ることもできますが、今回はテスト環境のため、ダミーのメールアドレスを入力してかまいません。

下記のようにダミーのメールアドレスとパスワードを入力したら、SIGNUPをクリックしましょう。

会員登録に成功しますので、会員情報を埋めましょう。ここもダミーの情報か、あるいは空欄で進んでしまってもかまいません。

いよいよホーム画面が表示されます。

ホーム画面の下部にある「Food」「Orders」「Profile」ではそれぞれ、宅配をお願いしたい飲食店の検索、注文の状況、自分のアカウントの情報を確認することができます。

ここから一気に注文まで進んでみましょう。

オーダーしたいお店のタイルの右下にある「VIEW MENU」をクリックします。

当日に注文できるメニューの一覧のページに遷移しますので、その中で選びたいメニューがあれば「START ORDER」をクリックします。

配達希望時間を聞かれますので、配達希望時間を選択し、OKを押して先へ進みましょう。

注文したいメニューを選択し、プラスマークの乗ったカゴをクリックしてカートに追加し、下部のチェックアウトボタンを押下します。

ここまでくれば、オーダー完了までもう一歩です。

支払情報を入力しましょう。

メニューへのオプションの設定、支払額の確認、チップの支払い有無と上乗せ額の設定、そしてクレジットカードの登録を行います。ここもテスト環境での動作のため、ダミーのクレジットカード情報を入れれば問題ありません。

最後に「PAY & PLACE ORDER」をクリックすると、オーダーは完了です。

もし本番環境でこのアプリを作成すれば、実際に登録されている飲食店からデリバリーしてもらうサービスを実装することができます。

いかがでしょうか。上記でプレビューした範囲は全て選択したテンプレートに応じてAdaloの自動作成機能にまかせたものですが、カスタマイズなしでもここまで本格的なアプリが作成できるということが実感いただけたのではないでしょうか。

では、もし自分でカスタマイズしたい！という意欲的な方のために、最後にカスタマイズでキモとなる機能について簡単に見ていきましょう。

ブランディング/Branding

アプリの配色を変更できます。

アプリホームの画面において、ページ左側のパレットのアイコンを開き、メインとなる背景色・サブ背景色・テキストカラーを選択していきます。

画面の挿入

デフォルトでセットされた画面を削除したり、新規に画面を追加することができます。

アプリホームの画面において、ページ左側の画面アイコンをクリックすると、現在セットされている画面の一覧が表示されます。

もしここに「仮登録確認画面」などを追加したい場合、「＋ADD SCREEN」のボタンからレイアウトや後述するコンポーネントを設定します。

コンポーネントの追加

Adaloには各画面内に必要なパーツが揃っているので、新しい画面を作成する場合にこれらを活用していくことで効率的に画面を作りこむことが可能です。

画面マークから任意の画面を選択すると、ADD COMPONENTというタブが開きますので、このタブから操作していきます。

様々なコンポーネントがありますが、「ボタン」「リスト」「フォーム」「画像」など、パワーポイントのように操作することでパーツを配置していくことができます。

データベースの設計

あらゆるシステムの開発においてキモとなるデータベースの設計についても、Adaloでは直感的なインターフェースで操作することができます。

表のアイコンを開くとデータベースが開きます。Adaloにおいてはエクセルのような縦横の表形式で行および列の設計をするのではなく、リスト形式での操作となりますので、追加したい要素を「+ ADD PROPERTY」をクリックし、型の選択をしたうえで追加していきます。

4．おわりに

いかがでしょうか。本記事においては、Adaloのデフォルト機能を最大限活用したうえでフードデリバリーアプリを作成していく手順についてみてきました。

是非皆さんも一度Adaloを触ってみたうえで、ノーコードの威力について実感いただければと思います。

今回は、テンプレートを使って初歩的な操作を紹介しました。今後も各ノーコード開発ツールの使い方を分かりやすく紹介していきたいと思います。

また、ノーコードジャパンでは、ノーコード開発者たちが気軽に質問し合える無料のプラットフォームNoCode Forumを運営しております。ノーコード開発で分からないことがあったら一人で悩まず、気軽に質問してみましょう。

ノーコードジャパンでは、ノーコードに関する最新のニュースの他、ノーコード開発やノーコードツールの使い方に関するコラムを配信していきます。