ノーコード入門｜Adaloでインスタ風アプリを作成してみた ②

こんにちは、鴨野です。

今回から、実際にスマホアプリの作成をスタートしていきます！
作成するのは、「Instagramのような写真投稿アプリ」です。

この題材を選んだ理由は、以下の2つです。

①汎用性の高い機能が盛り込まれているため、基本を身につけられる
②簡単そうに見えて意外と難しい機能が多いため、応用技術もお伝えできる

入門編ということで、まずはシンプルな機能に絞ってお伝えしていきます。
そしてひと通り開発した後に、応用編として複雑な機能の実装方法もご紹介します。

ーーーーーーー

開発の大まかな進め方は、以下の通りです。

　①実装したい機能を決めて、アプリの土台を作成
　②DB（データベース）を設計する
　③UI作成・ActionとLinkの設置

今回は、①を行います。

1.実装する機能を決める

まず初めに、作成するアプリに実装したい機能を挙げます。

アプリにどんな機能を持たせるかによって、アプリのDB設計やスクリーン構成は大きく変わります。
土台をある程度固めてから着手することにより、開発をスムーズに進めることができるのです。

今回実装する機能は以下の6つです。

-プロフィール
-写真投稿（キャプションも付けられる）
-いいね
-コメント
-タイムライン
-アカウント検索

メインの機能に絞り、かつ少し複雑な機能は省いています。
フォロー機能やタグ検索などの少し複雑な機能の実装方法は、別途ご紹介していきます。

2.アプリを新規作成する

次に、Adaloでアプリを新規作成します。

1)Adaloにログイン

Adaloのホームページにアクセスし、右上の「Log in」ボタンからログインします。

Sign upがまだの方は、右隣のSIGN UPボタンから新規登録を行ってください。
名前・メールアドレス・パスワードを入力するだけなので簡単に登録できます。

2)中央上部のプルダウンを開いて「CREATE NEW APP」をクリック

3)スマホアプリ・Webアプリのどちらを作成するか選択

スマホアプリを作成するので「Native Mobile App」を選択し、「NEXT」ボタンを押します。

4)テンプレートを選択

チャットやフードデリバリーサービスなど、テンプレートが複数用意されています。
今回は一から作成するので、「Blank」を選択して「NEXT」を押します。

5)アプリ名と配色（メイン色、サブ色）を設定します。

アプリ名も配色も後から変更できるので、仮決めでOKです。

以上で、アプリの新規作成は完了です。

3.主要なスクリーンを配置する

こちらがこれから開発を進めていく作業画面です。

作業画面を見て頂くと、「スクリーン」と呼ばれる縦長のシートが配置されています。
このスクリーンが、実際にアプリを使用する際にユーザーが見る画面になります。

今回だと、ユーザー登録/ログイン/ホームの3枚のスクリーンが既に作成されています。
こちらはアプリの入口になる必須のスクリーンなので、デフォルトで作成されます。

レイアウトやデザインは自由に変更可能なので、後ほど変更していきましょう。

ではこれから、その他の主要なスクリーンを配置していきます。
スクリーンの追加方法は下記の通りです。

1)左上の「＋」ボタンを押す

2)「ADD SCREEN」を押し、下に表示されるスクリーン一覧からテンプレートを選択する

3)スクリーン名を入力する

以上で完了です。

作成したスクリーンの名前はいつでも変更できるので、仮の名前でOKです。

作成したスクリーンを選択するとプロパティが表示され、赤枠で囲っている編集アイコンを押すとスクリーン名を変更できます。

それでは、1. で挙げた機能リストを基に、必要そうな画面を想像してスクリーンを配置してみます。

全体の構造をイメージしやすくすることが目的なので、すごくざっくりとでOKです｡
今回だと、新規登録/ログイン/ホーム画面/マイページ/投稿フォーム くらいで十分です。

スクリーンはドラッグ＆ドロップで自由に動かせるので、画面上の好きな所に配置できます。

置き方のコツとして、以下の2つを意識すると整理しやすいと思います。

①ユーザーが見る順に、左→右へと流れていくように置く
②関連が深いスクリーンを近くに寄せておく

スクリーンを配置したら、画面を更に作りこみたくなる方が多いと思います。

しかし、細かい画面の作りこみはDB（データベース）を設計した後に行う方が良いです。
なぜかというと、DB設計次第でパーツの使い方や設定の仕方が大きく変わるからです。
手戻りが多くなってしまうので、ある程度骨格が固まってから細部を作りこみましょう。

ーーーーーーーー

今回は、アプリの土台作成についてお伝えしました。
基本的な部分なので少し物足りなく感じたかもしれません。
しかし先ほどもお伝えしたように、土台をしっかり構築することはとても重要です。

次回は、DB(データベース)設計についてお伝えします。
開発の中ではかなり重要で、かつ初心者にとって難しい部分です。

このデータベースをしっかり組めるようになると、アプリの質がぐっと上がります。
一見実現できなさそうな複雑な機能やデザインも実装できるようになります！
基本から丁寧にお伝えするので、次回も読んで頂けると嬉しいです。

ここまで読んで下さり、ありがとうございました！