脱!教養ゼロママ

もう恥ずかしくない!教養のあるママを目指してます!

Adalo基本の画面操作|初心者のアプリ開発

f:id:yuka-edu:20210604173353p:plain


Blogを書いていいると、HTMLやCSSといったWebの知識が増えますよね。

さらにレベルアップして、自分用アプリが作れると素敵じゃないですか?

 

今までアプリって、一部の開発が得意な人やお金のある企業だけが持てる「特別な物」でした。

でも、ノーコードツールを使うと、サークルやママ会などの小さなグループでも アプリケーションが作れちゃう時代になりました!すごい!

 

山あり谷ありで、凡人ママでもWebアプリを作って公開まで漕ぎ着けました。

↓私のアプリトップページ(管理者向けに色々と機能があります)

記事の最後にリンクを載せています。

f:id:yuka-edu:20210604165039p:plain

Miniwa WebAppTop

 

あなたのセンス次第で、可能性は無限大です!

今日はAdaloの超基本となる画面操作を紹介します。 

アプリの作成開始

まずは、ノーコードツールのAdaloにログインします。

www.adalo.com

公開するには有料課金が必要ですが、個人利用なら無料版でも十分楽しめます。

 

AdaloはWeb上で完結できるので、どこにいても、パソコンやタブレットから時間のある時にアプリを作れちゃいます!

 

もう一つ有名なノーコードツールはBubbleです。
Webページにこだわりたい方におすすめ!ただ、少しハードル高めです。

開発初心者さんはAdaloがとっつきやすいですよ。

 新規アプリケーションの作成

f:id:yuka-edu:20210604163314j:image

初めてログインをすると、作成するアプリケーションの種類選択から始まります。

  • 左:携帯用アプリ 
  • 右:Web用アプリ

iPhoneandroid用のアプリを作れるのですが、

携帯アプリをリリースにはお金が色々とかかるので、

私は右側のWeb用アプリを選択して次へ進みます。

 

元となるアプリを選択

f:id:yuka-edu:20210604163324j:image

サンプルアプリが用意されています!

デリバリーアプリ、注文アプリ、チャットアプリなど、

サンプルを修正するだけで作れちゃいます。(すごい!)

好きなアプリを選んで、設定を眺めるだけでも勉強になりました。

 

今日は空っぽの左上を選択して進みます。 

アプリ名&テーマカラー設定

f:id:yuka-edu:20210604163330j:image

好きなアプリ名を入力します。

続いて、テーマカラーを2色選びます。

美的センスゼロの私はこちらのWebページのカラーパレットから色を選びました。

色の設定は後からでも変えられます。

www.schemecolor.com

操作画面説明 

「Create」をクリックすると、アプリの編集画面が開きます。

画面の見方を紹介していきます。

コンポーネント

f:id:yuka-edu:20210604163342j:image

左上の「プラス」ボタンを選択します。

画面上に表示されるテキストやボタンのことをまとめて「コンポーネント」と呼びます。

左側の一覧から使いたい機能を選択し、ドラッグ&ドロップで右側の画面にポンと配置します。

すごく簡単に画面ができてしまいます!

コンポーネントの種類は限られているので、良い意味で選択肢が少なくて迷わないです。

スクリーン

f:id:yuka-edu:20210604163438j:image

左上の「+」ボタンを選択します。

画面?ページ?のことを「スクリーン」と呼びます。

スクリーンの中にはすでにいい感じで「コンポーネント」を配置しているものもあるので、作りたい画面イメージに近い「スクリーン」を選択し、右側の開いたスペースにドラッグandドロップで配置すればOKです。

ブランディング

f:id:yuka-edu:20210604163554j:image

最初に設定した色がイマイチだった時にここで変更します。

こちらはあまり使わない気もします・・・

スクリーンズ

f:id:yuka-edu:20210604163604j:image

たくさん作った「スクリーン」の一覧を表示します。

スクリーン名をクリックすると、スクリーンの中にある「コンポーネント」の一覧を表示します。

クリックしづらい小さな「コンポーネント」を修正したい場合、このスクリーンズから選択することをお勧めします。

データベースコレクションズ 

f:id:yuka-edu:20210604163608j:image

データベースと言うと、ピンとこない方もいるかも知れません。

なんとなく、エクセルのシートのような感じです。

ユーザ情報などのデータはここで一覧表示できます。

データベース同士関連を持たせたりもできます。

 

まとめ

画面を見たらわかると思うのですが、すごくシンプルですよね。

社内用SNSや小さな飲食店の注文アプリ、地域のグループ用のアプリなどアイディア次第で便利なアプリを作れるってすごいことです。

 

私が作ったサンプリWebアプリもよければご覧ください。

www.miw01.com