「Excelで何とかならない？」から始まったアプリ開発、なんだか本格的になってきちゃった

どうも、つきのばななんです

前回の記事はこちらでした👇

今回は、その後の話です

整骨院の先生からは、簡単にリクエストされたのですが

とのこと

簡単に言ってくれるけど、最近流行のノーコードツールでできるものなのか、私にはわからない
AIを使ってバイブコーディングで作れることは分かる

しかし、セキュリティとか、実際に使ってみないとわからない調整とか、構成とか、AIに作ってもらうだけでは済まないと思うんです
そこは、リスキリングで培った知識で、仕組みを考えて作ろうと思いました

実務をしたことがないから、勘も必要だけど、たたき台を作ってもらったので、ひとつずつテストしていくところから始めました

① まずは、使える環境を整える

まず、たたき台を作る時にClaudeAIと話を煮詰めたところですが

という方針を決めた

DBと、ログインセキュリティの課題をクリアするために、先生には診療所専用のGoogleアカウントを取得してもらいました
この段階でも、ちょっと大変だったけど（笑）

専用アカウントを作ってもらった後、DBはFirebaseを使うことにしました

取扱品目がそこまで多くないとのことで、大きなデータを扱わないであろうとの予測から、無料範囲で始めることにしました

DockerでMySQLを使ったことはあるけど、Firebaseは初めてだったので、調べながらアカウント登録をして、初期設定を済ませる
たたき台で作ったアプリをVScodeで展開し、Firebaseと連携して、ダミーデータを預ける
これで、PCでもスマホでも同じURLから使えて、データも同期できる

続いて、セキュリティに取り掛かる
Firebaseからログインに関する設定を考え、Googleアカウントを利用
アプリのURLをランダムで検索してヒットする人がいるだろうか、そしてヒットした人が悪さするだろうか、と考えたけど、今の世の中、何があるかわからないですからね
先生が面倒くさがっても、ログインシステムは最低限必要！と考え、認証設定しました（笑）

② ClaudeAIとClaudeCodeに挟まれて（笑）

ここからは、アプリ本体の開発になります

実際のエンジニアがどんな風に開発しているのか知らないんですけど、私はまだ一年過ぎたくらいの学習経験ですので、コードを何も見ないで打つことなんてできません
はい、ここで登場👏

ClaudeCodeです

ClaudeCodeは、使い方もよく分かってなかったけど、設定だけはしておいたので、ClaudeAIとClaudeCodeに挟まれて、開発スタート

基本的な流れは、私がたたき台のアプリを実際使うことを想定して使ってみて、不足しているところや使いにくいところを言語化して、ClaudeAIに相談し、ClaudeCodeへ依頼文を書いてもらい、デプロイしてもらって、私がまたテストをする、ということの繰り返しです

③ らくらくホンを目指したUI

まず、メインメニューUIに関して
らくらくホンをイメージして、押すボタンは堅苦しくない表記にしようと思った
なので「入荷した」「使った」「確認する」「印刷する」という超ダサい名称（笑）を採用し、視認でも意識できるように、ボタンの色を分けて、そのまま各ページのテーマカラーにした

それ以外に、新規登録や変更など、普段使いしない要素は、小さな文字で「管理ページ」という入口を作った

先生がURLをうっかり忘れてもどちらかが開く状態であればなんとかなるように、「スマホ用QRコード」というページを作り、QRコード表示とURLをクリップボードへ貼り付けられるボタンを準備した

④ 接客業の経験値が呼びかけてくる

次は、商品のこと
商品に必要な情報と言えば

ここまでは簡単に考えられた

この時、頭の中で経験が言っている..…
それでは足りない、と

この辺りを解決するところから始めた

似たような商品の区別にはJANコード番号を登録したらよいかと思ったけど、13桁とか入力も大変なのでカメラで撮影して入力を簡易化することにした
カメラ機能を使うなら、１商品につき１画像付けられるようにしようかと
（※カメラ機能はデータ管理の都合、開発順としては後回しの予定）

金額表示は、相談の上、仕入れ価格は税抜きと税込み、売価は1つ表示することに
（※税率計算しようかと思ったけど、今後、税率がどうなるかわからないし、商品次第で違ったり、小数点以下の計算がここで違うと困るので、手入力にした（笑））
同じJANコードの金額変更を可能にし、型番違いの場合は別商品として扱うことにした

商品の基本情報は大体出そろった

仕入れは良いけど、在庫数が減る時って、販売と診療所での使用があるよね？と思って、同じ使用でも別扱いだなぁと思ったので、在庫が減る場合は、選択の入り口を2個にして、「販売」と「使用」に分けて、売上の計算が別になるようにした

あとは、在庫処分で値引きすることも考えて、販売では値引き計算できる仕様にした

基本は手軽なスマホで運用することを考えて、テンキーを配置するUIにした
もちろんパソコンのテンキーも受け付けるようになってる

うんうん、順調

先生、いつも忙しいって言ってるから、うっかり入力し忘れたら、記録の日付変わってしまうかも？と思ったので、カレンダー機能でタイムスタンプも変更できるようにした

そして、金額変更時のタイムスタンプはオンタイムで履歴を残すようにしておきました
後から入力し忘れを記録した時に、販売日を遡って入力できます
その販売日が価格変更より前なら、変更前の金額で計算できるようにして、繰り返しテストしています

この辺りは、接客業で培った知識が生かされて、想定できる問題として取り扱うことができるので、前もって構想に加えておくことにした

商品情報と入力だけなのに、結構いろんな状況を想定して、都合よく使えるようにするって、大変だなぁと思ったし、私一人では考えられても実装できないから、AIの力は本当に助かると思う
課金しておいて、よかった（笑）

ようやく、少し形が出来始めたばかり
経験の少ない私が、AIで作れるから！と業務アプリを作ることは、正直ハードルが高いと思います
知らなかった、では利用者が困ることもある
何度もテストを重ねて、問題が見つかったときは、ひとつひとつ調べて、きちんと対応していきたいです
安心して使ってもらえるものを作るのは難しいですね

テストや構築、やることまだまだあるけど、今回はここまで