Scratch Blocksを読む：創造的なコンピューティングUIを組み立てる基盤

Scratch Blocksが提供する視覚的UIの土台

Scratch Blocksは、創造的なコンピューティングインターフェースを構築するためのライブラリです。READMEのVersion 2.0説明では、ScratchチームとBlocklyチームが公開する新しい版として位置付けられています。目的は、ブロックを組み合わせてプログラムを作る視覚的で対話的な環境を設計し、Scratchのような教育や創作の体験へつなげることです。

このリポジトリは完成した学習サービスそのものではなく、UI設計仕様とコードベースを提供します。入力画面、ブロックの配置、選択、編集、接続、動的な対話を組み込む開発者が主な利用者です。保存、実行、作品共有、利用者管理、公開環境は別のアプリケーション層として設計する必要があります。READMEはサービス運用の構成や利用者データの保管を説明していません。

リポジトリの素材では、最新リリースはv2.1.19、デフォルトブランチはdevelop、アーカイブされていない状態です。これらは取得時点のメタデータです。スター数やフォーク数は関心の手掛かりであり、教育現場や自社製品での品質を直接証明する数値ではありません。

Blocklyからライブラリ依存へ変わったVersion 2.0

Version 2.0では、Scratch BlocksはBlocklyのフォークではなく、Blocklyをライブラリとして利用する構成へ変わったとREADMEにあります。以前の内部関係を前提にした統合から、依存ライブラリの版、API、変更履歴を管理する構成へ移ったと読めます。READMEはBlocklyをversion 12へ更新し、多数のバグ修正と改善を含むと説明しています。

この変更では、Scratch Blocks側のUI設計とBlockly側の機能更新を分けて評価します。Blocklyの版を上げたことで必要なAPI、型、ビルド設定、ブロック表示が変わる可能性があります。READMEは将来の利用者向けリリースへ向けて、いくつかの調整が起きる可能性を認めています。したがって、Version 2.0を既存製品へ無条件に置き換えるのではなく、依存版を固定して移行差分を確認します。

問題を見つけた場合、まずGitHub Issuesに既存報告があるかを確認し、なければ再現条件を含めて報告するようREADMEは促しています。Issueの存在や修正は、使用環境での動作保証を意味しません。自分のブロック定義、画面幅、入力機器、言語、ブラウザ、VM連携を代表例として再現試験に入れる必要があります。

Scratch VMを使う実行時の役割分担

Scratch BlocksはBlocklyを基礎にしながら、Blocklyのcode generatorsを使わず、Scratch Virtual Machine、つまりScratch VMを利用して動的で対話的なプログラミング環境を作るとREADMEにあります。Scratch VMは別リポジトリとしてリンクされ、ブロックUIと実行処理を分ける中心部品です。

この分離では、ブロック画面で作られた状態、VMが受け取る形式、実行結果、画面への反映を別々に確認します。ブロックが正しく接続されたことは、VMが意図した命令として解釈したことを保証しません。新しいブロックを追加する場合は、表示、入力、保存、VMへの変換、実行、エラー表示を一連のケースとして確認します。

READMEはScratch Blocksがコード生成器を持たないことを説明しています。SQLやJavaScriptの文字列を出力する一般的なビルダーとは役割が異なります。利用者の作品を別の形式へ変換したい場合は、Scratch VMのデータ形式と責任範囲を公式文書で確認し、ブロックUIだけから実行可能な出力仕様を推測しないようにします。VMの版とScratch Blocksの版を同じ記録へ残すことも必要です。

TypeScriptとwebpackによる開発構成

READMEはScratch BlocksをTypeScriptで書き、webpackで束ねると説明しています。型付きのコードベースとバンドル処理を前提に、ブロックUIをブラウザへ配布する構成です。利用側では、TypeScriptの型、webpackの入口、生成物の形式、依存Blocklyの版、Scratch VMの接続方法を固定して確認します。

開発手順はnpm ciとnpm run buildです。npm ciはlockfileに沿って依存を導入し、npm run buildはプロジェクトのビルドスクリプトを実行する入口としてREADMEに記載されています。これらのコマンドが成功しても、埋め込み先アプリのwebpack、Vite、Next.jsなどの構成と互換であるとは限りません。生成した部品を実際のアプリへ組み込み、CSS、画像、Worker、ブラウザAPI、VM通信を確認します。

依存関係の版を更新する場合、Blockly、Scratch VM、webpack、TypeScript、テスト環境を一度に変えないことが切り分けに役立ちます。変更前のブロック表示、操作、保存データ、VM実行結果を保存し、更新後の差分を比較します。READMEが説明するビルドは開発入口であり、利用者向け配布、CDN、キャッシュ、長期保守の手順を含みません。

jsdomとPlaywrightを分けたテスト設計

Unit testsはjsdomで実行され、追加設定は不要だとREADMEにあります。npm run test:unitが単体テストのコマンドです。DOMに近い状態で、ブロックデータ、状態更新、ユーティリティ、コンポーネントの基本処理を確認する入口になります。

Browser testsはPlaywright経由のChromiumで動き、npm ciの後にnpx playwright install chromiumを一度実行してブラウザを導入します。npm run test:browserでブラウザテストを実行し、失敗調査ではnpm run test:browser -- --browser.headless=falseで画面を表示できます。PWDEBUG=1 npm run test:browserでは、起動時に停止して開発者ツールを開く手順も示されています。

単体テストの成功は、実ブラウザの入力、ドラッグ、スクロール、フォーカス、画面幅、Chromium版、Playwrightの待機を保証しません。ブラウザテストの成功も、Safari、Firefox、モバイル端末、埋め込み先のCSS、支援技術を保証しません。Scratch Blocksを製品へ組み込む場合は、jsdomによる状態検査と、Chromiumでの操作検査を分け、必要なブラウザと支援技術を自社の検証表へ追加します。

Semantic Releaseとコミット規約

READMEは、依存プロジェクトが予期せず壊れないように版更新をsemverへ沿わせるため、Semantic Releaseを使うと説明しています。コミットメッセージをconventional-changelogの仕様に合わせることで、版更新の種類を自動判定する構成です。commitizen CLIとcz-conventional-changelogの導入例も記載されています。

この運用では、修正、機能追加、破壊的変更をコミット内容から区別し、リリース番号へ反映することが期待されています。利用側は、依存するScratch Blocksの版、Blocklyの版、Scratch VMの版を固定し、アップグレード時にAPIとブロック表示を再確認します。Semantic Releaseがあるからといって、すべての変更が自社アプリへ安全に伝播するわけではありません。

版更新の試験では、既存作品の読み込み、ブロック接続、複製、削除、保存、再読込、VM実行、エラー表示を代表ケースにします。破壊的変更がないという版番号だけを信用せず、実際の条件式と画面操作を比較します。READMEはコミット形式とリリースの考え方を示しますが、個別アプリの移行計画やサポート期限を定めていません。

文書、寄付、Apache-2.0の範囲

Getting Started、FAQ、Design documentationはWikiへ案内されています。導入手順、よくある質問、設計仕様を分けて参照できる構成です。READMEの短い説明だけでは、ブロック定義、描画、入力、保存形式、Scratch VM連携の細部を判断できないため、実装前にWikiと関連リポジトリを確認します。

Scratchは無料で提供し続けたいという方針がREADMEにあり、継続的な工学、設計、コミュニティ、資源開発を支える寄付へのリンクがあります。寄付の案内はプロジェクト支援の入口であり、商用サポート、動作保証、SLA、セキュリティ対応の契約を示すものではありません。

ライセンスはApache-2.0です。コードを利用、変更、再配布する場合は、ライセンス文、著作権表示、NOTICE、変更表示、特許条項を配布形態に合わせて確認します。Scratch Blocks本体、Blockly、Scratch VM、webpack、テスト依存、生成物、作品データの条件は別に確認します。Apache-2.0の表示だけで、外部モデルや作品素材の権利まで決まるわけではありません。

文書確認では、READMEの説明、Wikiの設計、Scratch VMの仕様、Blocklyの仕様を同じ事実として混ぜません。READMEが示す方針、Wikiが示す実装説明、ソースコードの現在動作を分けて記録します。ドキュメントの版と参照日を残し、将来の変更で手順が変わったときに、どの説明を根拠に採用したか追跡できるようにします。作品データの公開では、利用者名、画像、音声、外部リンク、拡張の権利と削除方法を確認します。

教育用途では、児童や生徒が作った作品を扱う可能性があるため、氏名、学校名、位置情報、顔画像、音声、自由記述を収集しない初期設定を検討します。共有機能を自社で追加する場合は、公開範囲、閲覧者、削除依頼、保護者や管理者の確認、作品のバックアップを別に設計します。Scratch BlocksはブロックUIの基盤であり、教育データ保護や作品公開の規則を提供する資料ではありません。

採用前に作るUIと作品データの検証表

導入前には、対象ブラウザ、画面幅、入力機器、言語、支援技術、埋め込み方式を固定します。ブロックの表示、接続、移動、複製、削除、キーボード操作、フォーカス、長い文字列、画面読上げを確認し、UIの成功とVM実行の成功を別の欄へ記録します。

作品データを保存する場合は、ブロック構造、変数、リスト、画像、音声、拡張、VM版、Scratch Blocks版を一緒に管理します。旧版で作った作品を新版本体で読み込み、同じブロックが表示され、接続が保たれ、保存後も内容が変わらず、VMが同じ動作をするかを比較します。変換不能なデータは削除や既定値へ置換せず、利用者へ確認を返します。

開発者は、npm ci、npm run build、npm run test:unit、ChromiumのPlaywrightテスト、失敗時の可視ブラウザ、Semantic Releaseの版判定を自分のCIで確認します。READMEのコマンドは開発入口であり、オンラインサービスの品質保証ではありません。Version 2.0のBlockly依存、Scratch VM連携、TypeScript、webpack、Apache-2.0を根拠として使いながら、採用可否は自社の作品形式、UI、ブラウザ、実行環境、復旧手順で判断してください。

互換性表を作るときは、Blocklyの版、Scratch Blocksの版、Scratch VMの版、webpackの生成物、対象ブラウザを列として置きます。作品の代表例には、単純な移動、変数、繰り返し、条件分岐、音声、画像、拡張、入れ子の長いブロックを含めます。読み込み後にブロックが見えるだけでなく、接続関係、変数名、リスト内容、実行順、保存形式を比較します。旧版と新版の差分を承認者が確認し、利用者が意図しない動作変更を見逃さないようにします。

ブラウザ確認では、ChromiumとPlaywrightの結果を他の必要ブラウザの結果へ一般化しません。CSS、フォント、SVG、Pointer操作、キーボード、タッチ、フォーカス、スクロール、画面読上げ、低速端末、狭い画面を分けて確認します。jsdomの単体テストはDOM状態や関数処理の検査に使い、実ブラウザの描画と入力の合格判定には使いません。失敗時のログ、スクリーンショット、作品データ、ブラウザ版を保存します。

Scratch VM連携では、ブロック編集、保存、VMへの受渡し、実行、停止、結果表示、例外処理を分離します。VMが受け付けないブロックや拡張を、画面上で作成できる状態にしないよう定義をそろえます。実行停止が画面へ反映されるか、長時間処理がブラウザを固めないか、エラーが利用者へ説明されるかを確認します。READMEはVMリポジトリへのリンクを示しますが、個別アプリのデータ契約や障害処理を定めていません。

版更新では、Semantic Releaseが示すsemverと、実際の破壊的差分を別に確認します。コミットメッセージをconventional-changelogへ合わせても、自社作品の互換性が自動的に証明されるわけではありません。依存版を固定し、更新前の生成物と作品を保存し、npm ci、npm run build、単体試験、ブラウザ試験、VM実行を順に行います。失敗した場合に旧版の生成物と旧データへ戻せるよう、版、設定、依存、ビルド結果、試験結果を一つの変更記録へまとめます。

寄付、Wiki、GitHub Issue、リリース情報、スター数は、開発状況を知る資料です。Apache-2.0はコード利用の条件を示しますが、サービス可用性、作品保存、セキュリティ、支援時間を保証しません。Scratch Blocks、Blockly、Scratch VM、テスト依存、画像や音声素材の権利を分けて管理します。利用者の作品を公開する場合は、作品内の個人情報、外部素材、音声、画像、拡張の条件を確認し、復元と削除の手順を用意します。

編集部の結論

Scratch Blocksは、ブロック型プログラミングの入力画面や創造的なコンピューティングUIを自分の製品へ組み込みたい開発者に候補となります。Version 2.0ではBlocklyを直接フォークするのではなくライブラリとして依存し、コード生成器ではなくScratch VMへ処理を渡す設計が示されています。READMEにはTypeScript、webpack、jsdom、ChromiumとPlaywright、npm scripts、Semantic Releaseの手順がありますが、個別アプリの互換性、性能、アクセシビリティ、運用保証は証明されていません。導入前にブロック定義、VM連携、ビルド、単体テスト、ブラウザ操作、版更新、Apache-2.0条件を自分の環境で確認してください。

公式情報源

1. Official documentation
2. Official README
3. Project repository
4. Release notes