Scratchで「もっと自由にプログラムできたら」と思ったことはありませんか？
TurboWarpなら、Scratchの動作を高速化し、JavaScriptで拡張できます！
本記事では、TurboWarpの基本からJavaScriptの活用方法まで分かりやすく解説します。
TurboWarpとは？
TurboWarpの基本情報
TurboWarpは、Scratchの非公式エディタで、以下のような特徴を持つ強力なツールです：
- Scratchプロジェクトの高速化：Scratchよりも効率的にプロジェクトを実行可能。
- カスタムJavaScriptの利用：Scratchの拡張としてJavaScriptコードを組み込むことができる。
- HTMLやアプリへの変換：作成したプロジェクトをHTMLファイルやEXE形式に変換可能。
公式サイト：https://turbowarp.org
TurboWarpを使うメリット
- 高度なカスタマイズ
JavaScriptでカスタムブロックを作成し、Scratchプロジェクトに追加できます。 - 外部APIの活用
天気予報やゲームのデータベースなど、外部サービスとの連携が可能になります。 - 実践的なプログラミングの練習
ScratchでのビジュアルプログラミングからJavaScriptに移行する良いステップになります。
TurboWarpでJavaScriptを使う準備
ステップ1：Scratchプロジェクトを作成
- Scratch公式サイト（またはオフラインエディタ）でプロジェクトを作成します。
- 作成したプロジェクトを
.sb3ファイルとして保存します。
ステップ2：TurboWarpでプロジェクトを開く
- TurboWarpの公式サイトにアクセス：https://turbowarp.org
- 「ファイルを開く」をクリックし、保存したScratchプロジェクト（.sb3ファイル）をアップロードします。
ステップ3：JavaScript拡張を有効化
- TurboWarpの右上にある「歯車アイコン（設定）」をクリックします。
- 設定メニュー内で、”Enable JavaScript Extension”（JavaScript拡張を有効化）をオンにします。
JavaScriptコードを追加してカスタマイズする方法
JavaScriptを使ってプロジェクトをカスタマイズする方法を見ていきましょう。
(1) カスタム拡張を追加
- TurboWarp画面の左側メニューにある「拡張機能を追加」をクリックします。
- 「Custom Extension（カスタム拡張）」を選択します。
- 「JavaScriptコード入力欄」が表示されるので、ここにJavaScriptコードを書きます。
(2) JavaScriptコードの具体例
以下に、TurboWarpで使える簡単なJavaScriptコード例をいくつか紹介します。
例1：スプライトの色をランダムに変え
このコードは、Scratch内のスプライトの色をランダムに変更するカスタムブロックを作成します。
コード
// ランダムな色を生成する関数
function getRandomColor() {
return Math.random() * 100; // Scratchの「色効果」は0〜100
}
// カスタムブロックの登録
window.ScratchExtensions.register('Random Color Extension', {
blocks: [
{
opcode: 'changeColor',
blockType: 'command',
text: 'Change color of [sprite]',
arguments: {
sprite: {
type: 'string',
menu: 'sprites',
},
},
},
],
menus: {
sprites: 'getAllSpriteNames',
},
execute({ sprite }) {
const target = window.vm.runtime.getSpriteTargetByName(sprite);
if (target) {
target.setEffect('color', getRandomColor());
}
},
});
解説
getRandomColor：ランダムな値を生成し、色効果を設定します。window.ScratchExtensions.register：カスタム拡張機能をTurboWarpに登録する関数です。- ブロック名：「Change color of [sprite]」というScratchブロックが追加されます。
Scratch内での使い方
- TurboWarpの「カスタムブロック」からこの新しいブロックを選択し、スプライトの色をランダムに変えることができます。
例2：外部APIを使って天気情報を取得
JavaScriptで外部API（天気情報）を取得し、Scratchの変数に反映します。
コード
javascriptコピーする編集するconst API_URL = 'https://api.openweathermap.org/data/2.5/weather?q=Tokyo&appid=YOUR_API_KEY';
// 天気情報を取得する関数
async function getWeather() {
const response = await fetch(API_URL);
const data = await response.json();
return data.weather[0].description; // 天気の説明を取得
}
// カスタムブロックを登録
window.ScratchExtensions.register('Weather Info Extension', {
blocks: [
{
opcode: 'getWeather',
blockType: 'reporter',
text: 'Get current weather',
},
],
execute() {
return getWeather();
},
});
解説
- APIのURLを指定：東京の天気を取得するAPIを指定します（APIキーが必要）。
- 天気の説明を取得：APIの結果を取得し、そのままScratchに反映します。
- レポーターブロック：Scratch上で値を返す「レポーターブロック」を作成しています。
Scratch内での使い方
- TurboWarpでこのブロックを追加し、天気情報を表示する仕組みを作れます。
TurboWarpでのJavaScript活用の注意点
注意1：JavaScriptの基礎を少し理解しておく
TurboWarpでJavaScriptを使うには、変数や関数、条件分岐などのJavaScriptの基礎知識が必要です。Scratchでプログラミングの基礎を学んでいる人なら、スムーズに取り組めるはずです。
注意2：APIキーの扱いに注意
外部APIを使う場合、APIキーを含むコードは他の人に公開しないよう注意してください。公開すると悪用されるリスクがあります。
注意3：プロジェクトをTurboWarpで実行する必要がある
TurboWarpで追加したJavaScript拡張は、Scratch公式エディタでは動作しません。そのため、TurboWarp上で実行またはエクスポートして利用する必要があります。
TurboWarpを使うメリットを最大限活かそう！
- Scratchの直感的なプログラミングを活かしながら、JavaScriptで機能を拡張できる。
- 高度なプロジェクトや外部APIとの連携が可能になり、より実践的なスキルを学べる。
- 作成したプロジェクトをHTML形式やアプリとしてエクスポートして配布できる。
TurboWarpでJavaScriptを活用する方法：まとめ
この記事のポイントをまとめました。
・TurboWarpとは？ → Scratchの非公式エディタで、高速化＆JavaScript拡張が可能
・TurboWarpを使うメリット → Scratchではできない高度なカスタマイズや外部API連携ができる
・TurboWarpでJavaScriptを使う方法 → 設定で「JavaScript拡張」を有効化するだけ
・Scratchプロジェクトの読み込み方 → .sb3 ファイルをTurboWarpにアップロードして開く
・カスタムブロックの作り方 → JavaScriptを使って独自のブロックを追加できる
・コードの具体例① → スプライトの色をランダムに変える JavaScriptのサンプルコード付き
・コードの具体例② → 外部API（天気情報）を取得 してScratchの変数に反映する方法
・JavaScript利用時の注意点 → APIキーを公開しないこと！（セキュリティ対策）
・TurboWarpの制約 → JavaScript拡張を使うと、Scratch公式エディタでは動作しない
・プロジェクトの公開方法 → TurboWarpを使えば、ScratchプロジェクトをHTMLやEXEに変換できる
