【初心者向け】NoCodeツールAdaloの基本操作を学ぼう！

皆様こんにちは、taku（@takuNoCode1）です！
平素より格別のご高配を賜り厚く御礼申し上げます。

今回は、NoCodeツールAdaloの基本操作について解説していきます！

Adaloの概要とアプリ開発の始め方については、次の記事で解説しましたので、まずはこちらをご覧ください。

今回は「ネイティブアプリ」の開発画面で解説を行います。

「テンプレート」に「Coaching」を採用しています。

それでは、Adaloの基本操作について学習していきましょう！

1. Canvas

スマホの画面が配置されている部分を「Canvas」と呼びます。
control キーを押しながらスクロールすると、画面の拡大・縮小が可能です。

1-1. Screen

「Canvas」上にあるスマホの画面のことを「Screen」と呼びます。

「Webアプリ」の場合は「Screen」にパソコンの画面が表示されます。

1-2. Component

「Screen」の中に配置されている「Button」や「Form」のことを、それぞれ「Component」と呼びます。

2. Left Toolbar

画面左のメニューを「Left Toolbar」と呼びます。

2-1. Add Panel

「プラスボタン」をクリックすると「Add Panel」が開きます。
「Add Panel」は以下の2つから構成されています。

・ADD COMPONENT
・ADD SCREEN

ADD COMPONENT

「ADD COMPONENT」は「Component」を追加する際に使用します。「Screen」の中にドラッグアンドドロップして配置することができます。

「Component」は以下のようにまとめられています。

・Most Used（よく使用されるもの）
・Navigation（ナビゲーション）
・Lists（リスト）
・Button（ボタン）
・Simple（テキストや画像など）
・Forms & Fields（フォームとフィールド）

「EXPLORE MARKETPLACE」ボタンをクリックすると、上記以外の「Component」をインストールすることができます。

追加したい「Component」の「INSTALL」ボタンをクリックし、「DONE」ボタンをクリックします。

インストールした「Component」が使用できるようになります。

ADD SCREEN

「ADD SCREEN」は「Screen」を追加する際に使用します。追加したい「Screen」をクリックします。

「Screen」の名前を入力し、「CREATE SCREEN」ボタンをクリックします。

あらかじめ「Component」が配置された「Screen」も準備されています。

「Screen」は以下のようにまとめられています。

・Simple（ブランクやフォームなど）
・Info（詳細情報など）
・Intro（ログインやログアウトなど）
・List（画像リストやカードリストなど）
・Misc（モーダルやチャットなど）

2-2. Branding

「Branding」から、以下4項目のカラーを設定することができます。

・Primary Color（主テーマカラー）
・Secondary Color（副テーマカラー）
・Default Background Color（初期背景カラー）
・Default Text Color（初期文字カラー）

2-3. Screens

「Screens」から、作成した全ての「Screen」の詳細を確認することができます。

それぞれの「Screen」ごとに以下4項目を確認することができます。

・Components
・Actions
・Available Data
・EDIT STYLES

Components

「Screen」に配置した全ての「Component」が一覧表示されます。

それぞれの「Component」の詳細設定も確認することができます。

Actions

「Actions」から、該当する「Screen」にアクセスした時の「Action（動作）」を設定することができます。

下図の場合は、この「Screen」にユーザーがアクセスすると、通知許可のリクエストが行われるように設定されています。

 Available Data

「Available Data」から、それぞれの「Screen」に紐づけられたデータを確認することができます。

 EDIT STYLES

「EDIT STYLES」ボタンをクリックすると、「Screen」のスタイルを変更することができます。

2-4. Database

「Database」から、データベースを確認することができます。
Adaloのデータベースは、以下のように構成されています。

・Collection（表全体）　関連するデータのまとまり
・Property（表の列）　データ型及びデータの項目名
・Record（表の行）　実際に保存されたデータ

Collection

データベースには、「Collection」と呼ばれる単位ごとにデータを保存していきます。

例えば、ユーザーの名前やメールアドレスなどのデータは、「Users」という「Collection」にまとめて保存して、管理を行います。

Property

データの種類ごとに「Property」を作成します。
「Property」は「Type（データ型）」と「Name（データの項目名）」を設定します。

「Type（データ型）」を決めることで、誤って異なる型のデータを保存してしまうことを防ぐことができます。

例えば、保存するデータが「文字」である場合は「Text」「数字」である場合は「Number」「画像」である場合は「Image」となるように型を設定します。

Record

実際に保存されたデータを「Record」と呼びます。表の「1行」が「1Record」に該当します。

「ADD」ボタンをクリックすると、「Record」を追加することができます。

それぞれの「Property」にデータを入力し、「SAVE」ボタンをクリックすると、新規「Record」が追加されます。

2-5. Settings

App Settings

「App Settings」から、アプリの名前変更や説明文の追加など、アプリに関する設定を行うことができます。

 Display Settings

「Display Settings」の「Display Screen Connections」から、「Screen」の接続を表す矢印表示のオン・オフを切り替えることができます。

 App Access

「App Access」から、アプリへのアクセス権を設定することができます。また、他者に対するアプリの複製の許可も設定することができます。

 Copy / Delete

「Copy App」及び「Delete App」ボタンをクリックすると、アプリの「複製」及び「削除」ができます。

2-6.  Publish

 Android App

「Android App」から、「Androidアプリ」として「Google Play」に公開することができます。

「Androidアプリ」として公開するためには、「Pro Plan」もしくは「Business Plan」にアップグレードする必要があります。

 iOS APP

「iOS App」から、「iOSアプリ」として「App Store」に公開することができます。

「iOSアプリ」として公開するためには、「Pro Plan」もしくは「Business Plan」にアップグレードする必要があります。

 Progressive Web App

「Progressive Web App」から、「Progressive Web アプリ（PWA）」として公開することができます。

「Progressive Web アプリ（PWA）」とは、モバイル端末のホーム画面にアイコンを配置することで、「Webアプリ」を「ネイティブアプリ」のように動作させるアプリのことです。

独自ドメインを取得して公開するためには、「Pro Plan」もしくは「Business Plan」にアップグレードする必要があります。

Adaloのドメインを使用する場合は、無料プランで「Progressive Web アプリ（PWA）」として公開することができます。

「Webアプリ」の場合も同様に、Adaloのドメインを使用する場合は、無料プランで公開することができます。

2-7.  Analytics

「Analytics」から、アプリを使用したユーザー数や新規登録者数を確認することができます。

3. Top Bar

画面上部のメニューを「Top Bar」と呼びます。

3-1. App Switcher

「Top Bar」の中央に配置されているドロップダウンリストを「App Switcher」と呼び、アプリの切り替えや、新規アプリの作成などを行うことができます。

3-2. Preview

「Preview」から、現在作成中のアプリをブラウザ上で確認することができます。画面右上のリストから、機種やタブレットごとに大きさを変更することができます。

3-3.  Share

「Share」から、「Progressive Web アプリ（PWA）」として公開することができます。

3-4.  Account Menu

画面右上のメニューを「Account Menu」と呼びます。

 Settings

「Settings」から、プロフィール設定やチーム設定、プランの変更やドメインの変更などを行うことができます。

 Help & Documentation

「Help & Documentataion」から、Adaloの公式ドキュメントを参照することができます。

 Sign Out

「Sign Out」をクリックすると、ログアウトしてAdaloのトップ画面に戻ります。

4. HELP CENTER

画面右下の「Adaloボタン」をクリックすると、「HELP CENTER」が表示されます。

4-1. Getting Started

「Getting Started」から、簡単なアニメーションを見ることによって、Adaloの基本的な操作方法を学ぶことができます。

4-2.  Video Tutorials

「Video Tutorials」から、動画形式のチュートリアルで、Adaloの基本的な機能を学習することができます。

4-3.  Announcements

「Announcements」から、最新の情報を入手することができます。

5. まとめ

今回は、NoCodeツールAdaloの基本操作について学習しました。

実際に使ってみて感じたと思いますが、操作は非常に簡単で、直感的に理解することができます。

また、洗練されたデザインが大きな魅力であり、お洒落なアプリの開発も可能です。

データベース周りの実装は少し難易度が高いですが、いろいろと触ってみて、Adaloに慣れることから初めていきましょう！

簡単なチュートリアルを準備しておりますので、是非こちらをご覧ください！