# 画面設計書 55-インポート画面

## 概要

本ドキュメントは、Fizzyアプリケーションにおけるインポート画面の設計仕様を記述したものである。

### 本画面の処理概要

本画面は、他のFizzyアカウントからエクスポートしたデータをインポートするための画面である。セルフホスト版からfizzy.doへの移行、またはその逆のケースで使用される。

**業務上の目的・背景**：Fizzyはクラウド版（fizzy.do）とセルフホスト版の両方を提供している。ユーザーがホスティング形態を変更する際に、データを移行できるようにする必要がある。本画面では、エクスポートしたZIPファイルをアップロードし、新しいアカウントにデータをインポートできる。これにより、ボード、カード、ユーザー情報などを完全に移行できる。

**画面へのアクセス方法**：URLパス `/account/imports/new` に直接アクセスする。この画面はpublicレイアウトを使用し、アカウントスコープ外でアクセスされる。

**主要な操作・処理内容**：
1. エクスポートされたZIPファイルを選択する
2. 「Start Import」ボタンをクリックしてインポート処理を開始する
3. インポート処理が開始されると、インポート状況画面にリダイレクトされる

**画面遷移**：直接URLでアクセスする。「Start Import」後はインポート状況画面（/account/imports/:id）にリダイレクトされる。問題がある場合はサポートメール（support@fizzy.do）へ誘導される。

**権限による表示制御**：ログイン済みユーザーであればアクセス可能。インポート処理は新規アカウントを作成して実行されるため、特別な権限は不要。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 78 | アカウントデータインポート | 主機能 | 他のFizzyアカウントからデータをインポート |

## 画面種別

登録

## URL/ルーティング

| メソッド | パス | アクション |
|---------|------|-----------|
| GET | /account/imports/new | new（インポート画面表示） |
| POST | /account/imports | create（インポート処理開始） |

## 入出力項目

| 項目名 | 項目ID | 型 | 必須 | 入力形式 | 説明 |
|--------|--------|-----|------|----------|------|
| ファイル | file | file | ○ | ファイル選択 | エクスポートされた.zipファイル |

## 表示項目

| 項目名 | 説明 |
|--------|------|
| ページタイトル | "Import an account" |
| メイン見出し | "Import a Fizzy account" |
| SaaSモード説明（fizzy.do） | "Running Fizzy on your own server and want us to host on fizzy.do instead?" |
| セルフホスト説明 | "Ready to host Fizzy on your own server?" |
| ファイル選択ボタン | "Choose a file..." |
| 開始ボタン | "Start Import →" |
| サポートリンク | "send us an email" (mailto:support@fizzy.do) |

## イベント仕様

### 1-ファイル選択

ファイル入力フィールドでZIPファイルを選択する。

1. upload-previewコントローラがファイル名を取得
2. "Choose a file..."プレースホルダーが選択されたファイル名に置き換わる
3. ファイルは.zip形式のみ許可（accept=".zip"）

### 2-Start Import ボタン押下

インポート処理を開始する。

1. フォームバリデーション（ファイル必須）
2. POSTリクエストを `/account/imports` に送信
3. サーバー側でSignupモデルを使用して新規アカウントを作成
4. 新規アカウントのコンテキストでインポートレコードを作成
5. インポートジョブをキューに追加（process_later）
6. インポート状況画面にリダイレクト

## データベース更新仕様

### 操作別データベース影響一覧

| 操作（イベント） | 対象テーブル | 操作種別 | 概要 |
|----------------|-------------|---------|------|
| Start Import押下 | accounts | INSERT | 新規アカウント作成 |
| Start Import押下 | users | INSERT | インポート実行者のユーザー作成 |
| Start Import押下 | account_imports | INSERT | インポートレコード作成 |
| Start Import押下 | active_storage_blobs | INSERT | アップロードファイル保存 |
| Start Import押下 | active_storage_attachments | INSERT | ファイル関連付け |

### テーブル別更新項目詳細

#### accounts

| 操作 | 項目（カラム名） | 更新値・取得条件 | 備考 |
|-----|-----------------|-----------------|------|
| INSERT | name | "Import" | 仮の名前（後でインポートデータで上書き） |
| INSERT | - | Signup.complete処理 | アカウント作成処理 |

#### account_imports

| 操作 | 項目（カラム名） | 更新値・取得条件 | 備考 |
|-----|-----------------|-----------------|------|
| INSERT | account_id | 新規作成アカウントID | |
| INSERT | identity_id | Current.identity.id | インポート実行者 |
| INSERT | status | "pending" | 初期ステータス |
| INSERT | file | アップロードファイル | Active Storage添付 |

## メッセージ仕様

| 種別 | メッセージ | 表示条件 |
|------|----------|----------|
| 情報（SaaS） | Running Fizzy on your own server and want us to host on fizzy.do instead? Export your self-hosted account, then upload the .zip file below. | SaaSモード時 |
| 情報（セルフホスト） | Ready to host Fizzy on your own server? Export your fizzy.do account, then upload the .zip file below. | セルフホストモード時 |
| 情報 | If you run into issues or would like assistance, just send us an email. | 常時表示 |
| エラー | Couldn't create account. | アカウント作成失敗時 |

## 例外処理

| 例外条件 | 処理内容 |
|---------|---------|
| 未ログイン | ログイン画面にリダイレクト |
| ファイル未選択 | ブラウザ標準バリデーションでエラー表示 |
| アカウント作成失敗 | new画面を再表示、アラート表示 |

## 備考

- publicレイアウトを使用し、通常のアカウントスコープ外で動作
- Signupモデルを使用して新規アカウントを作成（skip_account_seeding: true）
- インポート処理はバックグラウンドジョブ（Account::DataImportJob）で実行
- フッターにセッション関連リンクを表示

---

## コードリーディングガイド

本画面を理解するために参照すべきファイルと、推奨する読み解き順序を以下に示す。

### 推奨読解順序

#### Step 1: データ構造を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | import.rb | `app/models/account/import.rb` | インポートモデル、ステータス管理、処理フロー |
| 1-2 | signup.rb | `app/models/signup.rb` | アカウント作成処理 |

**読解のコツ**: Account::Importはステータス（pending/processing/completed/failed）を持つ。has_one_attached :fileでZIPファイルを管理。

#### Step 2: エントリーポイントを理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | imports_controller.rb | `app/controllers/account/imports_controller.rb` | new/createアクションの実装 |

**主要処理フロー**:
1. **2行目**: layout "public" - 公開レイアウトを使用
2. **4行目**: disallow_account_scope - アカウントスコープ外で動作
3. **9-10行目**: newアクション - フォーム表示
4. **12-19行目**: createアクション - アカウント作成とインポート開始
5. **34-42行目**: start_importメソッド - インポートレコード作成とジョブ実行

#### Step 3: ビューテンプレートを理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | new.html.erb | `app/views/account/imports/new.html.erb` | ファイルアップロードフォーム |

**主要処理フロー**:
- **1行目**: ページタイトル設定
- **6-12行目**: SaaSモードとセルフホストモードで説明文を切り替え
- **15行目**: multipart: trueでファイルアップロードフォーム
- **16-20行目**: ファイル選択UI（upload-previewコントローラ使用）
- **22-24行目**: 送信ボタン
- **27行目**: サポートメールへのリンク
- **30-32行目**: フッター

### プログラム呼び出し階層図

```
ブラウザ
    │
    ├─ GET /account/imports/new
    │      └─ Account::ImportsController#new
    │             └─ render new.html.erb (publicレイアウト)
    │
    └─ POST /account/imports
           └─ Account::ImportsController#create
                  ├─ Signup.new(identity: Current.identity, ...)
                  │      └─ signup.complete → 新規アカウント作成
                  │
                  └─ start_import(signup.account)
                         ├─ Current.set(account: account) do
                         │      └─ account.imports.create!(file: params[:file])
                         │
                         └─ import.process_later
                                └─ Account::DataImportJob.perform_later
```

### データフロー図

```
[入力]                      [処理]                          [出力]

ZIPファイル ────────────▶ ImportsController#create ────────▶ redirect_to
                                 │                            import_path
                                 ▼
                          Signup.complete
                                 │
                                 ▼
                          accounts作成
                                 │
                                 ▼
                          account_imports作成
                          (ファイル添付)
                                 │
                                 ▼
                          DataImportJob
                          (バックグラウンド)
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| imports_controller.rb | `app/controllers/account/imports_controller.rb` | コントローラ | インポート画面制御 |
| import.rb | `app/models/account/import.rb` | モデル | インポートモデル |
| signup.rb | `app/models/signup.rb` | モデル | アカウント作成処理 |
| new.html.erb | `app/views/account/imports/new.html.erb` | ビュー | インポートフォーム |
| data_import_job.rb | `app/jobs/account/data_import_job.rb` | ジョブ | インポート処理 |
| upload_preview_controller.js | `app/javascript/controllers/upload_preview_controller.js` | Stimulus | ファイル名プレビュー |
| form_controller.js | `app/javascript/controllers/form_controller.js` | Stimulus | フォーム制御 |
