Scratchの作品をHTMLに変換して配布する方法
遊びをつくる執筆にClaudeを使用しています。
ScratchはMITが提供するビジュアルプログラミング環境で、ブロックを組み合わせてゲームやアニメーションを作れます。完成した作品はScratchのサイト上で公開できますが、「Scratchアカウントがなくてもプレイできる場所で配布したい」「自分のサイトに埋め込みたい」「アソバースのようなプラットフォームに投稿したい」という場面では、HTML形式への変換が必要になります。 変換の方法は複数あり、それぞれできることと制約が異なります。この記事では、代表的なツールとその選び方、変換後のファイルを配布するまでの具体的な手順を整理します。完成原稿のURLを得るまでに何が必要かを把握してから作業を始めると、途中で詰まるポイントを減らせます。
Scratchの作品がそのままHTMLにならない理由
Scratchの作品はScratchのサーバー上で動くsb3形式（ZIPに近い構造のプロジェクトファイル）で保存されています。ブラウザはsb3ファイルを直接実行できないため、「sb3の命令をブラウザが解釈できるJavaScriptに変換し、必要なアセット（画像・音声）とまとめてHTMLとして動かす」という処理が必要です。
この変換を担うのがScratch互換ランタイムと呼ばれるソフトウェアです。代表的なものにScratch自体が公式に提供するscratch-guiベースのアプローチと、コミュニティが開発したTurboWarpがあります。変換の仕組みを知っておくと、「なぜこのブロックは動かないのか」という問題が起きたときに原因を絞り込みやすくなります。
主な変換手段とその特徴
TurboWarp Packager
現時点でScratchのsb3をHTMLに変換する手段として最も広く使われているのが、TurboWarpが提供するPackagerです。ブラウザ上で動くWebアプリで、sb3ファイルをアップロードするとHTMLファイルやZIPファイルとして書き出せます。
主な特徴は次のとおりです。
- オフライン不要：ブラウザだけで作業が完了します。
- 単一HTMLに書き出せる：画像や音声をBase64エンコードしてHTMLに埋め込むため、ファイルが1つになります。
- ZIP（複数ファイル構成）にも対応：容量が大きい作品はZIPのほうがファイルサイズを抑えられる場合があります。
- 実行速度の向上：TurboWarpは元のScratchランタイムより高速に動作するコンパイラを持っており、変換後のゲームも同様に高速化されます。
- 画面サイズや操作設定を調整できる：フルスクリーンボタンの表示・非表示、タッチ操作の有効化、ポインタロックの設定などを書き出し前に指定できます。
ライセンスと利用条件はTurboWarpの公式サイトで確認してください。商用利用や再配布を想定する場合は、ScratchコンテンツのガイドラインおよびTurboWarpの利用規約を事前に読むことを勧めます。
Scratch公式の「HTMLとして保存」はない
Scratch本体にはHTML書き出し機能がありません。「ファイル → コンピューターに保存」で得られるのはsb3ファイルです。公式の方法で配布URLを作るには、Scratchサイトに公開してシェアリンクを使う形になります。HTMLが必要な場合は必ず外部ツールを経由することになります。
Forkiなど他のパッケージャー
TurboWarp以外にも複数のパッケージャーが存在しますが、対応しているScratchのバージョンや拡張機能の互換性が異なります。独自の拡張機能（非公式ブロック）を使っている場合は、その拡張機能に対応したランタイムを採用しているパッケージャーを選ぶ必要があります。まず試すならTurboWarp Packagerが選択肢として妥当です。
変換の手順
以下はTurboWarp Packagerを使った基本的な流れです。
- sb3ファイルを用意するScratchの「マイプロジェクト」から対象の作品を開き、「ファイル → コンピューターに保存」でsb3ファイルをダウンロードします。Scratchサイトにすでに公開している場合は、プロジェクトIDをそのまま入力する方法も使えます。
- TurboWarp PackagerのサイトでファイルをロードするURLブラウザでTurboWarp Packagerにアクセスし、sb3ファイルをドラッグ＆ドロップするかファイル選択ダイアログで読み込みます。
- 書き出し設定を確認する画面サイズ（Scratchのデフォルトは480×360）、ターボモードのオン・オフ、コントロールバーの表示設定などを必要に応じて変更します。タッチデバイスでプレイさせたい場合は「タッチ操作」の設定を有効にしておくと操作性が上がります。
- 「パッケージ」を実行してファイルを書き出すHTMLまたはZIPを選んでダウンロードします。単一HTMLは扱いが簡単ですが、音声や画像が多い作品では数十MBを超えることがあります。ZIPはファイルを分離するため軽量になりますが、サーバーや投稿先がZIPの展開に対応している必要があります。
- ローカルで動作確認するダウンロードしたHTMLファイルをブラウザで開き、ゲームが正しく動くか確認します。効果音・BGMの再生、セーブ機能（ローカルストレージを使うブロック）、外部URL通信を使うブロックは特に確認が必要です。ローカルで動作しない機能は、アップロード後も動きません。
- 配布先にアップロードする確認済みのファイルをホスティングサービスや投稿プラットフォームにアップロードします。
変換後に起きやすい問題と対処
音声が再生されないブラウザはユーザー操作前の自動再生を制限しています。ゲーム開始前に「クリックしてスタート」などのUIを挟むと、多くの場合解消されます。TurboWarp Packagerはデフォルトでこの画面を挿入する設定になっているため、無効にしている場合は注意が必要です。
セーブデータが引き継がれないScratchのクラウドセーブはScratchサーバーへの通信を使います。変換後のHTMLはこの通信ができないため、クラウド変数を使ったセーブ機能は動作しません。代わりにローカルストレージを使うブロックに切り替えるか、データ保存を諦める設計にする必要があります。
拡張機能のブロックが動かないScratchの公式拡張機能（音楽・ペンなど）はTurboWarpでも概ね対応しています。一方、非公式の拡張機能（外部ファイルを読み込む形式のもの）はパッケージャーによって対応状況が異なります。変換前に使用している拡張機能を洗い出し、TurboWarpの対応状況を公式ドキュメントで確認してください。
ファイルサイズが大きすぎる音声ファイルや背景画像を多用している作品は単一HTMLが100MBを超えることがあります。投稿先にファイルサイズの上限がある場合はZIP形式を試すか、素材の解像度・ビットレートを下げてからsb3を再エクスポートします。
配布先とファイル形式の選び方
変換後のHTMLをどこに置くかによって、適切なファイル形式が変わります。
- GitHub Pages などの静的ホスティング、推奨形式：単一HTMLまたはZIP展開後、注意点：ZIPをそのままアップロードしても動かない。展開してindex.htmlを置く
- アソバースへのZIP投稿、推奨形式：ZIPファイル、注意点：ZIPの構造とエントリーポイントの指定に従う
- 自分のサーバー、推奨形式：どちらでも、注意点：MIMEタイプの設定に注意
- iframe埋め込み、推奨形式：単一HTML（URLが必要）、注意点：埋め込み先のCSPに注意
アソバースはHTMLファイルおよびZIPファイルの投稿に対応しています。変換で得たファイルをそのまま投稿できるかは、ファイルサイズとZIPの構造が要件を満たすかどうかで決まります。投稿前にローカルで動作確認を済ませておくと、問題の切り分けがしやすくなります。
次の行動
TurboWarp PackagerにScratchプロジェクトのsb3ファイルを読み込み、まず単一HTMLを書き出してブラウザで動作確認してみてください。音声・セーブ・拡張機能の動作を一通り確認してから配布先にアップロードするのが最短で確実な順序です。変換後のHTMLをアソバースに投稿する場合は、投稿ページでファイルサイズの上限と対応形式を確認してから作業を進めてください。
参考資料
- TurboWarp 公式ドキュメント（Packager・拡張機能の対応状況）
- Scratch コンテンツガイドライン（MIT）
- MDN Web Docs — autoplay policy（音声自動再生の制限に関する説明）
