# 画面設計書 67-ShareAFact画面

## 概要

本ドキュメントは、Wikipedia iOSアプリのShareAFact画面の設計を記載したものです。この画面は共有用のShare-a-factカードのレイアウトを定義し、画像として書き出すためのビューを提供します。

### 本画面の処理概要

ShareAFact画面は、記事から選択したテキストと記事情報を組み合わせた視覚的に魅力的なShare-a-factカードのレイアウトを定義するViewControllerです。このビューは直接ユーザーに表示されることはなく、画像としてスナップショットを取得するために使用されます。

**業務上の目的・背景**：SNSや他のアプリでWikipediaの情報を共有する際、単純なテキストやURLよりも画像形式のカードの方が視覚的に目を引き、エンゲージメントが高くなります。Share-a-factカードは、選択したテキスト、記事タイトル、関連画像、Wikipediaブランディング、ライセンス情報を含む美しいカード形式で情報を表示し、共有の質を高めます。

**画面へのアクセス方法**：ShareViewControllerから内部的にインスタンス化されます。ユーザーが直接アクセスする画面ではありません。

**主要な操作・処理内容**：
1. 記事のタイトル、選択テキスト、画像を組み合わせたカードレイアウトを構成
2. 言語の方向（LTR/RTL）に応じたセマンティックコンテンツ属性の設定
3. 画像のライセンス情報の表示
4. 記事のCC BY-SAライセンス情報の表示
5. 「Made with the Wikipedia app」のブランディング表示
6. 画像がない場合のレイアウト調整
7. 横長画像の場合のレターボックス表示対応

**画面遷移**：
- 遷移元：なし（内部使用のみ）
- 遷移先：なし（画像として書き出し）

**権限による表示制御**：特になし。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 5 | 記事共有 | 主機能 | 選択したテキストを画像として共有 |

## 画面種別

カードビュー / 内部使用

## URL/ルーティング

該当なし（内部使用のViewController）

## 入出力項目

| 項目名 | 型 | 入力/出力 | 必須 | 説明 |
|--------|-----|----------|------|------|
| articleURL | URL | 入力 | 必須 | 記事のURL（言語方向の判定に使用） |
| articleTitle | String? | 入力 | 任意 | 記事のタイトル |
| text | String? | 入力 | 任意 | 共有するテキスト |
| image | UIImage? | 入力 | 任意 | 記事の画像 |
| imageLicense | MWKLicense? | 入力 | 任意 | 画像のライセンス情報 |

## 表示項目

| 項目名 | 表示位置 | 説明 |
|--------|----------|------|
| articleTitleLabel | 左側または全体 | 記事タイトル |
| textLabel | 左側または全体 | 共有テキスト（引用形式） |
| imageView | 右側 | 記事の画像（ある場合） |
| backgroundImageView | 背景 | 横長画像の背景用 |
| imageContainerView | 右側 | 画像コンテナ |
| separatorView | 左側 | テキストと画像の区切り線 |
| imageGradientView | 画像下部 | 画像のグラデーションオーバーレイ |
| articleLicenseView | 左下 | 記事のCC BY-SAライセンス表示 |
| imageLicenseView | 画像内下部 | 画像のライセンス表示 |
| imageWordmarkView | 画像内下部 | Wikipediaワードマーク（画像あり） |
| imageMadeWithLabel | 画像内下部 | 「Made with the Wikipedia app」（画像あり） |
| textWordmarkView | 左下 | Wikipediaワードマーク（画像なし） |
| textMadeWithLabel | 左下 | 「Made with the Wikipedia app」（画像なし） |

## イベント仕様

### 1-viewDidLoad

画面がロードされた際の初期化処理。

- Theme.standardを適用（常にライトテーマ）
- UIカラーの設定（背景、テキスト、ボーダー等）
- 「Made with the Wikipedia app」のテキスト設定
- imageGradientViewのグラデーション設定（透明から黒へ）

### 2-update(with:articleTitle:text:image:imageLicense:)

カードコンテンツの更新。

- 言語コードに基づくセマンティックコンテンツ属性（RTL/LTR）の設定
- 画像の有無によるisImageViewHiddenの設定
- テキストの段落スタイル設定（行間7pt）
- テキスト長に応じたフォントサイズの動的調整（title3またはcallout）
- 記事タイトルの設定
- 画像ライセンスコードのパースとLicenseView設定
- 記事ライセンス（CC BY SA）の設定
- 横長画像の場合のレターボックス処理

### 3-isImageViewHidden setter

画像の表示/非表示切り替え。

- imageViewTrailingConstraintの調整（非表示時はwidthを追加）
- articleTitleTrailingToTextWordmarkConstraintの有効/無効
- textWordmarkView, textMadeWithLabelの表示切り替え

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

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

この画面ではデータベース操作は発生しません。

## メッセージ仕様

| メッセージID | 種別 | メッセージ内容 | 表示条件 |
|-------------|------|---------------|----------|
| share-a-fact-made-with | ブランディング | Made with the Wikipedia app | 常時 |

## 例外処理

| 例外条件 | 対処 |
|----------|------|
| imageがnil | isImageViewHidden = true でレイアウト調整 |
| imageLicenseがnil | "generic"ライセンスアイコンを表示 |
| テキストが長い | フォントサイズをcalloutに縮小 |

## 備考

- 常にTheme.standardを使用（共有画像は常にライトモード）
- WMFGradientViewを使用した画像オーバーレイ
- MWKLanguageLinkControllerを使用した言語方向の判定
- ライセンスコードは"-"で分割してアイコンを個別表示
- 画像の縦横比を維持しつつレターボックス表示に対応

---

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

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

### 推奨読解順序

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

カードに表示するデータ構造を理解します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | ShareAFactViewController.swift | `Wikipedia/Code/ShareAFactViewController.swift` | IBOutletの一覧とプロパティ構造 |
| 1-2 | LicenseView.swift | `Wikipedia/Code/LicenseView.swift` | ライセンスコードの表示ロジック |

**読解のコツ**: IBOutletが多数定義されており、画像あり/なしの2つのレイアウトパターンに対応しています。

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

ビューの初期化とコンテンツ設定を確認します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | ShareAFactViewController.swift | `Wikipedia/Code/ShareAFactViewController.swift` | viewDidLoad, update(with:) |

**主要処理フロー**:
1. **31-47行目**: viewDidLoad - テーマ適用、UIカラー設定、グラデーション設定
2. **49-111行目**: update(with:) - コンテンツ設定、レイアウト調整

#### Step 3: レイアウト調整を理解する

画像の有無や画像の縦横比に応じたレイアウト調整を確認します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | ShareAFactViewController.swift | `Wikipedia/Code/ShareAFactViewController.swift` | isImageViewHidden, レターボックス処理 |

**主要処理フロー**:
- **113-120行目**: isImageViewHidden setter - 画像非表示時のレイアウト調整
- **91-110行目**: 横長画像のレターボックス処理

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

```
ShareViewController
    |
    +-- createShareAFactCard()
           |
           +-- ShareAFactViewController.init()
           |      +-- viewDidLoad()
           |             +-- Theme.standard適用
           |             +-- UIカラー設定
           |             +-- グラデーション設定
           |
           +-- update(with:articleURL:articleTitle:text:image:imageLicense:)
           |      +-- semanticContentAttribute設定
           |      +-- isImageViewHidden設定
           |      +-- テキストスタイル設定
           |      +-- ライセンス設定
           |      +-- レターボックス処理
           |
           +-- cardView.wmf_snapshotImage()
                  +-- UIImage生成
```

### データフロー図

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

articleURL             --> ShareAFactViewController         --> カードビュー
articleTitle                |
text                        +-- viewDidLoad()
image                       |      |
imageLicense                |      v
                            |   UI初期設定
                            |
                            +-- update(with:)
                            |      |
                            |      v
                            |   コンテンツ設定
                            |      |
                            |      +-- semanticContentAttribute
                            |      +-- textLabel.attributedText
                            |      +-- imageLicenseView.licenseCodes
                            |      +-- レターボックス処理
                            |
                            v
                       wmf_snapshotImage() --> UIImage
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| ShareAFactViewController.swift | `Wikipedia/Code/ShareAFactViewController.swift` | ソース | Share-a-factカードViewController |
| ShareAFactViewController.xib | `Wikipedia/Code/ShareAFactViewController.xib` | NIB | カードレイアウト |
| LicenseView.swift | `Wikipedia/Code/LicenseView.swift` | ソース | ライセンス表示ビュー |
| WMFGradientView.swift | `WMFComponents/Sources/WMFComponents/` | ソース | グラデーションビュー |
| ShareViewController.swift | `Wikipedia/Code/ShareViewController.swift` | ソース | 呼び出し元ViewController |
| MWKLanguageLinkController.swift | `WMF/Sources/WMF/` | ソース | 言語方向判定 |
