Blockly를 만져보세요.

Scratch3.0은 Blockly를 사용합니다. visual programming interfaces 를,

되는 빨리, 실현하기 위해 채용되었습니다.

매우 쉽게 자신의 Visual programming interfaces를 만들 수 있습니다.

ref htps : // 기주 b. 이 m / lk / sc 등 tch-b ぉ cks

Scratch Block 코드에 들어가기 전에 Blockly를 만져보세요!

Blockly란?

Blockly는 JavaScript 라이브러리입니다. 웹, 안드로이드, iOS,
Visual programming interfaces를 제공합니다.

다음 데모를 볼 수있는 것이 빠릅니다.

Scratch 같은, Block을 연결해, 프로그램을 쓸 수 있는 것 같습니다.

Blockly를 사용해 보자 !!

자바 스크립트 라이브러리를 가져 가자.
git clone htps : // 기주 b. 이 m/오오 gぇ/bぉ CKLY. 기 t

다음 JavaScript 파일이 포함되어 있습니다.

이것들을 이용해, Blockly를 조작합니다.

blockly_accessible_compressed.js
blockly_compressed.js
blocks_compressed.js
dart_compressed.js
javascript_compressed.js
lua_compressed.js
package-lock.json
package.json
php_compressed.js
python_compressed.js

Blockly의 Block을 배치해 봅시다.

emacs hello_01.html

<html>

<head>
  <meta charset="utf-8">
  <title>Blockly Demo: Fixed Blockly</title>
  <script src="./blockly_compressed.js"></script>
  <script src="./blocks_compressed.js"></script>
  <script src="./msg/js/en.js"></script>
</head>
<body>
  <div id="blocklyDiv" style="height: 480px; width: 800px;"></div>
  <xml id="toolbox" style="display: none">
    <block type="math_number"></block>
    <block type="controls_if"></block>
    <block type="logic_compare"></block>
    <block type="controls_repeat_ext"></block>
    <block type="math_number"></block>
    <block type="math_arithmetic"></block>
    <block type="text"></block>
    <block type="text_print"></block>
  </xml>
  <script>
    var blockyWorkspace = Blockly.inject('blocklyDiv',
        {toolbox: document.getElementById('toolbox')});
  </script>
</body>
</html>

라고 써 봅시다.

이로 인해 Visual Programming 용 Editor가 작동합니다.

Blockly.inject() 사용

Blockly.inject ({블록을 넣을 곳의 DOM}, {도구 상자 설정의 DOM})에서,

DIV 블록과 연결됩니다.

기본적으로 도구 상자에 넣고 싶은 블록은 htps : // 기주 b. 이 m / go g / b ckly / t re / r / b cks

에 등록되어있는 Block이라면,

추가할 수 있습니다.

Blockly 코드를 Javascript로 변환해 봅시다.

emacs index_02.html

<html>
<head>
  <meta charset="utf-8">
  <title>Blockly Demo: Fixed Blockly</title>
  <script src="./blockly_compressed.js"></script>
  <script src="./blocks_compressed.js"></script>
  <script src="./msg/js/en.js"></script>
  <script src="./dart_compressed.js"></script>
  <script src="./javascript_compressed.js"></script>
</head>
<body>
  <button id="dartButton">Dart</button>
  <button id="javascriptButton">Javascript</button>
  <button id="runButton" style="background-color: red;">Run</button>
  <div id="blocklyDiv" style="height: 480px; width: 800px;"></div>
  <xml id="toolbox" style="display: none">
    <block type="math_number"></block>
    <block type="controls_if"></block>
    <block type="logic_compare"></block>
    <block type="controls_repeat_ext"></block>
    <block type="math_number"></block>
    <block type="math_arithmetic"></block>
    <block type="text"></block>
    <block type="text_print"></block>
  </xml>
  <script>
    var blockyWorkspace = Blockly.inject('blocklyDiv',
        {toolbox: document.getElementById('toolbox')});
    var dartButton = document.getElementById("dartButton");
    dartButton.addEventListener("click", function(){
      var code = Blockly.Dart.workspaceToCode(blockyWorkspace);
      alert(code);
    });

    var javascriptButton = document.getElementById("javascriptButton");
    javascriptButton.addEventListener("click", function(){
      var code = Blockly.JavaScript.workspaceToCode(blockyWorkspace);
      alert(code);
    });


    var runButton = document.getElementById("runButton");
    runButton.addEventListener("click", function(){
      var code = Blockly.JavaScript.workspaceToCode(blockyWorkspace);
      console.log(code);
      try {
        eval(code);
      } catch (e) {
        alert(JSON.stringify(e));
      }
    });
  </script>
</body>
</html>

Dart와 버튼과 JavaScript 버튼과 RUN 버튼을 추가했습니다.
JavaScript 버튼을 누르면 정렬된 블록을 JavaScript로 변환합니다.

RUN 버튼을 누르면 JavaScript로 변환된 후 JavaScript를 실행합니다.

Blockly.JavaScript.workspaceToCode 사용

Blockly.JavaScript.workspaceToCode(blockyWorkspace);
JavaScript로 변환할 수 있습니다.

      try {
        eval(code);
      } catch (e) {
        alert(JSON.stringify(e));
      }

그렇다면 생성 된 JavaScript를 실행할 수 있습니다!

계속

PS

이번 코드는 다음

이하의 장소에서도, 알레코레 써 갑니다.

Scratch3.0 자신 전용기를 만들자!!

(0) Scratch 3.0 자신 전용기를 만들자!! (0)
(1) Scratch3.0을 빌드해 보자
(2) Scratch3.0을 Android 앱으로 작동합시다 (1)
(3) Scratch3.0을 Android 앱으로 작동합시다. (2)
(4) Scratch3.0을 Android 앱으로 작동합시다 (3)
(5) Webpack이란?
(6) Scratch3.0의 package.json을 읽어 보자.
(7) scratch-gui를 설치해 봅시다.
(8) scratch-vm에 사용되는 scratch-xxx를 만져 보자.
(9) Babel을 만져 보자.
(10) scratch-render.js에서 무언가를 만들어 만져 보자.
(11) scratch-storage.js를 만져 보자.
(12) Blockly를 만져 보자.

Scratch2.0 입문

불의 형태 With Scratch 2.0 (프로그램 입문) 00권
불의 형태 With Scratch 2.0 (프로그램 입문) 01권
화염 유형 With Scratch 2.0 (게임 프로그램 시작)

Reference

이 문제에 관하여(Scratch 3.0을 Hack하자. Blockly를 만져 보자.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/kyorohiro/items/19b56cedc3301d9e4aad

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

Scratch 3.0을 Hack하자. Blockly를 만져 보자.