K先生！3年後に読んで下さい【Google AI Studio Build】1️⃣2️⃣「見た」を、足してみる

K先生へ

前回は、Firebaseというバックエンドで少し骨のある回でした。自分の手で、倉庫を建てました。

今日は、ひと息つきましょう。できあがった土台の上に、小さな便利を、一つ足すだけです。

これまでの記事は、このマガジンにまとめてあります。

【誰が見て、誰がまだか】

連絡ボードを作りはじめたとき、こんな悩みを書きました。「言った、言わない」。伝えたつもりが、伝わっていない。誰が知っていて、誰が知らないのか、分からない。

今日は、この最後のひとつを、片づけます。

やることは、簡単です。それぞれの連絡に、「見た」の印を付ける。読んだ人が、名前を選んで、押す。すると、その連絡の下に、見た人の名前が並びます。「見ました：たなか、さくら」というふうに。

これで、一目で分かります。この連絡は、誰まで届いているのか。まだ見ていないのは、誰なのか。

【土台があると、こんなに軽い】

前回、苦労して倉庫を建てました。実は、その苦労が、今日を軽くします。

見た人の名前も、連絡と同じように、あの倉庫にしまえばいいだけ。倉庫は、もうあります。棚も、もうあります。だから今日は、新しく建てるものは、何もありません。

一度、土台を作っておくと、次からの機能追加は、ぐっと楽になる。前回の「てこ」が、さっそく効いてくるのです。

【一つだけ、正直に言っておきます】

先に、白状しておきます。

今回の「見た」は、名前を選んで押すだけの、簡単なしくみです。だから、正直に言えば、他の人の名前を選んで押すこともできてしまいます。いわば、代返です。

でも、今日はそこを、深追いしません。

厳密に「本人だけが押せる」ようにするには、ログインという仕組みがいります。これも、Firebaseでちゃんと作れます。ただ、それを入れると、一気に本格的になります。今日の目的とは、少しずれます。

今日の目的は、完璧なものを作ることではありません。書く。ためる。足す。この流れを、一通り体験することです。だから、本人確認は、いったん置いておきます。もっと本格的にしたい先生は、あとで発展課題として、ログインに挑んでみてください。今日は、身内で使う前提で、軽くいきます。

【この続きは、実際の手順で】

ここから先は、実際に「見た」の印を足した記録です。頼んだ言葉と、出てきた画面を、そのまま載せます。

【AIに、こう頼みました】

前回つないだ連絡ボードの画面で、続けてこう頼みました。

連絡ボードの、それぞれの連絡に「見た」を付けたいです。
名前をプルダウンから選んで押すと、その連絡の下に
「見ました：◯◯、◯◯」という形で並ぶようにしてください。
同じ人が二回選んでも、名前は一つだけ表示されるようにしてください。
見た人の情報も、Firestoreに保存して、再読み込みしても残るようにしてください。

そうすると７６秒でこうなりました

ルールの更新も指摘されました

今後の注意点とおすすめの書き換え

テストモードのままだと以下の2点があります：

1. 期限切れ: 2026年9月30日 を過ぎると自動的にアクセスが遮断されて動かなくなります。

2. 削除の危険性: 誰でもデータを全削除（delete）できてしまう状態です。

そのため、期限切れを防ぎつつセキュリティを高めるために、エディタの内容を以下のように書き換えて「公開（Publish）」ボタンを押すことをおすすめします：

とのことで　FIREBASEの＜ルール＞のタブで内容をAIの指示通りに更新しました。

【できたものを、試します】

出てきたら、試します。

• 連絡を一つ書く

• その連絡で、名前のプルダウンから「院長」を選んで、「見た」を押す

院長が見ましたという記録がでますね

かk人していくとドンドン増えますね

【念のため、リロードも】

前回おぼえた確認を、今日もやります。ページを再読み込みして、「見ました」の名前が消えないか。

FIREBASEという倉庫にしまわれているので、消えませんでした。

【追加機能】

悪気はなくても皆さんチェックを忘れることがあるので

確認済は出ますが未確認も出るようにしてほしい　
見ましたが緑　未確認が赤にして

また、６５秒で！！

実装内容

1. 「見ました」の表示（緑色 🟩）

   • 緑のバッジ（見ました (人数)）と薄緑の背景枠で、確認を終えたスタッフの名前が並びます。

2. 「未確認」の表示（赤色 🟥）

   • 赤のバッジ（未確認 (人数)）と薄赤の背景枠で、クリニックスタッフのうちまだ確認していないスタッフの名前が一覧で表示されます。

   • 全員が確認を終えると「全員確認済みです」と表示されます。

3. 操作と連動

   • 下部のプルダウンから自分の名前を選んで「見た」ボタンを押すと、Firestore に保存され、リアルタイムに「未確認」から「見ました」へ名前が移動します。

   • 既に確認済みの場合は、ボタンが緑色の「確認済」に切り替わり二重登録を防ぎます。

【余談】

こうして並べてみると、連絡ボードが、だんだん「使えるもの」になってきました。書ける。見られる。消えない。そして、誰が見たかも分かる。

小さな部品を、一つずつ足しただけです。最初から完成形を目指さず、動くものに、少しずつ足していく。これが、一番むりのない作り方だと、僕は思っています。代返のことも、ログインのことも、必要になったそのときに、また一つ足せばいい。

次回は、いよいよ大詰めです。作ったものを、GitHubという別の場所に、控えておきます。第一回で「往復切符」と呼んだ、あれです。三年前の僕が「まだ勧められない」と書いた、その理由が消えた瞬間を、今度は自分の手で、実際にやってみます。

【（再掲）正直なことを】

僕自身は、ふだんAI Studioを使っていません。
AntigravityIという別の道具の上で、Claudeに書かせています。
Antigravityは、さっきの黒い画面を含む、本格的な作業場です。
（中身はほぼVS CODEなのでVS CODEもつかいます）

矛盾しているように見えますよね。

自分は使わない道具を、なぜ勧めるのか？

宛先が違うからです。

僕がお勧めしているのは、こんな先生方です。
AIとの物作りを、たまに試してみたい先生。
これから初めて触ってみる先生。

止まっているものを動かすとき、最初がいちばん重い。
物が滑り出す、その最初のひと押しです。
理科で習った、静止摩擦係数の話です。

その重さを、できるだけ軽くしたい。
「自分にも作れた」と、一度実感してほしい。
そのための入り口として、AI Studioが一番なだらかなのです。
（もちろんもっと簡単なものもありますが　コストが高いのです）

正直に言えば、僕も考えが変わってきました。
ごく簡単なものなら、これで作ろうと思っています。
石窯を持っていても、パンはお店で買う日があるように。

今日はここまで