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

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

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

Glideとは？

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

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

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

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

項目は5つです。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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