Scratch3.0 + obniz 확장 블록

Scratch

프로그래밍 교육의 툴로서 많은 초등학교나 프로그래밍 교실에서 도입되고 있는 아레군요. 로컬로 빌드하고 확장 블록으로 놀 수 있다는 것을 알았으므로, 오! 라고 생각해 보았습니다.

obniz

htps : // 오 b에 ... 이오 / 그럼 /
「웹의 기술로 하드와 소프트를 잇는」아레입니다.
Web 베이스(Javascript 등)로 IoT 디바이스의 제어를 할 수 있는 아레군요.

구현 환경

Mac Mojave 10.14.4

로컬 환경 구축

소스 clone

git clone --depth 1 https://github.com/llk/scratch-vm.git
git clone --depth 1 https://github.com/llk/scratch-gui.git

scratch-vm을 node 모듈로 scratch-gui에서 참조하므로 npm link를 사용하여 동시에 개발할 수 있도록합니다.

cd scratch-vm && npm install && npm link
cd scratch-gui && npm link scratch-vm && npm install

실행

cd scratch-gui && npm run start

이제 로컬 환경에서 Scratch가 실행됩니다.
ex : http://localhost:8601

obniz 확장 블록 추가

확장 블록의 추가 방법은 이쪽을 확실히 참고로 했습니다. 감사합니다!
htps : // 코 m/히로유키_오사키/있어 ms/아 46에 1c881d3 아에 d4661f7

scratch-vm/src/extensions/scratch3_obniz/Scratch3Obniz.js

const ArgumentType = require('../../extension-support/argument-type');
const BlockType = require('../../extension-support/block-type');
const Cast = require('../../util/cast');


class Scratch3Obniz {
    constructor (runtime) {
        this.runtime = runtime;
        this.obniz = null;
    }

    getInfo () {
        return {
            id: 'obniz',
            name: 'Obniz Blocks',
            blocks: [
                {
                    opcode: 'connect',
                    blockType: BlockType.COMMAND,
                    text: 'obniz id [TEXT]',
                    arguments: {
                        TEXT: {
                            type: ArgumentType.STRING,
                            defaultValue: "xxxx-xxxx"
                        }
                    }
                },
                {
                    opcode: 'displayMessage',
                    blockType: BlockType.COMMAND,
                    text: 'Display [TEXT]',
                    arguments: {
                        TEXT: {
                            type: ArgumentType.STRING,
                            defaultValue: "hello"
                        }
                    }
                }

            ],
            menus: {
            }
        };
    }

    connect (args) {
        const text = Cast.toString(args.TEXT);
        this.obniz = new window.Obniz(text);     
    }

    displayMessage (args) {
        const text = Cast.toString(args.TEXT);
        this.obniz.display.clear();
        this.obniz.display.print(text);        
    }
}

module.exports = Scratch3Obniz;

scratch-gui/src/playground/index.ejs

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="google" value="notranslate">
    <link rel="shortcut icon" href="static/favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>

    <!-- ＊＊＊＊追加＊＊＊＊ -->
    <script src="https://unpkg.com/obniz/obniz.js"></script>

    <% if (htmlWebpackPlugin.options.sentryConfig) { %>
        <!-- Sentry error logging to help with finding bugs -->
        <script src="https://cdn.ravenjs.com/3.22.1/raven.min.js" crossorigin="anonymous"></script>
        <script>
            Raven.config(<%= htmlWebpackPlugin.options.sentryConfig %>).install();
        </script>
        <!-- /Sentry -->
    <% } %>
  </head>
  <body>
  </body>
</html>

첫 번째 이미지에서 볼 수 있듯이 obniz id를 입력하고 플래그를 클릭하면 연결되어 공간에 LED가 표시됩니다.
Scratch + obniz 그 밖에도 여러가지 즐길 것 같습니다!

덤

Reference

이 문제에 관하여(Scratch3.0 + obniz 확장 블록), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/h2m_kinoko/items/549c99a50ce23855f02d

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

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

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다