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

Adaloを使い実際にスマホアプリ（ネイティブアプリケーション）を開発していきます。
使い方についても、画像を使いできるだけわかりやすく解説していきますので、Adaloでのネイティブアプリ（スマホアプリ）開発に興味のある人は是非ご覧ください。

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

以下のリンクは、これまでの「Adaloを使ってSNSのスマホアプリを開発してみた」の記事と、Adaloの概要紹介の記事リンクになります。
まだ、ノーコードやAdaloについて知らない方、スマホアプリ開発に興味のある方は一度読んでもらえたらAdaloについて理解できると思います。

【Adaloとは】簡単にネイティブアプリを開発できるノーコードツール
ノンコーディングでアプリの開発ができるAdaloの特徴や料金プラン、Adaloを活用することで得られるメリットやデメリットなどを解説しています。
ネイティブアプリ（スマホアプリ）を開発してみたいと考えており、プログラミングの経験がない方におすすめの内容となっています。

https://nocodo.net/media/media-4504/

「Adaloを使ってSNSのスマホアプリを開発してみた その①」
Adalo初心者である著者が実際にAdaloを使って解説を行なっている記事です。Adaloの登録から、Adaloの用語使いながら要件定義とデータベース設計を行いました。

https://nocodo.net/media/media-4553/

「Adaloを使ってSNSのスマホアプリを開発してみた その②」
「Adaloを使ってSNSのスマホアプリを開発してみた その①」の続編になります。
こちらの記事では、「アプリのページ（画面）の作成、ページの修正と修正時の注意点、プレビュー機能でのテスト、簡単にサイトマップの作成」を行いました。

https://nocodo.net/media/media-4832/

今回の開発の流れ

今回は実際にSNSの機能を実装してきます。
実装にあたり以下の流れで開発を行います。また、解説時は以下に書いてあることはある程度省きながら解説し、できるだけシンプルに実装していきます。
＜手順の要約（後述で画像での解説があります）＞

1. 画面にパーツ（COMPONET）を配置して、見た目を作成していく
   1. パーツを追加する際は、エディタ画面の「+」ボタンから、「ADD COMPONENT」を選択し、ドラッグアンドドロップでパーツを追加していきます。
2. 配置したパーツとベータベースのコレクションを連携する
   1. 例えばフォロワー数などの数値を確認するようなパーツを配置した場合に、データベースに格納されているデータから値を取得して画面に表示させる必要があるため、パーツとデータベースとの連携が必要になります。
3. ベータベースにデータを入力する
   1. パーツとデータベースを連携位した際に、実際にデータをデータベースに格納して、処理が適切に行われているか確認する必要があります。
4. プレビューでデータベースに入力した値が、画面に想定通りに反映されているかを確認する
   1. エディタ画面では実際の挙動が反映されないので、プレビュー機能を使用して想定の動作になっているかを確認する必要があります。
5. 想定の挙動であった場合、ユーザーがアプリからデータベースに値を入力できるようにデータを入力できる画面を作成する
   1. 動作に問題がなかった場合は、指定のデータベースの格納場所にデータを入力すれば良いことが分かるので、アプリからデータを入力する画面を作成します。
6. データの入力画面にパーツを配置して、データベースと連携する
   1. 1~2と同じ作業になります。
7. プレビュー機能で実際に、想定の動作になるか確認する
   1. 4と同じ作業になります。

投稿機能

SNSの投稿機能です。Twitterでいうところの「ツイート」機能の実装になります。

画面にパーツを配置する

SNSのホーム画面である「投稿一覧画面」を作成していきます。
以下のように「Lists」から「Custom List」を選択して、投稿一覧画面までドラッグアンドドロップ操作で画面に配置していきます。

1つ1つのリストの幅を広げたい際は、「Rectangle」を選択して幅を調整します。

次に、「Most Used」から「image」を選択して、Custom Listの中に配置していきます。
Listは1つのパーツを編集することで自動的に、後のリストにも自動で繰り返し反映されます。

次に、投稿者のプロフィール画像が投稿に反映されるように、リストの左上にimageを追加していきます。

次にアイコンをリストの中に追加していきます。アイコンは「Button」の「Icon」から追加することができます。

アイコンのデザインは全て自転車になっているので、デザインを変更する際は「Icon」の欄から適切なワードを入力するといくつか適したデザインのアイコンが出てきますので、その中から選んでデザインを変更します。

データベースと連携を行う

では配置したパーツをデータベースと連携してきます。
「投稿一覧」から「List」を選択して、Linkの設定を行っていきます。設定の部分を開くと「What is this a list of?」と何のリストであるか聞いている欄があるので、「投稿」を選択します。

「Filter」では、「All 投稿」を選択して全ての投稿を表示させるように条件を指定します。
また、「Sorting」で「Create Date – Newest to Oldest」を選択し、新しい投稿がページの上部に表示されるように設定を行います。

次に、リストの中のパーツをデータベースと連携していきます。
以下の画像は、投稿に表示されるユーザープロフィール画像をデータベースから持ってくるための操作を行っています。
「Image Source」を選択して、「Databaseから、Current 投稿、投稿者、写真」を選択して、投稿を行ったユーザーの写真を表示させます。

また、プロフィール画像の隣に、ユーザーネームも表示させたいので、「Text」を配置します。
そして、画像の赤くキラキラしている「T」を選択して、「Current 投稿、投稿者、ユーザーネーム」で投稿を行なったユーザーネームを表示させます。

選択すると、以下のような感じで赤いアイコンで表示されます。ちなみに、一つではなく複数の設定を行うことも可能です。

投稿のプロフィール写真やユーザーネームのように、投稿写真、投稿タイトル、投稿内容もデータベース連携を行います。
また、画像でも分かる通り写真などをデータベース連携が完了すると、写真のアイコンの右上にキラキラしたデザインが追加されます。

データベースにデータを直接格納する

以下の画像はプレビューで投稿一覧画面を確認しているところになります。
まだ、投稿がないので画面が真っ白のままですが、先ほど配置したパーツをデータベースに連携したので、データベースに直接データを格納して、投稿が表示されるか確認します。

データベースに直接データを格納する際は、画像のスプレッドシートのようなアイコンから、データベースのコレクションを選択します。
今回は投稿コレクションとデータの連携を行ったので、投稿を選択し赤枠の「Records」をクリックします。

Recordsをクリックすると以下の画像の画面に遷移するので、「＋ ADD 投稿」をクリックします。

+ ADD 投稿をクリックすると、「New 投稿」の画面に遷移するので、適当に投稿データを入力していきます。

プレビューで確認する

では実際にプレビューで投稿機能のテストを行います。
以下の画像では、先ほどデータベースに入力した値が反映されているので、ここまでの挙動は問題なさそうです。
次に、ユーザーがアプリから投稿データをデータベースにデータを格納できるように「投稿ページ」を作成します。

投稿画面を作成する

新たにページを作成して、「Form & Fields」にある、「Form」を選択して作成したページにドラッグアンドドロップします。

そして、先ほどの投稿一覧のように、どのコレクションのデーターであるのか、何を行うフォームであるのかを選択します。

次に、フォームのフィールドの項目を設定します。
投稿の際に入力して欲しいフォームだけ残して、いらないものは削除していきます。

また、フォームを使用した際はボタンの色がとても薄いので、「Submit Button」の「EDIT STYLES」からデザインなどの調整を行う必要があります。

フォームのフィールドの設定を行う際は、フィードの項目をクリックして入力項目が必須であるかや、複数行入力できるかなどの設定を行うことができます。

次に、投稿画面へのリンクを作成していきます。投稿一覧にトグルを追加して投稿画面へのリンクを作成していきます。
先ほどからあった、紙飛行機の丸いアイコンです。

デザインを変更したい場合は、アイコンのときのように「Icon」の欄に適切なワードを入力してアイコンのデザインを選ぶことができます。初期設定では「＋」のデザインに統一されています。

プレビューで想定の挙動になるか確認する

次に、プレビュー機能を使用して実際に想定の動作をするか確認します。
これが正しく動作すれば、投稿の基本機能は実装完了になります。

プレビューを起動して、紙飛行機マークのトグルをクリックします。

トグルをクリックすると、投稿画面に遷移しました。
リンクは正常に動作しています。

次に入力フォームにデータを入力して、「投稿する」をクリックします。

「投稿する」をクリックすると投稿一覧ページに遷移し、実際に投稿した内容が一覧ページの上部に表示されたのが確認できました。

ユーザープロフィール

投稿機能だけでも、ボリュームが多くなってしまったので、簡単にプロフィール周りの機能を紹介して解説を終了します。

プロフィール画面

以下の画像は、自身のプロフィール画面になります。
「ページを新規で作成して→パーツを配置→データベース連携→処理を設定」と言ったように、投稿機能を実装した時と同じような流れで実装を行いました。

プロフィール画面では、「プロフィール画像の確認、自信がフォローした人数とフォロワーの人数の確認、自信が投稿した数と投稿した内容の確認」を行うことができます。

作成したプロフィールページのパーツをデータベースと連携し、データベースのUsersコレクションに直接データを格納して、実際にフォロー機能が実装できているか確認していきます。

プレビューで実際のアプリの画面を確認します。
先ほど、「フォローしているユーザー」に2つのアカウントを追加して、「フォロワー」に1つアカウントを追加したので、とりあえずデータベースから適切にデータを引っ張ってこれているようです。

次に、プロフィールの編集画面になります。
こちらでは、プロフィール写真やプロフィールの概要を変更することができます。

実際に、プロフィール画面が編集できたのが確認できました。
画像の左側が編集前、画像の右側が編集後になります。

フォロー機能の方もページを追加して、「フォローする」などのボタンを配置し、フォローしていたら代わりに、「フォローを外す」などのボタンを表示するといった条件でパーツの設定を行います。

また、「フォローする」を押した際の、条件とデータベース連携の設定して、プレビューし確認を行います。
今回は長くなってしまうので、フォロー機能の解説を省きますが、「フォローボタンを押した際に、Usersコレクションの「フォロー中プロパティ」に、データを格納する」かつ「フォローボタンを押された際に、Usersコレクションの「フォロワープロパティ」にデータを格納する」といった感じで、実装できると思います。

まとめ

これまで、3部に渡ってAdaloを実際に使用し、アプリ開発を行ってきました。
今回解説は省きましたが、フォロー機能や検索機能など一通り基本的な機能を実装して、「直感的にアプリ開発ができる点がすごい」と感じました。
Adaloのエディタ画面は、「何を行うパーツであるのか？、どこにデータを格納するのか？、これはどこのリンクか？」と言ったように開発のサポートをしてくれており、質問に対してプルダウンの中から選ぶだけなので、なにが適切かを項目の中から考えて選ぶことができます。

逆に不便に感じたことは、想定していない動作（エラー）が起きた際にエラー文などがでないので、エラーが起きた際に少々手こずってしまいました。
なので、実際に開発を行う際は、何か条件を設定したらプレビューで細かく確認することが必要だと思います。

開発期間は1週間半くらいで、プログラミングの基礎を学んでから行う場合と比べ、8~9割ぐらい時間を短縮できたのではと思います。
ただ、慣れるのに時間がかかったので触りはじめの際は、「ノーコードと言えども時間がかかるかな」と感じました。また、Qiitaなどの知識を共有するサービスがまだないので、分からないことがあった際に気軽にググって調べることができないため、最初の学習段階では、「思ってたよりきついかもな」と感じました。

また、Adaloが日本で普及していくためには、言語対応が非常に鍵になってくると感じました。
ノーコードツールは、非エンジニアでもアプリ開発を行うことができ、＋αビジュアル開発により素早くコストを抑えた開発が強みですが、基本的に表記が英語なのでチームなどで活用する際にスムーズなコミュニケーションを取るのが難しそうです。

ですが、国産のノーコードツールも増えてきているので、機会があれば紹介させていただきます 。

Adaloの解説は以上になります。最後にNOCODOで出品されているAdaloの商品を紹介します。
以下で紹介している商品では、Adaloの公式パートナーからAdalo開発の相談や指導を受けることができます。Adaloを実際に触ってみて本格的にAdaloでアプリ開発を行いたいと感じた方におすすめの商品です。

https://nocodo.net/product/p00001539/

その他人気記事はこちら

日本語対応のノーコードツール5選！！プロダクト開発から業務改善まで対応！！（Click、MagicInstructions、サスケWorks、Kintone、Platio）

ノーコードって実際使えるの？ノーコードで開発されたアプリの事例を紹介

国内唯一のノーコードプラットフォーム！！NOCODO（ノコド）の紹介

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

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