bug: Scratchから読み込むが特定 URL で失敗する報告 (要追加情報)

[takaokouji]

概要

「Scratchから読み込む」機能で、過去開けた URL でも今は開けないというフィードバックがあった。proxy https://api.smalruby.app/scratch-api-proxy/projects/:id 経由で project_token を取得 → https://projects.scratch.mit.edu/:id?token=... で本体ロードという流れだが、特定の条件で失敗する可能性がある。

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

Scratchから読み込むが正しく機能していない｡前は開けたURLでも今は開けない

再現確認結果 (2026-04-29 時点)

私が手元で試した範囲では再現せず。ユーザーが具体的にどの URL で失敗しているか追加情報が必要。

試した条件

すべて smalruby.app 本番環境、Chrome/Playwright で 1280x800 viewport。

プロジェクト ID	状態	proxy /scratch-api-proxy/projects/:id	projects.scratch.mit.edu	エディタロード
1209008277 (demo-extension-translate3, Stage のみ + translate/text2speech)	公開済み	200 OK, project_token 取得	200 OK	✅ Stage + 8 blocks
108317385 (Winter Squirrel, 2 targets, 8 costumes)	公開済み	200 OK	200 OK	✅ Stage + Squirrel + 75 blocks
9999999999 (存在しない)	NotFound	200 OK + body {"code":"NotFound","message":""}	403 (token 無し)	❌ アラート「プロジェクトURLの読み込みに失敗しました。」

proxy / Scratch API の動作確認 (curl)

$ curl -i 'https://api.smalruby.app/scratch-api-proxy/projects/1209008277'
HTTP/2 200
access-control-allow-origin: https://smalruby.app
access-control-allow-headers: Content-Type
access-control-allow-methods: OPTIONS,GET
{"id":1209008277,...,"project_token":"1777437935_..."}

$ curl -i 'https://api.smalruby.app/scratch-api-proxy/projects/9999999999'
HTTP/2 200    # ← 重要: 404 でなく 200 を返す
{"code":"NotFound","message":""}

CORS ヘッダ access-control-allow-origin: https://smalruby.app は正しく設定されている。Scratch 側 https://api.scratch.mit.edu/projects/:id も外部から fetch すれば普通に 200 を返す (CORS は restrict されているが proxy 経由で問題なし)。

仮説と懸念点

仮説1: 特定タイプのプロジェクトで失敗する可能性

• 共有解除/非公開化されたプロジェクト: proxy が 200 + {"code":"NotFound"} を返し、project_token が undefined のまま projects.scratch.mit.edu にリクエスト → 403 でロード失敗 (アラートは出る)。「前は開けたが今は開けない」の典型パターン。ユーザーが共有解除されたプロジェクトを開こうとしている場合は、これが原因の可能性高い。
• scratch.mit.edu 側で削除されたプロジェクト: 上と同様。
• 巨大プロジェクト: project_token は取れるが asset 取得タイムアウト。
• クラウド変数を使うプロジェクト: プレイヤーモードでないとロードしないかもしれない (要確認)。
• Scratch 1.x / 2.0 形式 (.sb / .sb2): 互換性の問題で失敗することがある。
• 特定の拡張機能 (Music, Translate, TextToSpeech): 拡張ロード失敗の可能性。

仮説2: proxy / Scratch 側のエラーレスポンス処理が不十分

packages/scratch-gui/src/lib/url-loader-hoc.jsx の処理:

fetch(options.uri, ...)
    .then(response => {
        if (!response.ok) {
            throw new Error(`HTTP ${response.status}`);
        }
        return response.json();
    })
    .then(data => {
        const projectToken = data.project_token;  // ← undefined になり得る
        const storage = this.props.storage;
        storage.setProjectToken?.(projectToken);  // ← undefined を渡してしまう
        return storage.scratchStorage.load(...);
    })

proxy が 200 + {"code":"NotFound"} を返したケースで、data.project_token が undefined であることをチェックしていない。エラーハンドリングは最終的に動作するが (アラートは出る)、エラーメッセージが具体的ではない (「プロジェクトURLの読み込みに失敗しました。」)。

仮説3: ユーザーが Scratch にログインしないと見えないプロジェクトを開こうとしている

未公開・非公開のプロジェクトは api.scratch.mit.edu 自身が NotFound を返す。これは仕様。

必要な追加情報

ユーザーに以下を確認したい:

1. 失敗する具体的な URL (例: https://scratch.mit.edu/projects/12345678/)
2. そのプロジェクトが今も Scratch 公式サイトで普通に閲覧できるか (https://scratch.mit.edu/projects/12345678/ を直接ブラウザで開けるか)
3. 「前は開けた」のは何時頃か — 数日前か数か月前か
4. エラー表示 — 「プロジェクトURLの読み込みに失敗しました。」というアラートが出ているか、それとも無反応か

関連ファイル

• packages/scratch-gui/src/lib/url-loader-hoc.jsx — URL loader 実装
• packages/scratch-gui/src/lib/url-parser.js — URL → projectId 抽出
• packages/scratch-gui/src/components/url-loader-modal/ — UI
• proxy: infra/ 配下にはなく、別管理 (api.smalruby.app の /scratch-api-proxy/)

改善案 (要追加調査後に対応)

1. proxy のレスポンス検証強化 — data.project_token が undefined の場合に明確なエラーをスロー
2. エラーメッセージの具体化 — 「プロジェクトが見つかりません/非公開です」「proxy が応答しません」など原因別に
3. proxy 側の対応 — NotFound のとき HTTP 404 を返す (現状 200) と扱いやすい

関連 Discussion

• 【修正済み】2026/04/28 11:25 [不具合報告] Scratchから読み込むが正しく機能していない｡前は開けたURLでも今は開けない smalruby3-develop#81

[takaokouji]

原因確定 + 修正計画 (CDK 移行込み)

原因 — proxy 実装のバグ

smalruby/smalruby-infra リポジトリの lambda/smalruby-scratch-api-proxy-get-project-info/lambda_function.rb を確認。

res = Net::HTTP.get(api_uri)   # ← ボディ文字列のみ取得、ステータス無視
{
  statusCode: 200,             # ← 常に 200 を返してしまう
  headers:,
  body: res.dup.force_encoding("utf-8")
}

Net::HTTP.get はレスポンスボディしか返さないため、Scratch API が 404/403/500 を返しても proxy は 常に statusCode 200 で応答する。frontend if (!response.ok) 分岐に入らず、data.project_token が undefined のまま projects.scratch.mit.edu へ → 403 で失敗、原因 (URL 不正 / プロジェクト非公開 / サーバーエラー) が分からない。

加えて url-loader-modal.jsx 側にもバグがあり、<FormattedMessage {...messages.invalidUrlError} /> が エラー内容に関わらず固定文字列で表示 している。

修正計画

A. infra: smalruby-infra (SAM) → smalruby3-editor/infra/smalruby-scratch-api-proxy/ (CDK) 移行

既存の SAM デプロイから CDK に統一する。CDK プロジェクトは infra/smalruby-classroom, infra/smalruby-rubytee-relay, infra/smalruby-mesh-v2 の構造に揃える。

プロジェクト構造案

infra/smalruby-scratch-api-proxy/
├── .env.stg
├── .env.prod
├── .env.example
├── .env -> .env.stg (symlink)
├── bin/
│   └── scratch-api-proxy.ts
├── lambda/
│   ├── handler.ts                  # Ruby から TypeScript へポート
│   └── tests/
│       └── handler.test.ts
├── lib/
│   └── scratch-api-proxy-stack.ts
├── cdk.json
├── cdk.context.json
├── jest.config.js
├── package.json
├── tsconfig.json
└── README.md

言語: Ruby → TypeScript へ

既存 CDK プロジェクト (rubytee-relay, classroom) は全て TypeScript + esbuild bundling。一貫性のため scratch-api-proxy も TypeScript にポート。Lambda の中身は fetch ベースで簡潔。

スタック構成

• API Gateway HTTP API: GET /scratch-api-proxy/projects/{projectId}
• Lambda (Node.js 20): TypeScript handler (esbuild bundling)
• Custom Domain: api.smalruby.app (prod) / stg.api.smalruby.app (stg) など — 既存ドメインを維持
• CloudWatch Log Group: 明示作成、retention 1週間 (stg) / 1ヶ月 (prod)
• CORS: https://smalruby.app, https://smalruby.jp, http://localhost:8601

Lambda handler (TypeScript)

import type { APIGatewayProxyEventV2, APIGatewayProxyResultV2 } from 'aws-lambda';

const ALLOW_ORIGINS = (process.env.CORS_ALLOWED_ORIGINS ||
    'https://smalruby.app,https://smalruby.jp,http://localhost:8601')
    .split(',').map(o => o.trim());
const API_HOST = 'https://api.scratch.mit.edu';

export const handler = async (
    event: APIGatewayProxyEventV2,
): Promise<APIGatewayProxyResultV2> => {
    const origin = event.headers?.origin?.trim() ?? '';
    const allowOrigin = ALLOW_ORIGINS.includes(origin) ? origin : ALLOW_ORIGINS[0];
    const corsHeaders = {
        'Access-Control-Allow-Origin': allowOrigin,
        'Access-Control-Allow-Headers': 'Content-Type',
        'Access-Control-Allow-Methods': 'OPTIONS,GET',
        'Content-Type': 'application/json',
    };

    const projectId = event.pathParameters?.projectId;
    if (!projectId) {
        return {
            statusCode: 400,
            headers: corsHeaders,
            body: JSON.stringify({ code: 'BadRequest', message: 'projectId required' }),
        };
    }

    try {
        const apiUrl = `${API_HOST}/projects/${encodeURIComponent(projectId)}`;
        const res = await fetch(apiUrl);
        const text = await res.text();
        return {
            statusCode: res.status,           // ← 元の status をそのまま返す
            headers: corsHeaders,
            body: text,
        };
    } catch (e) {
        return {
            statusCode: 502,
            headers: corsHeaders,
            body: JSON.stringify({
                code: 'BadGateway',
                message: e instanceof Error ? e.message : String(e),
            }),
        };
    }
};

移行・カットオーバー手順

1. CDK 新規プロジェクト作成 + Lambda TypeScript 化
2. stg にデプロイ (新ドメイン stg2.api.smalruby.app/scratch-api-proxy/... などで動作確認) — 既存 stg.api.smalruby.app を壊さない
3. curl で 404/403/200 が正しく返ることを確認
4. frontend を新エンドポイントに切り替え (環境変数で stg → 新スタック)
5. 既存 api.smalruby.app/scratch-api-proxy/projects/:id (SAM) を CDK スタックへ移行 (本番)
6. 古い SAM スタックを decommission

重要: 既存ドメインを引き継ぐため、最初は別ドメインで動作確認 → カナリアでテスト → DNS / ドメインを CDK 側に移す段取りが必要。

B. frontend: smalruby3-editor (worktree 作成済み)

ブランチ: fix/scratch-url-loader-error-messages
worktree: ~/work/smalruby/smalruby3-editor-fix-scratch-loader/

url-loader-hoc.jsx の改修

1. response.status から具体的なエラー種別を判定
2. proxy 修正前との後方互換: 200 でも data.code === 'NotFound' のケースに対応
3. data.project_token が undefined のケースもチェック
4. ネットワークエラー (TypeError) と HTTP エラーを区別
5. modal を閉じずに、modal 内にエラーメッセージ表示してリトライ可能に

fetch(options.uri, ...)
    .then(async response => {
        if (!response.ok) {
            const err = new Error(`HTTP ${response.status}`);
            err.status = response.status;
            throw err;
        }
        const data = await response.json();
        // proxy 修正前との後方互換: 200 + {code:"NotFound"} のケース
        if (data.code === 'NotFound') {
            const err = new Error('Project not found');
            err.status = 404;
            throw err;
        }
        if (!data.project_token) {
            const err = new Error('No project token');
            err.code = 'NoToken';
            throw err;
        }
        return data;
    })
    .then(data => { /* ... */ })
    .catch(error => {
        log.warn('URL loader error:', error);
        this.props.onError(error);
        const message = this.formatLoadError(error);
        if (this.errorCallback) {
            this.errorCallback(message);
            this.props.openUrlLoaderModal();   // 再表示してリトライさせる
        } else {
            alert(message);
        }
    });

formatLoadError(error) {
    const { intl } = this.props;
    if (error.status === 404) return intl.formatMessage(messages.projectNotFound);
    if (error.status === 403) return intl.formatMessage(messages.projectAccessDenied);
    if (error.status >= 500) return intl.formatMessage(messages.serverError);
    if (error.code === 'NoToken') return intl.formatMessage(messages.noProjectToken);
    if (error.name === 'TypeError') return intl.formatMessage(messages.networkError);
    return intl.formatMessage(messages.loadError);
}

url-loader-modal.jsx の改修

error ステートが文字列のまま受け取れるように:

{error && (
    <div className={styles.errorMessage}>
        {error}   // ← 動的なメッセージ文字列を表示
    </div>
)}

追加するメッセージ (locales/ja.js, ja-Hira.js, en.js)

ID	日本語	英語
gui.urlLoader.projectNotFound	プロジェクトが見つかりません。共有解除されているか、URL が間違っている可能性があります。	Project not found. It may be unshared or the URL may be incorrect.
gui.urlLoader.projectAccessDenied	このプロジェクトにはアクセスできません。	Access to this project is denied.
gui.urlLoader.serverError	Scratch サーバー側でエラーが発生しました。しばらく経ってから再度お試しください。	A server-side error occurred. Please try again later.
gui.urlLoader.noProjectToken	プロジェクト情報の取得に失敗しました。	Failed to retrieve project information.
gui.urlLoader.networkError	ネットワークエラーが発生しました。インターネット接続を確認してください。	Network error. Please check your internet connection.

C. テスト

proxy (CDK)

• infra/smalruby-scratch-api-proxy/lambda/tests/handler.test.ts (jest)
• 200 / 404 / 403 / 500 / network error の各ケース

frontend

• packages/scratch-gui/test/integration/url-loader.test.js (新規)
• proxy 200 + NotFound body → エラー表示確認 (後方互換)
• 各 HTTP status (404/403/500) → 各メッセージ確認
• 正常系も含む

互換性

frontend の data.code === 'NotFound' チェックを残すことで、proxy 修正前 (古い SAM 版) でも新しい CDK 版でも動作。proxy 移行よりも frontend デプロイが先になっても問題なし。

進め方 (推奨順序)

1. Phase A (CDK 移行): 新規 CDK プロジェクト作成 → 別ドメインで stg デプロイ → curl で動作確認
2. Phase B (frontend 修正): worktree でコード修正 → integration test → PR → デプロイ
3. Phase C (proxy カットオーバー): CDK スタックを既存 api.smalruby.app/scratch-api-proxy/... ドメインへ移行 → SAM スタック decommission

ユーザーから具体的な失敗 URL の追加情報があれば、frontend 修正後にその URL で再現テストして検証する。

[takaokouji]

stg 環境デプロイ完了 ✅

CDK プロジェクト infra/smalruby-api/ を作成し、SmalrubyApiStack-stg を ap-northeast-1 にデプロイ完了。

デプロイされたリソース

• HTTP API v2 (built-in CORS): https://75xpjurae8.execute-api.ap-northeast-1.amazonaws.com
• Custom Domain: https://stg.api.smalruby.app
• Lambda functions (Node.js 20 ARM64):
  • smalruby-cors-proxy-stg
  • smalruby-mesh-zone-get-stg
  • smalruby-scratch-api-projects-stg
  • smalruby-scratch-api-translate-stg

動作確認 (curl smoke test)

# 公開済みプロジェクト → 200 OK + project_token
$ curl -i 'https://stg.api.smalruby.app/scratch-api-proxy/projects/1209008277'
HTTP/2 200
{"id":1209008277,...,"project_token":"1777443376_..."}

# 存在しない / 共有解除されたプロジェクト → 404 (本丸バグ修正)
$ curl -o /dev/null -w "%{http_code}\n" 'https://stg.api.smalruby.app/scratch-api-proxy/projects/9999999999'
404

# mesh-domain → CRC32 で domain 生成
$ curl 'https://stg.api.smalruby.app/mesh-domain'
{"domain":"39500292"}

# translate → Scratch translate サービス透過
$ curl 'https://stg.api.smalruby.app/scratch-api-proxy/translate?language=ja&text=hello'
{"result":"こんにちは"}

# translate (no language) → 400
$ curl -o /dev/null -w "%{http_code}\n" 'https://stg.api.smalruby.app/scratch-api-proxy/translate'
400

# CORS preflight → 204 + 適切なヘッダー
$ curl -X OPTIONS 'https://stg.api.smalruby.app/scratch-api-proxy/projects/1209008277' \
    -H 'Origin: http://localhost:8601' \
    -H 'Access-Control-Request-Method: GET'
HTTP/2 204
access-control-allow-origin: http://localhost:8601
access-control-allow-methods: GET,OPTIONS
access-control-allow-headers: content-type
vary: origin

最重要: /scratch-api-proxy/projects/9999999999 が 404 を返すようになりました (旧 SAM 実装は 200 でバグ挙動)。

旧 SAM 実装との主な差分

1. REST API v1 → HTTP API v2 + built-in CORS preflight (旧 cors-for-smalruby Lambda 不要)
2. Ruby 3.3 → TypeScript (Node.js 20 ARM64) で他 infra プロジェクトと言語統一
3. Status pass-through バグ修正 — Net::HTTP.get (ボディのみ) を fetch (status code 透過) へ
4. mesh-zone-get の secret key を環境変数化 — 旧実装はハードコード
5. stg 環境を新設 — 旧実装は prod のみ

ユニットテスト

23 tests passing:

• lambda/tests/scratch-api-projects.test.ts (6 tests) — 200 / 404 / 5xx / network error / projectId 必須 / URL encoding
• lambda/tests/scratch-api-translate.test.ts (5 tests) — 正常系 / language 必須 / URL encoding / 5xx / network error
• lambda/tests/mesh-zone-get.test.ts (4 tests) — CRC32 決定性 / IP 別 domain / sourceIp 欠損 / secret 未設定 → 500
• lambda/tests/cors-proxy.test.ts (8 tests) — テキスト/JSON 透過 / バイナリ Base64 / Google Drive URL 変換 / リダイレクト追従 / fetch エラー / scheme 検証

次のステップ

• Phase B (frontend 修正): url-loader-hoc.jsx を stg エンドポイントを使う形に切替えて結合テスト → エラー種別に応じたメッセージ表示
• Phase C (prod カットオーバー): MESH_ZONE_SECRET_KEY を旧 SAM の uXM1VAA6MO39yJ+djz4kbpVGy3Rg1V3Z で .env.prod に設定 → SAM スタックのドメイン解放 → CDK prod デプロイ → SAM スタック decommission

ブランチ: fix/scratch-url-loader-error-messages (worktree ~/work/smalruby/smalruby3-editor-fix-scratch-loader/)