今回は前回に引き続き、ネイティブアプリを簡単に作れるツールであるNocode（ノーコード）Adalo（アダロ）で、インスタグラムみたいな画像共有アプリを作ってみようと思います。

今回は前回作成した機能に加え、「投稿機能」、「フォロー機能」、「いいね（お気に入り）機能」を追加していきます。

特にフォロー／フォロー解除の機能はちょっと複雑ですが色んな機能に応用の効く考え方なので、是非見てみてください。

なので、まだ①の方を見られていない方は、是非そちらから読んでから、こちらの記事を読んでみてください。

それでは、早速作成していきます！

▼アプリ作成

１.投稿機能の作成

ⅰ投稿画面の作成

投稿画面に遷移するためのAction Buttonを配置します。

ここで、Home ScreenのCustom List内にAction Buttonを入れないように注意してください。

Action Buttonの「＋ADD ACTION」で、投稿画面を作っていきます。

Postを作成する画面なので、Formを選択します。

わかりやすいように、Home Screenの下にCreate Post Screenを移し、「Posts」を作成するFormにします。

ⅱ「Form」設定

Form Fieldには、もともと「Name」があるかと思いますが、今回作成するアプリでは、「Name」を表示させないので、「Name」は削除してもらって大丈夫です。

「Input Type」に関してですが、複数行での「description」を可能にしておきたいため、今回は「Multi-line」を選択します。

「Required Error Text」では、Postsを作成する際に、そのプロパティーが必ず必要かどうかを決定することができます。

また、ここで、必ず必要とされるプロパティーが未入力のまま、Postsが作成されようとした際に表示されるエラーメッセージも変更することができます。

Link設定も、投稿後は、Home Screenに戻るようになっているので、変更しなくてよさそうです。

２.フォロー機能の作成

ⅰプロフィール画面の作成

自分以外のユーザーのプロフィールを見る画面を作っていきます。

Post Detail Screenでユーザー名がタップされた際に、その人のプロフィール画面に遷移するような実装を作成していきます。

ⅱプロフィール画面の調整

新たに作成したスクリーンに、Imageコンポーネントと、テキストコンポーネントを配置します。

Imageコンポーネントは、「Rounding」を変更することで、アイコン画像のように丸くすることが可能です。

「Users」のデータベースに、プロフィール写真のためのプロパティーを追加していなかったので、追加します。

配置したコンポーネントには、「Post Detail」でタップされたユーザー（以下では当ユーザーと表現しております）のデータベースが適切に反映されるように、以下のように、設定します。

当ユーザーの、投稿一覧を表示させるために、「Image List」を配置します。

フィルター設定に関しては、当ユーザーの「Posts」のみを表示させるように設定します。

「Image」では、以下のような表示設定をします。

「Text」では、それぞれの「Post」の「Description」を表示させるようにし、「Subtitle」と「Icon」は今回必要ないので、削除しておきましょう。

ⅲフォロー機能の仕組み作成

２つの「Button」を配置します。

わかりやすいように、「フォローを外す」のButtonを「Outlined Button」にしておきましょう。

「Users」のデータベースに、それぞれのユーザーがフォローしている人のプロパティーを追加するために、「Users」同士のリレーション設定を作成します。

ここでは、User：User（Following）=N：Nの関係にします。

作成したプロパティーは、「Following」としておきましょう。

また、「Users」のデータベースに、それぞれのユーザーがフォローされている人のプロパティーを追加するために、再度、「Users」同士のリレーション設定を作成します。

ここでも、User：User（Followers）=N：Nの関係にします。

作成したプロパティーは、「Followers」としておきましょう。

ここで、先ほど配置したButtonのVisibility設定をしていきます。

「フォローする」ボタンの仕組みを作っていきます。

「Sometimes Visible」に変更後、当画面に、表示させている、つまり、Current Posts < Creatorの「Followers」にログインユーザーが含まれていない場合に、このフォローボタンを表示させるようにします。

「フォローする」ボタンのアクション設定をしていきます。

Current Posts < Creatorのデータベースをアップデートするアクション設定をします。

Current Posts < Creatorの「Followers」にログインユーザーを追加するようにします。

ログインユーザーのデータベースをアップデートするアクション設定をします。

ログインユーザーの「Following」にCurrent Posts < Creatorを追加するようにします。

これで「フォローする」ボタンの設定は完了です。

「フォローを外す」ボタンの仕組みを作っていきます。

次は、「フォローする」ボタンと反対の設定をしていきます。

「フォローを外す」のVisibility設定は以下の通りです。

「フォローを外す」ボタンのアクション設定に関しても、「フォローする」ボタンと反対の設定をしていきます。

Current Posts < Creatorの設定をしていきます。

Current Posts < Creatorの「Followers」から、ログインユーザーを取り除いてあげるようにします。

同様に、ログインユーザーのデータベースをアップデートするアクション設定も作っていきます。

ログインユーザーのの「Following」から、Current Posts < Creatorを取り除いてあげるようにします。

これで、「フォローを外す」ボタンの設定も完了です。

ここで、プロフィール画面に、フォロー数、フォロワー数が表示されるように設定しておきましょう。

コンポーネントの配置等の微調整をし、それぞれ以下のように、マジックテキストを設定していきます。

これで、インステグラムっぽさがさらに増しましたね！

３.いいね（お気に入り）機能の作成

いいねをした投稿の一覧が見えるような機能を作成していきます。

ⅰいいねボタンの作成

いいね機能を実装するために、「Toggle」というコンポーネントを使用します。

なので、「Toggle」をPosts Listにのコンポーネントに入れます。

「Toggle」のIconを、いいねボタンっぽいものに変更します。

大きさも変更可能です。

ⅱデータベースの構築

ここでは、UserとPostのリレーション設定で、「いいねをするUser」と「Posts」の関係を作っていきます。

なので、Users：Posts=N：Nにします。

わかりやすように、「Liking Users」にしておきます。

「Users」の方も、わかりやすいように「Liked Posts」にしておきます。

ⅲいいねボタンの設定

「Toggle」の設定を以下のようにします。

これは、「Current Post < Liking Users」に、「Logged In Users」が含まれているか？と言うことを意味しています。

つまり、自分がいいねをしていれば、「Active Icon」が表示され、いいねをしていなければ、「Inactive Icon」が表示されるということです。

ⅳお気に入り一覧画面の作成

自分がいいねをしたものだけが見えるような画面を作成していきます。

Home Screenに、「Tab Bar」を配置し、以下のように設定をします。

アクション設定で、「Favorite Posts Screen」を作成していきます。

新たに作成したスクリーンには、Home Screenと同じListを表示させれば良いので、コピー&ペーストで「Favorite Screen」にもPostsのListを配置します。

コンポーネントの表示設定等に関しても、Home Screenと同じで問題ないので、変更しなくて大丈夫です。

ただ、Filter設定で、ログインユーザーがいいねをしたPostsのみを表示させるようにします。

これで、いいね機能に関しても完成です。

▼動作確認

前回作成したUser1に加え、User2を作成するために、新たにSigh upをします。

まずは、投稿機能から確認します。

Action Buttonをクリックし、投稿作成画面に進みます。

Postsを作成してみます。

Home Screenに、うまく反映されましたね！

ちなみに、画像のCroppingに関しては、List設定での変更が可能です。

次に、フォロー機能です。

そのまえに、一応、User1のプロフィール画像を設定しておきましょう。

User2でログインしています。

User1のユーザー名をクリックし、User1のプロフィール画面に進みます。

「フォローする」をクリックします。

うまく機能しましたね！

では、フォローを外してみます。

こちらもうまくいきました！

最後に、いいね（お気に入り）機能です。

そのままUser2でログインしている状態で、Home Screenに戻り、User1のPostsにのみ、いいねをし、「Tab Bar」のFavoriteをクリックして、お気に入り画面に遷移します。

いいねをしたPostsのみが表示されいていますね！

▼まとめ

今回は、前回作成したインスタグタムみたいなスマホアプリに、投稿機能、フォロー機能、いいね（お気に入り）機能を追加してみました。

フォロー機能の実装が少し複雑だったかと思いますが、Adalo（アダロ）でインスタグラムのようなSNSアプリを開発できるのは個人的に興味深いです！

今回は実装しませんでしたが、ListのFilterを使用することで、フォローしているUserのPostsのみを表示させることも可能です。

みなさんも是非、今回の記事を参考に、オリジナルデザインのSNSアプリを作成してみてください！

最後まで、ご覧いただきありがとうございました。