制作スケジュールを出先でも簡単に確認・編集ができるアプリをノーコードで作ってみた(Glide)

# Q.ノーコードで簡単にアプリが作れちゃうって本当なの？

A.本当です！

実際に作成したもの

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">以前作成したLINE Botの機能じゃ物足りず…<br><br>Glideを用いて制作スケジュールの管理アプリを作りました！<br>また別タブで、現在実施中のキャンペーン一覧をすぐにチェックできる機能もつけました。<br><br>これで進捗管理や確認業務が楽になりそう！<a href="https://twitter.com/hashtag/Glide?src=hash&amp;ref_src=twsrc%5Etfw">#Glide</a><a href="https://twitter.com/hashtag/protoout?src=hash&amp;ref_src=twsrc%5Etfw">#protoout</a> <a href="https://t.co/7VpxgBcIMC">pic.twitter.com/7VpxgBcIMC</a></p>&mdash; けん (@ken378732561655) <a href="https://twitter.com/ken378732561655/status/1703400154613928092?ref_src=twsrc%5Etfw">September 17, 2023</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>



アプリ開発には、高度なプログラミングスキルが必須条件だと、私も1週間前までずっと思っていました。

それがなんと思い込みだったんです。

今回は1週間で完成したノーコードでのアプリ開発について書いていきます。


# 制作スケジュールの管理をもっと便利にしたい‼

私はとある小売業で、販促やプロモーションを担当しています。
前々回の記事ではMakeを使ってLINE Botを作成しました。

その作成の理由として、Googleスプレッドシートで管理をしている制作スケジュールシートの使い勝手が悪く、使っているメンバーが少ないことが自分と仲間に共通する課題として存在していたからでした。

【前々回の投稿】

https://qiita.com/kensan7/items/ba5abbd17699e6013f1a



それは計画的な作業進捗に向けて、Googleスプレッドシート上に作成した「制作スケジュール管理シート」の活用を促進するために、Googleスプレッドシートと連携し、LINE上に担当者名を記入すると、現在担当している販促施策を教えてくれるというものでした。

また前々回の記事を執筆後に、チームメンバーから良い点だけではなく、「もっと良くなったらいい点」ということで３つのフィードバックをいただきました。

【いただいたフィードバック】
①「チーム全体でもっているタスクを可視化したものが良い。」
②「店舗巡回など外出・出張時に手軽に確認できるものが欲しい。」
③「締切日や企画の実施期間は急遽変更になることも多々あるが、元のデータは従来通りGoogleSpreadSheetを開いて更新しなければならず、使い勝手の良いものではない。」

この3つのフィードバックはLINE Botでは技術的に改善できないものもあったため、他に良いツールが無いかを考えていました。
そんな時に、ノーコードでアプリが作れちゃう「Glide」というツールに出会いました。

「このツールを使えば、チームメンバーからいただいた課題が解決できる・・・」
そう考えた私は、本社の販促・プロモーション担当が業務で活用できるアプリの作成にすぐに取り掛かりました。

# 使用したツール
・[Glide](https://www.glideapps.com/)
(ノーコードでアプリを実装できるツール)
・Googleスプレッドシート

# 作成手順

①[Glide](https://www.glideapps.com/)へサインアップ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3517979/b423b823-37ba-583d-26c3-5115aa613309.png)

②「Apps」の＋ボタン(New app)をクリックしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3517979/24a37068-aee5-f7a3-bed8-01ee1fca661b.png)

③「Google Sheets」を選択。これでGoogleスプレッドシートと連携されます！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3517979/942d2f6f-1b21-e7eb-b0ad-d0d5a7a49244.png)

※連携したGoogleスプレッドシート

今回は２つのGoogleスプレッドシートと連携し、アプリへ盛り込むことにしました。

1.制作スケジュール管理シート
→キャンペーン名や実施期間、担当者、コメントが記載できるものとなっています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3517979/d3195ead-09f3-7f57-5df7-2c5be3a56896.png)

2.月度実施キャンペーンシート
→制作スケジュール管理シートと同じGoogleスプレッドシート上に集約しているが、現状確認するのが面倒となってしまっているものも連携し、アプリに落とし込みました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3517979/b96b0c86-5610-9234-1d48-e00f0255b536.png)

「制作スケジュールの管理」と「全国で現在実施しているキャンペーン」の２つを把握することは、本社の販促・プロモーション担当にとって重要な業務であり、この２つのスプレッドシートを統合して確認の手間を減らし、在社時にはパソコンで、外出・出張時はスマートフォンで手軽に確認できることが、今回のアプリ作成の最大の意義となります。

④アプリの項目を編集していきます。

**1.制作スケジュール管理シートの編集手順**　

STYLEの項目では「Calender」を選択。
ITEM DATAの項目では、Titleで「施策名」、Start TimeとEnd Timeでは「入稿締切り」を選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3517979/3d52c391-bd7d-2c69-0157-c7a26f38f9ab.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3517979/9d3624d5-e316-88b0-9c8b-116b55a98344.png)

**2.月度実施キャンペーンシートの編集手順**

STYLEの項目では「List」を選択。
ITEM DATAの項目では、Titleで「エリア」、Descriptionでは「施策名」、Metaは「ID」、Imageで「期間」を選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3517979/ae1cb42d-36a2-5d48-0139-30adf3b700c3.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3517979/e55072ce-f166-1218-c3c3-379f07ff859e.png)

⑤カレンダーやキャンペーンをクリックすると・・・
この中身は「COMPONENTS」で編集を行い、連携したGoogleスプレッドシートに記載された項目やチェックボックスを選択することで、表示する項目を選ぶことができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3517979/9b7882d7-d50d-8d71-b40a-139d2c5b2a4c.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3517979/ecb12345-c4b3-0eb5-d25f-ec83b1e68b1b.png)

これでノーコードで制作スケジュールの確認・編集できるアプリが完成しました!!

ぜひ使ってみてください！

https://kawsch.glide.page




# 完成したアプリをチームメンバーにも早速使用してもらった

アポイントをとり、同僚である本社の販促・プロモーション担当の3名に使用してもらい、フィードバックをいただきました。

参加者→Cさん・Fさん・Gさん

## 1.参加者のプロフィール

<font color="Red">Cさん(女性の先輩社員/SNS担当)</font>
→チーム内で在籍年数が一番長いベテランで、アイデアマン。視点が私と異なりかつ論理的に意見を伝えていただける方。

<font color="Blue">Fさん(男性の先輩社員/ITシステム・開発担当)</font>
→システム・開発周りのスペシャリスト。もの静かで、他のメンバーにはない、システム的見地から意見をいただける方。

<font color="Green">Gさん(男性の先輩社員/CS(カスタマーサービス)担当)</font>
→性格が明るくチーム内のムードメーカー。分析思考で明るくポジティブ。コミュニケーション力の高い方。

## 2.アプリ使用前の説明
まずはチームメンバーに使用いただく前に、作成の理由と想定使用者について説明しました。

【説明内容】
・想定使用者は「本社の販促・プロモーション担当」(実際に使用いただくチームメンバー)
・作成理由は、販促・プロモーションのメンバーが「制作スケジュールの管理」と「全国で現在実施しているキャンペーン」について、誰もがいつでもすぐに確認できるようになるため。

## 3.どのような質問をしたのか

【質問項目】
・アプリの良い点
・アプリの改善点
・操作感・UI等について
の観点から忌憚なきご意見をいただきました。

## 4.いただいたフィードバック

実際に制作したアプリに対していただいたフィードバックをまとめていきました。

### アプリの良い点
「アプリで更新した内容がGoogleスプレッドシートに反映されるのはすごく使い勝手が良い。」
<font color="Red">Cさん(女性の先輩社員/SNS担当)</font>

「一元管理の試み自体がすごく良い。」
<font color="Blue">Fさん(男性の先輩社員/ITシステム・開発担当)</font>

「外出時も使えるので、店舗巡回時や支社メンバーも活用ができそう。」
<font color="Green">Gさん(男性の先輩社員/CS(カスタマーサービス)担当)</font>

### アプリの改善点
「編集できるのはいいが、変更した人が履歴が確認できる機能がほしい。」
「カレンダー以外の表示方法に変えたい。」
<font color="Red">Cさん(女性の先輩社員/SNS担当)</font>

「作業管理をするならば、ガントチャート表示がほしい。」
「担当者別のソート機能があると使い勝手がよい。」
「締切が迫っているときにアラートがなり、通知がくる機能がほしい。」
 <font color="Blue">Fさん(男性の先輩社員/ITシステム・開発担当)</font>

「施策登録をする項目に画像を添付できるようにしたい。」
「メモ機能やGoogleカレンダーとの連携機能がほしい。」
 <font color="Green">Gさん(男性の先輩社員/CS(カスタマーサービス)担当)</font>

### 操作感・UI等について
「キャンペーン名の表示が切れてしまっているのが残念。」
「アプリの背景色や文字色がすごく味気ない。」
<font color="Red">Cさん(女性の先輩社員/SNS担当)</font>

「チラシ・LPや担当者など入力する情報が決まっているものはプルダウンで選択できるような形式の方がよいのでは。」
→またUIの参考として、いくつかオススメのツールを教えていただきました。
<font color="Blue">Fさん(男性の先輩社員/ITシステム・開発担当)</font>

「カレンダーの線が薄く、すごく見にくい。」
「アプリのアイコンを変えた方がよい。」
<font color="Green">Gさん(男性の先輩社員/CS(カスタマーサービス)担当)</font>

# いただいたフィードバックに対して私が感じたこと

今回フィードバックのいただいた3名の共通の意見として、「制作スケジュールの管理」と「全国で現在実施しているキャンペーン」の一元管理のアプリという発想自体はすごく良いというものがありました。

メンバーも私と同じ負を抱いており、「解決すべきことである」という認識が同じであったということが、今回のインタビューで確認ができ、非常に有意義な時間となりました。
そのため解決の方向性はブレずに、課題解決に向けて取り組んでいきたいと思います。

そして解決すべき課題と感じているからこそ、改善案を数多くいただけたものだと強く感じています。

早速いただいた意見から、すぐに修正ができる点として「操作感・UI」の観点から、文字を読みやすくするために背景色を修正しました。

■改善前
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3517979/96e75d51-e09d-e17a-5e14-5a1969054874.png)
■改善後
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3517979/09839a51-26f3-bb56-3f21-fbf3f73484d5.png)

今回いただいたたくさんの意見をもとにアプリの改修をすすめ、より見やすく、使いやすいものへとグレードアップさせていきます。