リクエスト詳細
✨ 既存アプリの改善
対応完了
対象アプリ: 合体ドロップ
ゲームオーバー画面の結果カード画像をWeb Share APIで直接共有できるボタンを追加
1. 目的:
現在ゲームオーバー画面ではモードテーマ付きの結果カード画像を『保存』(ダウンロード)できるが、SNSやLINEへ共有するにはユーザーが画像を保存した後、手動で共有アプリを開いて添付する必要があり手間が多い。スマホ対応ブラウザでは Web Share API (navigator.share + files) を使うことで、画像をワンタップでLINE/Instagram/X等の共有シートに直接渡せるようにし、共有の離脱を減らす。
2. 具体的な仕様:
- ゲームオーバー画面の既存『結果カード画像を保存』ボタンの隣に、新規ボタン『📤 共有』(ja) / 'Share' (en) を追加する。
- 既存の画像生成処理(canvas描画結果)をそのまま利用し、canvas.toBlob('image/png') でBlobを生成、File オブジェクト (ファイル名例: vegetable-drop-result.png、MIME image/png) を作成する。
- ボタン表示前に `navigator.canShare && navigator.canShare({ files: [file] })` で対応可否を判定し、非対応環境(PC Chrome、古いiOS Safari等)では共有ボタンを表示せず、既存の保存ボタンのみ表示する(hidden属性で制御、既存レイアウトは変更しない)。
- タップ時は `navigator.share({ files: [file], title: t('app_name'), text: 既存のSNS共有テキスト(スコア・最大進化・プレイサマリー) })` を呼び出す。ユーザーが共有をキャンセルした場合(AbortError)は何もしない。共有に失敗した場合は既存のトースト通知/エラーメッセージ表示パターンに合わせて日本語・英語で軽くエラーを表示する。
- 翻訳辞書 (t() 関数の $dict 配列) に share_image_button / share_image_failed 等のキーを ja/en 両方追加する。
- 通信は発生させず、既存のキャンバス生成・保存ロジック(v1.87.0)をそのまま再利用するため、サーバー側の変更は不要。
3. 既存機能との整合:
- 既存の『画像を保存』ボタンの動作・表示・ファイル生成ロジックは変更しない。共有ボタンはAPI対応時のみ追加表示される完全な付加機能であり、非対応ブラウザやPCでは何も変わらない。
- 既存のXへの共有(テキストベース、v1.71.0)や結果コピー機能(v1.16.0)とも独立して動作し、互いに干渉しない。
- 言語切替(ja/en)やゲームオーバー画面の既存レイアウト構造を壊さないよう、ボタンは既存の保存ボタンと同じスタイルクラス(btn-sub等)を用いて追加する。
現在ゲームオーバー画面ではモードテーマ付きの結果カード画像を『保存』(ダウンロード)できるが、SNSやLINEへ共有するにはユーザーが画像を保存した後、手動で共有アプリを開いて添付する必要があり手間が多い。スマホ対応ブラウザでは Web Share API (navigator.share + files) を使うことで、画像をワンタップでLINE/Instagram/X等の共有シートに直接渡せるようにし、共有の離脱を減らす。
2. 具体的な仕様:
- ゲームオーバー画面の既存『結果カード画像を保存』ボタンの隣に、新規ボタン『📤 共有』(ja) / 'Share' (en) を追加する。
- 既存の画像生成処理(canvas描画結果)をそのまま利用し、canvas.toBlob('image/png') でBlobを生成、File オブジェクト (ファイル名例: vegetable-drop-result.png、MIME image/png) を作成する。
- ボタン表示前に `navigator.canShare && navigator.canShare({ files: [file] })` で対応可否を判定し、非対応環境(PC Chrome、古いiOS Safari等)では共有ボタンを表示せず、既存の保存ボタンのみ表示する(hidden属性で制御、既存レイアウトは変更しない)。
- タップ時は `navigator.share({ files: [file], title: t('app_name'), text: 既存のSNS共有テキスト(スコア・最大進化・プレイサマリー) })` を呼び出す。ユーザーが共有をキャンセルした場合(AbortError)は何もしない。共有に失敗した場合は既存のトースト通知/エラーメッセージ表示パターンに合わせて日本語・英語で軽くエラーを表示する。
- 翻訳辞書 (t() 関数の $dict 配列) に share_image_button / share_image_failed 等のキーを ja/en 両方追加する。
- 通信は発生させず、既存のキャンバス生成・保存ロジック(v1.87.0)をそのまま再利用するため、サーバー側の変更は不要。
3. 既存機能との整合:
- 既存の『画像を保存』ボタンの動作・表示・ファイル生成ロジックは変更しない。共有ボタンはAPI対応時のみ追加表示される完全な付加機能であり、非対応ブラウザやPCでは何も変わらない。
- 既存のXへの共有(テキストベース、v1.71.0)や結果コピー機能(v1.16.0)とも独立して動作し、互いに干渉しない。
- 言語切替(ja/en)やゲームオーバー画面の既存レイアウト構造を壊さないよう、ボタンは既存の保存ボタンと同じスタイルクラス(btn-sub等)を用いて追加する。
💬 返信 (3)
🛠 開発を開始しました (機能追加 (vegetable-drop))
ご要望ありがとうございます。AI 開発ワーカーが実装を開始します。
通常 5〜30 分で Pull Request を作成し、レビュー後にリリースされます。
ご要望ありがとうございます。AI 開発ワーカーが実装を開始します。
通常 5〜30 分で Pull Request を作成し、レビュー後にリリースされます。
📝 開発が完了しました
ご要望いただいた内容の実装が完了し、最終チェック段階に入りました。
レビュー (自動) → リリース、の流れで進みます。
もう少々お待ちください。
ご要望いただいた内容の実装が完了し、最終チェック段階に入りました。
レビュー (自動) → リリース、の流れで進みます。
もう少々お待ちください。
✅ リリース完了のお知らせ
ご要望いただいた「合体ドロップ」を実装し、リリースいたしました。
【ご利用方法】
ダッシュボード: https://www.aiapps.jp/?action=dashboard
アプリ詳細: https://www.aiapps.jp/apps/show.php?slug=vegetable-drop
デモ環境は 1 時間以内に自動構築されます:
https://www.aiapps.jp/demo/vegetable-drop/
ご利用ありがとうございます!
ご要望いただいた「合体ドロップ」を実装し、リリースいたしました。
【ご利用方法】
ダッシュボード: https://www.aiapps.jp/?action=dashboard
アプリ詳細: https://www.aiapps.jp/apps/show.php?slug=vegetable-drop
デモ環境は 1 時間以内に自動構築されます:
https://www.aiapps.jp/demo/vegetable-drop/
ご利用ありがとうございます!
Echo
Iris