【Adalo Resource】画面とコンポーネントベーシック

この記事ではノーコードツール「Adalo ResourceのScreen and Component」セクションよりScreen&Component Basics(画面とコンポーネントベーシック）の日本語解説をお届けします。

前回の記事とは違って写真も入りますので幾分か読み易くなると思います。それではいってみましょう！

Screen(画面)

画面はアプリの基盤であり、さまざまな画面を生成して整理することで、カスタムユーザーエクスペリエンスの構築を開始することができます。

Adaloのアプリは、サインアップ、ログイン、ホーム画面で自動的に起動します。

新規の画面を作成する

画面を作成する方法は2つあります。

①追加(add)パネルより

まず左ツールバーの「＋」ボタンをクリックします。続いて[画面の追加] タブを選択します。その後、新しい画面の画面テンプレートを選択することができます。

②リンクアクションパネルより

まず既存の画面でコンポーネントを選択します。次に左側のパネルで、「アクションの追加」をクリックします。

リンクを選択し、”新しい画面….”を選択します。モーダルが表示され、新しい画面から名前を設定し、画面テンプレートを選択することができます。

画面を編集する

画面を編集するには、キャンバス上のタイトルをクリックします。画面のプロパティが左側のパネルに表示されます。

・画面の名前を設定する：画面に名前を付けることは、アプリを作成する上で重要なステップです。スクリーンラベルが明確で差別化されていることを確認してください。

・ナビゲーションタイプを設定する：

• Normal – アプリのほぼすべての画面で設定されるべきものです。
• Welcome Screen – ユーザーがログインしていないか、まだアカウントを作成していない場合に最初に表示される画面です。
• Home Screen – アプリでアカウントを作成していて、まだログインしている場合に表示される画面です。

・スクリーンアクションを追加する:

• ほとんどの画面ではスクリーンアクションは必要ないでしょうが、非常に便利なケースがあります。
• ユーザーが何かをクリックしたりタップしたりすることなく自動的にレコードを作成する必要がある場合、スクリーンアクションでこれを行うことができます。

レコードを自動的に作成するために1つのスクリーンアクションを作成し、それらを自動的に別のスクリーンにリンクさせるために別のスクリーンアクションを作成することができます。

・スクリーンスタイルを編集する：画面の背景色、画面サイズ、ステータスバーのテキスト色（携帯電話のみ)、逆スクロール

*逆スクロール：これは、チャットやメッセージング画面で、ユーザーが画面に到達したときにリストの一番下に表示させたい場合、以前のメッセージを見るために上にスクロールする必要がある場合によく使われるオプションです。

画面のサイズを変更するには、キャンバス上で画面の名前をクリックして、画面の角にある黄色いドラッグハンドルを使ってサイズを変更します。

画面を動かすには、キャンバス上で、画面の名前をクリックしたままにして、キャンバス上の新しいスポットにマウスを移動させます。アプリを作成する際に、画面を関連するグループに整理しておくと、各画面を簡単に見つけて編集できるので便利です。

画面のタイトルを選択して’Delete’を押すか、キーボードのバックスペースを押すと、画面を削除することができます。

以上がScreen(画面)に関する説明でした。ここからはComponent Basicに関する説明をしたいと思います。

Component Basics(コンポーネントベーシック)

コンポーネントを使って画面を構築する方法を紹介しています。

コンポーネントを挿入する

コンポーネントは、プラスボタンをクリックした後に表示される追加パネルに配置されています。それらを挿入するには、クリックして画面にドラッグします。

コンポーネントとは、リスト、ボタン、テキストなど、画面上のすべての要素のことです。

• 追加パネルからキャンバス上の画面にコンポーネントをドラッグ＆ドロップします。
• ある画面から別の画面にコンポーネントをコピーして貼り付けるには、コンポーネントを選択してコピーし、新しい画面の画面タイトルをクリックして貼り付けます。
• コンポーネントを編集するには、それをクリックすると、左側のパネルが開き、コンポーネントを設定してカスタマイズするためのすべてのオプションが表示されます。
• コンポーネントをグループ化したい場合は、クリック＆ドラッグで複数のコンポーネントを選択します。そして、左側のパネルで「グループ化」ボタンをクリックします。
• あるコンポーネントが別のコンポーネントの上または下にあるように画面上のコンポーネントの順序を配置したい場合は、ツールバーの[画面]タブに移動し、関連する画面をクリックしてコンポーネントのリストを表示します。そのリストの中で、コンポーネントを上下にドラッグして、順番の前または後ろに近づけることができます。
• ユーザーがスクロールしてもコンポーネントを固定したい場合は、コンポーネントを選択し、左側のパネルで「スタイルの編集」を選択し、固定したい場所を選択します。
• コンポーネントをクリックしてアクションや別の画面にリンクするには、アクションの基本（別の記事で取り上げる予定）をご覧ください。

コンポーネントは、多くのオプションを備えた堅牢なものから非常にシンプルなものまであります。テキストやシェイプのようなシンプルなコンポーネントを組み合わせて、独自のカスタムデザインを作成することができます。

まとめ

いかがだったでしょうか。コンポーネントを巧みに使いこなすことができると、独自のカスタムデザインを構築することができることが本記事のポイントだったと感じています。

細かな操作方法につきましては順次別記事で取り上げる予定です。それではまた別の記事でお会いしましょう。