feat(gui): add MobileTopBar with run-fullscreen button (Phase 2-C of #572) by takaokouji · Pull Request #584 · smalruby/smalruby3-editor

takaokouji · 2026-04-29T15:05:23Z

Summary

issue #572 Phase 2-C: モバイル用ステージ全画面プレビュー機能の最小実装。

実装

新規コンポーネント: `MobileTopBar`

上部バーに緑の旗 (▶) ボタンのみ配置 (ハンバーガー / プロジェクトタイトルは PR-2E で追加予定)
クリックで以下を一括ディスパッチ:
- setFullScreen(true) (upstream の mode reducer)
- vm.start() (未起動時のみ)
- vm.greenFlag() — 自動実行開始
position: fixed + visualViewport API で viewport 上端に追従 (Phase 1 のバナー、Phase 2-B のボトムタブと同じ仕組み)
isFullScreen=true のときは自身を非表示 (ステージプレビューに専念)

MobileBottomTabs の更新

isFullScreen=true のときは非表示にする条件分岐を追加
Redux state.scratchGui.mode.isFullScreen を購読

MobileGui の構成

<GUI {...props} />
<ConnectedIntlProvider>
    <MobileTopBar />
    <MobileBottomTabs />
</ConnectedIntlProvider>

全画面からの戻り方

upstream の StageHeader が提供する縮小ボタン (画面右上) で全画面解除 → MobileTopBar / MobileBottomTabs が再表示される。

将来的なポリッシュ (PR-2C 後続 or 別 PR):

左上 ✕ ボタンに置き換える (設計メモ通り)
緑旗・サイズモード等の不要なステージヘッダーボタンを mobile では非表示
カスタム停止ボタン (⏹) で「停止 + 戻る」をワンタップで

これらは upstream の StageHeader / Stage の CSS 上書きが必要なので別 PR で実装する想定。

変更ファイル

新規 (Smalruby 固有)

src/components/mobile-top-bar/{mobile-top-bar.jsx,css,index.js} — Top bar 本体
test/unit/components/mobile-top-bar.test.jsx — 4 ユニットテスト (描画 / fullscreen 時非表示 / vm.start 呼出 / isStarted=true で start スキップ)

変更

src/components/mobile-bottom-tabs/mobile-bottom-tabs.jsx — isFullScreen prop で非表示化
src/components/mobile-gui/mobile-gui.jsx — <MobileTopBar /> を追加
test/unit/components/mobile-bottom-tabs.test.jsx — 既存テストに isFullScreen={false} prop 追加

メタファイル

.prettierignore / smalruby-prettier-files.md — 新規ファイルをホワイトリストに追加

検証

ユニットテスト (jest, 12 件)

mobile-top-bar 4 件 (描画、fullscreen 時非表示、▶ クリックで vm.start + vm.greenFlag + setFullScreen、isStarted=true で start スキップ)
mobile-bottom-tabs 8 件 (既存 + isFullScreen prop)

Playwright (Chromium, viewport 390×844)

シナリオ	結果
`?mobile_gui=1` で初期表示	TopBar + BottomTabs 表示、▶ ボタンが視認可能 ✓
▶ クリック	全画面ステージ + 緑旗実行開始 + TopBar/BottomTabs が消える ✓
縮小ボタンで戻る	全画面解除 + TopBar/BottomTabs 再表示 ✓

Phase 2 進捗

PR-2A: MobileGui スケルトン (feat(gui): add MobileGui skeleton + opt-in dispatcher (Phase 2-A of #572) #581 マージ済み)
PR-2B: ボトムタブ × 5 (feat(gui): add mobile bottom tab navigation (Phase 2-B of #572) #583 マージ済み)
PR-2C: ステージ全画面プレビュー (本 PR)
PR-2D: ブロックパレットドロワー
PR-2E: ハンバーガーメニュー

Test plan

ユニットテスト 12/12 緑
ESLint / Prettier クリーン
Playwright で手動動作確認
mobile_gui=1 無しの場合に変化なし (Phase 1 / 2-A / 2-B 機能維持)
CI green (push 後)

🤖 Generated with Claude Code

issue #572 Phase 2-C: ステージ全画面プレビュー機能の最小実装。実装: - 新規 MobileTopBar コンポーネント - 上部バーに緑の旗 (▶) ボタンのみ配置 (ハンバーガー等は PR-2E で追加) - クリックで upstream の setFullScreen(true) + vm.start() + vm.greenFlag() を一括ディスパッチ → 自動的にステージプレビュー + 実行開始 - position: fixed + visualViewport API で viewport 上端に追従 - isFullScreen=true のときは隠す (ステージプレビュー専念のため) - MobileBottomTabs も isFullScreen=true で隠すよう更新 - MobileGui の構成: <GUI/> + <MobileTopBar/> + <MobileBottomTabs/> 全画面からの戻り方は upstream の StageHeader が提供する縮小ボタンで OK (PR-2C ではこれを利用)。将来的に PR-2C+ で左上 ✕ ボタンに置き換える等の polish を入れる余地はある。検証 (Playwright, viewport 390x844): - mobile_gui=1 で ▶ ボタンが上部バーに表示 - ▶ クリック → 全画面ステージ + 緑旗実行 + 上下バー非表示 - 縮小ボタン → 全画面解除 + 上下バー再表示 - ユニットテスト 12/12 (mobile-top-bar 4 件 + mobile-bottom-tabs 8 件) Refs #572 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

github-actions · 2026-04-29T15:10:30Z

🚀 Preview deployed: https://smalruby.jp/smalruby3-editor/fix/issue-572-phase-2c-stage-fullscreen/

issue #572 Phase 2-C のフィードバック対応: 1. ▶ アイコンを緑旗から play triangle (▶) に変更 - 緑旗ブロック実行とは異なる動作 (全画面起動 + 自動実行) のため、アイコンを区別する - 新規 Smalruby SVG: components/mobile-top-bar/icon--play.svg 2. 全画面中も上部バーを表示し続けるよう変更 - 旧: isFullScreen=true で MobileTopBar を null - 新: 常に表示。アイコンを ▶ → ⏹ に切替、クリックで vm.stopAll() + setFullScreen(false) で停止 + 戻る - 新規 Smalruby SVG: components/mobile-top-bar/icon--stop.svg 3. 全画面解除後にボトムタブが viewport 上端に移動するバグを修正 - usePositionAtVisualViewportBottom / Top の useLayoutEffect 依存配列に enabled を追加し、isFullScreen フラグの変化で再計算 - 旧: 一度だけ走り、コンポーネント再表示時に位置が再計算されない - 新: enabled=true→false→true の遷移で update() が再走検証 (Playwright, viewport 390x844): - 編集中: ▶ アイコン表示 - ▶ クリック → 全画面 + 自動実行、上部バーは ⏹ 表示で残る - ⏹ クリック → 停止 + 全画面解除、上下バーが正しい位置に戻る - ユニットテスト 13/13 (mobile-top-bar 5 件、mobile-bottom-tabs 8 件) 未対応 (フォローアップ): - 全画面ステージの左右白い余白 = upstream の stage-wrapper.full-screen が 4:3 アスペクト比で width-based、iPhone 縦持ちで下に余白が出る (CSS 上書きが必要、別 PR で polish) Refs #572 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

issue #572 Phase 2-C のフィードバック対応: 1. 全画面ステージの upstream UI が MobileTopBar に隠れる問題を修正 - MobileTopBar の高さを CSS 変数 --smalruby-mobile-top-bar-height に反映 (visualViewport の update タイミングで JS が documentElement に setProperty) - mobile-top-bar.css に :global ブロックを追加し、upstream の stage-header overlay (top: 0) と stage-wrapper.full-screen (top: 2.75rem) をその変数分だけ下にシフト - これにより fullscreen 中も緑旗・停止・縮小ボタンが MobileTopBar の直下に表示される 2. ▶/⏹ ボタンクリック後にフォーカスを外す - upstream の <GreenFlag> と同じ挙動 (target.blur()) - ステージにキーボードイベントを渡せるようにする (キー入力で動くプログラムが mobile プレビューでも動作する) 検証 (Playwright, viewport 390x844): - ▶ クリック → 全画面起動。MobileTopBar (⏹) の下に upstream 緑旗/停止/ 縮小ボタンが表示される - ⏹ クリック → 全画面解除、上下バーが元位置に復帰 - ユニットテスト 5/5 (mobile-top-bar) Refs #572 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

issue #572 Phase 2-C: 全画面ステージの左右見切れを修正。原因: - upstream の getStageDimensions(isFullScreen=true) は width = window.innerWidth (= 390 on iPhone) で計算する - stage に設定されている `border: 3px solid` は box-sizing: content-box のため width に加算され、結果 stage box の実幅は 390 + 6 = 396px となり viewport を 3px ずつ左右にはみ出す (画面外) 修正: - mobile-top-bar.css の :global ブロックで `[class*="stage_full-screen"]` に box-sizing: border-box を上書き - これで border が box 幅に含まれ、stage box は viewport 幅と一致する - 内部の canvas は別の sizing 経路で制御されるため影響なし検証 (Playwright, viewport 390x844): - 旧: stageDivRect.width = 396 (-3 ~ 393) - 新: stageDivRect.width = 390 (0 ~ 390) ✓ Refs #572 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

…-phase-2c-stage-fullscreen feat(gui): add MobileTopBar with run-fullscreen button (Phase 2-C of #572)

takaokouji force-pushed the fix/issue-572-phase-2c-stage-fullscreen branch from 2511bc1 to c0fda1c Compare April 29, 2026 15:54

takaokouji and others added 2 commits April 30, 2026 01:00

takaokouji merged commit edf7ae5 into develop Apr 29, 2026
9 checks passed

takaokouji deleted the fix/issue-572-phase-2c-stage-fullscreen branch April 29, 2026 16:11

github-actions Bot pushed a commit that referenced this pull request Apr 29, 2026

Build for edf7ae5 Merge pull request #584 from smalruby/fix/issue-572…

a08fdf1

…-phase-2c-stage-fullscreen feat(gui): add MobileTopBar with run-fullscreen button (Phase 2-C of #572)

takaokouji mentioned this pull request Apr 29, 2026

feat(gui): add mobile palette drawer toggle (Phase 2-D of #572, drag-close TODO) #585

Merged

10 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(gui): add MobileTopBar with run-fullscreen button (Phase 2-C of #572)#584

feat(gui): add MobileTopBar with run-fullscreen button (Phase 2-C of #572)#584
takaokouji merged 4 commits into
developfrom
fix/issue-572-phase-2c-stage-fullscreen

takaokouji commented Apr 29, 2026

Uh oh!

github-actions Bot commented Apr 29, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

takaokouji commented Apr 29, 2026

Summary

実装

新規コンポーネント: MobileTopBar

MobileBottomTabs の更新

MobileGui の構成

全画面からの戻り方

変更ファイル

新規 (Smalruby 固有)

変更

メタファイル

検証

ユニットテスト (jest, 12 件)

Playwright (Chromium, viewport 390×844)

Phase 2 進捗

Test plan

Uh oh!

github-actions Bot commented Apr 29, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

新規コンポーネント: `MobileTopBar`