メインコンテンツへスキップ
見出し画像

Googleスプレッドシートも分からなかった私が、AIに聞きながら小さなWebアプリを作った話

    50代からのAI活用|パソコン1台・スマホ1台で始める小さな仕事改善

    これです👉https://script.google.com/macros/s/AKfycbygBWFYkvOAbfzdLGoQYKg6ZTxrr1rFWzJzYlOrsFJOlCrte-Rnfl48O21Zk-xQosj12A/exec


    画像
    現場第一AI|小さな声ボックスの全体像。困りごととひとことを入力し、Googleスプレッドシートに保存する流れ。

    私はエンジニアではありません。

    それどころか、正直に言うと、Googleスプレッドシートのこともよく分かっていませんでした。

    「スプレッドシートって、Excelみたいなものかな」
    最初は本当にそれくらいの感覚でした。

    Google Apps Script。
    Code.gs。
    index.html。
    デプロイ。
    Webアプリ。

    言葉だけ見ると、どれも少し遠い世界のものに感じます。

    それでも今回、AIに聞きながら、小さなWebアプリをひとつ作ってみました。

    名前は、
    「現場第一AI|小さな声ボックス」
    です。

    完成された業務システムではありません。
    非エンジニアが、AIに何度も聞きながら作った小さなお試し版です。

    でも、自分にとってはかなり大きな一歩でした。

    50代からでも、パソコン1台とスマホ1台があれば、AIに聞きながら小さな仕事改善は始められるのではないか。
    今回は、その実験の記録です。


    きっかけは、現場の小さな困りごとを集めたいと思ったこと

    最初に作ろうと思ったのは、現場の小さな困りごとを入力できる簡易フォームでした。

    大げさな改善提案ではなくていい。
    ちょっとやりにくいこと。
    少し困っていること。
    でも、わざわざ誰かに言うほどでもないこと。

    そういう小さな声を、匿名でも入力できる場所があれば、現場の見え方が少し変わるのではないかと思いました。

    そこで作り始めたのが、最初の「困りごと受付箱」です。

    ただ、思いついたからといって、すぐ作れるわけではありません。

    Googleスプレッドシートをどう使えばいいのかも怪しい。
    Apps Scriptの画面をどう出すのかも分からない。
    コードをどこに貼るのかも分からない。

    正直、最初からかなり手探りでした。


    実際は、Apps Scriptの画面を出すところから分かっていなかった

    今なら少しだけ分かります。

    Googleスプレッドシートを開いて、
    拡張機能 → Apps Script
    に進む。

    でも最初は、この画面の出し方すら分かっていませんでした。

    画面に Code.gs と出てきても、それが何なのか分からない。
    index.html と出てきても、どう扱えばいいのか分からない。

    途中では、実際にこんな状態でした。

    「今シート開いたままですが閉じていいの?」
    「Code.gs貼り付けしちゃった」
    「htmlってどう貼り付けするの?」
    「プログラムから開くがありません」
    「シートが増えたんですね」

    今振り返ると、かなり泥臭いやり取りです。

    でも、たぶんこれが非エンジニアがAIを使うリアルなのだと思います。

    分かっている人なら、
    「Code.gsに貼って、index.htmlに貼って、保存して、デプロイしてください」
    で終わる話かもしれません。

    でも、分からない側からすると、その一つひとつが全部怖い。

    消していいのか。
    貼り付けていいのか。
    保存したらどうなるのか。
    デプロイしたら誰かに見えてしまうのか。
    URLは変わるのか。
    スマホで開けるのか。

    分からないことだらけでした。


    画像
    実際は、Apps Script・Code.gs・index.htmlなど、最初は分からないことだらけでした。

    AIに画面を見せながら、一歩ずつ進めた

    今回やったことは、特別に高度なことではありません。

    スプレッドシートをコピーする。
    Apps Scriptを開く。
    Code.gsを貼り替える。
    index.htmlを貼り替える。
    保存する。
    デプロイする。
    スマホで開いてみる。
    入力してみる。
    スプレッドシートに保存されるか確認する。

    書けば簡単そうに見えます。

    でも実際には、ひとつ進むたびに確認していました。

    「これで合っていますか?」
    「ここを押していいですか?」
    「保存だけでいいですか?」
    「デプロイは触らないでいいですか?」

    そのたびにAIに聞きながら、画面を見せながら進めました。

    私はコードを書ける人間になったわけではありません。
    でも、分からない画面をAIに見せながら、一歩ずつ進めることはできました。

    そして、実際にスマホでフォームが開いたときは、かなり驚きました。

    入力できる。
    送信できる。
    送信後にメッセージが出る。
    Googleスプレッドシートに記録される。

    しかも、送信した内容に合わせて、スプレッドシート内に新しいシートが自動で増えていました。

    「シートが増えたんですね。あなた凄い!」

    思わずそう言ってしまいました。

    もちろん、凄いのは私ではありません。
    でも、分からないなりにAIとやり取りしながら進めた結果、目の前で実際に動くものができた。

    その体験は、かなり大きかったです。


    画像
    AIに画面を見せながら、一歩ずつ進めた作業の流れ。

    「入力したら少しスッキリした」というフィードバック

    最初は、現場改善のための「困りごと収集フォーム」として考えていました。

    でも、知り合いに試作版を使ってもらったとき、思わぬフィードバックがありました。

    「入力したら少しスッキリした」

    この一言は、かなり貴重でした。

    私はそこで、少し考え方が変わりました。

    このツールは、単に困りごとを集めるだけではないのかもしれない。
    誰かに言う前に、まず言葉にする。
    匿名で短く書く。
    送信する。
    それだけで、少し気持ちが外に出ることがある。

    そう考えると、このフォームは「改善提案箱」だけではなく、気持ちを少し置いていく場所にもなれるのではないかと思いました。

    そこから、機能を2つに分けました。

    ひとつは、
    困りごとを伝える。

    もうひとつは、
    ひとこと置いていく。

    「ひとこと置いていく」は、仕事や日常のモヤモヤ、疲れ、不満、言いにくいことを、自由に短く書ける場所です。

    送信後には、ランダムで労いのメッセージが出るようにしました。

    たとえば、

    「今日のひとこと、受け取りました。あなたのペースで大丈夫です。」

    「書いたことで、頭の中の荷物が少しだけ軽くなりますように。」

    そんな言葉が返ってくるようにしました。

    さらに、トップ画面にはフクロウの画像を入れました。
    見守り役のような存在です。

    最後には、送信後にふわっとした紙吹雪が出るようにもしました。
    派手なクラッカーではなく、3〜5秒だけやさしく出て消える演出です。

    目的は、驚かせることではありません。

    「送ってよかった」
    「少し置いていけた」

    そう感じてもらうための小さな演出です。


    Apps Scriptのバージョン管理で気づいたこと

    今回の作業では、もうひとつ大きな学びがありました。

    それは、Webアプリの画面表示と、スプレッドシートへの保存設定は、同じ場所で管理されているわけではないということです。

    初心者の私には、ここがかなり分かりにくかったです。

    たとえば、index.html だけを差し替えると、画面上の表示は新しいバージョンになります。
    タイトルやボタン、見た目、画面上のバージョン表記は変わります。

    でも、スプレッドシートの保存先シート名や、回答一覧に記録されるバージョンは、コード.gs 側の設定で決まっていました。

    整理すると、こういうことです。

    • 画面表示:index.html

    • 保存先シート名:コード.gs

    • 回答一覧に記録されるバージョン:コード.gs

    ここが最初は分かりませんでした。

    実際に、ある更新作業では、画面上では新しいバージョンに見えているのに、スプレッドシート側では古いバージョンのシートに保存される、ということがありました。

    原因は、コード.gs 側の設定が古いままだったことです。

    たとえば、画面だけ新しくしても、コード.gs の中に、

    const SHEET_NAME = '小さな声_v0.6.3';
    const APP_VERSION = 'v0.6.3';

    のような設定が残っていれば、保存先は古いバージョンのシートになります。

    最初は、バグなのかと思いました。

    でも実際には、バグというより、設定場所が違うだけでした。

    画面を変える作業と、保存先や記録バージョンを変える作業は、別物だったのです。

    この経験で、Webアプリを更新するときは、

    • 画面だけ直すのか

    • 保存先シートも変えるのか

    • 記録されるバージョン名も変えるのか

    を分けて考える必要があると分かりました。

    正直、こういう部分こそ初心者には難しいです。

    でも、こういうつまずきこそ、今回の「AIと作る小さなWebアプリ奮闘記」としては価値があるのではないかと思いました。

    きれいに完成した話だけではなく、
    「なぜ画面は変わったのに、保存先は変わらないのか」
    というところで立ち止まったことも、非エンジニアがAIと一緒に作っていくリアルな記録だと思います。


    AIは、いきなり私をエンジニアにしたわけではない

    今回の経験で強く感じたのは、AIは魔法ではないということです。

    AIを使ったからといって、私が急にコードを書ける人間になったわけではありません。
    Apps Scriptを完全に理解したわけでもありません。
    スプレッドシートを自由自在に使いこなせるようになったわけでもありません。

    でも、AIは「分からないから無理」と止まっていた場所から、一歩ずつ前に進ませてくれました。

    分からない画面を見せる。
    今の状態を説明する。
    次に何を押せばいいか聞く。
    合っているか確認する。
    少し進む。
    またつまずく。
    また聞く。

    その繰り返しでした。

    これは、できる人のスマートな開発ではありません。

    かなり泥臭いです。
    何度も止まります。
    何度も聞きます。
    何度も確認します。

    でも、それでいいのだと思いました。

    非エンジニアがAIを使う価値は、いきなり専門家になることではなく、分からないままでも小さく前に進めることにあるのだと思います。


    小さなWebアプリでも、現場の入口にはなる

    今回作った「現場第一AI|小さな声ボックス」は、まだお試し版です。

    完成品ではありません。
    これから実際に配布して、見やすさ、入力しやすさ、安心感、送信後の気持ちよさなどを確認していく段階です。

    それでも、ひとつ分かったことがあります。

    大きなシステムでなくても、現場の声を拾う入口は作れる。
    難しいアプリでなくても、気持ちを少し外に出す場所は作れる。
    完璧に理解していなくても、AIに聞きながら小さな形にはできる。

    これは、私にとって大きな発見でした。

    もちろん、業務で本格的に使うには、情報管理や運用ルール、個人情報や機密情報への配慮も必要です。
    だから今回も、入力時には会社名、個人名、取引先名、具体的な製品名、機密情報は入れないように案内しています。

    でも、お試し版として小さく使ってみることには意味があると思っています。

    現場の人が、少しだけ書ける。
    言いにくいことを、ひとこと置いていける。
    それをきっかけに、改善や対話の入口が生まれる。

    そんな小さな可能性を感じています。


    これからも、現場で使える小さなものを作っていきたい

    私はまだ、開発者ではありません。

    Googleスプレッドシートも、Apps Scriptも、分からないことの方が多いです。
    でも今回、AIに聞きながら進めれば、非エンジニアでも小さなWebアプリを形にできるかもしれないと感じました。

    重要なのは、最初から完璧に作ることではないと思います。

    まず、小さく作る。
    実際に使ってみる。
    使った人の声を聞く。
    少し直す。
    また試す。

    この繰り返しが、現場に合うツールを作る一番現実的な方法なのかもしれません。

    今回の「小さな声ボックス」も、まさにその途中です。

    きれいな成功談ではありません。
    かなり泥臭い奮闘記です。

    でも、だからこそ、同じように
    「自分には無理そう」
    「コードなんて分からない」
    「スプレッドシートも怪しい」
    と思っている人にとって、少し参考になるのではないかと思っています。

    分からなくても、聞きながら進めればいい。
    完璧に理解してから始めなくてもいい。
    小さくても、動くものは作れる。

    今回、私はそれを実感しました。

    これからも、現場の小さな声を大切にしながら、AIと一緒に、非エンジニアなりの小さな実用ツールづくりを続けていきたいと思います。

    追記:コードより難しかったのは、Googleの確認画面だった

    この記事を書いたあと、実際にGoogle Apps Scriptで小さなWebアプリを公開するところまで進めてみました。

    そこで分かったのは、初心者にとって本当に難しいのは、コードそのものだけではないということです。

    新しいプロジェクトをどこから作るのか。
    Code.gsは1行目から全部入れ替えていいのか。
    index.htmlというファイルをどう作ればいいのか。
    デプロイ時の説明欄には何を書けばいいのか。

    そして何より、Googleの「このアプリは確認されていません」という警告画面で、進んでいいのかどうか。

    ここで止まる人は、かなり多いと思います。

    私自身も、AIに確認しながら一つずつ進めました。
    特に「Advanced」「unsafe」「Continue」「許可」といった表示は、初めて見るとかなり不安になります。

    でも、意味が分かれば進めます。

    初心者支援とは、完成したコードを渡すことだけではありません。
    どこを押すのか。
    なぜその警告が出るのか。
    この画面で進んでいいのか。

    そこまで一緒に確認して、初めて「使える支援」になるのだと思いました。

    この気づきは、今後の「50代からのAI活用」や「現場第一AI」の発信でも、大事にしていきたいと思います。

    画像
    新しいApps Scriptプロジェクトを作る


    画像
    Code.gs と index.html の入れ方



    画像
    デプロイ設定のしかた



    画像
    警告画面の進み方

    追䟸

    私自身、AI活用や現場改善について発信を続けていますが、発信の届け方についてはまだ試行錯誤中です。
    もし同じ領域に詳しい方や、実践されている方がいれば、ぜひ意見交換させていただけたら嬉しいです。

    現場の無駄、離職、教育コスト、属人化。
    こうした構造的な課題を少しでも改善したい。
    その思いは、これからも変わりません。

     
     
    小田原拠点のアーティスト/現場第一AI実践者。現場経験をもとに、AI×業務改善、小さなWebアプリ、インスタント業務改善を発信。無駄をついばみ、仕組みに変える。 元、楠和会(KUSUWAKAI)/少林寺拳法405期生。

    あなたへのおすすめ