概要(対象を訂正)
ユーザー不具合報告(smalruby.app): モバイルで「カメラボタン」が動作しない。
⚠️ ここでの「カメラボタン」は webcam/コスチューム撮影ではなく、
スクリプトエリアにある「プログラムのスクリーンショットを撮る」ボタンのこと(報告者が明示):
- Code タブ:
class="blocks-screenshot-button_screenshotButton_..."(BlocksScreenshotButton)
- Ruby タブ:
class="ruby-tab_zoomButton_..."(カメラアイコン、data-testid="ruby-screenshot")
関連: フィードバック Discussion smalruby/smalruby3-develop#93
仕組み(実装)
- Code タブ:
src/components/blocks-screenshot-button/blocks-screenshot-button.jsx(blocks.jsx でレンダリング)
→ src/lib/blocks-screenshot.js(ブロックを SVG→canvas→PNG 化)→ src/lib/download-blob.js で DL。
- Ruby タブ:
ruby-tab.jsx の ruby-screenshot ボタン → src/lib/ruby-screenshot.js(Monaco を PNG 化)→ download-blob.js で DL。
- ボタン自体はモバイルでも表示される(報告者がクラス名を確認)。生成後の DL が発火しないのが疑い。
想定原因(要確認)
src/lib/download-blob.js は <a download>.click() 方式。モバイル、特に iOS Safari は download 属性を無視し、
'download' in HTMLAnchorElement.prototype は true でも実際の保存が起きない(無反応に見える)。
= 画像は生成されるが端末に保存されない/何も起きない、という挙動になりうる。
⚠️ 再現と進め方(重要・前回 30 分ハングの反省)
このバグは headless コンテナでも、デスクトップ Chrome の Playwright でも再現できない(実機モバイル
= iOS Safari の DL 挙動依存)。したがって:
- dev server(
npm start 等のブロッキング前景プロセス)を起動しないこと。 起動すると終了せずタイムアウトする。
- 実機が要る再現に時間を溶かさないこと。 ブラウザを立ち上げて再現を試みる必要はない。
- 進め方:
- コード調査で原因を特定(
download-blob.js のモバイル/iOS 経路、blocks-screenshot.js / ruby-screenshot.js)。
- モバイルフレンドリーな保存方式に改修(例:
navigator.share/Web Share API が使えればそれ、
ダメなら blob を新規タブで開いて「長押しで保存」できるようにする等)。デスクトップ既存挙動は維持。
- 可能な範囲で jest unit/integration テストを足す(DL 経路の分岐選択ロジックを純粋に検証。
実機 DL 挙動自体は jsdom で再現できないので、分岐ロジックのテストで可)。
- 実機確認は人間が行う前提で、実装できたら HITL(
AUTOPILOT_HITL)で「実機モバイルでの DL 確認を依頼」する。
- もし調査だけで原因が確証できない場合も、スピンせず早めに HITL(分かったこと・推定原因を添えて)。
DoD
概要(対象を訂正)
ユーザー不具合報告(smalruby.app): モバイルで「カメラボタン」が動作しない。
関連: フィードバック Discussion smalruby/smalruby3-develop#93
仕組み(実装)
src/components/blocks-screenshot-button/blocks-screenshot-button.jsx(blocks.jsxでレンダリング)→
src/lib/blocks-screenshot.js(ブロックを SVG→canvas→PNG 化)→src/lib/download-blob.jsで DL。ruby-tab.jsxのruby-screenshotボタン →src/lib/ruby-screenshot.js(Monaco を PNG 化)→download-blob.jsで DL。想定原因(要確認)
src/lib/download-blob.jsは<a download>.click()方式。モバイル、特に iOS Safari はdownload属性を無視し、'download' in HTMLAnchorElement.prototypeは true でも実際の保存が起きない(無反応に見える)。= 画像は生成されるが端末に保存されない/何も起きない、という挙動になりうる。
このバグは headless コンテナでも、デスクトップ Chrome の Playwright でも再現できない(実機モバイル
= iOS Safari の DL 挙動依存)。したがって:
npm start等のブロッキング前景プロセス)を起動しないこと。 起動すると終了せずタイムアウトする。download-blob.jsのモバイル/iOS 経路、blocks-screenshot.js/ruby-screenshot.js)。navigator.share/Web Share API が使えればそれ、ダメなら blob を新規タブで開いて「長押しで保存」できるようにする等)。デスクトップ既存挙動は維持。
実機 DL 挙動自体は jsdom で再現できないので、分岐ロジックのテストで可)。
AUTOPILOT_HITL)で「実機モバイルでの DL 確認を依頼」する。DoD