おすすめ記事

おすすめ記事一覧

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

Adalo - Build Your Own No Code App

みなさんこんにちは。いかがお過ごしでしょうか。外の気候が徐々に温暖になってきたでしょうか。次第に梅や桜が咲くのが楽しみですね。さて今日の記事ではノーコードツールAdalo ResourceのScreen and Component セクションよりScreen&Component Basics (画面とコンポーネントベーシック)の日本語解説をお届けします。前回の記事とは違って写真も入りますので幾分か読み易くなると思います。それではいってみましょう!

Screen (画面)

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

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

新規の画面を作成する

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

1, 追加 (add)パネルより

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

2, リンクアクションパネルより

まず既存の画面でコンポーネントを選択します。次に左側のパネルで、「アクションの追加」をクリックします。リンクを選択し、”新しい画面…. “を選択します。モーダルが表示され、新しい画面から名前を設定し、画面テンプレートを選択することができます。

画面を編集する

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

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

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

1, Normal – これは、アプリのほぼすべての画面で設定されるべきものです。

2, Welcome Screen – これは、ユーザーがログインしていないか、まだアカウントを作成していない場合に最初に表示される画面です。

3, Home Screen – アプリでアカウントを作成していて、まだログインしている場合に表示される画面です。

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

1, ほとんどの画面ではスクリーンアクションは必要ないでしょうが、非常に便利なケースがあります。

2, ユーザーが何かをクリックしたりタップしたりすることなく自動的にレコードを作成する必要がある場合、スクリーンアクションでこれを行うことができます。 レコードを自動的に作成するために1つのスクリーンアクションを作成し、それらを自動的に別のスクリーンにリンクさせるために別のスクリーンアクションを作成することができます。

・スクリーンスタイルを編集する:

1, 画面の背景色、画面サイズ、ステータスバーのテキスト色(携帯電話のみ)、逆スクロール

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

 

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

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

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

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

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

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

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

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

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

・追加パネルからキャンバス上の画面にコンポーネントをドラッグ&ドロップします。

・ある画面から別の画面にコンポーネントをコピーして貼り付けるには、コンポーネントを選択してコピーし、新しい画面の画面タイトルをクリックして貼り付けます。

・コンポーネントを編集するには、それをクリックすると、左側のパネルが開き、コンポーネントを設定してカスタマイズするためのすべてのオプションが表示されます。

・コンポーネントをグループ化したい場合は、クリック&ドラッグで複数のコンポーネントを選択します。 そして、左側のパネルで「グループ化」ボタンをクリックします。

・あるコンポーネントが別のコンポーネントの上または下にあるように画面上のコンポーネントの順序を配置したい場合は、ツールバーの[画面]タブに移動し、関連する画面をクリックしてコンポーネントのリストを表示します。そのリストの中で、コンポーネントを上下にドラッグして、順番の前または後ろに近づけることができます。

・ユーザーがスクロールしてもコンポーネントを固定したい場合は、コンポーネントを選択し、左側のパネルで「スタイルの編集」を選択し、固定したい場所を選択します。

・コンポーネントをクリックしてアクションや別の画面にリンクするには、アクションの基本(別の記事で取り上げる予定)をご覧ください。

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

まとめ

いかがだったでしょうか。コンポーネントを巧みに使いこなすことができると、独自のカスタムデザインを構築することができることが本記事のポイントだったと感じています。細かな操作方法につきましては順次別記事で取り上げる予定です。それではまた別の記事でお会いしましょう。See You!

 

 

 

 

 

Katsu

Katsu

高校まで日本で育ち、大学からアメリカ・ニューヨークへ。マスメディア、ジャーナリズム、インターネットメディア戦略を専門に修学。コロナ禍でオンライン主体になりつつある世の中で、記事が何かの手助けになれば幸いです。







関連記事

  1. SaaSロゴ

    Tiger(Jungleworks)

  2. 特集記事

    【Webflow】機能や料金を徹底比較!おしゃれなWebデザイン作成ツール!

  3. 記事作成

    Bubbleの条件付き処理とスタイルの使用を解説!!

  4. Adalo Resource・Appleを使ってサインイン(スクリーンとコンポーネントセクション)に…

  5. SaaSロゴ

    Yelo(Jungleworks)

  6. Adalo Resource・キーボードショートカットの使い方、動画や音声の埋め込み方法(YouTu…

  7. 記事画像

    【2020年確定版】BtoB型のオンラインマーケットプレイス制作向けノーコードツールを紹介!

  8. SaaSロゴ

    Landbot

  9. Adalo Resource・ワンタイムカードペイメントとサブスクペイメント(Stripe)(スクリ…

人気記事

  1. topimage
  2. 記事画像
  3. top_image
  4. 特集記事

おすすめ記事一覧

  1. 記事画像
  2. 記事画像
  3. 記事画像
  4. Productivity
  5. 記事画像
PAGE TOP