Goal

blocklyをとりあえず始めてみるまで

Reference

公式サイト：https://developers.google.com/blockly/
Web版の資材：https://developers.google.com/blockly/guides/get-started/web#get_the_code

Nostalgia

以前仕事で作った業務サイトで、プログラマではない人向けに機能拡張を行うダッシュボードを作ったのですが、
そのときは管理者に、設定として（ここ大事！）スクリプトを書かせるという、ハードな仕様を作ってしまったのでした
あれから数年。。。今ならこうするという懐古をこめて、この記事を書いていきます。
そんなわけで、件の機能拡張UIがイイカンジにできるまで続けていきたいと思ってます。

Get Started

まずは公式から資材を持ってきて、展開します。
ファイル構成は以下のようにします。使わないファイルは今はいらないです。

root
│  index.html
│
├─js
│  │  blockly_compressed.js
│  │  blocks_compressed.js
│  │
│  └─msg
│      └─js
│              ja.js
│
└─media
        中身すべて

mediaについては、外部リソースを使うこともできます。面倒ならそちらでも

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>blockly test</title>
</head>
<body>
  <div id="blocklyDiv" style="height: 480px; width: 600px;"></div>
  <xml id="toolbox" style="display: none">
    <category name="Control" colour="120">
      <block type="controls_if"></block>
      <block type="controls_whileUntil"></block>
      <block type="controls_for">
    </category>
    <category name="Logic" colour="210">
      <block type="logic_compare"></block>
      <block type="logic_operation"></block>
      <block type="logic_boolean"></block>
    </category>
    <category name="Text" colour="230">
      <block type="text"></block>
      <block type="text_print"></block>
    </category>
    <!-- 必要なブロックを並べる -->
  </xml>

  <script src="js/blockly_compressed.js"></script>
  <script src="js/blocks_compressed.js"></script>
  <script src="js/msg/js/ja.js"></script>
  <script>
    var workspace = Blockly.inject('blocklyDiv', {
      toolbox: document.getElementById('toolbox'),
      media: 'media/'  // 外部リソースを使うならこれはいらない
    });
  </script>
</body>
</html>

これだけ。toolboxは既存のブロックをドンドコ追加できます。
あとはつなげて遊べばいいよー

Blockly事始め

Goal

Reference

Nostalgia

Get Started