Blocklyでスライダー入力を行う #JavaScript

Blocklyとは

Googleの開発している、ブロックプログラミングを自由に自分で作れちゃうやつ

2021年のゴールデンウィークに発表があって、プラグインが色々でてきました！

公式のサンプル: https://google.github.io/blockly-samples/

ということで、このプラグインを使った(ギリギリ)最新の情報を記事にしていきます。

用語

リファレンスでトップにある単語をちょっと触った自分がまとめてみました（間違ってたらコメントお願いします汗）

Blockly まぁ全体のこと
Workspace ブロックを組む場所
Toolbox ブロックがある場所
Block ブロック自体 Workspaceに置かれているものには固有idがある画像の場合は2つのBlockがWorkspaceに置かれている
Field ブロック内の入力やテキストの情報
Generator ブロック配置からコードの生成 JS以外にもPythonなども

Blocklyを使ってJavaScript実行までの最小構成

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://unpkg.com/blockly/blockly.min.js"></script>

  <title>Blockly test</title>
</head>
<body>
  <!-- Toolboxのブロック -->
  <xml xmlns="https://developers.google.com/blockly/xml" id="toolbox" style="display: none">
    <block type="math_number">
      <field name="NUM">123</field>
    </block>
    <block type="text"></block>
    <block type="text_print"></block>
  </xml>

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

  <!-- 実行ボタン -->
  <button onclick="run()">実行</button>

  <script>
    const demoWorkspace = Blockly.inject('blocklyDiv',
      {
        media: 'https://unpkg.com/blockly/media/',
        toolbox: document.getElementById('toolbox')
      });

    function run() {
      const code = Blockly.JavaScript.workspaceToCode(demoWorkspace);
      console.log(code);
      try {
        eval(code);
      } catch (e) {
        alert(e);
      }
    }
  </script>
</body>
</html>

カスタムブロックの最小構成

ifやprintなど揃ってますが、自分でもオリジナルのブロックが作れます！

作り方は以下のサイトがけっこう詳しく書いてます

ブロック情報はだいたい別ファイルにするのが普通ですが、あえて1つのファイルで書いてみると…

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://unpkg.com/blockly/blockly.min.js"></script>
  <script>
    Blockly.Blocks['custom_test'] = {
      init: function () {
        this.appendDummyInput()
          .appendField("テストの値は")
          .appendField(new Blockly.FieldNumber(0), "num")
          .appendField("です");
        this.setOutput(true, null);
        this.setColour(230);
        this.setTooltip("");
        this.setHelpUrl("");
      }
    };
    Blockly.JavaScript['custom_test'] = function (block) {
      var number_num = block.getFieldValue('num');
      var code = number_num;
      return [code, Blockly.JavaScript.ORDER_NONE];
    };
  </script>

  <title>Blockly test</title>
</head>

<body>
  <!-- Toolboxのブロック -->
  <xml xmlns="https://developers.google.com/blockly/xml" id="toolbox" style="display: none">
    <block type="math_number">
      <field name="NUM">123</field>
    </block>
    <block type="text"></block>
    <block type="text_print"></block>
    <block type="custom_test"></block>
  </xml>

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

  <!-- 実行ボタン -->
  <button onclick="run()">実行</button>

  <script>
    const demoWorkspace = Blockly.inject('blocklyDiv',
      {
        media: 'https://unpkg.com/blockly/media/',
        toolbox: document.getElementById('toolbox')
      });

    function run() {
      const code = Blockly.JavaScript.workspaceToCode(demoWorkspace);
      console.log(code);
      try {
        eval(code);
      } catch (e) {
        alert(e);
      }
    }
  </script>
</body>

</html>

さっそくPluginを使ってスライダー入力にしてみる

ここからは、最新情報ですね。

プラグインのところへ行き、使いたいものを選択
例えば、@blockly/field-slider

それぞれの説明にはビルドするようのコードしか説明に書かれてないです

ですがいったん、npmでインストールしましょう(yarnでも可)

npm i @blockly/field-slider

そうすると、node_modulesの中にdistフォルダがあって、

これをscriptで読み込んであげればオッケーです

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://unpkg.com/blockly/blockly.min.js"></script>
  <script src="node_modules/@blockly/field-slider/dist/index.js"></script>
  <script>
    Blockly.Blocks['custom_test'] = {
      init: function () {
        this.appendDummyInput()
          .appendField("テストの値は")
          .appendField(new FieldSlider(1, 0, 10, 0.1), "num")
          .appendField("です");
        this.setOutput(true, null);
        this.setColour(230);
        this.setTooltip("");
        this.setHelpUrl("");
      }
    };
    Blockly.JavaScript['custom_test'] = function (block) {
      var number_num = block.getFieldValue('num');
      var code = number_num;
      return [code, Blockly.JavaScript.ORDER_NONE];
    };
  </script>

  <title>Blockly test</title>
</head>

<body>
  <!-- Toolboxのブロック -->
  <xml xmlns="https://developers.google.com/blockly/xml" id="toolbox" style="display: none">
    <block type="math_number">
      <field name="NUM">123</field>
    </block>
    <block type="text"></block>
    <block type="text_print"></block>
    <block type="custom_test"></block>
  </xml>

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

  <!-- 実行ボタン -->
  <button onclick="run()">実行</button>

  <script>
    const demoWorkspace = Blockly.inject('blocklyDiv',
      {
        media: 'https://unpkg.com/blockly/media/',
        toolbox: document.getElementById('toolbox')
      });

    function run() {
      const code = Blockly.JavaScript.workspaceToCode(demoWorkspace);
      console.log(code);
      try {
        eval(code);
      } catch (e) {
        alert(e);
      }
    }
  </script>
</body>

</html>

カスタムブロックの部分しか変えてないです。

まとめと所感

公式にも書いといてくれって感じでつまづきました…
distはたしかにコミットはしないだろうけど、cdnとかにあったら便利だしこれからしてくれるだろうと思ってます…

でもわかると幅が増えてぜひほかのも使ってみたくなりました！(日付入力とか絶対便利)

最小構成のコードは自分のメモとしてもいいですね〜