こんにちは！今回は、Scratch（スクラッチ）のようなブロック型プログラミングツールを自作する方法について紹介します。Scratchのようなツールを自作することで、子供やプログラミング初心者向けの教育用アプリケーションをカスタマイズすることができます。この記事では、基本的なブロック型プログラミングツールをHTMLとJavaScriptを使って作成する手順を解説します。
目次
-
ブロック型プログラミングツールの概要
-
必要なツールとライブラリ
-
Blocklyの導入と基本設定
-
独自のブロックを作成する
-
ブロックの動作をカスタマイズする
-
作成したツールの動作確認
-
まとめと発展的なカスタマイズ
-
ブロック型プログラミングツールの概要
ブロック型プログラミングツールとは、視覚的なブロックを組み合わせてプログラムを作成できる環境のことです。Scratchがその代表例であり、プログラミングを楽しみながら学べるため、教育現場でも広く使われています。
このようなツールを自作することで、特定の教育目標に合わせたプログラミング学習環境を提供できます。例えば、特定のアニメーションの学習に特化したブロックセットを作ったり、科学実験をシミュレートするブロックを追加したりすることが可能です。
- 必要なツールとライブラリ
今回のプロジェクトでは、Googleが提供するオープンソースのライブラリ「Blockly」を使います。Blocklyは、JavaScriptで簡単にブロック型プログラミングエディタを作成できるツールです。
必要なもの
HTMLとJavaScriptの基礎知識
Webブラウザ
Blockly（公式サイトからダウンロード可能）
- Blocklyの導入と基本設定
まずは、Blocklyを使って基本的なブロック型プログラミングツールを作成します。
- HTMLファイルの作成
以下のコードを新しいHTMLファイルにコピーし、「index.html」として保存します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Blockly Demo</title>
<script src="https://unpkg.com/blockly/blockly.min.js"></script>
<style>
#blocklyDiv {
height: 480px;
width: 600px;
}
</style>
</head>
<body>
<h1>ブロック型プログラミングツール</h1>
<div id="blocklyDiv"></div>
<script>
// Blocklyの基本設定
var workspace = Blockly.inject('blocklyDiv', {
toolbox: `
<xml xmlns="https://developers.google.com/blockly/xml">
<block type="controls_if"></block>
<block type="logic_compare"></block>
<block type="math_number"></block>
<block type="math_arithmetic"></block>
<block type="text"></block>
</xml>`
});
</script>
</body>
</html>
このコードは、Blocklyの基本エディタを設定しています。Blockly.inject関数を使用して、HTMLの
- 独自のブロックを作成する
Blocklyでは独自のブロックを定義することができます。次は、新しいブロックを作成してみましょう。
- JavaScriptで独自のブロックを追加
以下のコードを上記のスクリプトタグ内に追加します。
Blockly.defineBlocksWithJsonArray([
{
"type": "greet_block",
"message0": "こんにちは、 %1!",
"args0": [
{
"type": "field_input",
"name": "NAME",
"text": "世界"
}
],
"previousStatement": null,
"nextStatement": null,
"colour": 160,
"tooltip": "挨拶を表示します",
"helpUrl": ""
}
]);
このコードで、「こんにちは、〇〇！」というメッセージを表示する独自のブロックを作成しました。ブロックにはテキストフィールドがあり、ユーザーが名前を入力できます。
- ブロックの動作をカスタマイズする
次に、独自ブロックの動作を指定します。以下のコードを追加してください。
Blockly.JavaScript['greet_block'] = function(block) {
var name = block.getFieldValue('NAME');
var code = 'console.log("こんにちは、' + name + '！");\n';
return code;
};
このコードは、「greet_block」ブロックが実行されたときのJavaScriptコードを生成します。ここでは、コンソールに挨拶メッセージを表示するコードを返しています。
- 作成したツールの動作確認
ここまでのコードを保存して、ブラウザで「index.html」を開きます。独自のブロックがツールボックスに追加されていることを確認してください。ブロックをエディタにドラッグして組み立て、JavaScriptコードを生成できます。
生成したコードの実行
現在のコードでは、生成されたJavaScriptコードはコンソールに表示されます。生成されたコードの実行結果を確認するには、ブラウザの開発者ツールを開いてコンソールをチェックしましょう。
- まとめと発展的なカスタマイズ
この記事では、Blocklyを使って基本的なブロック型プログラミングツールを自作する手順を紹介しました。Blocklyを使えば、独自のブロックを定義し、プログラムの実行動作を自由にカスタマイズできます。
発展的なカスタマイズ例
ブロックの追加：Blocklyには数多くのプリセットブロックがありますが、独自の動作を持つブロックを追加することで、オリジナルのプログラミング環境を構築できます。
UIのカスタマイズ：子供向けのツールを作成する場合は、UIデザインを工夫して、より使いやすくカスタマイズすることも可能です。
他のライブラリとの連携：作成したツールと外部APIやデータベースを連携させて、より高度なプログラミング学習環境を作ることも考えられます。
これで、Scratchのようなブロック型プログラミングツールを自作するための基礎ができました。今後は、対象年齢や学習内容に合わせて独自ブロックを増やしたり、エディタの見た目や機能をカスタマイズしてみてください。
続編も投稿します。