# 草野球募集掲示板アプリ開発
## プロジェクト概要
草野球チームの募集や試合の対戦相手を見つけるための掲示板アプリを個人で開発しました。ユーザーに直感的で使いやすいUIを提供し、広告のない快適な操作性を実現しました。また、リアルタイムチャット機能やプッシュ通知機能を実装することで、利便性を向上させています。
---
## 技術スタック
| 技術カテゴリ | 使用技術 |
|-----------------|-------------------------------------|
| **バックエンド** | Laravel, PHP |
| **フロントエンド**| Vue.js, TypeScript |
| **インフラ** | さくらサーバー, Vercel |
| **CI/CD** | GitHub Actions |
| **通信プロトコル**| REST API |
| **サードパーティ**| Pusher (リアルタイムチャット) |
| | Google OAuth (サードパーティーログイン) |
| | Firebase Cloud Messaging (FCM) (プッシュ通知) |
---
## 開発・実装内容
### 1. ユーザー登録と認証機能の導入
- **概要**: Google OAuthを活用した簡易ログイン機能を実装。
- **課題**: サードパーティ認証の仕組みを理解する必要があり、初期設定に時間がかかりました。
- **工夫**:
- Google OAuthのドキュメントを読み込み、Laravelの認証ライブラリと統合。
- 最低限のユーザー情報のみを取得し、簡易的にアカウントを作成。
- **成果**: ユーザーの登録ハードルを下げ、直感的かつスムーズなログイン体験を実現しました。
---
### 2. チャット機能の実装
- **概要**: Pusherを活用したリアルタイムチャット機能を導入。
- **課題**: WebSocketの基礎知識が不足しており、データの同期や通信処理の実装に苦労しました。
- **工夫**:
- Pusherの公式ドキュメントを活用し、シンプルなチャット機能を構築。
- フロントエンド（Vue.js）でリアルタイムにメッセージを更新する仕組みを作成。
- **成果**: ユーザー同士がスムーズに連絡を取れるリアルタイム通信機能を提供しました。
---
### 3. プッシュ通知機能の導入
- **概要**: Firebase Cloud Messaging (FCM)を使用してWebプッシュ通知を実装。
- **課題**:
- iOSのPWAがプッシュ通知に対応しておらず、一部ユーザーへの通知機能を提供できませんでした。
- 通知のトリガーや送信データのフォーマットに関するエラーが発生しました。
- **工夫**:
- Firebaseコンソールで通知のテンプレートを作成し、バックエンドで動的にトリガーを管理。
- Android向けに限定し、通知が正常に届くまで繰り返しテスト。
- **成果**: Androidユーザー向けに通知機能を提供し、試合スケジュールや新しい募集情報をリアルタイムで通知可能にしました。
---
### 4. CI/CDパイプラインの構築
- **概要**: GitHub Actionsを用いたデプロイプロセスの自動化。
- **課題**: さくらサーバーへのSSH接続設定が複雑で、何度も接続エラーが発生しました。
- **工夫**:
- GitHub Secretsを利用し、SSH接続情報を安全に管理。
- **成果**: デプロイプロセスを自動化することで、本番環境へのリリースを効率化し、手動での作業ミスを削減しました。
---
## 成果と学び
### **よかった点**
- 初めての0→1開発を通じて、技術選定から設計、リリースまでの一連の流れを体験することができました。
- 未経験の技術（PusherやFirebase Cloud Messagingなど）を学びながら実装し、スキルの幅を広げることができました。
- CI/CDの構築により、本番環境へのデプロイを効率化する経験を得ました。
### **反省点**
- iOSのPWA対応が不十分で、すべてのユーザーに一貫した機能を提供することができませんでした。
- CORSやSameSite属性の設定に予想以上の時間を要し、リリーススケジュールに影響しました。
- 実装の一部にリファクタリングが必要な箇所が残っており、技術的負債として課題が残っています。
---
## 学びと今後の改善点
- **ユーザー調査**: リリース前にiOSユーザーを含む多様なデバイスでの動作確認を行う必要性を痛感しました。
- **リファクタリングの習慣化**: 将来的な保守性を高めるため、実装段階でコードレビューやリファクタリングを定期的に行う仕組みを整えることを目指します。
- **スケーラビリティの追求**: 今回のプロジェクトで得た知識を活用し、今後はより多機能でスケーラブルなシステムを開発したいと考えています。