feat(gui): add MobileGui skeleton + opt-in dispatcher (Phase 2-A of #572)#581
Merged
Merged
Conversation
…se 2-A) iPhone 等の狭幅画面向けレスポンシブ対応 (issue #572 Phase 2) の基礎を実装。 採用戦略 = B 案 (MobileGui 並走): - upstream の <GUI> には手を入れず、別コンポーネント <MobileGui> を並走させる - Phase 2-A (本 PR) ではスケルトン: <MobileGui> の中身は <GUI> 素通し - 後続 PR (2B〜2E) でボトムタブ・ステージ全画面・ドロワー・ハンバーガーを 順次 <MobileGui> 内に実装し、徐々に <GUI> から切り離す 未完成中の develop マージを安全にするため、URL パラメーター `mobile_gui=1` での **オプトイン** を必須にする: - フラグ未指定 (デフォルト): すべての viewport で <GUI> が動く (既存挙動) - フラグ指定 + 狭幅 (<768px): <MobileGui> が動く - フラグ指定 + 広幅 / フラグ未指定: <GUI> が動く 新規ファイル: - src/lib/use-is-narrow-screen.js — matchMedia 共有 hook (旧 narrow-screen-warning から抽出) - src/lib/responsive-gui.jsx — 切替ロジックを担うラッパー - src/components/mobile-gui/{mobile-gui.jsx,index.js} — スケルトン - test/unit/lib/use-is-narrow-screen.test.js — hook 3 ケース - test/unit/lib/responsive-gui.test.jsx — 切替 5 ケース (フラグ × viewport の全組合せ) upstream への影響: - src/playground/render-gui.jsx に Smalruby マーカー付きで 4 行の追加 (import 1 行 + ResponsiveGui へ差し替え 1 行 + コメント 2 行) - src/lib/url-params.js に mobile_gui 解釈を追加 (既存 Smalruby 専用ファイル) 検証: - ユニットテスト 13 ケース (3 ファイル) すべて pass - ESLint / Prettier クリーン - Playwright (390x844) で確認: - URL に mobile_gui=1 無し → 既存 GUI 描画 ✓ - URL に mobile_gui=1 有り → MobileGui (中身は GUI) 描画 ✓ - Phase 1 (バナー、min-width、overflow-y: clip) も維持されている Refs #572 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
🚀 Preview deployed: https://smalruby.jp/smalruby3-editor/fix/issue-572-phase-2a-mobile-gui-skeleton/ |
github-actions Bot
pushed a commit
that referenced
this pull request
Apr 29, 2026
…-phase-2a-mobile-gui-skeleton feat(gui): add MobileGui skeleton + opt-in dispatcher (Phase 2-A of #572)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
iPhone 等の狭幅画面向けレスポンシブ対応 (issue #572 Phase 2) の基礎となる MobileGui スケルトン + オプトイン切替 を導入。
採用戦略
B 案 (MobileGui 並走) + URL フラグでオプトイン (Phase 2 が未完成のまま develop にマージしても影響ゼロ):
<GUI>には手を入れず、別コンポーネント<MobileGui>を並走させる<MobileGui>の中身は<GUI>素通し<MobileGui>内のレイアウトを徐々に置き換える:URL フラグ
?mobile_gui未指定 (デフォルト)<GUI>(既存挙動、変更なし)?mobile_gui=1指定<MobileGui>(現状は<GUI>素通し)?mobile_gui=1指定<GUI>(PC レイアウト維持)変更ファイル
新規 (Smalruby 固有)
src/lib/use-is-narrow-screen.js—matchMedia('(max-width: 767px)')を購読する共有 hook (旧narrow-screen-warning.jsxから抽出)src/lib/responsive-gui.jsx— 切替ロジック。フラグ + viewport を見て<GUI>か<MobileGui>を返すsrc/components/mobile-gui/{mobile-gui.jsx,index.js}— スケルトンコンポーネントtest/unit/lib/use-is-narrow-screen.test.js— hook 3 ケースtest/unit/lib/responsive-gui.test.jsx— 切替 5 ケース (フラグ × viewport の全組合せ)変更
src/lib/url-params.js—mobile_guiパラメーターの解釈を追加 (既存 Smalruby 専用ファイル)src/components/narrow-screen-warning/narrow-screen-warning.jsx—useIsNarrowScreenを共有 hook に置き換えsrc/playground/render-gui.jsx— upstream ファイル。Smalruby マーカーで囲んだ 4 行追加 (import 1 行 + ResponsiveGui への差し替え + コメント 2 行)。インデント変更・条件分岐追加なしメタファイル
.prettierignore/smalruby-prettier-files.md(scratch-gui) — 新規ファイルをホワイトリストに追加smalruby-markers.md—render-gui.jsxの MobileGui dispatcher マーカーを追加検証
ユニットテスト (jest, 13 件)
useIsNarrowScreen: 3 ケース (狭幅 true / 広幅 false / viewport 変化で切替)ResponsiveGui: 5 ケース (フラグ × viewport の全組合せ + props 透過)NarrowScreenWarning(既存、共有 hook 利用): 5 ケース (リグレッションなし)Playwright (Chromium、390×844 設定)
?no_beforeunload=1?no_beforeunload=1&mobile_gui=1Test plan
Related
notes/issue-572-responsive-ux-design.md(本リポジトリ、git 管理外)🤖 Generated with Claude Code