めんどくさいを解消！DX初心者の物流担当がノーコードツールGlideで店舗検索アプリに挑戦したら自部署ポータルアプリができた
※22年10月4日一部記事を追加：Mapの抽出元を緯度経度に変更した記事を追加しました。
１．めんどくさいの解消のために
Glideでめんどくさいの解消アプリ制作に挑戦！
こんにちは！
普段はとあるスーパーの物流部門に勤めているめんどくさがり屋です。
私たちは普段の業務で○○店舗の荷捌き場(商品を納品するところ)で事故が起こった、△△店舗の住所は？大型車両で行けたっけ？という場面に出くわすことが多々あります。
私は関東圏の全店舗の詳細を暗記してますよっ！っというようなスーパー(超のほう)社員ではもちろんありません。そのたびに店舗の一覧を検索していくつものファイルを渡り歩いて必要な情報を抽出します。
「あぁ、めんどくさい・・・」
日々そう思っていたところ『Glide』というノーコードでアプリを制作できるツールがあるということを知りました。そこで、アプリ制作なんて全くしたことのない初心者が、めんどくさいを解消するため物流関連情報をまとめた店舗検索アプリの制作に挑戦することにしました！
２．Glideを使ったアプリの制作の結果
まずは制作結果から発表
「あれっ？店舗検索アプリじゃないの？」と思われた方もいらっしゃるかと思いますが私も同じです(笑)
制作を進めるうちに、あれもあったらいいな、これも付けとこうと脱線しているうちに自部署に必要な情報をまとめたポータルアプリっぽいのができました！店舗一覧の他に「会社全体の従業員ポータル」や忘れがちな「体調チェック」連絡用の「業務連絡チャット」など自部署で使いそうな機能をアプリにまとめています。
本来の目的は物流に必要な情報を集めた店舗検索アプリでしたが、目的を変更した訳ではなく、プラスアルファができたので良しとします。
それでは、次にアプリ制作の手順について紹介します。
３．自部署ポータルアプリ制作の道のり
１)アプリに制作したツール
・Glide
・Googleスプレッドシート
・Glideとは
アプリ開発用のノーコードツールです。ノーコードの名の通りITの知識がほとんどない初心者でも簡単にアプリが制作できます。スプレッドシートと連携していますので、アプリのデータベースも簡単に管理できます。
２)試作機(零号機)の制作～準備編～
今回、Glideを使って初めてアプリ制作をするので、ひとまず動けばいいかと試作機を作ることから始めました。(自分の中で盛り上げるために心の中では零号機と呼ぶこととします）
まず、最初からGlideでアプリ制作をするわけではなく、事前準備としてGoogleスプレッドシートでデータベースを作ることから始めます。
もともと、用途に応じたエクセルの店舗一覧はありますが、業務カテゴリによって複数のファイルに分かれています。その中から、物流で使用頻度の高い項目を抽出しGoogleスプレッドシートに貼り付けていきます。
準備が出来たら、Gildeのアカウント登録をしてアプリ制作を開始します！Gildeには自由に使えるテンプレートがたくさん用意されていますが、逆に多すぎて選べなかったので、無地のテンプレートを使用しました。
↓↓📌Gideのアカウント登録についてはコチラをご参照下さい↓↓
最初にGlideと先ほど準備したGoogleスプレッドシートを連携させます。まずはGlideのホーム画面で[New project]を選びます。プロジェクト名を入力したら[Glide App]を選びます。[Glide App]は縦長でスマホ向き、[Glide Page]は横長でデスクトップやタブレット向きのスタイルです。
次の画面ででてくる[Google Sheets]を選択するとスプレッドシートの一覧がでてきますので、事前に準備しておいたスプレッドシートを選択します。これで、GlideとGoogleスプレッドシートの連携は完了です！
３)試作機(零号機)の制作～実践編～
準備編でGlideとGoogleスプレッドシートの同期が完了しましたので、早速アプリの制作に入ります。ってもうアプリっぽいものができてる？？下は同期直後の画面ですが、中央のアプリ画面イメージには既に店舗の一覧が並んでいます。また、店舗を選択してみると既にいくつかの情報が反映しているようです。Glideって超アタマいいですね！！
でも、よくよくみると表示させたい順番が違ったり、物流としてMAPを表示させたいと思っていたのですが、地図の表示がなかったりと細かい不具合が多く発生していました。そこで、本格的にアプリのカスタマイズに入ります。
↓↓📌Glideの編集画面については以下の記事をご参考下さい↓↓
まずは、中央のアプリ画面イメージを地図表記に変えてみます。編集画面の右側の[STYLE]の中に[Map]という項目があるのでクリックします。これで、地図表記に変更完了！！と思いきや店舗のピンが海を越え台湾に立っています。台湾には行ってみたいけれど、日本の店舗ですので修正します。
[STYLE]は[Map]を選択して問題ありませんでしたが、[CONTENT]欄がおかしかったようです。この[CONTENT]は中央のアプリ画面イメージの表記をコントロールするもので非常に重要です。今回は[Address]をA事業部からA住所に変えます。この選択肢は元のデータであるGoogleスプレッドシートから選択できるようになっています。
[Address]を正しいものにしたのでアプリ画面の地図表記への変更ができました。あとは[Map]の[CONTENT]を変更したのと同様の処理で編集画面左側の[SCREEN]に表記される情報の内容と順番の変更をすれば、店舗検索アプリ試作機(零号機)の制作は完了です！！
(補足)まさか、、、無料枠！？
ちなみに、今回のアプリにMapのピンは80店舗中10本しかたっていません。最初は設定ミスなのか不具合なのかと調べましたが、無料枠では「10pins per map(地図当たり10ピンまで)」のようです。。
（でも調べたおかげで無料枠の知識だけは増えました）
↓↓📌Glideの無料枠については以下の記事をご参考下さい↓↓
(追加記事)緯度経度表記で地図が正確になりました！
※22年10月4日追加記事です。
これまで、店舗Mapのピン表示を住所から抽出していましたが、緯度経度からも抽出できることがわかったのでアプリを修正しました。
Map表示に使われているMapBoxは住所を指定してもイマイチ不正確でしたが、だいぶ正確になった気がします！
しかもピンが10本以上になってる！！緯度経度で表示させる場合は無料枠のピンの制限がないようです。これは嬉しいですね🎉
↓↓📌Mapの緯度経度表示については以下の記事をご参考下さい↓↓
４．試作機(零号機)アプリの共有とお試し
１)アプリの共有のためにPublic公開
試作機(零号機)が完成したので、同僚に確認してもらうためにアプリをPublic設定にします。Public設定とはアプリのURLやQRコードを知っていれば誰でもアクセスできる公開方法です。
Public公開すれば同僚や上司にも便利なアプリを共有できる！のですが、URLさえわかれば誰でもログインできるため、機密情報や個人情報がある場合は注意して下さい！
↓↓📌Public公開方法や注意点についてはコチラの記事をご参考下さい↓↓
２)アプリの使用感を同僚に確認
今回、作成した試作機(零号機)を同僚に使ってもらうことにしました。すると、「ピンの数が少ないのは分かってるけどそもそもピンの位置間違ってない？」「一覧でずらっとよりも地域とかで分けときたいよね」「この情報も欲しい」など、様々な意見をもらいました。
今回、Web会議の中で使ってもらったので、詳細まではわかりませんが「可もなく不可もなく」という感触でした。しかし、確認してもらえたことでアプリの足りない部分や、自分では気づかなかったことが見えたような気がします。指摘を受けた部分は出来るかどうかは別として修正にチャレンジします！
５．物流ポータル(初号機)の制作
１)試作機(零号機)のデータベース更新
今回、指摘事項を修正するにあたって、試作機(零号機)の[Projects]をそのまま引き継ぐこととしました。(本当は指摘事項の修正をするため、新しい[Projects]を試したり、Googleスプレッドシートを変更したりしましたが、結局もとの試作機に戻ってきました。そのお話はいつかまた別の機会に。。)
まずはデータベースの更新です。Googleスプレッドシートに要望のあった情報の追加と入力済み情報の更新を行いました。データベースの更新は別のエクセルからのコピペまたは調べた情報を入力することが主な作業になります。(ちなみにデータベースの更新が一番時間かかりました)
２)都道府県別のエリア分け
次に、都道府県別に店舗のエリア分けを行います。ここが今回一番ややこしかった点なので詳しく記載します。
＜作業手順＞
➀Googleスプレッドシートに紐付け用の列を追加し都道府県を入力する。
➁次にエリア分け用の新しいシートを作成し、都道府県列を作成する。
➂追加したデータベースに列を追加し[TYPE]に[Relation]を選択する。
④都道府県シートの都道府県とGoogleスプレッドシートの都道府県を紐付ける。これで紐付け完了です！
アプリ画面を確認すると、都道府県を選ぶと該当都道府県の店舗一覧が表示されるようになっています！
その他のアプリ制作ヒント
Glideには多くのテンプレートがありますが、同時に制作技術もわかります。テンプレート自体に興味がない場合でも、技術を見ることができますので、やり方に詰まったときはテンプレートをのぞいてみて下さい。
３)ポータルアプリの制作
店舗一覧を整理しその他の情報や機能を追加していくと、店舗検索だけではなく、物流部として必要な情報を集めたポータルアプリを制作したほうが便利ではないかと考えるようになりました。
そこで、制作結果のようなアプリの形になっています。店舗検索以外に「店舗MAP」「グループ従業員のポータルサイト」「連絡先一覧」「体調チェックのForms」「業務連絡用のチャット」を追加していますが、部内で更に協議を重ね更に使いやすくカスタマイズしたいと考えています！
↓↓📌ポータル制作の参考にした記事はコチラです↓↓
６．さいごに～アプリを制作してみて～
今回、初めてGlideを使ってアプリを作成しました。少し複雑な部分もありましたが、想像以上にお手軽にアプリ制作ができるんだなぁと感じました。
また、手軽にアプリ制作ができるためGlideを使える人を増やせば、誰もが個人やコミュニティ専用の便利なアプリができると思います。
今回協力してもらった同僚にも今度教えるよと言っていますが、非エンジニアでもノーコードツールを使って自由に便利なアプリを制作できる便利な世の中になればいいなと思います。
ノーコードツールには十分その可能性があります！
まだまだ、使っていない機能も多くGlide界に足を踏み入れた程度かもしれませんが、私も更に便利なアプリを制作していきます！
ありがとうございました！
この記事が気に入ったらサポートをしてみませんか？