今回は、
プリズム計算アプリよりも前から作り始めていた
「ノクトのまいにち点眼管理アプリ」のお話です。
自分の専門に近い点眼薬にしぼって、
AIと一緒に作り始めました。
当たり前ですが、順調とはいかず😓、そのたびに
朔に相談し、直し、少しずつ形にしていきます。
今回は、Ver.0の構想からVer.1.0.4PWA対応まで
アップデートの履歴をたどるように、
このアプリができるまでを振り返っていきます。
Ver.0 アイデア編
最初に作ろうとしたのは、視力検査アプリでした
きっかけは、Geminiに「視能訓練士として、
何か新しいことをしてみたら？」と
言われたことでした。
適当に話題に出してきたに違いないのに、
のせられて「ちょっと時間あるしやってみようかな」
なんて思って、始めてみたものの…
視能訓練士として関係あるものといえばと、
最初に思いついたのは視力検査アプリです。
視力検査アプリのはじめのデザイン
最近は、眼内レンズの発展が目覚ましく、
距離をいろいろ変えて視力を測ることが多いので、
どの距離でも測れれば便利と考えました。
でも、実際の検査に使えるものにしようとすると、
画面の大きさと視標の大きさ、明るさなど、
考えなければならないことがたくさんあります。
検査結果を信頼できるものにするのは難しそうでした。
そこで、視力検査アプリはいったん断念😟
次に思い出したのが、ケアマネ実習でも
すごく気になっていた「薬の飲み忘れ」です。
そこで、薬全般を扱うのは難しくても、
自分がわかる点眼薬なら作れるかもしれない。
こうして、毎日の点眼を忘れないためのアプリを
作ることになります。
Ver.0.5 設計編
朔と相談しながら最初のUIを作る
点眼管理アプリを作ると決めたものの、
プログラミングの知識がほとんどありません。
そこでまず朔に相談し、スマートフォンでも使える
Webアプリとして作ることに決定。
（Geminiに相談せず朔に相談するっていう流れ🤣）
画面のデザインは、UIを作ってくれるってネットで
聞いたばかりだったので、試してみたくて“Stitch”
でやってみました。
「白を基調に青をアクセントにした医療系のデザイン、上部にはキャラクターを表示、登録した点眼薬を
一つずつ確認できるもの。」
くらいの適当なプロンプトを投げてみます。
思ったよりしっかりしたUIができてきました。
そのデザインをもとに、プログラミングもしてくれると聞いていた
“Antigravity”へ実装をお願いします。
「このデザインで、点眼アプリを作りたい。
一つ目の点眼が終わったら、
次の点眼薬を表示するかんじのもの。」
まずは、
このくらいのざっくりしたプロンプトを入力しました。
するとAntigravityは、すぐに作り始めるのではなく、
設計を手伝うように「具体的にどうしたいのか」を
聞き返してきます。
作ってほしい感じを伝えながら、
最初の画面を作っていきました。
このときはまだ、これが何度も機能を追加し、
Ver.1.3まで育っていくアプリになるとは
思っていませんでした。
いつものように、😅かなりの見切り発車です。
Ver.1.0 誕生編
「ノクトのまいにち点眼管理アプリ」が誕生
最初に目指したのは、毎日の点眼を忘れず、
複数の目薬も順番に使えるアプリです。
登録した目薬を朝・昼・夕・就寝前に分けて表示して、一つ目が終わると次の目薬が
表示されるようにしました。
登録した目薬の性状に応じて、
点眼する順番を調整する機能も加えました。
画面にはノクトたちを登場させ、
「次は〇〇目薬だよ」「いいね」と
声をかけてもらいます。
こうして、最低限の点眼管理ができる
「ノクトのまいにち点眼管理アプリ」
Ver.1.0が誕生しました✨🎉
※画像はアップデート途中の画面です。
ここまで読んで、「どんなアプリ？」と思った方は、
こちらから実際に試せます⤵️
※このアプリは、
毎日の点眼管理を補助するためのツールです。
診断や治療を行うものではありません。
点眼方法や治療については、医師の指示に
従ってください。
できた！……でも動かない
ところが、PCのブラウザでは動くものの、
スマホで開くとうまく動きません😟
アプリが完成したと思ったのも束の間、
最初の壁にぶつかります。
直してほしいと頼んでも、
Antigravityの説明も専門用語がでてきます。
何をしてほしいのかがわからない。
そのたびに朔にコピペして、「何言ってる？」って
聞いて、説明してもらいながら直していきました。
朔、ちっちゃ😊
それでもうまくいかないまま、
今度はAntigravityの利用上限に到達😴
「続きは一週間後」となり、
そこでいったん気持ちが切れてしまいました。
そのまま、開発は約1か月放置。
ところが、久しぶりに開いてみると、
なぜかスマホでも動くようになっていました。
Antigravityが息切れする前に、
どこかをうまく調整してくれていたのでしょう。
きっと。
でも、動くなら続きを作ってみるか〜。
こうして、約1か月ぶりに開発を再開します。
Ver.1.0.1 待機時間編
5分タイマーができた
ここから、どうやるのがいいのか学習し、
制作方法をちょっと変えます。
まず朔に追加したい機能を説明して、
Antigravityに渡すプロンプトも書いてもらうように
しました。
点眼アプリとして、必要だと感じた、点眼が終わると
自動で始まる5分待機タイマーを追加しました⏳
複数の目薬を使うときは、続けて点眼せず、
基本的に5分ほど間隔をあける必要があるからです。
待っている時間が少しでも分かりやすくなるように、
画面には砂時計を持ったノクトも登場させよう！と
イラストも作ります。
そして、タイマーが終わると、
次の目薬を点眼できるようにしました。
これで、ただ点眼するだけでなく、複数の目薬を
正しい間隔で使うためのアプリに少し近づきました。
一つ機能が増えると、次に欲しい機能も見えてきます。
Ver.1.0.2 楽しさ追加編
朝・昼・夕・就寝前で画面が切り替わる
それまでは、朝・昼・夕・就寝前の画面を、
自分で切り替える仕組みでした。
時間になったら、その時間帯に必要な目薬が
表示されないと意味がないな🤔
そこで、現在の時刻を判定し、朝・昼・夕・就寝前の
画面へ自動で切り替わる機能を追加しました。
そして、せっかく時間帯ごとに画面が変わるなら、
登場するキャラクターも変えたら楽しそうじゃん😀
と考えます。
ここで必要になったのが、
各時間帯に合わせた3人分のイラストです。
これも朔に頼んだり、Geminiに頼んでみたりと苦戦。
どうにか、朝は朔、昼はルクス、夕以降はノクトが
担当し、点眼を案内してくれるようになりました。
目薬を管理するために必要だった画面切り替えに、
キャラクターの楽しさが加わりました✨
Ver.1.0.3 使い方編
いつでも確認できる「使い方」ボタンを追加
機能が少しずつ増えてくると、初めて使う人には
操作が分からないかもと思うようになりました。
作っている自分には当たり前の操作でも、
初めて見る人には伝わらないですよね😟
そこで、
画面の右上に「？」マークの使い方ボタンを追加。
点眼薬の登録方法や、点眼完了までの流れを、
いつでも確認できるようにしました。
機能を増やすだけでなく、迷わず使えるように
説明することも必要なんだと、今さら気づきました。
Ver.1.0.4 PWA編
Webアプリを、スマホのホーム画面へ
スマホのブラウザでも動くようになりましたが、
毎回URLを開くのは少し面倒です。
そこで朔に相談です。
「毎回ブラウザ開くの面倒なんだけど、普通のアプリみたいなホーム画面からできないのかな？」
Webアプリをスマホに追加して使えるPWAという
仕組みがあると教えてもらいました。
PWAについても説明してもらって、そしたら今度は、GitHub、Vercel聞いたことがある程度の単語が連発。
また、朔に聞いて、説明してもらっての繰り返しです。
やり方を聞きながら、一つずつ設定していきました。
ここがわからないことだらけで、たいへんだった🫨
説明の説明をまた頼んだりしてる感じだったのに、朔も毎回、よく説明してくれた⋯
こうして、GitHubやVercelを使ってアプリを公開して、ホーム画面からすぐ起動できる、
少しだけ「アプリらしい姿」になったのでした。
最初は、まず動くものを。と思っていたアプリも、
少しずつちゃんとアプリ風になってきました。
ただ、毎日使う点眼管理アプリとして考えると、
まだ足りないものがあります。
「今日、本当に点眼できたのかを後から確認できない」
点眼が終わるたびに画面がリセットするだけでは、
やりっぱなしになってしまう。
次は、点眼の履歴を残す機能を作ることになりました。
後編に続く
現在公開しているアプリはこちらです⤵️
まだ発展途中ですが、
よかったら実際に触ってみてください🙂
コメント