【AI と対話してアプリを作る！】 Gemini の Canvas を利用して業務時間計測アプリをゼロから作ってみた

アノテーション、Gemini が大好きな村上です。
複数の業務を兼任していると、「自分はどのタスクにどれくらいの時間を使っているのだろう？」と疑問に思うことがありました。この作業時間を正確に把握し、日々の業務を可視化したい、という個人的なニーズが、今回のアプリケーション作成のきっかけです。

この課題を解決するにあたり、Gemini の Canvas を利用して、アプリの要件定義から実装、機能拡張までを二人三脚で実施しました。

ほぼコードレスで開発できましたが、インフラエンジニアの私にとっては新たな気づきがたくさんありました。私の体験が、皆さんの AI ライフに少しでも役立てば嬉しいです。

Canvas とは

Gemini の Canvas は、文書やコードの作成、編集、プレビュー、共有を一元的に行えるインタラクティブなスペースです。プロンプトバーから「Canvas」を選択することで、リアルタイムでの編集が可能となり、文章のトーンや長さの調整、コードのプレビュー表示など、多彩な機能を提供します。これにより、複数のアプリケーションを切り替えることなく、効率的な作業が実現します。
想像力をさらに広げる Gemini との新しい連携

フェーズ1：プロジェクト始動 - まずは動くタイマーを作る

要件と技術選定

最初に、どのような UI を実装すれば良いか妻に相談しました(笑)
実は、妻もカスタマーサポートを仕事にしていたことがあり、管理系のアプリの UI に詳しいのです。一通り必要になりそうな機能を挙げてもらった後に、Geminiと壁打ちしながら整理しました。

• 基本要件
  • 特定の業務タスク（例: AWS サポート、GCP サポート、上記以外の業務等）の時間を計測できる
  • 始業、終業、休憩といったステータスを管理できる
  • ブラウザを閉じてもデータが消えないように永続化する

この要件を実現するための技術スタックも、シンプルさを重視して選定しました。

• フロントエンド: HTML, CSS, JavaScript
• バックエンド: Firebase (Firestore, Anonymous Authentication)

Firebase を選んだのは、リアルタイム同期が可能なデータベースと、ユーザー登録不要で手軽に始められる匿名認証があったからです。Spark プランなら無料で利用できるというのも助かります。

Firebaseの初期設定

コア機能の実装

課題と必要な基本機能を Gemini に伝えたところ、すぐにプロトタイプができました。UI をある程度指定したことで、Gemini の理解もより正確になったと思います。

いくつかの業務を兼任しています。具体的には、以下の業務になります。

- AWS テクニカルサポート
- Google Cloud テクニカルサポート
- ＊＊＊＊＊＊＊＊＊＊＊
- 上記以外の業務とミーティング

どの業務にどれぐらい時間を使っているか計測可能なアプリを作成してください。また、始業、終業、休憩開始、休憩終了のボタンも実装してください。

ボタンの間隔など細かい部分は調整しましたが、思っていたより Gemini とのやり取りは少なくて済みました。
以下はタイマー機能を実装した UI です。（初期の UI を撮り忘れてしまったので、完成形を掲載しています。）

タイマー機能

フェーズ2：アプリの進化 - 実用的なツールへの道

タイマー機能のみのアプリを実際に使ってみたことで、追加で必要な機能が見えてきました。今後は、それらの機能を順次アプリに追加していきます。ここでも、Gemini との対話が大いに役立ちます。

① レポート機能：作業の可視化

「その日の集計や、週と月の記録が見れるビュー機能を追加してください」、と Gemini に依頼して、日・週・月単位での集計ロジックや、タスク別の円グラフと日別の棒グラフを実装しました。

業務レポート機能

② 実績修正機能： 「しまった！」に対応

タイマーの押し忘れは誰にでもあるものです。「勤務実績を修正できるタブを作成してください」、と Gemini に依頼して、日付を選択すると過去のログを読み込み、時刻やタスク時間を直接修正して Firestore のデータを更新する UI を実装しました。

実績修正機能

③ タスク管理機能：自分だけのタスクを作る

当初はハードコーディングしていたタスク一覧を、「タスク一覧のタスクを追加・削除できるような設定変更タブを作成してください」、と Gemini に依頼してユーザーが自由にタスクを追加・削除できるように改修しました。

設定機能

④ CSV 出力機能：データをもっと自由に

集計データを後から加工できるように、「タイマーレポートにおいて、今日、今週、今月のタスク別合計時間を CSV 出力できる機能を作成してください」、と Gemini に依頼して、CSV 形式でデータをエクスポートする機能を実装しました。

CSV 出力機能

4 つの機能を追加したことで、タイマー機能しかなかった頃と比べて、より実用的なアプリに近づいたと思います！

AI 駆動開発を経験してみて

今回の経験を通して、AI 主導のアプリ作りの楽しさに目覚めました。課題としては、エラー発生時にどうしても実装したい機能を自力で実装できなかったことです。AI 主導といっても、他システムとの連携時などは経験値が必要になることが分かりました。
とりあえず、当初の目的であった日々の業務を可視化するには十分な機能をもったアプリができたので、しばらくはこのまま利用していきます。

今後の展望としては、しっかりした認証機能の実装や、チームでの利用を想定したレポート機能なども試してみたいです。

この記事がどなたかのお役に立てば幸いです。

参考

• 想像力をさらに広げる Gemini との新しい連携
• Gemini Canvas — write, code, & create in one space with AI
• Firebase 公式サイト