ものすごいものが公開されました。Scratchの拡張機能をScratch感覚で制作できるサイトがついに公開されました。TurboBuilderです。PenguinMod等で近日公開と告知されていましたが、自分は2023/12/17ぐらいに公開されたことを確認しました。
今回はこのツールを色々いじって実際に拡張機能を作ってみました。

TurboBuilderとは？

TurboBuilderはSnail IDEでURLが公開されている、Scratchの拡張機能をつくることができるサイトです。作った拡張機能は実際にTurbowarp/PenguinMod/Snail IDEで読み込むことができます。

URL

TurboBuilder 
(新版)https://dev-turbobuilder.vercel.app/
(旧版)https://turbobuilder-steel.vercel.app/
CreateExt(フォーク版)
 https://ext-create.vercel.app/

機能

ブロックエディター

コードを書く場所です。ここで拡張機能を作っていきます。

Assets (アセット)

上から拡張機能の説明のURL、ブロックパレットのアイコンに表示する画像、拡張機能のブロックの左に表示する画像を指定します。

Extension Code (拡張機能のコード)

ブロックで作った拡張機能のコードをリアルタイムでJavaScriptに変換しています。Copyはコードをコピーします。Downloadはコードを.js形式でダウンロードします。コピー/ダウンロードした機能Turbowarp/PenguinMod/Snail IDEで読み込むことができます。

Edit Extension Colors (拡張機能の色を編集)

拡張機能で作ったブロックの色を編集することができます。

上のバー

左からテーマの変更(ライト、ダーク)、TurboBuilderのDiscordのリンク、制作した拡張機能のデータの保存、拡張機能のデータの読み込み、拡張機能のID(英数字、一部の記号のみ)、拡張機能の名前です。

拡張機能を作る

それでは実際に拡張機能をつくってみましょう。

ブロックの紹介

TurboBuilderには結構な数の新しいブロックが追加されています。なので、Scratch以外のプログラミングをやったことのない方には少し難しいとおもうので、主要なブロックの説明だけします。

create block

新しいブロックを作ることができます。

idにはブロックのIDを入力します。他のブロックのIDとかぶらないよう、独特な名前にすることをおすすめします。ただ、idは英数字と一部の記号しか使えないので気を付けてください。

textにはブロックに表示する文字を書きます。(「10歩歩く」、「大きさを100％にする」など)

typeにはブロックの形を入力します。「block」は普通のブロック、「reporter」は左右の角が丸いブロック(値ブロック)、「boolean」左右の角が三角のブロック(真偽ブロック)です。
[ここにinputする値の名前を書く]を書くと値を格納できます。(例: [A]歩歩く)

inputsには、create blockブロックで[　]を使った場合は、create inputブロックをいれてください。idにはcreate blockに書いた[　]の中身の文字を書いてください。
⚠️[　]と同じ数だけ「create input」ブロックをいれてください。

create input

ここで少しcreate inputの説明を。

typeではブロックの形を選択してください。「string」は文字列、「number」は数字、「boolean」左右の角が三角のブロック(真偽ブロック)、「color」は左右の角が丸い単色のブロック、「costume」はコスチュームの選択肢のブロック、「sound」は音の選択肢のブロック、「angle」は角度の調節のブロック、「empty」は空(？)です。「note」は音楽ブロック関連だと思います。matrixは不明です。

defaultには標準の値をブロックを使って入力してください。stringの場合は「*string*」ブロックを、numerに場合は「(0)」ブロックを入れるといった感じです。

create blockのfunction

functionにはそのブロックが何をするかを書きます。
typeでreporterまたはbooleanを選んだ場合は「return」ブロックが重要になります。inputした値を使うには、「Blocks」の「get()」にinputした値のIDを入力すればその値を使うことができます。また、「Variables」の「set()to()」というブロックはScratchの「変数を()にする」ブロックと似ていて、set()にはinputした値のIDを、to()には設定したい値を入れてください。

ブロックの例: [S]から[G]までの数字をたした数

参考になる記事(英語)

自力で拡張機能を作るときに参考にしてください。
Extension Codeと見比べながらやると便利です。
https://docs.turbowarp.org/development/extensions/introduction

拡張機能の保存、読み込み、エクスポート

拡張機能の保存は左上の「Save」というボタンをクリックするとできます。「.tb」という拡張子のファイルがダウンロードできれば成功です。
「Save」の隣の「Load」というボタンをクリックして保存したファイルを選択すれば読み込むことができます。
Extension Codeの「Download」をクリックすれば「.js」形式で拡張機能が保存されます。

Turbowarpで読み込む(インポート)

Turbowarpで左下の拡張機能ボタンをクリックし、「カスタム拡張機能」を選択します。「ファイル」から作った拡張機能を読み込んでください。または「テキスト」にExtension Codeをコピーしたものを貼り付けてください。
ブロックパレットに表示されれば成功です。

まとめ

自分が使った感覚で言えば、Scratch感覚でできるのは確かにとても便利だなと思いました。ただ、やはりプログラミングの基本的な知識は必要だなとは思いました。

ファイル配布

今回自分がつくった拡張機能「数学入門」を配布します。二次配布、自作発言等はNGです。プロジェクトを作るうえで使用する場合はクレジット表記は不要です。ただ、この拡張機能をもとに拡張機能を作る場合はクレジット表記をしてください。GitHubでも配布しています。

アップデート

log、root(多分√)、いくつかの数学関数が追加されました。(2023/12/19)
Nミリ秒待つ、Nまで待つ、N回繰り返すブロックが追加されました。(2023/12/20)
何年かわかるブロックとうるう年かわかるブロックが追加されました。また、「Debug」は「Technical」に変更されました。(2023/12/26)

どうでもいい話

TurboBuilderのDiscord鯖で14番目に入った。多分日本人初では()