【Glide】レイアウトスタイルのリストの設定方法【ノーコード学習】

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

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

ここではGlideの使い方「レイアウトのListスタイル表示設定方法」を紹介します。

Glide

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

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


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

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

ここでは、「GlideのレイアウトのList(リスト)スタイル」を紹介します。

レイアウトのListスタイル表示を変更

まず、レイアウト(LAYOUT)の項目でレイアウトの変更ができます。

レイアウトのSTYLE(スタイル)は8つのタイプがあり、選択ができます。


選択すると中央の画面が指定のスタイルに切り替わります。

ここでは、レイアウトのListスタイル表示を変更するので、Listを選択します。

スタイルのList(リスト)のエディタ画面です。

表示を変えるには、右側のDATAで行います。

画面内に表示されているのは、右側のDATAのパーツ部分が反映されています。

DATAの部分を変更すると表示を変えれます。

  • Title:題名
  • Details:細部
  • Caption:キャプション
  • Image:画像

Listでは、この4つの部分を変更でき、ここを変えることで表示の内容を変えれます。

変更したい箇所を選んで、表示するものを選択。

スプレッドシート内の何を選択するかを決めれますので、表示したいものを選んでください。

キャプションも追加出来ます。

キャプションにシート(age)を追加して、画像も表示してみました。

⇒ 画像の追加方法


OPTIONS

□ Only show a few items

チェックを入れると、いくつかのアイテムのみ表示します。

□ show title when image is not available

チェックを入れると、画像が表示できない時はタイトルを表示します。

TEXT STYLE

□ Allow text wrapping

チェックを入れると、テキストの折り返しを許可します。


このように、スタイル内の表示を変更することができます。

FEATURES

FEATURES(機能)では、7つの項目が設定できます。

  • SEARCH
  • FILTER
  • SORT
  • GROUP
  • INN-APP-FILTER
  • IN-APP-SORT
  • ACTION


ここではFEATURESの7つの項目を紹介します。

SEARCH

SEARCHでは、検索窓の設定です。

□ Show search bar(検索バーの表示)

Show search barにチェックを入れると上部に検索窓が表示されます。

その検索窓に表示する文字は下のPlaceholderに書き込みます。

FILTER

フィルターではフィルターを追加することができます。

フィルターでは、プロパティに基づいて表示されるアイテムを制限します。

+Add Filterでフィルターを追加できます。

⇒ フィルタのかけ方「is not empty 演算子の使用方法」

SORT

ソートは並べ替えをすることができます。

Sort by Sheet order(シート順で並べ替え)の設定ができます。

選択してA-ZやZ-Aという順やランダムも可能です。

GROUP

グループ

Group by

Groupでは、グループ分けをすることができます。

INN-APP FILTER

INN-APP FILTERは、アプリ内のフィルターです。

フィルターをかける方法を選択します。

画面の右上にフィルターマークが表示され、フィルターリングができます。

IN-APP Sort

IN-APP Sort は、アプリ内の並べ替えです。

フィルタと並べ替えを行うことができます。

ACTION(アクション)

ここではクリックしたときのアクションを選択できます。

選択してアクションを決めます。

クリックしたときに選択したアクションを行います。

ADD

上部のADD(追加)をクリックするとAllow user to add itemsと表示されます。

チェックを入れるとCOMPONENTが開きます。

COMPONENTSにチェックを入れると、グライドがシートの列に基づいて、コンポーネントを自動的に追加し、タブのシートに書き込み・追加できることができます。

必要に応じて、入力した時に、書き込まれるシートを選択・変更します。


Allow user to add itemsにチェックを入れると、ユーザーがリストのアイテムを追加することができます。  

詳細ページの設定

画面内にリストで表示されている部分をクリックすると、詳細ページに飛びます。

詳細ページも設定ができます。

Titleをクリックするとデータを変えれます。

Titleでは、3つの表示ができます。

Title:タイトル
Details:細部
Image:画像

ここをカスタム表示したり、表示する内容を変えることができます。

※画像を選択しなければ、画像は表示されません。


その下には、表示するパーツを追加することができます。

パーツを追加するには、右上の+ 追加をクリックします。

表示したいアイテムを選択して表示できます。

ここでは、電話、メール、URLを追加してみます。

もし、電話番号やメールを追加するときはスプレッドシートに電話番号やメールを書き込み、フォルダを指定します。

スプレッドシートにTELを書き加えて、Columnで選択します。

Columnでは、電話番号を表示したいので、TELを選択します。

下のTitleでは、タイトルを変えれます。

カスタムを選択して、電話番号と変更しました。

Allow text messagesは、テキスとメッセージを許可するです。許可を入れるとメッセージアイコンが追加されます。

このように行うと、電話番号を追加できます。

テキスとメッセージを許可すると、メッセージマークも表示されます。

いろいろな追加アイテムがあるので、やりながら試してください。

動画解説

今回は、「Glideのレイアウトの表示の変更、追加の方法」を紹介しました。

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

⇒ Glideの使い方【アプリダッシュボード】アプリ作成手順

⇒ ノーコードGlide【Googleのスプレッドシートを使用したアプリ作成編】

⇒ Glideの外観変更

⇒ Glideのログイン認証設定

⇒ GlideのアプリのTAB設定

⇒ Glideのアプリのアイコン変更とアプリ情報入力方法

スポンサードリンク



コメントを残す

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