SBM Application UI 設計コンセプト
生活記録やスケジュールの管理、生活振り返り分析機能を備えた 使いやすいインターフェースを目指しています。
- 自分の生活記録を整理・管理したい方
- データを基にした行動分析に興味がある方
- 日々のスケジュールを簡単に設定し、管理したい方
- Vue.js やフロントエンド技術に触れてみたい開発者
テスト環境は以下の URL からアクセスできます。
-
この環境は開発中の Beta 版です
現在、実装途中の機能やデザインが含まれており、一部の動作や表示が最終版と異なる場合があります。 -
データリセットの可能性
テスト環境では、不定期にデータが初期化される場合がありますのでご了承ください。
-
秘密情報の入力はお控えください
テスト環境は開発中のため、セキュリティ機能の実装や設定が十分ではない部分があります。個人情報や機密性の高い情報の入力は行わないようお願いいたします。
-
動作保証について
テスト環境での動作は安定性を保証するものではありません。 本番環境ではないことをご留意ください。 -
フィードバックのお願い
発見されたバグ、不具合、改善点については、 GitHub のIssuesからお知らせいただけると幸いです。
バージョン: v0.1.0-beta
ベータ版リリース日: 2024 年 11 月 30 日
このバージョンは開発中のベータ版です。
本番環境リリース(v1.0.0)予定となっています。
- 生活記録の管理: 日々の記録を簡単に追加、編集、削除可能。
- カレンダー表示: 直感的なイベント管理ができる Vue Cal を採用。
- 分析機能: 生活記録データを基に視覚的な分析が可能。(※現在開発中)
- レスポンシブデザイン: スマートフォンやタブレットでも快適に利用可能。
- 認証機能: JWT トークンを活用したセキュアな認証プロセス。
- Vue.js 3: フロントエンドフレームワーク
- Vuetify 3: UI コンポーネントライブラリ
- Vue Router: ルーティング管理
- Axios: API 通信
- JWT: 認証トークン管理
- Cypress: E2E テスト(※予定)
- AWS: デプロイ環境(EC2、RDS)
- GitHub Actions: CI/CD パイプライン管理
- Node.js(推奨バージョン: 16.x 以上)
- npm または yarn
ローカル環境での動作には、.env ファイルが必要です。以下の手順で設定してください。
プロジェクトルートにある .env.example を .env ファイルを作成してにコピーします。
必要に応じて値を設定してください。
.env ファイルは .gitignore に追加されているため、リモートにはプッシュされません。
環境変数の設定例:(.env.example は下記内容と同じです)
以下の内容をルートディレクトリに .env
ファイルとして記載してください。
VITE_BASE_URL=/
VITE_API_BASE_URL=http://localhost:8080/api/v1
git clone https://github.com/kaminuma/sbm-application_UI.git
cd sbm-application_UI
npm install
npm run dev
このプロジェクトでは、JWT トークンを活用してユーザー認証を行います。
-
生活記録分析機能
ボタンは実装されていますが、分析ロジックが未実装のため、要件定義とバックエンド連携が必要です。AI による分析機能を予定しており、API 側からの実装となります。
-
JWT 認証の改善
トークンリフレッシュとログインリダイレクト機能の最適化。注意 現在トークンの有効期限が切れると 403 が返ってくるだけになっているため、修正が必要です。
-
レスポンシブデザイン
さらなるスマートフォン対応を目指して微調整中。
- 生活記録分析機能の完成
- E2E テストの導入(Cypress)
- デザイン統一のためのスタイルガイド作成
バグ報告や機能リクエストは、Issues をご利用ください。