ブロック状

Blockly-ビジュアルプログラミングツール入門アップデート



Blockly Visual Programming Tool Getting Started Update



概要概要

Webベースのオープンソースのビジュアルプログラムエディタ。
Blocklyは、サーバーからのサポートを必要とせず（クラウドストレージなどのサーバー側の機能を使用する場合を除く）、サードパーティの依存関係を必要としない（カーネルを再コンパイルする場合を除く）完全なクライアントアプリケーションであり、すべてが開いています。ソース。

利点

  1. コードのエクスポート可能-JavaScript、Python、PHP、Lua、Dart言語のソースコードのエクスポートをBlocklyが直接サポートします。
  2. オープンソース-すべてのソースコードをブロック的に開きます。コピー、変更、およびWebサイトやAndoridなどのアプリケーションに適用できます。
  3. スケーラブル-APIに基づいて新しいカスタムの「ブロック」を追加したり、不要なブロックや関数を移動したりするなど、必要に応じてBlocklyを調整できます。
  4. 高可用性-Blocklyはおもちゃではなく、複雑なプログラミングタスクを実装するために使用できます国際化-Blocklyは40以上の言語に翻訳されていますBlockly
  5. エディターは、Web、Android、またはiOS環境にすばやく統合されます。

デモによる二次開発

zipをダウンロード https://github.com/google/blockly/zipball/master
ソースコードをダウンロードして解凍したら、ブラウザで開くことができます。demos/fixed/index.htmlファイル、Blocklyのブロックをドラッグできることを確認するなど。
demos試すべき他のデモがあります



1.グラフィック：

画像

2.実行コードを実行します

function executeBlockCode() { var code = Blockly.JavaScript.workspaceToCode(workspace) var initFunc = function (interpreter, scope) { var alertWrapper = function (text) { text = text ? text.toString() : '' return interpreter.createPrimitive(alert(text)) } interpreter.setProperty(scope, 'alert', interpreter.createNativeFunction(alertWrapper)) var promptWrapper = function (text) { text = text ? text.toString() : '' return interpreter.createPrimitive(prompt(text)) } interpreter.setProperty(scope, 'prompt', interpreter.createNativeFunction(promptWrapper)) } var myInterpreter = new Interpreter(code, initFunc) / / Here loop execution function (printing, etc.) var stepsAllowed = 10000 while (myInterpreter.step() && stepsAllowed) { stepsAllowed-- } if (!stepsAllowed) { throw EvalError('Infinite loop.') } / / Output the converted code console.log(myInterpreter.value) } document.getElementById('playButton').addEventListener('click', executeBlockCode)

3.左リストhtml

<category id='catLogic' colour='210' name='condition'> <block type='tinet_filter_asr'>block> <block type='tinet_indistinct_match'>block> category>

4.ブロック定義js

Blockly.Blocks['tinet_indistinct_match'] = { init: function () { this.jsonInit({ 'type': 'tinet_indistinct_match', 'message0': 'Project %1 matches %2', 'args0': [ / / Parameter matching { 'type': 'input_value', 'name': 'ITEM', 'check': 'Variable' }, { 'type': 'field_input', 'name': 'EXPRESSION', 'text': 'expression' //Defaults } ], 'inputsInline': true, 'output': null, 'colour': 230, 'tooltip': '', 'helpUrl': '' }) } }

5.コードコールバックjsを生成します

Blockly.JavaScript['tinet_indistinct_match'] = function (block) { var item = Blockly.JavaScript.valueToCode(block, 'ITEM', Blockly.JavaScript.ORDER_ATOMIC) item = item === '' ? 'null' : item var express = block.getFieldValue('EXPRESSION')/ / Take out the contents of the expression express = express === 'regular expression' ? '' : express var code = 'service.check('{'checkType':7, 'regular':'' + express + ''}', ' + item + ', strRegService, result)' return [code, Blockly.JavaScript.ORDER_ATOMIC] }

画像



参考記事 https://itbilu.com/other/relate/4JL8NjUP7.html#get-started