最近、注目を浴びているノーコード。
簡単にアプリが作れる人気のノーコードツールGlideなら、プログラミングなしでアプリが作れます。
ここでは、「GlideのInline List」を紹介します。
Glideって何?
![Glide](https://hikari-sedori.com/wp-content/uploads/2020/12/2020y12m23d_120104529.jpg)
Glide(グライド)は、ノーコードツールで、Googleのスプレッドシートを用いて、アプリを作成できるサービスです。
クリックアンドドラッグで操作ができ、テンプレートやスプレッドシートとの連携が容易にできるためプログラミングは必要ありません。
プログラムコードの入力をせずに画面を操作してアプリが作成が可能で、簡単にアプリを作成することができる人気ツール。
Glideは、無料で登録して使用することができます。⇒ Glideの登録
随時変更していますが、一部以前のままの部分もありますので注意してください。
GlideのInline List
![](https://hikari-sedori.com/wp-content/uploads/2020/11/2020y11m6.jpg)
Inline List(インラインリスト)は、Glideのコンポーネントパーツです。
Inline Listは、リストパーツをページ内に表示することができます。
![](https://hikari-sedori.com/wp-content/uploads/2020/10/IMG_8268-removebg-preview.png)
下部の青い部分はInline ListのCompactを使用して表示しています。
![](https://hikari-sedori.com/wp-content/uploads/2020/11/2020y11m14d.jpg)
Inline Listは、通常のスタイルと同じで、表示スタイルを変更できます。
Inline Listを使用することで、詳細ページを見やすくしたり、回遊性を向上させて、アプリを使いやすくすることが可能です。
Inline Listの設定方法
![](https://hikari-sedori.com/wp-content/uploads/2021/04/2021y04m05d_153022578.jpg)
Inline Listは、詳細ページに設定することができます。
コンポーネントの中のInline Listを選択して追加します。
左サイド+の追加ボタンからInline Listを追加できます。
![](https://hikari-sedori.com/wp-content/uploads/2021/04/2021y04m05d_151840455.jpg)
Inline Listは、詳細ページ(Details)に追加します。
設定時には、List、Title、Cardsなどスタイル(STYLE)の選択をします。
![](https://hikari-sedori.com/wp-content/uploads/2021/04/2021y04m05d_151944307.jpg)
上の画像はList表示にしています。
スタイルで表示を変えることができます。
![](https://hikari-sedori.com/wp-content/uploads/2020/11/2020y11m14d_131545390.jpg)
上部の画像はコンパクトを使用して表示しています。
表示内容はDATAで変更が可能です。
![](https://hikari-sedori.com/wp-content/uploads/2020/11/2020y11m14d_141136604.jpg)
DATAは使用するスタイルによって異なります。
レイアウトのSTYLE(スタイル)は7つのタイプがあり、選択ができます。
スタイル設定は、通常のスタイル設定と同じです。
次に、組み合わせるスタイルを選択します。
もう一度Inline Listを追加します。
![](https://hikari-sedori.com/wp-content/uploads/2021/04/2021y04m05d_152355060.jpg)
追加したInline Listの設定をします。
![](https://hikari-sedori.com/wp-content/uploads/2021/04/2021y04m05d_152017247.jpg)
Inline Listを追加し、スタイルはCardにしました。
タイトルを周辺リストという名前に変更して、Card(カード)スタイルで表示しました。
![](https://hikari-sedori.com/wp-content/uploads/2021/04/2021y04m05d_152151582.jpg)
上部がリストスタイルで下部がカードスタイルになりました。
このような形でInline Listを使用した表示を行うことができます。
Inline Listを使用すれば、他のスタイルを組み合わせることができます。
今回は、「GlideのInline List」を紹介しました。
アプリ制作の参考になればと思います。
そのほかのGlideの記事はこちら。
⇒ Glideの使い方【アプリダッシュボード】アプリ作成手順
⇒ ノーコードGlide【Googleのスプレッドシートを使用したアプリ作成編】