bug: iOS Safari など狭幅画面でスプライト/コスチューム追加が画面外になり操作不能 (responsive 対応)

[takaokouji]

概要

iOS Safari など狭幅画面 (iPhone: 390px / iPhone SE: 375px / iPad portrait: 768px) で body { min-width: 1024px } のためページ全体が横にあふれ、「スプライトを選ぶ」ボタン (画面右端) が画面外に出てタップ不能になる。

ユーザーフィードバック (Discussion smalruby/smalruby3-develop#80):

English user here, I can't add sprites nor costumes on safari on iOS.
No programs, just the editor itself has this problem. I don't know what causes it, but pls fix this.

再現手順

1. Playwright (Chrome DevTools) で viewport を 390x844 (iPhone 14) に設定
2. https://smalruby.app/ を開く
3. コードタブで「スプライトを選ぶ」ボタン (画面右下) の座標を確認

// document.body.scrollWidth → 1024
// [aria-label="スプライトを選ぶ"] の getBoundingClientRect()
//   → { x: 875, y: 773 }   // viewport は 390x844
//   → 画面右端 (x=390) より遥か右にあり、タップで到達不能

iPad portrait (768x1024) でも同様で、x=875 のスプライトボタンが画面外。
コスチュームタブの「コスチュームを選ぶ」ボタンは左下 (x=19) にあるため iPhone でもクリック可能。
ただし狭幅では右側の Stage/Sprite ペインが切れて見えづらい。

(再現スクリーンショット 2 枚を後でこのコメントに添付予定)

原因

packages/scratch-gui/src/playground/index.css (upstream Scratch のファイル):

html,
body,
.app {
    width: 100%;
    height: 100%;
    margin: 0;

    /* Setting min height/width makes the UI scroll below those sizes */
    min-width: 1024px;
    min-height: 600px;
}

upstream Scratch 側でも長年放置されている既知の前提 (下記リサーチ参照)。

関連ファイル

• packages/scratch-gui/src/playground/index.css — min-width: 1024px 設定箇所 (upstream)
• packages/scratch-gui/src/components/sprite-selector/ — 右下のスプライト追加 FAB
• packages/scratch-gui/src/components/stage-selector/ — ステージ背景追加ボタン
• packages/scratch-gui/src/components/menu-bar/ — メニューバー (狭幅で要簡略化)
• packages/scratch-gui/src/reducers/stage-size.js — ステージサイズモード (small/large)

Scratch mod のレスポンシブ対応 リサーチ結果

主な scratch-gui ベースの mod で iPhone 程度の狭幅画面で「全機能」をまともに操作できる実装は事実上存在しない。

Mod	モバイル対応	備考
Scratch 公式	❌	Wiki が「phones では virtually unusable」と明言
TurboWarp	❌ (再生のみ)	仮想キーボード等は再生時の話。エディタ UI は upstream のまま
PenguinMod	❌ (再生のみ)	TurboWarp 派生で min-width 制約も継承
Adacraft	❌	フォーラムでも未解決
Snap!	△ (タブレット中心)	長押しメニュー、ブロックズーム、PWA。スマホは clunky
OctoStudio (MIT Media Lab)	✅	scratch-gui を捨てて新規ネイティブ実装。クローズドソース
ScratchJr / Hopscotch	✅	モバイル専用ネイティブ、scratch-gui 不使用

重要な示唆: Scratch を作った MIT Media Lab 自身が「スマホ向けは scratch-gui の改修ではなく新規アプリ (OctoStudio) で」と判断したことが、scratch-gui のレスポンシブ化が極めて難しいことを物語っている。

関連 upstream Issue (いずれも未解決)

• scratchfoundation/scratch-gui#3708 - Investigate small screen resolutions (Backlog 6年以上)
• scratchfoundation/scratch-gui#9721 - Mobile Website Support
• scratchfoundation/scratch-gui#6349 - Mobile phone support
• Scratch Wiki - Scratch on Mobile Devices

公開されている mod のソース (参考用)

• TurboWarp: https://github.com/TurboWarp/scratch-gui (GPL-3.0、モバイル改修なし)
• PenguinMod: https://github.com/PenguinMod (モバイル改修なし)
• Snap!: https://github.com/jmoenig/Snap (タブレット工夫例)

推奨対応戦略

参考実装が乏しいため、smalruby が最初の大規模ケースになる可能性が高い。短期の現実解 → 段階的に本格対応の順で。

★★★ 戦略 A (短期・最小コスト): 「閲覧/再生は OK、編集は PC 推奨」を案内

スマホで開いたとき、警告バナーで「編集は PC・タブレットを推奨」と表示。?play=1 でフルスクリーン再生のみ可能にする。OctoStudio が新規実装を選んだ理由がここにある。

★★★★ 戦略 B (中期): min-width: 1024px をメディアクエリ化 (Smalruby マーカー上書き)

packages/scratch-gui/src/playground/index.css を Smalruby 独自 CSS で上書き:

@media (min-width: 1024px) {
    html, body, .app { min-width: 1024px; }
}
@media (max-width: 1023px) {
    html, body, .app {
        width: 100vw;
        overflow-x: auto;  /* または hidden + 横スクロール案内 */
    }
}

これだけで「画面外でクリック不能」は解消するが、レイアウト最適化は別問題として残る。

★★★★★ 戦略 C (本格対応・長期): タブ切替型レイアウト

@media (max-width: 768px) で 下部タブバー (ステージ / コード / スプライト / コスチューム / 音) に切り替え、各タブが画面ほぼ全体を占有。OctoStudio が採用するパターン。

合わせて:

• スプライト/コスチューム追加を FAB (position: fixed; bottom: 16px; right: 16px) に変更
• メニューバーをハンバーガー化
• ステージは小型固定 (240x180) で stage-size-mode の初期値をビューポート幅で分岐

段階的に進める提案

1. Phase 1 (このIssue で対応): 戦略 A — スマホで開いたら警告バナー、操作はできる範囲で許容
2. Phase 2: 戦略 B — min-width をメディアクエリ化、横スクロールで操作可能にする
3. Phase 3 (別 Issue): 戦略 C — タブ切替型レイアウトで本格対応

関連 Discussion

• 2026/04/24 8:12 [不具合報告] iOS Safariでスプライトやコスチュームが追加できない smalruby3-develop#80

[takaokouji]

スマホ実用化に向けた深堀りリサーチと最終推奨

前回の調査結論「scratch-gui のフル機能 mobile mod は事実上存在しない」「OctoStudio が新規アプリで答えを出した」を踏まえ、「smalruby チームがスマホでデモできる」を最短で達成する道筋 を 7 軸で深掘りした結果。

---

1. 深堀りリサーチ結果

1.1 OctoStudio (MIT Media Lab / Lifelong Kindergarten)

結論: smalruby が最も学ぶべき「スマホ前提 UX」の参照実装。 Scratch を作った同じ研究室が「Web 版 Scratch をスマホ移植する」のではなく 新規ネイティブアプリを書いた という事実そのものが、最大の学び。

判明している UX:

• 画面遷移は完全タブ切替型 — エディタ画面では背景に縮小ステージ、その上にブロックパレット (左) + workspace (右) を縦並びに敷き詰め、画面端に「⬛ ステージ / 🎨 コスチューム / 🎵 サウンド」のアイコンタブを配置 (公式紹介動画から)。ステージ・コード・コスチューム・サウンドが「同時に見えない」のが最大の決断。
• ブロックは emoji + アイコン中心 で文字依存度が低い。ローカライズコストもスマホ画面の文字長制約も同時に解決している。
• 物理センサ統合: shake / tilt / tap / 磁気センサ起動 / フラッシュライト / バイブレーション / 録音 — スマホの内蔵センサをそのまま動機化に転用。Scratch にない「デバイスを振る」が一級ブロック。
• Beam ブロック = Bluetooth で近接デバイス間にイベント送信。Scratch のクラウド変数の代替で、サーバ依存ゼロ。
• 削減した機能 (Scratch 比): クラウド変数なし、カスタム拡張機能 (MIDI / micro:bit など) なし、リスト機能の薄さ、+ - × ÷ 以外の数学関数なし、ペン拡張のような描画ブロック簡略化。
• オフライン前提・ノーアカウント・ノーテレメトリ — 教育機関・低帯域国向け配慮。
• 対応 OS: iOS 15+ / Android 8+ / Chromebook (Web 版は提供していない)。

学べる UX 原則 (smalruby 文脈):

1. 「同時表示」を諦める — スマホでは "ステージ + ブロックパレット + workspace + コスチューム" を同画面に置かない。タブで切り替える。
2. モーダルではなくフルスクリーンの画面遷移 — モーダルダイアログはスマホでは戻る方法が不明瞭。ボトムタブと「<」戻るで完結。
3. 入力数値を押し込む UI を避ける — 文字入力箇所を最小化し、スライダー / ステッパー / プリセットドロップダウンに寄せる。
4. 新規プロジェクトのスタート障壁を 2 タップ以内 にする (アプリ起動 → 「+」 → 新規)。

(根拠: Project Overview - MIT Media Lab, OctoStudio Reference Guide, Raspberry Pi Foundation 紹介記事, App Store ページ)

1.2 Blockly v11 / v12 のモバイル改善 (2025)

smalruby は scratch-blocks (Blockly フォーク) を使っているため重要。現状は:

• Blockly v12 (2025 リリース): フライアウトのパフォーマンス改善、モバイルで残るハイライト不具合修正、FlyoutInflater でカスタムフライアウト構造、@blockly/keyboard-navigation プラグイン、IFocusableNode 系の focus tree。
• 重要: Blockly 自体は v12 で「キーボード/フォーカスファースト」に舵を切った が、タッチ最適化はまだ「副次的に改善」レベル。フライアウトの bottom-sheet モードは公式には存在しない (Issue #7263 で Flexible Flyout Layout が議論中)。
• Blockly の所有権が 2025-11-10 に Raspberry Pi Foundation に移管 — 教育用途のモバイル改善が以後加速する可能性が高い。

scratch-blocks 側の現実:

• Scratch 3.0 のブロックは タッチでドラッグできるよう物理的に大きい (Scratch チームが 3.0 でやった主な対応)。だが「workspace のスクロール / ピンチズーム」「フライアウトの bottom-sheet 化」は未対応。
• scratch-blocks に Blockly v12 のモバイル改善を取り込むのは現実的ではない (アーキテクチャ差分が大きい)。代わりに scratch-blocks の 既存タッチ機能 (Scratch 3.0 由来) を活かす のが筋。

1.3 PictoBlox / mBlock / Pocket Code の現実

プロダクト	スマホ Web	専用ネイティブ	UX 方針
PictoBlox	×	iOS 14.3+ 専用アプリ	デスクトップ UX をほぼそのまま縮小 (タブレット主眼)
mBlock 5	×	iOS / Android アプリ	スマホは「ブロック表示が小さい」レビューあり
Pocket Code	×	Android / iOS (Catrobat 由来)	完全にスマホ縦持ち UX 設計。プロジェクト → オブジェクト → スクリプトの 3 階層を画面遷移で切替
Snap!	△ (タブレットギリ)	×	デスクトップ UX のまま。スマホ非実用
Trinket	△	×	Python 中心、ブロック編集は iPad ぎり

結論: ブロックプログラミングを「スマホ Web」で成立させた前例は 存在しない。すべて ネイティブアプリ か タブレット用 Web に逃げている。Pocket Code は OctoStudio とほぼ同じ "縦持ちタブ切替" 思想。

1.4 Monaco エディタ × iOS Safari の致命的な相性 ⚠️

これが Phase 1 の最大リスク。

• Monaco の mobile/touch サポートは Microsoft 公式に 「Backlog」「サポート対象外」。GitHub issue #1504 (2019 年起票) は 2026 年現在も未解決。
• Monaco は 隠し textarea + 非ネイティブテキスト編集 を使うため、iOS の「外部キーボードの矢印キー / Backspace」がイベントとして発火しない (issue feat: add Ruby script preview panel to Ruby tab More menu #293, refactor: Ruby 拡張機能ブロック再設計 — クラス別メソッド + 戻り値ブロック #529)。タッチ選択ハンドルも出ない (issue #4622)。
• iPad の "Show keyboard" ボタンが iOS 13+ で表示されない (issue #1812)。
• Replit が同じ問題を CodeMirror 6 への置き換えで解決 し、モバイル週間継続率 +70% を実測 (Replit blog)。

smalruby への含意: Phase 1 でスマホに Ruby タブを出すなら、Monaco は read-only viewer モード で出すか、長押し → "編集" 専用フルスクリーン入力 に逃がすしかない。Monaco をそのまま編集器として置くと iOS で「カーソル移動できない / バックスペース効かない / ハンドル出ない」が確実に発生する。長期的には CodeMirror 6 への移行も検討対象。

1.5 Replit Mobile が示した解

• 下部タブバーが第一級ナビゲーション (Editor / Console / Output / Commands)。デスクトップのレイアウトを縮小せず、ネイティブパターンへ書き換え。
• 「コードを on-device で parse して suggestion bar をキーボード上に出す」 — タップ補完バーをソフトキーボード直上に固定し、入力速度を維持。
• 結果: モバイル DAU が全体の約 20% に到達。

smalruby も「Ruby タブの編集器の上にカスタム補完バー」を出せば iOS で実用域に入る。

1.6 iOS Safari 特有の罠 (実装フェーズで必ず踏むやつ)

罠	解決策
100vh がアドレスバー含むため画面下が切れる	100dvh を主、100svh を補助 で使う。Safari 15.4+ で全環境利用可能 (2025 Baseline Widely Available)
iOS 26 で再度 viewport 計算が変わった	100vh を全面排除し dvh / svh / lvh に統一
入力フォーカス時に font-size < 16px だと自動ズーム	input/textarea は font-size: 16px 以上を強制。Monaco は editor.fontSize: 16 を最低ラインに
ピンチズーム / ダブルタップズーム	<meta viewport ... user-scalable=no> は iOS 10+ で 無視される。touch-action: manipulation を編集領域に、それ以外には touch-action: pan-y
ホームバーに UI が隠れる	viewport-fit=cover + padding-bottom: env(safe-area-inset-bottom)
ソフトキーボード出現時のレイアウト崩れ	iOS は visualViewport.height を JS で監視して --kbd-h を CSS 変数に

1.7 現状コードの確認

• packages/scratch-gui/src/playground/index.css:10 — min-width: 1024px がここで強制 (Phase 1 出発点)
• packages/scratch-gui/src/lib/layout-constants.js:62 — fullSizeMinWidth: 1096 (largeConstrained への切替閾値)
• packages/scratch-gui/src/lib/screen-utils.js — getStageDimensions がフルスクリーン時は window.innerWidth/innerHeight を使う (PWA + dvh インテグレーションがしやすい)
• STAGE_DISPLAY_SCALES.small = 0.5 — すでに 240×180 のステージ表示モードが用意されている (Phase 1 で再利用可能)

---

2. 最終推奨 — Phase 1 / 2 / 3

設計原則 (3 つだけ)

1. 「スマホでフル編集」は捨てる。スマホは "デモ + 軽編集 + プレビュー" に振り切る。フル編集は PC / iPad 推奨をハッキリ言う
2. ボトムタブの単画面切替。同時表示を諦め、ステージ / コード / コスチューム / 音 / Ruby を切替に。OctoStudio / Pocket Code / Replit Mobile が示した正解パターン
3. Monaco は read-only viewer に降格 (Ruby タブ on モバイル時)。タップで「フルスクリーン編集モーダル」が立ち上がる構造。長期的に CodeMirror 6 移行を IRT

Phase 1 — "デモができる" (推定 3〜5 人日)

目標: 768px 以下の縦持ちで body min-width エラーが起きず、ステージが表示され、ブロックがタップで動く。フル編集はできなくてよい。プロダクトオーナーがイベントでデモできる最低ライン。

ステップ	工数	効果
1-1. playground/index.css の min-width: 1024px を mobile media query で解除	0.5 日	横スクロール解消
1-2. <meta name="viewport"> を width=device-width, initial-scale=1, viewport-fit=cover に修正 + touch-action: manipulation を .app に	0.5 日	ピンチズーム抑制、safe-area 有効化
1-3. @media (max-width: 768px) で gui レイアウトを縦積みフレックス化 (上 50dvh: ステージ + ターゲットセレクタ、下 50dvh: コードタブ縦積み)	1 日	スマホで最低限の表示
1-4. Ruby タブを mobile detect で read-only Monaco に切り替え (readOnly: true, fontSize: 16) + 「PC で編集してください」バナー	0.5 日	iOS Monaco の致命的バグ回避
1-5. 旗ボタンで再生 + ステージのみフルスクリーン表示する 「プレゼンモード」 を「再生時自動」	1 日	デモの主目的を達成
1-6. PWA manifest を display: standalone, theme_color, ... で iOS 対応 (Add to Home Screen)	0.5 日	アドレスバー消失で画面拡大
1-7. Playwright で iPhone 13 viewport (390x844) スモークテスト追加	0.5 日	デグレ検知

期待 UX: スマホでアプリを開く → 上半分にステージが見える → 旗をタップ → ステージが全画面でデモ動作。ブロック編集はできるがやりにくい。プロダクトオーナーは「動く」を見せられる。

Phase 2 — "軽編集ができる" (推定 8〜13 人日)

目標: ボトムタブによる画面切替、変数値変更、コスチューム選択、簡単なブロック追加が指タッチで完結する。

主な作業:

• ボトムタブバーコンポーネント新設 (Stage / Blocks / Costumes / Sounds / Ruby) — 既存タブ UI と排他
• 各タブを「フルスクリーン画面」化 (100dvh 占有 + safe-area-inset-bottom)
• ブロックパレット (flyout) を bottom-sheet 風 drawer にカスタムラップ — workspace を画面全体に、パレットは下から swipe-up
• ステージ縮小固定 (240×180) ヘッダー表示 — どのタブからでもステージのプレビューが見える
• 変数モニターのみのスリム表示モード (タップで値変更)
• iOS visualViewport で --kbd-h CSS 変数を更新 → モナコ + フォーム位置補正
• PWA 化を本格的に: workbox の precache、オフラインステージ動作、splash screen

期待 UX: 小学生が休み時間にスマホで先生の作品を開いて変数を変えたり、コスチュームを選んだり、ブロックをすこし追加してデモができる。OctoStudio / Pocket Code の代替に近づく。

Phase 3 — "本格スマホエディタ" (推定 20〜35 人日 / 大型機能)

目標: スマホ単体で新規プロジェクト作成 → ブロック組立 → 公開 まで完結。

主な作業:

• Ruby タブを CodeMirror 6 に移行 / もしくは併存 (mobile のみ CM6) — Replit が同じ判断で +70% retention
• キーボード上 コード補完バー (Replit パターン)
• Drag-from-flyout の長押しモード (scratch-blocks の touch handler 改修)
• ハプティクスフィードバック (Vibration API) — ブロック吸着で振動
• Beam 風機能 = mesh v2 を localhost 検出 + QR コード共有で 1 タップ接続
• 横向き専用「スプリットビュー」(上ステージ / 下 blocks) — iPad mini 〜小型タブレット最適化
• App Store / Play Store TWA (Trusted Web Activity) または PWA wrap

費用対効果のまとめ:

• Phase 1 (最優先): 3〜5 人日で「デモが成立する」。投資対効果が圧倒的
• Phase 2 (3 ヶ月以内推奨): 13 人日で 教育現場で配れる "ビューア + 軽編集" アプリ に
• Phase 3 (長期): 30 人日でフル本気のスマホ編集体験。Phase 3 の前に必ず Phase 1+2 のユーザーフィードバックを取る こと

---

3. Phase 1 のコード/CSS パッチ案 (擬似コード)

3.1 packages/scratch-gui/src/playground/index.css (upstream — マーカー必要)

html,
body,
.app {
    width: 100%;
    height: 100%;
    margin: 0;
}

/* === Smalruby: Start of mobile responsive === */
@media (min-width: 769px) {
    html, body, .app {
        min-width: 1024px;
        min-height: 600px;
    }
}

@media (max-width: 768px) {
    html, body, .app {
        height: 100svh;
        height: 100dvh;
        font-size: 16px;
        touch-action: manipulation;
        padding-bottom: env(safe-area-inset-bottom);
    }
    .blocklyMainBackground,
    .blocklyWorkspace {
        touch-action: pan-x pan-y pinch-zoom;
    }
}
/* === Smalruby: End of mobile responsive === */

3.2 viewport meta + iOS PWA

<!-- 旧 viewport を以下に置き換え -->
<meta name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=5, viewport-fit=cover">
<!-- iOS PWA -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="theme-color" content="#4C97FF">

3.3 gui.css 末尾に縦積みレイアウト

@media (max-width: 768px) {
    .editorWrapper {
        flex-direction: column;
    }
    .stageWrapper {
        width: 100%;
        height: 50dvh;
        flex: 0 0 auto;
    }
    .blocksWrapper, .targetWrapper {
        width: 100%;
        height: 50dvh;
        overflow: auto;
    }
    .targetWrapper {
        flex-direction: row;
        overflow-x: auto;
    }
    .menuBarRightSide :is(.feedback-link, .link-separator) {
        display: none;
    }
}

3.4 Ruby タブ mobile read-only モード (Smalruby 固有 — マーカー不要)

const isMobile = () =>
    typeof window !== 'undefined' &&
    window.matchMedia('(max-width: 768px)').matches;

const editorOptions = {
    fontSize: isMobile() ? 16 : 14,            // iOS auto-zoom 防止
    readOnly: isMobile(),                       // Phase 1: スマホでは編集不可
    minimap: { enabled: !isMobile() },
    scrollBeyondLastLine: false,
    automaticLayout: true,
    wordWrap: isMobile() ? 'on' : 'off',
};

{isMobile() && (
    <div className={styles.mobileBanner} role="status">
        <FormattedMessage
            id="gui.rubyTab.mobileReadOnly"
            defaultMessage="スマートフォンでは表示のみです。編集には PC をご利用ください。"
        />
    </div>
)}

3.5 「再生時にステージ自動フルスクリーン」 (gui.jsx — upstream マーカー必要)

// === Smalruby: Start of mobile auto-fullscreen on play ===
useEffect(() => {
    if (!window.matchMedia('(max-width: 768px)').matches) return;
    const onProjectStart = () => {
        if (!props.isFullScreen) props.onSetFullScreen(true);
    };
    const onProjectStop = () => {
        if (props.isFullScreen) props.onSetFullScreen(false);
    };
    props.vm.runtime.on('PROJECT_RUN_START', onProjectStart);
    props.vm.runtime.on('PROJECT_RUN_STOP', onProjectStop);
    return () => {
        props.vm.runtime.off('PROJECT_RUN_START', onProjectStart);
        props.vm.runtime.off('PROJECT_RUN_STOP', onProjectStop);
    };
}, [props.vm, props.isFullScreen]);
// === Smalruby: End of mobile auto-fullscreen on play ===

3.6 Playwright スモークテスト

packages/scratch-gui/test/integration/mobile-smoke.test.js (新規 / Smalruby 固有):

describe('Mobile Smoke', () => {
    test('iPhone 13 viewport (390x844) で body 幅が viewport を超えない', async () => {
        await driver.manage().window().setRect({width: 390, height: 844});
        await driver.get('http://localhost:8601/?no_beforeunload=1');
        const bodyWidth = await driver.executeScript(
            'return document.body.scrollWidth'
        );
        expect(bodyWidth).toBeLessThanOrEqual(390);
    });
});

※ .prettierignore と smalruby-prettier-files.md への追記を忘れずに。

---

主な参考資料

OctoStudio / 教育系ブロックプログラミング

• Project Overview – MIT Media Lab OctoStudio
• OctoStudio Reference Guide
• Mobilizing creative learning with OctoStudio

Blockly / scratch-blocks

• Blockly v12 Release Notes
• Flexible Blockly Flyout Layout #7263

Monaco / CodeMirror Mobile

• Monaco mobile (touch) support feature request #1504
• Replit – Improving Repl.it Mobile UX
• Sourcegraph – Migrating from Monaco to CodeMirror

iOS Safari / モバイル CSS

• 100vh problem with iOS Safari (DEV)
• Modern Viewport Units svh/lvh/dvh guide
• 16px or Larger Text Prevents iOS Form Zoom (CSS-Tricks)
• Disable Pinch Zoom for Kiosks

提案

このIssue は Phase 1 (3〜5 人日) のスコープに限定 して着手し、Phase 2 と Phase 3 は別 Issue に切り出すのが良い。プロダクトオーナーの「スマホでデモしたい」というニーズは Phase 1 で達成できる。