【ノーコード開発】Adaloを使ってSNSのスマホアプリを開発してみた その①

今回の記事では、Adaloを使い実際にスマホアプリ（ネイティブアプリケーション）を開発していきます。
使い方についても、画像を使いできるだけわかりやすく解説していきますので、Adaloでのネイティブアプリ開発に興味のある人は是非ご覧ください。
また、アプリの完成までにいくつかの記事に分けて公開する予定で、今回は初期設定やアプリ開発の準備と、データベースの設計について解説してきます。

ただ、Adaloでアプリケーションを始めて開発するので、Adaloを使ったことのある人からすると、至らない点があるかと思います。
ですが、全くの初心者ということで、これからノーコードツールでスマホアプリを開発してみたいと考えている方にはリアルな情報を届けることができると思います。

また、前回の記事でAdaloの概要について紹介しており、ネイティブアプリの開発に興味がある人や、最近プログラミング学習を始めた人におすすめの内容となっているので是非ともご覧ください。

【Adalo】SNSのスマホアプリ開発

今回はAdaloで、SNSのネイティブアプリを開発していきます。
SNSで使用する、基本的な機能について実装していくので、アプリ開発初心者でSNSのアプリ開発に興味がある人は必見です。

ただ、著者がAdalo初心者であるため、複雑な開発やエラーなどが出た際は機能を削っていき、スピード重視で開発を進めていきます。
では次のセクションから実際に、アプリ開発の準備を行なっていきます。

要件定義

雑ですが以下が、開発するアプリの機能になります。アプリを開発する際は、できるだけ思いついた機能を紙やデータでもいいのでアウトプットしておいた方が良いでしょう。
ノーコードツールは仕様の変更に柔軟なため、あまり気にする必要はありませんが、アプトプットしておいた方が開発前に、アプリの全容を掴むことができます。

また、以下の機能はプログラミングスクールなどで学ぶような機能なので、プログラミングスクールの受講を考えている方は、AdaloでSNSを作っておくとカリキュラムも理解しやすくなると思います。

• ユーザー登録
  • ログイン
  • ログアウト
• 写真とテキストの投稿
  • 投稿に対するいいね機能
  • 投稿に対するコメント機能
• 動画投稿
  • 投稿に対するいいね機能
  • 投稿に対するコメント機能
• ストーリー機能
• 通知機能
  • アクティビティ通知
• 検索機能
  • アカウント検索
• メッセージ機能
• ユーザープロフィール
• フォロー機能
  • フォロー
  • アンフォロー

コレクションとプロパティの洗い出し

次に、データベースに格納するデーターの定義を洗い出していきます。
また、Adaloではテーブルのことをコレクション、カラムのことをプロパティと定義しています。コレクションとプロパティについては後で簡単に解説します。

以下は、今回アプリ開発に伴いデータベース設計を行う際の、コレクションとプロパティになります。これらは、データベースを属性別に分けた格納庫が「コレクション」、格納庫に格納するデータが「プロパティ」と考えておけば問題ないです。

基本的にコーディングでの開発の場合は、機能やデータベースの設計を念密に行い、開発の土台がしっかりしていないと、エラーの原因になったり、進捗の遅れに繋がります。
ノーコードツールの場合はあまり気にする必要はないですが、とりあえず思いつく限りで良いので、どんなコレクションがあって、どんなプロパティが紐付くのかの、アプリの全体が把握できれば大丈夫です。

足りない部分は、適当に後から付け足していきましょう。

ユーザーコレクション

• text：メールアドレス
• number：携帯番号
• text：フルネーム
• text：ユーザーネーム
• text：パスワード
• text：プロフィール名
• text：プロフィール詳細
• image：プロフィール写真
• text：投稿
• text：フォロワー
• text：フォロー
• text：通知
• text：コメント
• text：メッセージ

メッセージコレクション

• text：メッセージ内容
• text：メッセージ送信者
• text：メッセージ受信者

通知コレクション

• text：通知内容
• text：通知受信者
• text：通知発信者
• text：関連の投稿

コメントコレクション

• text：コメント内容
• text：コメント送信者
• text：コメントした投稿

投稿コレクション

• text：投稿内容
• image：写真
• text：投稿送信者
• text：投稿コメント
• text：いいねしたユーザー

Adaloの使い方解説

では、アプリ開発を行う準備がある程度整ったので、実際にAdaloを使って開発に進んでいきます。

Adaloの登録と初期設定

Adaloのホームページに飛んだら、画面の赤枠の「GET STARTED FREE!」をクリックして、新規登録を行います。

新規登録の入力フォームの次に、ネイティブアプリで開発するか、Webアプリで開発するかの、選択画面が出てきます。
ここでは、ネイティブアプリを選択します。

こちらは、テンプレートの選択画面になります。ここから、目的のテンプレートに沿って開発を行うことができます。
今回は1から作成していくためデフォルトの「Blank」を選択していきます。

次に、アプリの名前とアプリの基本となる色を設定していきます。

CREATE（クリエイト）すると、以下のような画面に遷移します。
この画面が、Adaloの開発画面になります。先ほどテンプレートで「Blank」を選択しましたが、Adaloではデフォルトで新規登録とロイグン、ホーム画面が用意されています。

また、先ほど選択した色が反映されていますが、色を変更したい場合は赤枠のパレットのアイコンを選択し、自由に色を変更することができます。

データベース設計

次に、データベースの設計を行っていきます。
画像の赤枠が「コレクション」、青枠が「プロパティ」、緑枠が「レコード」になります。基本この3点の概念で一つのデータ格納庫を作成していくイメージです。
通常ですと、コレクションが「テーブル」、プロパティが「カラム」、レコードはそのまま「レコード」になります。Adaloを使ったことがない人にコレクションやプロパティといっても伝わらないので注意しましょう。

ちなみに、Adaloの無料プランでは格納できるレコードの情報は50行までになります。

コレクションの作成

画面左端のファイルマークから、データベースの設計を行うことができます。
Adalodでは、デフォルトで「Usersコレクション」が作成されています。こちらは原則英語での対応になるので、このまま使用するようにしましょう。
ただ、新しくコレクションを追加する際は、以下の画像のように日本語で入力しても大丈夫です。

一旦先ほど、洗い出したコレクションを以下の画像のように、追加していきましょう。

また、コレクション名を間違えてしまった場合は、以下の画像のように、三つの点のアイコンから「Delete Collection」を選択し、入力項目のあるポップアップが出てくるので、間違えてしまったコレクション名を入力して削除してください。

そして、この記事のコレクション名やプロパティ名は適当に日本語でつけているのですが、基本的にデータベースの命名規則は英語で、命名する際のルールもありますので、プログラミングなどの技術を本格的に学びたい人は「データベース設計 命名規則」などで調べながらデータベース設計を行うと良いでしょう。

プロパティの設計

次に、コレクションの中身のプロパティですが、「Usersコレクション」のデフォルトで用意されているプロパティでは、画像の矢印の部分へ入力されたデータがコレクションのレコードに格納される形になります。

「ADD PROPETY」で、新たに追加したいプロパティを追加、編集を行いデータベースの構築を進めていきます。

ADD PROPETYを選択すると、データ型を選択する画面が出てきます。
データ型を選ぶ基準ですが、参考として以下のような場合で使い分けを行います。

• Text：文字入力
• Number：金額や数量
• True/False：チェックボックス
• Date：日付
• Image：写真やイラスト

データ型はデータベース設計において、重要な概念です。コーディング開発を行う場合このデータ型を間違えてしまうとエラーの原因になります。

また、以下の画像ではデータ型を「number」に設定していますが、全角で数字を入力してしまうと文字列でのデータ「text」と認識されてしまうので、電話番号も「text」で設定しても良いかもしれません。
ただ、全角を受け付けないように設定もできるので、「number」で設定しても良いでしょう。

ちょっとめんどくさいですが、ここの概念もエンジニアなどの転職を考えてる人であれば、データベース設計を行わない想定でも、最低把握はしておいた方が良い必須の知識だと思うので「データベース設計 データ型」などで調べておくことをお勧めします。
また、データ型、コレクション（テーブル）、プロパティ（カラム）、キーなどの概念を理解できれば、今後My SQLなどの、より実践的なデータベース設計を行う際、データベースの仕組みについて素早く理解できると思います。

逆に「アプリを開発してみたい」というだけであれば、開発しながら少しづつ覚えていけば良いかなと思います。

そして先ほど洗い出した、プロパティを「Usersコレクション」に追加していきます。
設定するプロパティは以下の項目になります。

• メールアドレス
• 携帯番号
• フルネーム
• ユーザーネーム
• パスワード
• プロフィール写真
• プロフィール名
• プロフィール詳細

「Usersコレクション」のその他のプロパティや、その他のコレクションのプロパティは、リレーションで追加していくので、ここでは設定しなくても大丈夫です。

コレクションの連携（リレーション）

コレクションとプロパティを設定したら、次はコレクションの紐付けを行なっていきます。
コレクションの紐付けは、以下の画像のように「ADD PROPETY」から「Relationship（リレーションシップ）」を選択し、設定を行います。

コレクションを連携することによって、データの紐付けが可能になります。例えばユーザーがコメントを行った際に、「Usersコレクション」にはコメントの情報が、「コメントコレクション」にはコメントしたユーザーの情報を登録することができます。
また、投稿に対してコメントを行なった場合は「コメントコレクション」にコメントを行った投稿の情報が格納され、「投稿コレクション」には「投稿に対するコメント」の情報が格納されます。

Adaloでは、おそらくidなどの概念がないので、キーを活用したい人はメールアドレスをキーにすると良いかもしれません。

コレクションを選択すると、リレーションの設定が出てくるのですが、ここは真ん中を選択します。
以下の図では、ユーザーが複数のメッセージを持つ関係を表しています。
SNSなどで、1つのアカウントで複数のメッセージを扱いますよね？その場合は以下のような関係性で1対多の関係になります。

他のコレクションも同じようにリレーションの設定を行なっていくのですが、ここで注意して欲しいのが自動で追加されるプロパティです。
以下の画像では「投稿コレクション」から「コメントコレクション」へのリレーションを設定しているのですが、この時「コメントコレクション」の方にも自動でプロパティが追加されるので、リレーションを設定するたびにプロパティ名を編集しないと、どれがどのプロパティに紐付いているのか分からなくなってしまいます。

以下のように「投稿コレクション」から、プロパティ名の設定をせず続けてリレーションを設定してしまうと、、、

このように「コメントコレクション」の方にも自動でプロパティが追加されてしまうので、プロパティがプロパティと紐づいているのか分かりづらくなってしまいます。

後は、先ほど洗い出した「コレクション」と「プロパティ」を参考に、リレーションを行いひとまずデータベースの設計は完了です。
ここでの、全てのリレーションの設定は割愛させていただきます。あまりいないと思いますが、こちらの記事を参考にSNSアプリを開発される場合は、とりあえず一度考えた通りに設定してみて、うまくいかなかった際に変更しながら開発を行ってください。

おそらく、やっていくうちに理解が深まると思います。一般的な開発では、データーベースをいじるとエラーの原因に繋がり、初心者だと戻せなくなることもあるのですが、Adaloではそういった心配は少ないので安心です。

また、リレーションの概念は最初の段階だとつまづきやすいかと思います。なので「データベース リレーション」や「データベース設計 ER図」などで調べてみることをお勧めします。
以下で紹介している記事では、データベースの設計がわかりやすく書かれているので、おすすめです。

まとめ

今回の記事では、Adaloのアプリ開発の準備と、データベース設計までを行いました。
コーディングでの開発を行う場合、アプリ開発を行うための準備（環境構築）でよくエラーが出てしまったり、データベースの設計でエラーが出てしまうのですが、Adaloでは調べながらでもサクサクと進めることができました。

次回は、アプリのフロント（見た目）を作成していき、機能についても実装していくので、引き続き読んでもらえたら嬉しいです。

【Adalo】NOCODOの商品紹介

以下の商品では、Adaloのエキスパートの方から、開発のコーチングや開発の相談を行うことができます。
Adaloでの最低限の知識は必要になりますが、アプリを開発してみたい方はとりあえずブックマーク登録をしておくことをお勧めします。

[product_card_display product_id=1539]

お問い合わせはこちらから

プレスマンでは、ノーコード（NoCode）・ローコード思考によるDXを進めています。
ECサイト・POC・社内DX・リスキルに至るまで、お問い合わせください。
必ず良い答えをご用意できます！
ご相談は以下よりお願い致します。