【Adaloの使い方_データベース編】ノーコードアプリを事例に簡単解説

サバ漢(@sabakan_umashi)です🐟

このブログを見てより多くの人が気軽にWebツールやノーコードツールを使い、日常のちょっとした問題を改善できれば幸いです😊


最近の事ですが、Adaloというノーコードツールを使って自分の好きなニュースだけ持ち歩くニュースアプリを作ってみました🐟


サバ漢が作成したニュースアプリ

previewer.adalo.com


作成した際に使ったWebツールおよびノーコードツールについては以下の記事で説明しているので、そちらを参照ください。

【ノーコードツール紹介】プログラミング未経験者がAdaloとスクレイピングでニュースアプリ開発 - サバ漢の遊び場兼踏み台


ちなみにニュースアプリの内容(どんなことが出来るのか?)については以下の記事で説明しています。

【アプリの内容紹介】プログラミング未経験者がノーコードでニュースアプリを開発!? - サバ漢の遊び場兼踏み台


そしてこの記事では、ニュースアプリの作成にあたり活用したデータベースについて解説します。

f:id:nukoshogun:20201215195252p:plain
アプリ上で色々な情報を展開するには、データベースが欠かせない!

「Adaloにおけるデータベースとはどのようなものか?」、「データベースがどのようにアプリで活用されるか?」がこれで分かると思います

f:id:nukoshogun:20201231001732p:plain
Adaloのアプリ作成画面

上の画像はAdaloでアプリを作成する時の画面ですが、上の画像のように1つ1つの画面(スクリーン)に分け、各スクリーン内で構成要素を組み立ててアプリを作成します。

そしてその後にアプリの動作(各スクリーン間の繋がり)とアプリ内で使用するデータベースの設定を行います。

アプリの構成要素ついては以下の2つの記事で解説しています。

解説記事1:【Adaloの使い方_構成編1】ノーコードで開発したニュースアプリの構成を紹介 - サバ漢の遊び場兼踏み台

解説記事2:【Adaloの使い方_構成編2】ノーコードで開発したニュースアプリの構成を紹介 - サバ漢の遊び場兼踏み台


繰り返しになりますが、この記事では「Adaloのデータベース」について書きます。「ノーコードで、特にAdaloで何かアプリを作ってみたいけど、どうやれば良いか分からない」という方の参考になりましたら幸いです。

こういうのは、実際に自分で何でもよいから作ってみるのが良いです😊

Adaloデータベースの基本

f:id:nukoshogun:20210115000448j:plain

まずはAdaloデータベースの基本構成について解説します。Adaloのデータベースは、「Collection(コレクション)」、「Property(プロパティ)」、「Record(レコード)」の3つの要素で構成されています。

Collection(コレクション)

f:id:nukoshogun:20210117111922p:plain
コレクションとは、情報のひとかたまりのことです。

上の画像で青枠で示しているのが、1つ1つの情報のかたまりであるCollection(コレクション)です。
例えば自分が作ったニュース保管庫というアプリは、「Users」と「ニュースリスト」という2つのコレクションで構成されています。

それぞれのコレクションの中で特定の種類の情報が集められ、どのような情報を集めるのかは自分で設定します(後述しますが、これはProperty(プロパティ)というものです)。

「Users」というコレクションは、アプリを新規作成した時点で自動的に追加されます。ここには、ログインしたユーザー名やメールアドレスが集積されます。


新しくコレクションを追加する場合は、以下の画像のように「ADD COLLECTION」を選択します。

f:id:nukoshogun:20210117113840p:plain
ADD COLLECTIONを選択すると・・・
f:id:nukoshogun:20210117114153p:plain
①コレクション名を入力し、②ADDをクリックすると追加完了です。

Property(プロパティ)

f:id:nukoshogun:20210117112139p:plain
プロパティは、特定のコレクション内で集める情報の項目です。

上の画像で青枠で示しているのがProperty(プロパティ)です。特定のコレクション内で集積される情報の項目がプロパティから分かるようになっています。

例えば自分が作ったニュース保管庫というアプリの「ニュースリスト」というコレクション内には、「タイトル」、「リンク」、「詳細」、「ニュース画像(URL)」、「ニュース画像」という5つのプロパティが設定されています。


新しくプロパティを追加する場合は、以下の画像のように「ADD PROPERTY」を選択します。

f:id:nukoshogun:20210117115315p:plain
ADD PROPERTYを選択すると・・・
f:id:nukoshogun:20210117115724p:plain
どういう種類の項目を追加するか選択します。ここでは例として「Text」を選択します。
f:id:nukoshogun:20210117120542p:plain
後は①プロパティ名を入力し、②SAVEをクリックすると追加完了です。

Record(レコード)

f:id:nukoshogun:20210117170915p:plain
レコードは青枠のように、実際に入力されたデータです。

上の画像で青枠で示しているのがRecord(レコード)です。各コレクション内で、それぞれのプロパティ(画像の赤枠)に入力されている情報がレコードということです。

f:id:nukoshogun:20210117171818p:plain
コレクション内にレコードを入力するには、赤枠で示されている「○○Records」をクリックするか、隣の黒丸3点部分をクリック後に「View/Edit Records」を選択します。
f:id:nukoshogun:20210117172537p:plain
新規作成の場合は①「ADD コレクション名」を、作成済みの情報の編集の場合は②該当する行をクリックします。
f:id:nukoshogun:20210117172657p:plain
それぞれ決められたプロパティ(項目)内に、任意の情報を入力すれば追加(or編集)完了です。

以上が、Adaloデータベースの基本構成です。

Adaloデータベースの活用事例

f:id:nukoshogun:20210117173521p:plain
データベースを活用すればこういった情報も簡単に表示できます!

ここではニュース保管庫というアプリを参考に、実際にデータベースがどう活用されるのか解説します。

f:id:nukoshogun:20210117174129p:plain
「ニュースリスト」コレクション内の1つのレコードを例に、「タイトル」プロパティを①、「詳細」を②、「ニュース画像(URL)」を③とします。
f:id:nukoshogun:20210117175457p:plain
実際のアプリ内では、各プロパティ内のレコードが画像のように反映されます。


データベース内の情報をアプリに表示させる場合、Adaloではリストを使うことが多いですが、各リストで以下の画像のように「データベース内のどの情報を表示させるか?」を設定します。

f:id:nukoshogun:20210117180732p:plain
これはリストのタイトル欄にはどの情報を載せるか?を設定する場合。赤丸のTの部分をクリックすると設定できます。


またニュース保管庫では、各リストをタップするとそのニュース記事が掲載されているサイトへ飛ぶようになっていますが、それは以下の画像のように設定しています。

f:id:nukoshogun:20210117181830p:plain
ニュースリスト内の「リンク」プロパティ内に書かれたURLに飛ぶように設定しています。

Adaloデータベースの基本まとめ

以上が、Adaloデータベースの基本についての解説です。

Adaloのアプリ作成におけるデータベースの作成とアプリへの反映は、やってみると分かりますが意外にシンプルです。
「データベース内で情報を作り、それぞれの情報をリストのどの部分に表示させるか?」という基本的な仕組みが分かれば、簡単なアプリならそんなに時間をかけずに作成できます。


今回はAdaloで敢えてイチから作りましたが、数種類あるテンプレートからアプリを作成することもできます

f:id:nukoshogun:20210105104900p:plain

自分の好きなアプリを作るのではなく、まずは特定のテンプレートを選んで自分好みのデザインにしてみることから始めてみるのも良いと思います。


下のリンク先の公式サイトからSign Up(新規登録)することで、あなたもすぐにアプリ開発が出来ます。

www.adalo.com


ちなみにニュース保管庫のデータベース情報を作る際、特定のニュースサイトから1つ1つ情報をコピー&ペーストしていては大変だと思いました。

そこで活用したのが、Web上の情報を自動で取得して出力までしてくれる「無料スクレイピングツール」です。


アプリを作るうえでスクレイピングは知っておくと便利だと思うので、無料スクレイピングツールの1つである「Octoparse」の解説記事を2つ載せておきます。

【超簡単な使い方解説・前編】初心者でもすぐ出来る無料スクレイピングツール「Octoparse」 - サバ漢の遊び場兼踏み台

【超簡単な使い方解説・後編】初心者でもすぐ出来る無料スクレイピングツール「Octoparse」 - サバ漢の遊び場兼踏み台


プログラミングの知識がゼロでもアプリを楽しく作れるノーコード、是非暇つぶしのお試しにいかがでしょう?(*^^)v


【サバ漢が作った、ブックマークを自分の好きなようにお洒落に管理するアプリ】
previewer.adalo.com


【サバ漢が作った、好きなニュースだけ持ち歩くアプリ】
previewer.adalo.com


【サバ漢のTwitter】
こちらからフォロー⇒サバ漢@ゲーム諸々ごった煮 (@sabakan_umashi) | Twitter