LINEで招待状を共有する

日本語(ja)ロケールでは、LINEメッセンジャーを通じて招待状を共有できます。2つの共有方式に対応しています。

共有方法の概要

モバイル

デスクトップ

デスクトップブラウザでは、LIFF shareTargetPickerのSSO認証・ポップアップブロック・サードパーティCookie制限などの技術的制約により、Flexメッセージ共有が正常に動作しません。そのため、デスクトップでは「LINEで送る」基本共有ボタンのみ表示されます（メインボタンスタイル）。

方法1: 基本共有（LINEで送る）

最もシンプルな方法で、LINE social-plugins URLスキームを使用します。

動作の流れ:

1. ボタンをクリック
2. LINE共有ポップアップ（またはアプリ）が開く
3. 共有する友達またはグループを選択
4. URLとタイトルがテキストとして送信される

特徴:

• LINEログイン不要
• デスクトップ・モバイル両方に対応
• シンプルなURL＋テキスト形式で共有
• OG設定済みならリンクプレビューにサムネイルが表示される

表示の特徴:

• URLが大きく表示され、サムネイル画像は小さく表示される
• テキストメッセージ形式のため、チャット画面での見た目はシンプル
• 受信者がリンクをタップするとOGプレビュー（小さいサムネイル＋タイトル＋説明）が展開される

方法2: Flexメッセージ共有（LINEで友達に送る）※モバイル専用

LIFF SDKのshareTargetPickerを使用して、リッチカード（Flex Message）形式で共有します。 基本共有と異なり、大きなヒーロー画像付きのカードとしてチャットに表示されるため、視覚的なインパクトが大きく、招待状の印象をより効果的に伝えられます。

動作の流れ:

1. ボタンをクリック
2. LINEログインが必要な場合 → LINEアプリのLIFFブラウザに自動遷移
3. ログイン完了後、shareTargetPickerが自動実行
4. 友達・グループ選択画面が表示
5. 選択した相手にFlex Messageカードが送信される

Flex Messageカードの構成

カードはLINEのFlex Message Bubble形式で構成されます：

┌─────────────────────────┐
│                         │
│   ヒーロー画像           │
│   （1.91:1 比率）        │
│                         │
├─────────────────────────┤
│ 招待状タイトル（太字）    │
│ 説明テキスト（グレー）    │
├─────────────────────────┤
│   ┌───────────────────┐ │
│   │   招待状を見る      │ │
│   │  （LINEグリーン）   │ │
│   └───────────────────┘ │
└─────────────────────────┘

各エリアの詳細：

LINEログインフロー

Flexメッセージ共有にはLINEログインが必要です。フローは以下の通りです：

ユーザーが「LINEで友達に送る」をクリック
    ↓
LIFFログイン状態を確認
    ├─ ログイン済み → shareTargetPickerをすぐ実行
    └─ 未ログイン
        ↓
    liff.line.me/{LIFF_ID}/{現在のパス} にリダイレクト
        ↓
    LINEアプリのLIFFブラウザでページが開く（自動ログイン）
        ↓
    liff.isInClient() === true を検知
        ↓
    shareTargetPicker を自動実行

OG画像の推奨サイズ

LINEで最適に表示するための画像サイズ：

技術的な実装詳細

使用コンポーネント

LINE共有機能は以下の3つのコンポーネントに実装されています：

LIFF SDK設定

ミドルウェア liff.state 処理

LIFFリダイレクト時にliff.stateパラメータを通じて元のパスを復元します：

• 場所: src/middleware.ts（セクション2）
• 条件: pathname === '/' かつ liff.stateクエリパラメータがある場合
• 動作: liff.stateの値をpathnameに設定してリダイレクト
• 目的: LINEアプリからLIFFブラウザに入った際、元の共有ページに復元

よくある質問

デスクトップで「LINEで友達に送る」ボタンが表示されません

これは仕様です。デスクトップブラウザでは、LIFF shareTargetPickerが以下の理由で正常に動作しないため、モバイルのみに表示しています：

• SSOセッション未発行: 外部ブラウザのauto-loginではSSOセッションが発行されず、タ―ゲットピッカーの代わりにメール/パスワードログイン画面が表示される
• ポップアップブロック: ブラウザがshareTargetPickerのポップアップウィンドウをブロックする場合がある
• サードパーティCookie制限: Safari ITP、Firefox ETP、Chromeなどがクロスドメインのcookieを制限

デスクトップからは「LINEで送る」基本共有ボタンをご利用ください。

Flexメッセージが送信できません

確認してください：

• モバイル端末から操作しているか確認（デスクトップでは利用不可）
• 招待状が「公開済み」ステータスか確認
• LINEログインが正常に完了しているか確認
• NEXT_PUBLIC_LINE_LIFF_ID環境変数が設定されているか確認

ボタンが無効状態です

LIFF SDKの読み込み中です。しばらく待ってから再試行してください。SDK読み込みに失敗した場合は「LINEで送る」基本共有ボタンをお使いください。

モバイルでLINEアプリが開きません

基本共有（「LINEで送る」）は別のポップアップ/タブで開きます。LINEアプリがインストールされていれば自動的にアプリに切り替わります。Flexメッセージ共有（「LINEで友達に送る」）はliff.line.meURLを通じてLINEアプリのLIFFブラウザで直接開きます。

関連ドキュメント

• 招待状を共有する
• OG設定ガイド
• 分析ガイド