スーモを使用してタワーマンション物件を取得し、ユーザーが「いいね」した物件を自動的にスプレッドシートに一覧化するウェブアプリケーションの仕様書です。

ウェブアプリケーション概要

このアプリケーションは、ユーザーがタワーマンション物件情報を閲覧し、「いいね」機能でお気に入りに追加した物件をスプレッドシートで自動管理することを目的とします。物件の賃料、間取り、画像などの情報がスプレッドシートに一覧化され、ユーザーが簡単に管理・閲覧できるようにします。

使用するサービス・API

• スーモ: 物件情報の提供元（HTMLスクレイピングまたはAPIで情報取得）
• Googleスプレッドシート API: データをGoogleスプレッドシートに自動で保存

対象ユーザー

タワーマンション物件を探している人、または複数物件の賃料や間取りを一元管理したい不動産エージェント

機能要件

1. 物件情報取得

• データソース: スーモの物件情報ページ
• 取得する情報:
• 物件名
• 賃料
• 間取り
• 広さ（専有面積）
• 所在地
• 最寄り駅
• 物件の画像URL
• 取得方法:
• スーモにAPIが存在しない場合は、HTMLスクレイピングによって情報を取得。

2. 物件閲覧画面

• 機能:
• 物件一覧表示
• 物件ごとの詳細情報（賃料、間取り、広さ、最寄り駅、画像など）の表示
• 「いいね」ボタン：物件ごとに「いいね」ボタンを配置し、クリックでお気に入りに追加

3. 「いいね」機能

• 説明: ユーザーが「いいね」ボタンをクリックすると、その物件情報が自動的にGoogleスプレッドシートに保存されます。
• 実装方法:
• いいねボタンをクリック時に、物件情報をAPI経由でGoogleスプレッドシートに送信
• スプレッドシートに新規行として物件情報を追加

4. Googleスプレッドシート連携

• データ保存形式:
• カラム: 「物件名」「賃料」「間取り」「広さ」「所在地」「最寄り駅」「画像URL」「いいね追加日時」
• 連携方法:
• GoogleスプレッドシートAPIを使用し、いいねした物件情報を追加
• 既存の物件がいいねされた場合は、重複行を作成せず更新

非機能要件

1. セキュリティ

• スプレッドシートAPIの認証にはOAuth 2.0を使用し、ユーザーのGoogleアカウントに接続
• ユーザーのデータを適切に保護するための暗号化

2. パフォーマンス

• HTMLスクレイピングの頻度制限（スーモサイトに負荷をかけないようにキャッシュ機能を実装）
• Googleスプレッドシートへのデータ送信の最適化

3. 対応プラットフォーム

• モバイルとデスクトップ両方での操作がスムーズに行えるようにレスポンシブデザインを採用

技術スタック

フロントエンド

• React.js: ユーザーインターフェース構築
• BootstrapまたはTailwind CSS: レスポンシブデザイン

バックエンド

• Node.js + Express: APIサーバー構築
• Puppeteer: スーモのデータ取得（スクレイピングに使用）
• Google Sheets API: データ保存先との連携

画面フロー

1. ホーム画面: タワーマンション物件の一覧表示
• 物件のサムネイル、賃料、間取り、所在地の簡易情報を一覧表示
2. 物件詳細画面: 物件の詳細情報表示
• いいねボタンが配置され、クリックでスプレッドシートに保存
3. 「いいね」リスト画面: いいねした物件のみを表示（スプレッドシートの内容が反映）

開発ステップ

1. プロトタイプ作成: 画面デザイン、基本的なUI/UXの確認
2. フロントエンド構築: React.jsで物件一覧画面と詳細画面を実装
3. バックエンド構築: ExpressサーバーとPuppeteerでのデータ取得ロジックの実装
4. Googleスプレッドシート連携: いいね機能の実装とデータ保存
5. テスト: 各機能の単体テストと統合テスト
6. リリース準備: デプロイおよび最終確認