Blockly1.0 って何?教育向けビジュアルプログラミングエディタを作ってみよう | SiTest (サイテスト) ブログ

メニューボタン閉じるボタン

Blockly1.0 って何?教育向けビジュアルプログラミングエディタを作ってみよう

このところ、教育とプログラミングについての話はよくでてきますね。

小学校でプログラミング教育が必修化するニュースは知ってる方も多いと思います。
それに影響をうけ、さまざまなビジュアルプログラミング言語がでてきました。

ビジュアルプログラミング言語とは視覚的なオブジェクトでプログラミングするプログラミング言語です。

Scratch (スクラッチ), MOONBlock (ムーンブロック), VISCUIT (ビスケット)など、聞いたことあるかたも多いと思います。

今回、紹介する Blockly (ブロックリー)もその1つです。

それでは、 Blockly の概要からビジュアルプログラミングエディタを作っているところまで見ていきましょう。

スポンサーリンク

Blockly とは?

Blockly トップ画面

Google が OSS として公開しているビジュアルプログラミング言語です。

特長としては、下記のような点があげられます。
・ピュアな JavaScript ライブラリで150kb未満という軽さ。
・100%クライアント側であり、サーバー側の依存関係はない。
・Chrome, Firefox, Safari, Opera, IE など、主要なブラウザと互換性がある。
・高度な拡張が可能。
・ビジュアルプログラミングした結果を JavaScript, Python, PHP, Lua, Dart といった5つの言語に吐き出すことができる。
・Andoroid 版と iOS 版を対応。

Andoroid 版と iOS 版の対応に関しては、
2017年6月9日 Blockly1.0 公開により追加されました。

下記から、 Blockly により公開されているアプリを体験することができます。

https://blockly-games.appspot.com/

ビジュアルプログラミングエディタを作ってみよう

まず、 GitHub から Blockly を落としましょう。

https://github.com/google/blockly

git clone https://github.com/google/blockly.git

blockly ディレクトリが作成されると思いますので、ディレクトリ内に index.html を作っていきましょう。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
</head>
<body>
</body>
</html>

まずは、基本的な形を作ります。
その後、<head></head>に必要モジュールを読み込んでいきます。
今回は本体モジュール、ブロックジュール、翻訳モジュールを読み込みます。

<script src="blockly_compressed.js"></script>
<script src="blocks_compressed.js"></script>
<script src="msg/js/ja.js"></script>

次に、<body></body>内にコードを埋め込んでいきます。
エディタを定義し、 style 属性で幅や高さを持たせてあげます。

<div id="blocklyDiv" style="height: 480px; width: 600px;"></div>

次にツールボックスを読み込みます。
コントロールカテゴリに cotroles_if ブロックだけ読み込んでいきます。
カテゴリとブロックは xml に囲む形で書いて下さい。

<xml id="toolbox" style="display: none">
  <category name="コントロール" colour="120">
    <block type="controls_if"></block>
  </category>
</xml>

最後に下記のスクリプトを埋め込みます。

<script>
  var workspace = Blockly.inject('blocklyDiv', {
    toolbox: document.getElementById('toolbox'),
  });
</script>

これで完成です。
index.html の全体像としてはこのようになります。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <script src="blockly_compressed.js"></script>
  <script src="blocks_compressed.js"></script>
  <script src="msg/js/ja.js"></script>
</head>
<body>
  <div id="blocklyDiv" style="height: 480px; width: 600px;"></div>
  <xml id="toolbox" style="display: none">
    <category name="コントロール" colour="120">
      <block type="controls_if"></block>
    </category>
  </xml>
  <script>
    var workspace = Blockly.inject('blocklyDiv', {
      toolbox: document.getElementById('toolbox'),
    });
  </script>
</body>
</html>

それでは、 index.html をブラウザで開いて確認してみましょう。

Blockly エディタ

ビジュアルプログラミングエディタが見えていますね。

カテゴリととブロックを増やしてみましょう。
ツールボックスに下記を追加してブラウザを確認してみましょう。

<category name="ロジック" colour="210">
  <block type="logic_compare"></block>
  <block type="logic_operation"></block>
  <block type="logic_boolean"></block>
</category>
<category name="テキスト" colour="230">
  <block type="text"></block>
  <block type="text_print"></block>
</category>

再度、ブラウザで確認してみましょう。

Blockly カテゴリとブロックを追加

ブロックが増えてますね。
ビジュアルプログラミングエディタの完成です。

まとめ

いかがでしたでしょうか?

Blockly には他にも プログラミング言語に吐き出すように拡張したり、
ゲーム要素を取り入れたりとさまざまなことができるようになっています。

是非、 Blockly を拡張して、教育向けのビジュアルプログラミングエディタを作ってみてください。


03-6441-3336

いますぐ無料で
お試しください。

SiTestの革新的な機能を、
1か月間無料でお試しいただけます。

お名前【必須】
メールアドレス【必須】
電話番号【必須】

利用規約はこちら