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

Adaloを使えば、インスタグラムのような画像共有アプリも簡単に作れてしまいます。

ノーコードAdaloの初心者であれば、まずはこのような「シンプルな画像共有アプリ」を作るところから始めるととても良いと思います。

一覧、詳細、登録、編集、削除やお気に入り、タブバーの使い方、ログイン・ログアウト、会員登録など、基本的な機能が一通り詰まっているので、

まずこれを作ってみることで他に応用の効く技術が身につきます。

また、学習用に試すだけなら無料で使えるところもAdaloの素敵なところですね。

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

▼アプリ作成

１.アプリの用意

ⅰプラットフォームの選択

今回は、ネイティブモバイルアプリの方で作っていきいます。

ⅱテンプレートの選択

まっさらな状態から作り上げていきたいので、「Blank」を選択します。

ⅲブランディング決定、アプリの作成

ここでは、アプリの名前やメインカラーなどを決定します。

これらに関しては、後からでも変更が可能です。

「CREATE」で、アプリを作成でき、初めにこのようなスクリーンが用意されます。

２.Home Screenの作成、Postデータベースの作成

ⅰカスタムリストの配置、調整

実装の柔軟性から、カスタムリストを配置し、コンポーネントを調整します。

具体的には、カスタムリストをスクリーンの下部まで伸ばし、Rectangleの大きさ調整、Subtatleの削除を行いました。

カスタムリストに画像を表示させたいので、Imageコンポーネントをカスタムリストのコンポーネントに追加します。

ⅱPostsデータベースの作成

Home Screenにカスタムリストを配置したものの、データベースがまだ作成できていないため、投稿を表示させることができません。

なので、投稿のデータベースである「Posts」というデータベースを作成していきます。

「+ADD COLLECTION」で、Postsという名称のデータベースを作成します。

Postsのデータベースに、プロパティーとして画像を追加したいため、「+ADD PROPERTY」でImageを追加します。

投稿の説明文も欲しいため、プロパティーにテキストも追加します。

このままでは、誰が投稿者なのかということがわからないため、+ADD PROPERTY→Relationships→Usersで、PostsとUsersのリレーション設定を作ります。

Users：Postsが、１：Nの関係を作成します。

これは、Usersが複数のPostsを持つことができ、Postsは１人のUserに帰属するという意味を表します。

わかりやすいように、先ほど作成したプロパティーの名称を「Creator」とします。

これで、Postのデータベース構築は完成です。

ⅲカスタムリストの表示設定

カスタムリストを「Posts」のリストにします。

ImageコンポーネントはCurrent Posts < Photoを表示させるようにします。

Textに関しても、マジックテキストでCurrent Posts < Creator < Usernameに置き換えることで、投稿者の名前を表示させるような仕組みに設定します。

３.Post Detail Screenの作成

ⅰNew Screenの作成

ADD SCREENからApp Barで新たにスクリーンを作成します。

ⅱHome ScreenからPost Detail Screenへの画面遷移

Home ScreenのCustom Listの「+ADD ACTION」で、Post Detail Screenに画面遷移がなされるようにLink設定を作成します。

※Post Detailに既にコンポーネントが配置されていますが、ⅲで説明させていただきます。

ⅲコンポーネントの配置

まず、Imageコンポーネントを配置します。

ちなみに、ここで画像の大きさを375×375に変更しております。

この写真には、Current Posts < Photoを表示させるように設定します。

テキストを２つ配置します。１つは、Current Posts < Creator < Usernameに、もう１つはCurrent Posts < Descriptionにマジックテキストで置き換えます。

４.細かい修正

今回、Home Screen、Post Detail Screenにて、Usernameを表示させるテキストコンポーネントがあるので、Sigh upのFieldsからFullnameを削除し、Usernameを追加して、Sigh upにてUsernameを設定してもらうような実装に変更しておきます。

これで今回作成するアプリの、登録画面、投稿一覧、投稿の詳細の実装は完成です。

▼動作確認

まず、Sigh upをして、ユーザー登録をします。

Sigh up後、まだこの段階ではHome Screenに何も表示されていないのは、Postsのデータベースが空であるからです。

なので、Postsのデータベースにデータを追加していきます。

データベースの追加は、「View / Edit Records」から可能です。

データベースを追加します。

再度ログインすると、先ほど追加したデータベースがうまく反映されていますね！

Post Detail Screenに関しても、実装成功です！

▼まとめ

今回は、インスタグタムみたいなスマホアプリを１から登録画面、投稿一覧、投稿の詳細まで作成してみました。

まだ途中段階ではありますが、Adaloを使用すれば、インスタグラムのような写真投稿アプリを比較的簡単に開発できそうですね！

次回は、アプリに機能を追加していき、さらにインスタグラムに近づけていこうと思うので、引き続き読んでいただけると幸いです！

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