地方の音風景収集プロジェクト(2)

Code for Kakegawa

ノーコードでデータを表示する

集まったデータを仲間内でだけで共有するのでしたら、スプレッドシートを共有すればいいのですが、外部に公開するならそれなりの仕立てが必要になるでしょう。

Googleスプレッドシートのデータを使って、見やすいアプリ化する方法もいくつもあります。
一つのフロントエンドとして使ってみたのは、ノーコードツール Glide
プログラミングをしなくても、Googleスプレッドシート等のデータを簡単にWebアプリ化できるサービスです。

今回メインでフロントエンドで使った 掛川音風景 は、React という JavaScript ライブラリで作ってみたのですが、Glide を使うとプログラミングを知らなくても、アプリを作ることができます。

Glideアカウント作成して新プロジェクト作成

Glide https://www.glideapps.com/
を開いて、「Sign Up」からGoogleでアカウントを作成し、ログイン。

「New Project」で新しい、アプリを作成。

Create a new project の Name your project に適当な名前を入れて、「Glide App」を選択して「Continue」

「Google Sheets」を選択して、「 Continue 」

Googleのアカウントでログインしていたら、自分のGoogle Sheet の一覧が表示されるので、アプリ化したいSheet を選択。

Glide が自動で一覧画面を作ってくれています。
少しカスタマイズしたいので、左下の「List」を選択。

リストのカスタマイズ

右カラムの「Image」を Google Sheet の「写真」カラムに変更。
「Dtails」を「-」に変更、「Caption」を Google Sheet の「場所」カラムに設定。
一覧画面が上の画像のようになると思います。

一覧はこのあたりにして、詳細画面をカスタマイズしていきます。

Glide の、中央のプレビューカラムで、適当なレコードをクリックすると、その詳細画面が表示されます。

詳細のカスタマイズ

詳細画面の方もGlide が自動で画面を作ってくれています 。
ここに音声・画像、それからマップを追加し、不要なカラムは消し、表示したいカラムを表示させます。

左カラムの「+」を押すと「Insert Component」が出てきます。
「MEDIA」の中の「Image」を押します。

右カラムに Image の詳細設定が出てくるので、「Data」の「Image」を「画像」にします。

同様に、「MEDIA」の「Audio」と追加して、「音声」に設定。
「Map」を追加して「緯度経度」を設定。

「場所」「時間帯」「詳細」「タイムスタンプ」を「TEXT」の「Acton Text」で追加して、不要なカラムは削除します。

不要データを非表示にする

最初にテストデータを入れるとか、入力間違えがあった際は、その不要データは表示しないようにしたいところです。
Googleシートで直接不要データを削除することもできますが、理論削除(レコードを削除する際、現在有効か否かを示すフィールドの値を変更することで削除したのと同じ扱いにする方式。実際のデータは削除しない。)ができるようにしておきます。

Googleシートで、列を追加し名前を「flag」と付けます。
不要データの 「 flag 」 に 1 を入力。

Glideに戻って、左カラムの「List」を選択。
右カラムの「Option」タブを開いて「FILTER」の「Add Filter」に追加で、
「Flag」「doesn’d equal」として「enter value」に 1 を入力。

これで、 「 flag 」 が 1 のデータは、一覧から表示されなくなります。

アプリの公開

アプリを公開するには、右上の「Publish」を押すことで、公開ができます。

まとめ

Glide は比較的簡単に、Google Sheet に保存したデータをアプリ化するのに適したノーコードツールです。

自治体等で公開されているオープンデータを使うと、

のようなアプリが簡単に作れるので、いろいろ試してみると楽しいです。

タイトルとURLをコピーしました