くまがいブログ

目次

WEBアプリ
Photo Upload Form

デモデータ
店舗リスト
写真が保存されるフォルダ

※VBAは省略

私はとある飲食チェーン店の厨房レイアウトを行っています。業務では現場調査や施工の写真が協力会社からメールやweb経由で届きます。
営業担当者が画像の圧縮→店舗名を確認→写真内容の確認→各店舗の写真フォルダに保存のような手順で手作業で行っていました。これが結構面倒臭いのです。面倒臭いことが災いして下記のような問題が起こっていました。

• 現地調査写真は図面作図に必要で情報共有するために保存されるが、施工写真は確認だけして保存されていなことが多い(検収書を取得しているので一緒に写真も取得しているはず)
• 写真の圧縮を忘れたり、面倒でやらない
• 似たような店舗名で見分けがつかない時がある
• 営業側にのみ写真が送信された場合、確認ができない
• フォルダ名の統一されない(日付や全角半角など)

と、写真はどこかにあるはずなのに利用できない状態が続いていました。

そこでどうにか人の手がかからない方法を探ることにしました。

最初は下記のような構想で実現しようとしました。

1. チェーン店から提供される店舗リストからVBAを利用してフォルダを作成
2. デスクトップ版GoogleDriveでフォルダを同期
3. web上のGoogleDriveで各店舗のフォルダに協力会社の方に保存してもらう
4. 定期的にVBAを使って各店舗のフォルダに保存されているものがあれば各店舗写真フォルダに写真を圧縮して移動

この方法は、保存の際Googleアカウントが必要ということがわかりました。
しかし、協力会社の方はご高齢の方もいるためアカウントがないと使えないのはちょっと不都合があるので違う方法を探ることにしました。
店舗を探したり検索したりするのも少し操作が面倒だと感じていたし…

いい方法がないかとググっているとぴったりの記事を見つけました。
GoogleドライブとGoogle Apps Scriptを用いて匿名のファイルアップローダを作成する
この記事を元にVBAとGASでWEBアプリを作成することにしました。
下記のような構成で作成した。

1. VBAを使ってチェーン店から提供される店舗リストにスプレッドシートに店舗リストを更新(毎週金曜日に実行)
2. 店舗リストをWEBアプリで検索して選択できるようにする
3. 撮影日を記入
4. 写真の説明
5. 写真データの選択
6. 指定したGoogleDriveのフォルダ内に店舗名をつけたフォルダと「撮影日_写真の説明」のサブフォルダを作成してその中に写真を圧縮してアップロードする
7. デスクトップ版GoogleDriveでフォルダを同期してVBAを使ってサーバーの各店舗フォルダに移動する

工夫した点

• 全体的にユーザーの行動を制限して誤入力や誤操作を防ぐ努力をした。
• 店舗名の読み込みにすこし時間がかかるため読み込むまで画面を触れらないようにした
• 店舗が多いため検索できるようにした。
• VBAで移動する際にアップロードされると困るのでメンテナンス画面を12時と20時に出せるようにした。
• 選択したファイル数を確認できるようにした。

苦労した点

• GASの制限内で動かす調整
• 店舗を検索の際にmacOSでdisplay=none;を指定できなかった
• ユーザーが迷わないUIにすること

実装できなかった機能

• ドラッグエリアにフォルダを入れられないように設定できなった
• パスワードを設定してセキュリティーを高めたかった

初めてWEBアプリを作り上げたことで、かなり満足しています。また、複数人で離れた場所でも共有できる点で、やはりWEBは便利だと感じました。これまで感じていた不便さを自分で改善できたことが、純粋に嬉しかったです。

ただし、現在はChatGPTに頼り切っているため、自分の力でこうしたものを作れるよう、もっと学習を進めたいという気持ちが強くなりました。

今は少人数にテストをしてもらっている段階ですが、評判が良いので、これから全体に広めていきたいと考えています。

上司の方針変更があり、今回開発したものは利用を中止することなってしまいました。

• くまがいしかメンテナンスができない
• 会社で契約しているアカウントではない(非公式)
• 上記のことから継続的に運用するのは困難

正直、全部開発前に話してはいたんですけどね…残念