作品はコチラ:https://portfoliofu.shop/renew

アプリケーション概要

契約更新や保守期限を管理し、コストを可視化するためのWebアプリです。実務での長期利用を想定し、「安定動作」と「使い勝手」を両立させました。

  • 開発手法: Gemini 高速モード (Canvas機能) を活用した対話型開発
  • 開発時間: 約4時間30分（5時間設定のプロジェクト）
  • 技術構成: HTML5 / CSS3 (Tailwind CSS) / JavaScript (Vanilla JS)

制作の背景とこだわり

1. Gemini Canvasによる効率的な具現化

最新のAI機能である GeminiのCanvasモード を開発パートナーとして活用しました。

  • 対話による構築: 自分が「こんな機能が欲しい」と構想を言語化し、AIがそれに応じた最適なコードを提案・即時反映。
  • UIの高速反復: AIとコードを共有・共同編集できるCanvas機能を活かし、複雑な計算ロジックやレスポンシブデザインの微調整を短時間で実現しました。

2. 「数年後も動く」ための非依存設計

外部ライブラリを最小限に抑え、Vanilla JSを中心に構築することにこだわりました。

  • メンテナンスフリー: 急なライブラリの仕様変更やサポート終了でアプリが使えなくなるリスクを排除。ポートフォリオとして掲載し、就活時に提示する際も「確実に動作する」信頼性を重視しました。
  • 拡張性の確保: 将来的にサーバー保存への切り替えやPWA化がスムーズに行えるよう、データの処理構造をあらかじめ整理して設計しています。

3. 実務目線の機能設計

  • 自動計算ロジック: 更新日が過ぎた際の自動更新処理や、月額/年額のコスト換算を自動化。
  • 運用サポート: 操作ミスを防ぐ「履歴ログ」や、期限に応じたステータスの自動変化など、実際の業務フローで役立つ機能を搭載。

🚀 今後の展望

  • サーバー同期: 複数デバイス（PC・スマホ）でのデータ共有。
  • PWA対応: モバイルアプリのような操作感とオフライン利用の実現。