この記事では、ノーコードツールGlideを使って、災害時に役立つ「安否確認」と「避難所マップ」の機能を備えたアプリを開発した経験をまとめます。
完成形の使用イメージ
①災害発生直後の安否確認
-
管理者は、PCでスプレッドシートを開き、安否確認の状況をリアルタイムで確認
-
各拠点の担当者や従業員は、スマートフォンでアプリを開き、「安否確認」画面にアクセス
-
自分の安否状況を、ドロップダウンリストから「無事」「負傷」などの選択肢を選んで入力・送信
-
入力されたデータは、即座にスプレッドシートに反映され、管理者は拠点の状況を即座に把握
②避難所への移動
-
アプリの「避難所」画面を開き、現在地周辺の避難所を一覧で確認
-
最寄りの避難所をタップすると、その場所が地図上に大きく表示
-
住所や備考欄の情報も確認し、避難所までのルートを計画
複雑なプログラミングは一切不要。Googleスプレッドシートをデータベースとして活用し、誰でも簡単に災害情報を共有できるアプリが作れます。
1. アプリの概要
今回作成したアプリは、主に以下の2つの機能から成り立っています。
①避難所マップ機能: Googleマップ上に複数の避難所をピンで表示し、各避難所の詳細情報（場所、名前など）を個別に確認できます。
②安否確認機能: 従業員や関係者の安否状況を入力・管理するための画面です。
2. 避難所マップ機能の実装
この機能は、スプレッドシートのデータとGlideのMapコンポーネントを連携させて作りました。
① Googleスプレッドシートの準備
まず、以下の列を持つスプレッドシートを用意します。
ポイント: 地図のピンを正確に表示させるため、緯度と経度を「緯度,経度」という形式で1つのセルにまとめるのがおすすめです。
② 詳細画面での個別マップ表示
すべての避難所がピン止めされた地図ではなく、特定の避難所だけを表示させるには、詳細画面の設定が重要です。
一覧画面の各項目をタップしたときに表示される詳細画面に移動します。
-
コンポーネントリストから「Map」を追加します。
Mapコンポーネントの設定パネルを開き、以下の2点を設定します。
1⃣ Source: 「This Item」または「現在のアイテム」を選択します。
2⃣ Address: スプレッドシートの「緯度,経度」の列を指定します。
この設定により、詳細画面では選択した避難所1つだけが地図上に表示されるようになります。
3⃣ピンに避難所名を表示させるには、Mapコンポーネントの設定で「Title」に避難所名の列を指定します。ピンをクリックすると、ポップアップで避難所名が表示されます。
3 . 安否確認機能の実装
安否情報を入力・管理するための機能です。Data Gridコンポーネントを使って、スプレッドシートのような編集画面を実装します。
① Data Gridコンポーネントの追加と設定
安否確認の画面に「Data Grid」コンポーネントを追加し、データソースを安否確認用のスプレッドシートに設定します。
②新しい行の追加を可能にする:
Data Gridコンポーネントの設定にある「Actions」タブから「Allow users to add items」をオンにします。
アプリの使用感
-
直感的で使いやすい
-
専門的な知識がなくても、地図や表形式で情報が整理されているため、誰でも迷わず操作できる気がする。
-
安否確認の情報は、入力後すぐにスプレッドシートを通じてアプリに反映されていい
-
スマートフォンでの利用を前提としているため、ストレスなく情報が得られる
まとめ
Glideを使えば、災害時に重要な情報共有アプリを、プログラミングの知識がなくても短期間で作成できます。今回作成したアプリは、ノーコードツールの柔軟性とスプレッドシートのシンプルさを活かした良い事例となりました。災害への備えとして、ぜひ皆さん自身のアプリを作成してみてください。