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

2017/07/12 カテゴリ - JavaScript,フロントエンド,技術情報

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

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

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

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 を拡張して、教育向けのビジュアルプログラミングエディタを作ってみてください。

お問い合わせ

SiTest の導入検討や
他社ツールとの違い・比較について
弊社のプロフェッショナルが
喜んでサポートいたします。
コンサルティング

ヒートマップの活用、ABテストの実施や
フォームの改善でお困りの方は、
弊社のプロフェッショナルが
コンサルティングいたします。
今すぐお気軽にご相談ください。

今すぐお気軽に
ご相談ください。

0120-315-465

（平日 10:00~19:00）

今すぐお気軽に
ご相談ください。

0120-315-465

（平日 10:00~19:00）

グラッドキューブは
「ISMS認証」を取得しています。

認証範囲：
インターネットマーケティング支援事業、インターネットASPサービスの提供、コンテンツメディア事業

「ISMS認証」とは、財団法人・日本情報処理開発協会が定めた企業の情報情報セキュリティマネジメントシステムの評価制度です。

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