💊

お薬飲んだボタンを作りました

に公開
Angular
Gemini
OpenCode
idea

こんにちは。今回は、日々の「お薬を飲む」という当たり前だけど大切な習慣を、全力で肯定してくれるWebアプリ「お薬飲んだボタン」を作成したのでご紹介します。

1. 作ったもの

「お薬を飲んだ」というアクションに対して、自分を褒めるためのシンプルなボタンアプリです。

2. どんなサービス？

毎日お薬を飲むのは、意外と根気がいることです。体調が悪い時や忙しい時はとくに、飲み忘れてしまったり、飲むこと自体が億劫になったりすることもあります。

このサービスは、そんな時に 「お薬を飲んだ自分、えらい！」 と思えるきっかけを作るために作りました。

特徴

  • 全力で褒めてくれる: ボタンを押すと、20種類のランダムな褒め言葉が表示されます。
  • X (Twitter) 連携:「お薬を飲みました。えらい！」というメッセージを、そのままXにポストして共有できます。
  • 目に優しいUI: 落ち着いた緑色のテーマカラーを採用し、体調が優れない時でも見やすいデザインにしています。

技術スタック

  • Framework: Angular 19 (最新の機能を使用）
  • UI Components: Angular Material
  • Styling: Tailwind CSS
  • Deployment: GitHub Pages

3. OpenCodeを使ってみて

今回の開発では、AIエージェントの OpenCode (Gemini) をフル活用しました。

開発体験の変化

OpenCodeに「こんな機能が欲しい」「デザインはこうしたい」と伝えるだけで、ボイラープレートの作成からTailwindのスタイル調整、さらにはGitHub Pagesへのデプロイ準備まで、対話形式でスムーズに進めることができました。

とくに印象的だったのは以下の点です：

  • コンテキストの理解: プロジェクト全体の構造を把握した上で、最適なAngularコンポーネントの構成を提案してくれました。
  • 高速なイテレーション:「ボタンをもう少し大きく」「メッセージをランダムにして」といった細かい修正も、コードを直接書き換えてくれるため、爆速でプロトタイプが完成しました。

まとめ

AIエージェントと一緒に作る開発は、単なるコード生成を超えて「ペアプログラミング」に近い感覚でした。今回のようなシンプルなWebアプリであれば、アイデアから形にするまで数時間もかかりません。

皆さんもぜひ、AIエージェントを相棒にして自分だけの「ちょっと便利なツール」を作ってみてください！

Discussion