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

Adaloを使い実際にスマホアプリ（ネイティブアプリケーション）を開発していきます。
使い方についても、画像を使いできるだけわかりやすく解説していきますので、Adaloでのネイティブアプリ開発に興味のある人は是非ご覧ください。
また、アプリの完成までにいくつかの記事に分けて公開する予定で、今回はページの作成とリンクの設定を行い、アプリのサイトマップを作成し、ページの中身を追加していきます。

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

前回の記事ではAdaloで、スマホアプリ開発を行う際の初期設定（準備）を解説していますので、Adaloでのアプリ開発に興味のあるけど、触ったことがない人は先に以下の記事を読んでみることをお勧めします。

また、「Adaloについて知らないが、スマホアプリの開発に興味のある」といった方についても、簡単にスマホアプリを開発できる、ノーコードツールAdaloの概要を紹介している記事も公開していますので、Adaloについて全くご存じない方は、先に以下の記事を先にご覧ください。

それでは、次のセクションからAdaloの開発を進めていきます。

ページの作成

今回の記事では、ページ（画面）の作成を行い、実際にアプリの全体像を把握していきます。
まず初めに、トップページを作成して、どのような点に注意するのかを解説していきます。

トップページの作成

ページ作成の際は、赤枠のアイコンをクリックし「ADD SCREEN」を選択します。

次に、新たに追加するページの、テンプレートを選択する画面に遷移します。
今回の記事では、ほぼ全て「Blank Screen」を選択します。

ページを選択すると、以下のようにページの名前を入力する画面が出ますので、とりあえず、トップページと入力して「CREATE SCREEN」をクリックします。
トップページは、アプリを起動した際に、一番最初に表示される画面になります。

名前をつけて、クリエイトすると、以下の画像のようにAdaloのエディタ内に、ページが作成されます。
ここで一点注意して欲しいのが、ページの名前を日本語で入力すると、本来ページ作成時に反映されるページの名前（空白の赤枠のところ）が空白になります。

なので、いったん左の画像の空白になっているあたりをクリックし、ページの編集画面を開きます。
そして、ページの編集画面の「Name」から名前を入力することで、ページの名前をつけることができます。

半角の英数字でクリエイトした場合だと、ページ作成時に名前が反映されるのですが、日本語だと二度手間になってしまいます。
ここは、どちらでも良いですが人に進捗などを共有する場合などは、日本語で作成しておいた方が親切かと思います。

トップページの画像を追加する

次にトップページの中身について、簡単に紹介していきます。
トップページは、アプリの起動時に表示され、1~2秒でログイン画面or新規登録画面に遷移する画面になります。
今回は、トップページに画像を貼り付けて、トップページを作成していきます。

まず、最初に「トップページ」を選択して「ADD COMPONENT」をクリックします。
すると「image」と画像を追加できるテンプレートを選択できますので、クリックをします。

すると、どこに画像を配置するか、マウスで位置を調整できますので、適切な位置にカーソルを合わせます。

トップページで表示される、画像にしては対比がおかしいので調整を行います。
「EDIT STYLES」から画像のサイズを、調整していきます。

今回、フルで表示する場合は、横幅が「375」、縦幅が「647」になります。
この比率の画像を作成し、画像を挿入してきます。

画像の作成を行う際は、Canvaというノーコードツールがおすすめです。
以下の画像はCanvaを使用して作成しました。

プレビューの確認

では、ページを作成したので、いったんプレビュー画面で確認を行います。
アプリのプレビューを行う際は、画像の赤枠「PREVIEW」をクリックします。

プレビューでは、実際にスマホなどの端末でどのように表示されるかを確認することができ、表示する端末を選択することができます。
以下の画像では、一番最初に表示されるページの設定が空白のページとなっているようなので、最初に表示されるページの設定を行っていきます。

おそらくAdaloでは、このプレビュー画面をこまめにチェックし、想定している動作をするかの確認を行いながら修正をして、アプリ開発を行う流れになるのではと思います。

リンクの設定

それでは、先ほど作成したトップページのリンクの設定を行なっていきます。
エディタ画面に戻り、トップページを選択します。
左の画面のアイコンをクリックし、赤枠内にある「Make List」」をクリックします。

次の右の画像の「Screen Navigation Type」をクリックします。次に「Welcome Screen」を選択します。

この操作を行うことで、エディタ画面のトップページに、鍵のアイコンが付与されます。
この鍵のアイコンが付いているページが、アプリを起動した際に一番最初に表示される画面になります。

以下の画像はプレビューを行い、トップページが表示されているか確認している画像になります。

ログイン画面の修正

次に、新規登録画面とログイン画面の修正を行っていきます。
Adaloでは、アプリを新規作成した際に、デフォルトで「新規登録画面、ログイン画面、ホーム画面」の3つが用意されているのですが、こちらは英語での表記となるため、日本語に修正してきます。

以下の画像は、新規登録画面のText情報を、編集している画面になります。
なぜか分からないのですが、Text情報を日本語で入力すると、以下のように文字化けしてしまいます。

Textのデータを日本語にしたい場合は、メモアプリなどに記入してから、コピーアンドペーストを行うことで、アプリの表記を日本語にすることができます。

以下の画像は、実際にメモに記入し、コピーアンドペースとしたものです。

次に、新規登録ページの入力フォームを日本語に修正していきます。
エディタ画面にある、入力ホームをクリックし「Fields」にあるフォームから、日本語を入力します。

先ほどのTextでは、日本語の入力ができなかったのですが、以下の項目は問題なく、日本語の入力をすることができます。

いったん、日本語表記の注意点パターンをまとめます。

• ページ作成時に、名前を入力しても作成に反映されないので、エディタ画面のページを選択して、再度名前を設定する必要がある
• textのデータは、そのままは入力すると文字化けしてしまうので、一度メモアプリなどに記入してコピペする

SignUp（新規登録画面）のページを日本語化したら、ログイン画面も同じ容量で日本語化してきます。

リンクの設定

続いて、画面遷移のリンク設定を行っていきます。
現状、プレビューを行った際、ページ遷移の設定を行っていないので、ずっとトップページが表示されている状態です。
なので、とりあえずトップページから、新規登録画面に遷移する設定を行っていきます。

エディタ画面のトップページを選択し「Actions」をクリックします。
次に、「ADD ACTION」をクリックし、「Link」から、遷移させたいページを選択します。以下の画像では「新規登録画面」へ遷移先を設定しています。

リンクの設定が完了すると、以下の画面のように、ページからページへ矢印が表示されます。

プレビューでユーザーテストを行う

ここで一旦、プレビューを行い「トップページ→新規登録→ホーム」の流れと、データが登録されたかを確認します。

まずは、「PREVIEW」をクリックし、トップページから、新規登録画面に遷移するか確認を行います。
以下の画像は、トップページから新規登録画面に遷移した画面です。入力項目を入力して新規登録を行います。

新規登録を行い、ホーム画面に遷移しました。
これで、トップページからホーム画面の遷移の流れの確認を行うことができました。

データが格納されているか確認する

先ほど、テストで新規登録で入力された情報がちゃんとUserコレクションのレコードに登録されているか、確認を行います。

データベースの確認は、ファイルのアイコンから、「Record」をクリックして、確認できます。
しっかりと、先ほど入力したデータが格納されているのが確認できます。

サイトマップの作成

ページの洗い出し

ページの作成や、画面の遷移を行ってきたので、アプリに必要なページを洗い出して、ページを一度作成していきます。
とりあえず、Twitterやinstagramなどを確認しながら、どんなページがあるのかを洗い出していきます。

既存のSNSを元にページの洗い出しを行う際は、そのページが何を行うページなのかを確認すると、アプリ開発の基礎が身につくのではと思います。

アプリケーションの基本的な処理は、大まかに分けると「投稿、データ取得、編集、削除」の4つです。この4つの概念でデータベースを操作し、アプリを動作させます。

• 投稿→データベースにデータを格納
• データ取得→データベースのデータを取得
• 編集→データベースのデータを編集
• 削除→データーベースの情報を削除
  
  本格的にアプリ開発に興味のあるという方は、「CRUD」や「CRUD 7つのアクション」などで検索して調べてみることをおすすめします。

投稿

• 投稿一覧ページ→ホームページ
  • 投稿詳細ページ
  • 投稿ページ（投稿Create）
• カレントユーザーの投稿一覧ページ（ログイン中の自身のアカウント）

検索

• 検索一覧ページ
  • 検索詳細ページ

DM

• DM一覧ページ
  • DM詳細ページ

通知

• 通知一覧ページ
  • 通知詳細ページ

ユーザープロフィール

• カレントユーザーのプロフィール詳細ページ（ログイン中の自身のアカウント）
  • プロフィール編集ページ
  • フォローしたアカウント一覧ページ
    • アカウントのプロフィールページ
  • フォロワーアカウント一覧ページ
    • アカウントプロフィールページ
• ユーザーのプロフィール詳細ページ
  • ユーザーのフォローしたアカウントの一覧ページ
    • アカウントのプロフィールページ
  • ユーザーのフォロワーのアカウントプロフィールページ
    • アカウントのプロフィールページ

ページの作成

上記で洗い出した、ページを一通り作成していきます。

ヘッダーの作成

次に、アプリのヘッダーを追加していきます。
画像赤枠の、「＋」をクリックして、「Navigation」から「App Bar」を選択し、ヘッダーを上部に配置します。

ヘッダーを配置したら、Textをクリックして、ヘッダーのタイトルを変更します。

次に、ヘッダーの矢印マークのアイコンを変更していきます。
以下の画像では、「Left Icon」をオフにして、画像を挿入しています。ここで一旦注意して欲しいのが「Rounding」です。
赤枠の数値を大きくするほど、写真が丸くなるのですが、数値を直接入力しないと30くらいまでしかいかないので、できるだけ丸くしたい場合は、直接数字を入力してください。

フッターの作成

ヘッダーの時と同じように「Navigation」から、「Tab Bar」を選択して、画面に配置します。

次にアイコンを編集していきます。
「Team」とあったアイコンを、「DM」に変更している画像になります。

同じように、「Profile」の名前とアイコンを、通知に変更していきます。

リンクの設定

ヘッダーとフッターの大まかな設定が完了したので、リンクを数ページほどつなげていきます。

まず、最初にヘッダーの写真のアイコンをクリックして、「ADD ACTION」を選択します。
次に、「Link」から、「カレントユーザープロフィール」を選択します。ここで注意して欲しいのが、ページの名前を長くしてしまうと、名前が似ているページがあった場合、訳がわからなくなってしまう可能性があります。

次に、同じようにフッターの「DM」、「通知」などもリンクを設定していきます。
そうすると、以下の画像のように、投稿一覧（ホームページ）から矢印が伸びてリンクができているのがわかるかと思います。

そして、投稿一覧のフッターをコピーして、他のページに貼り付けていきます。
コピーして、貼り付けたら以下のように、「通知、検索、DM」一覧同士でリンクが設定されたのがわかるかと思います。
コピーしたものは、その設定を引き継ぐようですね。

それでは、次にそれぞれの一覧ページから、ホーム画面に戻れるように、同じ容量でリンクを設定していきます。
少しづつですが、アプリの動線ができてきました。

まとめ

今回の記事では、Adaloのアプリの画面の作成方法と、日本語表記の際の注意点。また、プレビューでテストを行いつつ、リンクの設定やデータベースにデータが格納されているのを確認し、CRUDを軸にアプリのページの洗い出しとサイトマップの作成を行いました。

サイトマップの方は、まだ不完全ではありますが、なんとなくアプリの全体が見えてきたのではと思います。

次回の記事では、それぞれのページのフロント（ページの見た目）を作りつつ、画面の遷移を作成していきますので、引き続き見てもらえたら嬉しいです。

プレスマンでは、ノーコード（NoCode）・ローコード思考によるDXを進めています。
NOCODO Bizで展開している「NOCODO College」でキントーンのリスキル学習もご用意！
ご相談は以下よりお願いします。

その他人気記事はこちら

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

Googleのノーコードツール「AppSheet」でスプレッドシートをより強力に、業務効率化！

日本語対応ノーコードツール！アプリ開発から業務DX！「IT導入補助金2022」に選ばれた新サービス！