【Glide】レイアウトコンポーネントの種類【LAYOUTの使い方】

当ページのリンクには広告が含まれています。

最近、注目を浴びているノーコード。

簡単にアプリが作れる人気のノーコードツールGlideなら、プログラミングなしでアプリが作れます。

ここでは、「Glideのレイアウトコンポーネントの種類」を紹介します。

Glideって何?

Glide(グライド)は、ノーコードツールで、Googleのスプレッドシートを用いて、アプリを作成できるサービスです。 ⇒ Glide

クリックアンドドラッグで操作ができ、テンプレートやスプレッドシートとの連携が容易にできるためプログラミングは必要ありません。


プログラムコードの入力をせずに画面を操作してアプリが作成が可能で、簡単にアプリを作成することができる人気ツール。

Glideは、無料で登録して使用することができます。⇒ Glideの登録 

Glideの仕様が2021年2月に大きく変わり、以前のエディタとは異なっています。今後も変更する可能性があります。

随時変更していますが、一部以前のままの部分もありますので注意してください。

Glideのレイアウトコンポーネントの種類

レイアウトコンポーネント(LAYOUT)の追加は、スクリーン画面にある+の追加ボタンから行います。


+ボタンをクリックするとコンポーネントが開き、コンポーネントを選択できます。(詳細ページを開くと、コンポーネントの選択ができます。)

Glideには、以下のようなコンポーネントがあります。

  • TEXTコンポーネント:テキスト
  • LAYOUTコンポーネント:レイアウト
  • MEDIAコンポーネント:メディア
  • BUTTONSコンポーネント:ボタン
  • LISTコンポーネント:リスト
  • CHARTSコンポーネント:チャート
  • ENTRY FIELDSコンポーネント:エントリフィールド


レイアアウトに関するパーツがレイアウトコンポーネントにあります。

レイアウトコンポーネントには、3つの種類があります。

レイアウトコンポーネントは3種類。

  1. Basic table:ベーシックテーブル
  2. separater:セパレーター
  3. Title:タイトル


※コンポーネントは今後追加されることがあります。

Basic table

Basic tableは、テーブル表示ができます。

テーブル表示に枠は設定できません。通常とは異なるレイアウトで表示させることが可能です。

【ベーシックテーブルの使用例】

アプリ上に2つのベーシックテーブルを使用して、名前と住所を表示しています。

通常表示よりも見やすく分かりやすくなります。

Basic tableの詳細設定は、こちらの記事を参考にしてください。

【Glide】Basic tableの設定方法【テキスト表示を見やすくするパーツ】

2020年11月12日

separater

separaterコンポーネントは、分けることができるコンポーネントです。

線を引いて、分けたい時に役に立ちます。

【separaterの使用例】

セパレータをアプリに追加した状態です。

スペースを入れて分けたり、線を引いて区切りをつけたすることができます。

スペースの種類は選択でき、ラインのあり、なしも選択可能。

セパレーターを使用すると、アプリの表示にアクセントをつけることができます。

separaterの詳細はこちらの記事を参考にしてください。

【Glide】余白スペースを追加する方法

2020年12月9日

Title

Titleを利用して、文字と画像を組み合わせて表示することができます。

タイトルと画像を同時に表示できます。

【Titleの使用例】

デフォルトで3つの設定が可能です。

  • Title
  • Details
  • Image


アプリのレイアウトに変化を付けることができます。

Titleの詳細はこちらの記事を参考にしてください。

【Glide】Title(タイトル)コンポーネントの設定方法【便利な使い方】

2020年12月25日

まとめ

ここでは、Glideの「レイアウトコンポーネントの種類」を紹介しました。

LAYOUTは、アプリのレイアウト調整に使用することが可能。

Glideのレイアウトには、3つの種類があります。

  1. Basic table:ベーシックテーブル
  2. separater:セパレーター
  3. Title:タイトル


レイアウトコンポーネントは、レイアウトを調整したり、見え方に変化を出したい時に使用するといいです。

アプリ制作の参考になればと思います。


そのほかのGlideの記事はこちら。

⇒ Glideの使い方【アプリダッシュボード】アプリ作成手順
⇒ ノーコードGlide【Googleのスプレッドシートを使用したアプリ作成編】
⇒ Glideの外観変更
⇒ Glideのログイン認証設定
⇒ GlideのアプリのTAB設定

スポンサードリンク



コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です