[ノーコードでアプリ開発] Adaloの使い方･制作過程

# Adoleとは
Adalo（アダロ）は、スマートフォンなどの**モバイルアプリ開発に特化したノーコードツール**で、プログラミングの知識がなくてもアプリケーションを作成できる点が大きな特徴です。以下にその主な特徴をまとめます：

### 主な特徴
1. **直感的な操作性**  
   - GUI（グラフィカルユーザーインターフェイス）を使い、スライドを操作するようにデザインを簡単にカスタマイズできます
   - ソースコードを記述する必要がなく、初心者でも取り組みやすい環境が整っています

2. **テンプレートの豊富さ**  
   - タスク管理アプリ、SNSアプリ、ECアプリなど、さまざまなテンプレートが用意されています。  
   - これにより、アプリ開発初心者でも目的に最適化したアプリを素早く作成できます

3. **初心者に最適**  
   - 開発経験が浅い人やアプリ開発に、初めて挑戦する人に特に適したツールです

# Adaloの使い方 : 登録から開発までの流れ
### 1アカウントを作成する
[公式サイト](https://ja.adalo.com/)の右上の「サインアップ」をクリックします。

<img=width="200" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3801595/1222245a-866b-f660-1164-3d957f3ac076.png">

次に以下の画面で、Email、Password、Full nameを入力します。そして、「LET'S DO THIS!」をクリックします。

<img=width="200" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3801595/dd111f24-ea37-f06f-4238-7cff8669bf97.png">


### 2開発環境設定
ここではどのようなアプリを作るかを決めます。今回はスマホでできる、Todo Listのアプリを作成します。その開発環境設定を行います。
#### 2.1アプリ種類の決定
まず開発するアプリの種類を決めます。Mobile OnlyとMobile,Tablet, & Desktopの2つがあります。今回はスマホでできるアプリを作るので、Mobile Onlyを選択します。そしてNextを押すと次に進みます。

<img=width="200" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3801595/27cb67be-de99-9120-8774-c611873b1d4d.png">

#### 2.2テンプレートを選択
Adaloでアプリを作成する際には、さまざまなテンプレートが用意されています。具体的には以下のようなテンプレートがあります：  

- **Classes（クラス管理）**  
- **Chat（チャット）**  
- **Shopping（ショッピング）**  
- **Social Media（ソーシャルメディア）**  
- **Appointments（予約管理）**  
- **Inventory Management（在庫管理）**  
- **Restaurant（レストラン管理）**  
- **Todo List（タスク管理）**  
- **Trips（旅行管理）**  
- 
<img=width="200" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3801595/181ef940-01c2-5d54-ea87-15b22cd5c482.png">


今回は、**Todo List(タスク管理)** を選択します。  
#### 2.3ブランディング
アプリの名前と、このアプリを誰が使うかを決める必要があります。ここでは、アプリの名前を「You can do it」誰がアプリを使いますか？を「**Mostly me, I'm just testing**（ほとんど自分のためで、ただ試しているだけです）」を選択します。  

<img=width="200" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3801595/07961c66-809c-af00-a454-8fdeb0a85f8d.png">

設定が完了すると、選択したテンプレートに基づいたアプリの編集画面が表示されます。以下の画面でデザインや機能を自由にカスタマイズできます。  

<img=width="200" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3801595/5265e9f2-6219-316b-38ec-011fe3339df8.png">




### 3開発
#### コンポーネントの配置
左の十ボタンを押して、Componentsを押すとこのような画面になります。ここで、ボタンやリストなどを各画面に配置できます。例えば、Buttonを押してHomeの所にカーソルをやると、カーソルの位置にボタンを設置することができます。
自分好みのを作ってみましょう。

<img=width="200" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3801595/d265b6b2-cfad-747f-a26d-bb131d807c48.png">


#### 色設定
その下のパレットのボタン(Branding)で全体の色を調整することができます。今回は色をこのように変えてみました。

<img=width="200" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3801595/d9597722-30de-30ab-f1f8-33d5479d20af.png">



#### 各スクリーン設定
Brandingボタン下のScreensで各スクリーンのコンポーネントを編集することができます。今回は基本のもの(元からのもの)を使います。

![スクリーンショット 2024-12-17 112918.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3801595/05f06fbd-f058-d0db-a778-18327b9e8869.png)



#### 環境設定
環境設定ではアプリの名前、説明、アイコンなどを設定できます。

<img=width="200" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3801595/2b3af327-7374-e67a-7d7b-74080fbb9414.png">


#### 公開設定
Publishでは公開URLの確認ができます。こちらはアップグレードをしないと使うことができません。ちなみにAdaloの料金はこのようになっています。

<img=width="200" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3801595/920347d4-c1e8-5c89-51ac-1f8d32f0b903.png">



#### Analytics
Analyticsで何人のユーザーがアプリに訪れたかなどが分かります。

<img=width="200" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3801595/97b8648b-1407-7093-44e8-db4211252f5a.png">


#### 現状
現状このようになりました。ここから実際に使うとどうなるかを試していきます。
右上の「VIEW APP」をクリックして、「Starting Preview」をクリックします。
するとこのような画面になります。

<img=width="200" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3801595/65163190-1146-f626-423c-5e587d6f8e3a.png">


ここで実際に操作することができます。Sing upが終わった後はホーム画面に遷移します。

<img=width="200" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3801595/c7a5b881-bf54-f402-f7ca-ad0bdfdcc2dc.png">

<img=width="200" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3801595/48913992-43f8-c264-d084-43ccf9b90726.png">



### 4追加要素
実際に使ってみると、することを書かずに「Add」を押しても「Todo List」に入ってしまいます。そこで、することが書かれたときのみ追加するようにします。

<img=widht="200" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3801595/2e3c8bbf-2fd4-78bd-a7f4-4d2004b8dab7.png">


黒枠に白文字で「Add」と書かれた場所をクリックします。
その後左にある「button2」をクリックします。

<img=width="200" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3801595/bef97ea8-dbff-b80a-c220-101bb28345c0.png">


そして、黄色い枠で囲まれた「create」と書かれたところの一番したまでスクロールします。

<img=width="200" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3801595/dcca5cb0-4233-58de-030e-59beba2c11aa.png">

そして「Show Advantage」をクリックします。すると「Always」と書かれた場所がでてきます。

<img=width="200" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3801595/7958d974-1be2-fe87-9a8a-dcaee8209c4a.png">


そこをクリックすると「Always」の他に「Sometimes」という選択肢がでてきます。これを「Sometimes」にしてください。

<img=width="200" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3801595/383573f1-0697-9018-6d82-8477cdc816a5.png">

その後、下にあるThis action will only happen if...と書いてあるしたをクリックしてください。そこで「Other Components」の「Input」を押します。

<img=width="200" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3801595/173b916d-d708-ad8d-894d-ac3f1c7cfe10.png">

次に1つ下のマスを「is not equal to」にして、最後のマスを「Empty」にしてください。

<img=width="200" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3801595/f18c11e7-d193-d2eb-c2ed-b4279565e347.png">



これで「Preview」に戻ってみましょう。タイトルなしで「Add」ボタンを押しても追加されないようになりました。

<img=width="200" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3801595/48913992-43f8-c264-d084-43ccf9b90726.png">

タイトルを入れるとしっかりできます。

<img=width="200" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3801595/0e0481d0-797a-143a-af15-c168a64be2f4.png">


# 最後に
「Adalo」はノーコードでアプリ開発をすることができて、UIが分かりやすく、初心者にはとてもいいものとなっています。今回の記事では、基本的なことしかしていないので、皆様が望むアプリ開発を試してみてください。