Glideで一覧を表示するアプリを作成する

2021年6月11日

Glideを使用して、一覧表示するアプリを作成してみます。

Glideの場合、この一覧表示というのが一番簡単な方法であり、Glideが使いやすいところかなと思います。
スプレッドシートに一覧形式でデータを記載するだけで、ビューアプリを簡単に作れるというのはすごいですね。

Glideとは?

2020年はノーコードという言葉が流行っていますが、プログラミング無しにPWAアプリを作成できるのがGlideです。

スプレッドシートベースなので、今までデータはスプレッドシートで管理していたという人にも、とっつきやすく、プログラミングが不要でPWAアプリを作成できるというのは、感動的です。

各種ノーコードサービスの中でも、Glideはシンプルにアプリを作成したいケースに向いていて、初めてノーコードに触れる人はGlideから始めてみるのも良いかもしれません。

スプレッドシートでデータを準備する

Glideでは、一覧形式にしたいデータをスプレッドシートに記載します。
本記事では以下のように僕の好きなミスドの商品一覧を作ってみました。

スプレッドシートでデータを準備する

項目は5つです。

  • 商品名
  • 税別金額
  • 説明
  • 公式URL
  • 商品画像URL

このデータをGlideを使って一覧形式で表示します。

Glideで一覧を表示するアプリを作成

GlideはGoogleアカウントと紐づくため、未登録の場合はGoogleアカウントで登録してください。

アプリを作成する際に先ほど記載したスプレッドシートを選択して、アプリを作成します。
アプリを作成すると、以下のように画面が表示されると思います。

Glideで一覧を表示するアプリを作成

アプリを作成しただけで、既にそれっぽいアプリが出来上がっています。
このスピード感がGlideの良いところです。

Glideの一覧形式のレイアウト

Glideの一覧形式(List)の場合、表示項目は以下の4つです。

  • Title(タイトル)
  • Details(詳細)
  • Caption(説明)
  • Image(画像)

先ほど作成した初期状態では、Caption(説明)が指定されていなかったので、「税抜金額」を表示してみます。
Caption(説明)で「税別金額」を選択すると、アプリの表示が以下のように変わります。

「説明」の下に「税別金額」の表示が追加されました。
ただし、数字がそのまま表示される形式となりますので、フォーマットはスプレッドシート側でやる必要があります。
スプレッドシートでは「税別金額」は数字のみとしていましたが、以下のように末尾に「円」を付与しました。

スプレッドシートのデータ

Glideの画面に戻り、左サイドメニューの一番下のリロードボタンをクリックします。
クリックすると、スプレッドシートのデータが再読み込みされ、アプリが以下の表示になります。

スプレッドシートでの変更が反映されました。

Glideの一覧形式のオプション

一覧形式のレイアウトでは以下のオプションが用意されています。

  • Only show a few items
  • Show title when image is not available
  • Allow text wrapping

Only show a few items

一覧に表示する件数を指定できます。
例えば、本記事のデータでは4件表示されていますが、「3」を指定すると以下のようになります。

Only show a few items

一覧で表示される件数が3件となり、一番上に「すべてを見る」リンクが追加されました。
「すべてを見る」リンクをクリックすることで、表示されていないデータを含む、すべてのデータが確認できます。

Show title when image is not available

画像が有効ではない場合に、画像の代わりにタイトルを表示できます。

例えば、以下のように画像URLが指定されていないデータがあるとします。

商品画像URLが指定されていないデータ

アプリを表示すると、以下のようになります。

Show title when image is not available

Allow text wrapping

テキストの改行を許可するか、の設定です。
例えば、本記事でDetails(詳細)に指定している「説明」がすべて表示しきれず、表示できない部分は「…」で表示されています。
こういった場合に「Allow text wrapping」にチェックを入れると、「説明」が改行され、以下のようになります。

Allow text wrapping

Glideなら、一覧形式で表示するPWAアプリを簡単に作れる

Glideで、一覧形式のPWAアプリを作成する方法を紹介しました。

ノーコードの良いところは簡単にアプリを作成できるところですが、その中でもスプレッドシートベースのGlideは一覧形式のアプリを作成するのに適していると思います。

ぜひ試してみてください。

▼Glide公式ドキュメントのList layout
https://docs.glideapps.com/all/reference/design-and-structure/layouts/untitled

▼最近では、ノーコードのオンライン講座とかもあるんですね。
将来、ノーコードはシステム開発の主流になっていくと思うので、今のうちから学んでおくと良いと思います。

ワンダフルクラスのノーコードオンライン講座