アラフィフ超初心者が「今日は誰が出勤してる？」がわかるアプリをGlideで作った

デジタル初心者のアラフィフおばさんです。:person_with_pouting_face_tone1:
最近、Glideというものを知りました。
「アプリが簡単にできる」というウワサは聞いていましたが、「簡単って言っても、みんなの言う簡単はきっと私の簡単ではない。」と疑っていました。
ですが今回、テレワークが多くなって感じていた、誰かに文句を言うほどじゃないけどちょっと不便というネタ、<font color="Red">**「今日、誰が出勤だっけ？」**</font>問題をアプリで解決できないか考えました。
「Googleカレンダーでも使えば？」と言われそうですが、社内（部内？）はOutlookでスケジュール管理を推奨しており、Googleカレンダーだと二重管理になってしまいます。
また20人以上メンバーがいるので社用スマホの画面では大変見づらいのです。
そのため出勤か休みかのスケジュールはTeamsでエクセル管理をしていますが、これもスマホではとても見づらいです。
そこで、スマホで出勤スケジュールがわかるアプリを作りました。

# 1.できあがり
![1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3509688/52a51726-1c6b-496c-b156-3efc9c7fc60a.jpeg)
何のことはない、日付を押すとその日の出勤状況と、主な業務が表示されるものです。
・・・これだけではあんまりなので、<font color="Red">**チャット機能もつけてみました。**</font>
![緑と白　自然　セミナー　プレゼンテーション.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3509688/3bd88682-3c3d-0512-3e88-d1d1ffe35df9.jpeg)
作れました！
「5分でできる」とは言えませんが、超デジタル初心者でも作れたのは本当です！
データを入れたらGlideがアプリを作ってくれました！
スマホ画面でもちゃんと動きます。

![72386def-5bb8-452b-93a2-f7678270c26d.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3509688/97090380-8400-f5c7-6002-bb85dd89de9a.gif)


# 2. 材料
* [Glide](https://www.glideapps.com/)
* [Google スプレッドシート](https://www.google.com/intl/ja_jp/sheets/about/)
* [canva](https://www.canva.com/)

# 3.作り方
※超初心者目線です。

## (1) Google スプレッドシートを作成する
すでに部内でTeamsに載せているエクセルのシフト表を、Google スプレッドシートにコピー&ペーストしました。
色づけは関係ないので無視してください。
![2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3509688/7f359a73-9155-db71-6821-3638cc67231d.jpeg)

:::note warn
※Google スプレッドシートはセルの結合などしない方が、Glideが上手にアプリを作れる印象を受けました。
:::

## (2) Glideにアプリを作ってもらう
### ①　Glideにログインし、「New　app」を開きます
![3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3509688/19a3e5f2-833e-46f1-a3da-23fe4f0b7faa.jpeg)

### ②　Create a new appが開くので、Mobileを選び、「Google スプレッドシート」を選びます
![4.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3509688/832b617c-1f77-1787-9176-9caea9936e7d.jpeg)

### ③　使いたいデータを選びます
それだけで、Glideが考え始めます。
そしてなんと、<font color="Red">**Glideが考えて、勝手にアプリを作ってくれました！**</font>
すごい！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3509688/4e17bc7a-462b-c16f-ce49-7af3fbaf338a.png)

## (3) Glideを調整する
### ①　画像を入れます
あまりにも見た目が味気ないので、飾ろうと思います。
canvaの登場です。有料会員になりました。
支払いに悔いなしです。
canvaを開くと、すでにあるではありませんか。SNSの、「正方形」！
![5.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3509688/aa8cfe2b-91ee-765e-4689-63f4cc8b4086.jpeg)
デザインを選んで、曜日を漢字で入れて、JPGにしました。
Google スプレッドシートに列を足して、それを入れます。
ただ、これだけだとGlideに反映されないので、Glideの上部にある「Data」(画面1)を押し、左下の円矢印(画面2)を押します。
![1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3509688/c697ef1d-2e4d-2792-7eb3-a4a61a19d4df.jpeg)

すると、データが反映されます。
かわいくなりました！
![7.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3509688/19f8590d-f504-ef04-809f-2ec5df9d5233.jpeg)

### ②　トップの画面をリスト形式にします
日付が見づらいので、リストにします。
画面右の「List」を押すと、画面がリスト形式になりました。
![8.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3509688/b1686afc-37dd-2645-9e2d-39a0b5faaf74.jpeg)

### ③　表示項目を変更します
画面左の「COMPONENTS」(画面1)を押すと、画面右に「ITEMS　DATA」(画面2)が現れるので、表示項目を選びます。
私は「Title」を月日、「Description」を曜日にしました。
![2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3509688/2965594e-e9fd-5dd3-18f0-5e0a08cdc2c8.jpeg)

今度は、トップ画面のどこかの日を押すと、その日の詳細に画面が移ります。
そこも表示がおかしいので調整します。
画面左側の「COMPONENTS」の項目が、スマホ画面の中身に対応しています。
![10.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3509688/d04518db-058b-db3d-63c7-f8f91527bc86.jpeg)
パソコン画面左側の項目を選ぶと、パソコン画面右側に詳細が現れるので、入れたいものを選びます。
ドラッグすると、画面に表示する順番も変えられます。かしこいですね
![11.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3509688/eea0d2ec-a902-1d55-c90d-731da6b89449.jpeg)

### ④　チャット機能を追加します
「COMPONENTS」(画面1)から「Chat」(画面2)を選ぶと、勝手にチャットのシートが作成されました。
![3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3509688/59342770-7717-07b3-438e-f7c7c3e6d1d4.jpeg)

### ⑤　トップ画面に色を付けます
「Settings」から「Appearance」を選ぶと、右側で全体の色などが選べます。
![15.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3509688/ed3a2a2d-4c48-9203-1e2b-e96899ce12f7.jpeg)

### ⑥　ユーザーを登録します
このアプリを使ってほしい人を登録します。
スマホ画面下部の「Users」を押し、画面上部の「Data」を押すと表が現れるので、名前やメールアドレスを登録します。
![12.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3509688/57bbc883-f657-ce83-c41f-033a7e2829b4.jpeg)
画像も入れます。
各従業員のイメージに合わせた画像をcanvaでつくり、jpgにしておきます。
Glideの「Data」(画面1)(画面2)の表の右側に列を足し(画面3)、その列を「image」にして(画面4)(画面5)、イラストを入れて（選択して）いきます。
![5.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3509688/ea6b63c7-59ab-d6ba-58f9-3cdd4b1bba60.jpeg)


![16.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3509688/2f656451-ae6b-8f20-c80e-60194382c93b.jpeg)

## (4) 公開する

### ①　公開範囲を選びます
「Settings」(画面1)から「Privacy」(画面2)を選び、「Private」(画面3)と「Users in the users table」(画面4)を選ぶと、Usersに登録した人しかログインできません。
チャット機能を使うときには、この設定にしないとダメなようです。
![4.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3509688/9f5c8177-8125-a8d5-6bec-6e98cd818b1b.jpeg)

### ②　公開します
「Share」を押すと、公開されます。使ってほしい人（「Users in the users table」に記載した人）へは、QRを送ったり、登録したメールアドレスに招待メールを送信することも可能です。
![18.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3509688/c1d19546-0fbe-62fb-ea54-b80a69a8ae36.jpeg)

# 4. 使い勝手をきいてみる
せっかく作ったので、上司のY部長（男性、50代）と、同僚Tさん（女性、40代）に頼んで使ってもらいました。
そして質問は、以下の３点です。
①　使ってみてた率直なご感想をください。
②　このアプリに、「もっとこんなことが、できたらいいのにね」という機能はありますか？
③　「これ作れるなら、こんなのもできるんじゃない？」という業務はありませんか？
その感想は以下のとおりでした。

:::note info
Y部長（男性、50代)
* 良かった点
  * デザインがかわいい。
  * 簡単で、一覧性は良いです。
  * シンプルに、今日のメンバーの予定だけが分かるのは、意外にいいかも。

* こんな風にできたらもっと良い！
  * 1日目詳細から2日目詳細にスクロールしたい。（いちいち最初の日付一覧画面に戻らないとならない）
  * 個別にチャットしたい。
  * 勤務時間（シフト）がグラフで出ると、視覚的にわかる。
:::

なるほど。9月1日のページから、スクロールで2日に行けると良い、ということですね。
確かにそうです。使い勝手の良いアプリは、わざわざ戻らせませんよね。
なお個別チャットは、Glideの機能としてできないそうです。

:::note info
同僚Tさん（女性、40代）
* 良かった点
  * シフトと大まかな予定が確認できるのはよいですね！
  * 曜日のアイコンがかわいいです。
  * 表形式の方が、わかりやすい気がします。

* こんな風にできたらもっと良い！
  * チャットもいいですが、電話やOutlookメールをすぐに立ち上げられると、すごくいいですね。
  * 欲を言えば、入力もれを防ぐためにOutlookの予定表と連携してほしいです。
:::

そうなんです！本当は<font color="Red">**このアプリ内の電話番号表示を押すと、電話をかけられるようにしたかった**</font> のですが、できませんでした。
次の課題です。
それができると、「あ、今日Aさんは出勤だ、電話できるぞ」となるし、「Bさんは休みだったな、あぶない、電話するところだった」となって、便利さアップです！

2人からの感想は<font color="Red">**「かわいくて、良い」。**</font> 
スケジュールがわかるだけのアプリですが、おしゃれな画像があると楽しくなるのは私だけではなかったようです。
「人は見た目が9割」と言いますが、アプリもそうかもしれません。（もちろん機能も大事です）
考えれば、紙のカレンダーもそうですね。ただの表でも事足りますが、お気に入りの写真やイラストがあると、<font color="Red">**見るたびに気持ちが上がります。**</font> 
これは大事です。

# 5. 失敗した箇所、時間がかかった箇所
超初心者以外の方は笑ってください。
こんなところで引っかかりました。

## (1) Google スプレッドシートは、シンプルな方が良いらしい
はじめ、業務のエクセルをそのままGoogle スプレッドシートにコピー&ペーストしたら、結合されたセルがうまくアプリになりませんでした。
また始業時間と終業時間も別セルでしたが、うまくいかずに1つにまとめました。
初心者の方は、まずはGlideが「きっと、こうしたいんでしょう？」とわかるような、シンプルな表をお勧めします。

## (2) そもそもGlideの使い方に慣れるのに時間がかかった
Glideは最近パージョンアップしたらしく、上手な人のブログやYouTubeなどが、古いバージョンの画像が多かったため、応用のきかない私は右往左往しました。
落ち着いて触ったら、「画面に書いてあるとおり」でした。
Glideを信じましょう。
また<font color="Red">**間違えても、「作業の前に戻る」が左下にある**</font> ので安心でした。

## (3) 公開しようと思ったら、人数上限を超えていた
無料プランには制限があります。
上記Tさんに依頼した時も「入れないよ」と言われました。
細かい制限があるようなので、本当に使うときには確認が必要です。

# 6. 次のステップ
Y部長とTさんから「こんなこと、できるんじゃない？」として
* セミナースケジュールアプリ：テレビ番組表のようなセミナー一覧
* 社内求人アプリ：こんなことできる人、やってみたい人探してます！

という意見をもらいました。
確かにそうですね。夢が広がります。
個人的には、テンプレートを使って「研修申込アプリ」を作りたかったのですが、うまくできませんでした。
もう少し調べたらできるような気がします。
またチャレンジします！

お読みいただき、ありがとうございました。
![2309563.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3509688/6a3f716a-88d3-0e74-6783-14e5920439d7.jpeg)