Glideでサクッとアプリを作ろう～勤怠確認・連絡できるアプリ

Posted at 2025-09-21

こんにちは。
小売業の商品部で働いているふひーです。

今回は、Glideを使ってアプリを作りましたので、ご紹介します。

作業の背景

日々デジタルの勉強に励んでいる中で、部内のメンバーから以下のような依頼を受けました。

現在は、認証が必要な部の共有フォルダ内でExcelファイルを使ってデータを管理しています。しかし、記載内容は簡易的で、閲覧できるメンバーも限られています。
そこに不便を感じたメンバーの意見でした。そこで…

一目で詳細な勤務計画が分かるもの
地区の担当者まで閲覧可能であるもの
出張先でも簡単に確認できるもの
各担当者の日程を確認し、連絡が取れるもの

この条件を解決するツールを模索していたところ、
"いっそう自分でゼロから作っちゃおう"ということで、
Glideを活用して勤務計画確認アプリを作ることにチャレンジすることにしました。

完成したもの

<アプリ名> Q部勤務計画
<アプリの内容>

全体日程Tab： カレンダー形式で全体の日程が確認可能
勤務計画/行動予定Tab： 日別の勤務計画＆行動予定の詳細が確認できて、直接アプリから修正も可能
担当一覧Tab： 担当者の詳細情報が確認できて、電話やメールなどに直接連結可能

使用したツール

・Glide
・Google Spreadsheets

事前準備

■ Spreadsheetsを準備

➀ 　③
②

使用するデータが入ったSpreadsheetsを準備します。
今回は、3つのTabを作るため、シートを3つ準備しました。
➀全体日程　②勤務計画/行動予定　③担当一覧

Glideとの相性上、「Excel」より「Spreadsheets」の方が同期が安定します。

■ Glideでの準備

Glideに接続します。
[Apps]カテゴリからNew appを選択
Google Sheetsを選択し、Continueをクリック
Import Google Sheet onceを選択し、Continueをクリック
※無料版のため、Google Sheetは1回のみ連携できます。
使用するFileを選択し、selectをクリック
自動で読み込み、フォーマットが作成されます。

▶ Glide画面の構造

Glideの操作画面は、画像のように構成されています。

＜左側＞ 作成したシート一覧の「NAVIGATION」と、アプリ画面のUIパーツを選んで配置＆調整ができる「COMPONENTS」メニューがあります。
＜中央上部＞ アプリの構築を行うためのメニューがあります。
・「Agent」：AIアシスタントを作る
・「Data」：アプリが使うデータベース部分を管理する
・「Layout」：実際のアプリ画面の見た目を作る
・「Workflows」：ユーザーの操作に応じて動くアクションの流れを設計する
・「Settings」：アプリ全体の基本設定を行う
＜右側＞各項目の詳細条件作りが操作できる枠です。

📚 作成の流れ（各シート別のUI設定）

(１)「全体日程」画面の詳細設定

[STYLE]枠でCalendarを選択し、カレンダー形式で表示します。
[DATA]枠の[Title]に「全体日程」と入力します。
カレンダーに表示したい内容を選択します。今回は「行事」を見せます。
⇒[ITEMS DATA]枠の[Title]項目に行事を選択
[Option]で他の項目も設定できます。
類の行事を色分けするため、グループ設定を行います。⇒[GROUP]枠で行事を選択
検索機能に加え、簡単に絞れるよう「フィルター設定」をします。
⇒[IN-APP FILTER]枠に行事を追加

(２)「勤務計画・行動予定」画面の詳細設定

[1] [STYLE]枠でListを選択し、リスト形式で表示します。
[2] [SCREEN]枠の[Label]に「勤務計画/行動予定」と入力します。
　アプリ内の下部のアイコンもここで設定できます。
[3] リスト内に表示する項目を設定します。
　 ⇒[ITEMS DATA]枠の[Title]を日付、[Description]を曜日に選択
[4] 各日別のイメージを追加することも可能です。
　 Spreadsheetsにリンクを貼っていれば、自動で読み込みます。

【Spreadsheetsに追加したイメージデータがGlideで適用されない場合】
Glideで直接追加することができます。[Data]メニューを選択し、イメージファイルが入る列の[Type]をImageに変更すればOKです。

ここからは、各日別の画面の設定を行います。

[5] [STYLE]をProfileで選択し、画面の形式に変更します。
[6] Profileに表示する内容は、[DATA]枠から設定します。
　 ⇒[Title]を日付、[Subtitle]を曜日、[Image]をサムネールに選択
[7] 詳細に表示したい内容は[COMPONENTS]から設定可能です。
　 [COMPONENTS]の[Fields]項目を選択し、表示したい項目と順番の変更ができます。

(３)「担当一覧」画面の詳細設定（連絡ボタン追加）

[1] [STYLE]枠でListを選択し、リスト形式で表示します。
[2] [SCREEN]枠の[Label]に「担当一覧」と入力します。
　アプリ内の下部のアイコンもここで設定できます。
[3] リスト内に表示する項目を設定します。
　 ⇒[ITEMS DATA]枠の[Title]を氏名、[Description]を担当に選択
[4] 各日別のイメージを追加することも可能です。
　 Spreadsheetsにリンクを貼っていれば、自動で読み込みます。
　読まない場合は、Glideの[Data]から直接追加してください。
[5] 次のステップは、各連絡先に直接電話・メール送信ができる設定ですが、
　その前に事前の[Data]設定の変更が必要です。
　 ⇒[Data]メニューを選択し、電話番号の列の[Type]をPhone Number、
　メールの列の[Type]をEmailに変更してください。

ここからは、各担当者別の画面を設定を行います。
ここで直接電話がかけられる・メールを送れる設定などを行います。

[6] [STYLE]枠でImageを選択し、画面の形式に変更します。
[7] Image枠に表示する内容は、[DATA]欄から設定します。
　 ⇒[Title]を氏名、[Subtitle]を担当、[Image]をPFサムネールに選択
[8] 詳細に表示した内容は[COMPONENTS]から設定可能です。
[COMPONENTS]の[Fields]項目を選択し、表示したい項目と順番の変更ができます。
[9] 各連絡先に直接連絡ができる設定を行います。
　 ⇒まずは、[COMPONENTS]からContactのUIを追加
　 ⇒[CONTENT]枠からタイトル名などを設定
　 ⇒[ACTION]枠から追加したい連絡手段とデータを連携

・電話の場合、Dial Phone number 電話番号
・SMSの場合、Compose SMS to 電話番号
・メールの場合、Compose email to メール

ここまでで、アプリ内の詳細設定は完了！👌
最後に、アプリ全体のアイコンと名前、公開範囲を設定します。

(４) アプリの公開設定

アプリ全体のアイコンと名前、公開範囲を設定は、[Setting]メニューから行います。
・[Name & Icon]：アプリのIcon映像とタイトルを設定できます。
・[Appearance]：アプリ全体の色味を設定できます。
・[Access]：公開範囲が設定できます。
・[Sign-in Screen]：サインイン画面を確認できます。

最後の公開範囲は、「Private」か「Public」 で選べます。
今回は、部署内のみの操作にしたいため、Privateを選択し、接続できるユーザーは、Users tableで追加した人のみ公開します。
選択が終わって、Publishをクリックしたら、Share状態に変わり、共有ができるQRコードやURLが表示されます。

これを他の方に共有すると、使用可能に！📱
ここまでで、全ての設定は完了です。

同僚の声

今回、意見を出してくれた部のメンバーに操作してもらいました。
ハイヤーのBさんーーーーーーーーー
感覚的に分かるものばかりだから、そんなに操作に困らなかった！
これなら誰でも使えると思う。
あとは、ここに毎月の業務の締め切り日が入ってると、よりありがたいなーという気持ち。誰が登録するのかはまた考えないといけないけどね。
操作には問題なかったから、一点だけ。「議題」で検索すると、毎日0時~0時半で入ってるからそこ気になったくらいかな…
ーーーーーーーーーーーーーーーーーーー
話を聞いて確認してみると、全体日程のカレンダーを月・日・週・議題で絞れる部分で、
議題で絞ったら時間がそのように表示されておりました。気づいてなかった…😱😱
　