Scratch 3.0을 Hack하자. Scratch Block을 터치하자.
5980 단어 Scratch
Scratch 3.0 의 Block 는, Blockly 유래이므로, 「같은 방법으로 추가할 수 있을까.」 「Scratch 독자적인 확장이 되어 있을 것입니다」.
실제로 시도해 봅시다.
Scratch Block
Scratch3.0의 Visual Programming 환경이 게시되었습니다.
Scratch의 Interface를 다양한 앱에 재사용할 수 있을 것 같네요.
Scratch Block을 사용해보십시오.
이번에는 webpack을 사용하는 방법으로 실험해 보겠습니다.
코드는 다음
Render 실험 이나 Babel 실험 이나 Webpack 실험 에서 환경 구축에 대해서,
겹치기 때문에 끝을 접습니다.
Project 만들기
mkdir scratch-block-test
cd scratch-block-test/
npm init -f
npm install --save-dev webpack babel-core babel-loader babel-eslint babel-preset-es2015
npm install --save-dev webpack scratch-blocks web-dev-server copy-webpack-plugin
Webpack 준비하기
다음과 같은 느낌
콘텐츠 추가
emacs src/index.html
<html>
<head>
<title>Hello, World!!</title>
</head>
<body>
<div id="blocks"></div>
<script src="scratch-block-test.js"></script>
</body>
</html>
emacs src/scratch-block-test.js
const Blockly = require("scratch-blocks");
class HelloWorld {
hello() {
console.log("Hello, World!!");
}
}
var helloWorld = new HelloWorld();
helloWorld.hello();
// Instantiate scratch-blocks and attach it to the DOM.
const workspace = Blockly.inject('blocks', {
media: './media/',
zoom: {
controls: true,
wheel: true,
startScale: 0.75
},
colours: {
workspace: '#334771',
flyout: '#283856',
scrollbar: '#24324D',
scrollbarHover: '#0C111A',
insertionMarker: '#FFFFFF',
insertionMarkerOpacity: 0.3,
fieldShadow: 'rgba(255, 255, 255, 0.3)',
dragShadowOpacity: 0.6
}
});
움직여 보자
> webpack-dev-server
Project is running at http://0.0.0.0:8362/
webpack output is served from /
할 수 있었습니다!!
다음 번에는 Scratch-Block에서 만든 코드가
수행되는 메커니즘을 살펴 보겠습니다.
...
PS
이번 코드는 다음
이하의 장소에서도, 알레코레 써 갑니다.
Scratch2.0 입문
불의 형태 With Scratch 2.0 (프로그램 입문) 00권
불의 형태 With Scratch 2.0 (프로그램 입문) 01권
화염 유형 With Scratch 2.0 (게임 프로그램 시작)
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를 만져 보자.
(13) Scratch Block을 만져 보자.
Reference
이 문제에 관하여(Scratch 3.0을 Hack하자. Scratch Block을 터치하자.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/kyorohiro/items/191f855aa8f4ba0afad0
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
이번에는 webpack을 사용하는 방법으로 실험해 보겠습니다.
코드는 다음
Render 실험 이나 Babel 실험 이나 Webpack 실험 에서 환경 구축에 대해서,
겹치기 때문에 끝을 접습니다.
Project 만들기
mkdir scratch-block-test
cd scratch-block-test/
npm init -f
npm install --save-dev webpack babel-core babel-loader babel-eslint babel-preset-es2015
npm install --save-dev webpack scratch-blocks web-dev-server copy-webpack-plugin
Webpack 준비하기
다음과 같은 느낌
콘텐츠 추가
emacs src/index.html
<html>
<head>
<title>Hello, World!!</title>
</head>
<body>
<div id="blocks"></div>
<script src="scratch-block-test.js"></script>
</body>
</html>
emacs src/scratch-block-test.js
const Blockly = require("scratch-blocks");
class HelloWorld {
hello() {
console.log("Hello, World!!");
}
}
var helloWorld = new HelloWorld();
helloWorld.hello();
// Instantiate scratch-blocks and attach it to the DOM.
const workspace = Blockly.inject('blocks', {
media: './media/',
zoom: {
controls: true,
wheel: true,
startScale: 0.75
},
colours: {
workspace: '#334771',
flyout: '#283856',
scrollbar: '#24324D',
scrollbarHover: '#0C111A',
insertionMarker: '#FFFFFF',
insertionMarkerOpacity: 0.3,
fieldShadow: 'rgba(255, 255, 255, 0.3)',
dragShadowOpacity: 0.6
}
});
움직여 보자
> webpack-dev-server
Project is running at http://0.0.0.0:8362/
webpack output is served from /
할 수 있었습니다!!
다음 번에는 Scratch-Block에서 만든 코드가
수행되는 메커니즘을 살펴 보겠습니다.
...
PS
이번 코드는 다음
이하의 장소에서도, 알레코레 써 갑니다.
Scratch2.0 입문
불의 형태 With Scratch 2.0 (프로그램 입문) 00권
불의 형태 With Scratch 2.0 (프로그램 입문) 01권
화염 유형 With Scratch 2.0 (게임 프로그램 시작)
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를 만져 보자.
(13) Scratch Block을 만져 보자.
Reference
이 문제에 관하여(Scratch 3.0을 Hack하자. Scratch Block을 터치하자.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/kyorohiro/items/191f855aa8f4ba0afad0
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(Scratch 3.0을 Hack하자. Scratch Block을 터치하자.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/kyorohiro/items/191f855aa8f4ba0afad0텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
