블락리 만져주세요!
ALH Advent Calendar 1일차!스케줄러:어? 투고일은..
개인적으로는 2020년 사업 범위를 넓히고 채용에도 참여했다.
그럼에도 불구하고 나는 엔지니어가 되고 싶다
작은 일이라도 제조를 통해 조직에 기여하고 싶습니다.
이렇게, 나는 올해 블락리를 써 보고 싶다!
블락리가 뭐야?
이것은 구글이 제공하는 소스 시각 프로그램 라이브러리입니다!
공식 견본 게임
Hour of code웹 서비스에서도 사용할 수 있습니다!
꼭 가봐야겠어요. "이렇게 할 수 있어!"이해해주셨으면 좋겠습니다.
무슨 짓을 한 거야?
약간 시각적으로 디자인된 게임을 만들었어요!
상세한 상황은 아래의 문장을 보십시오!
CANTABILE-Zoom에서 내정자 실습을 실시했습니다!
어떻게 써요?
나도 완전히 파악한 건 아니지만
과거를 돌아보고 사용법을 간단히 기재하세요!
공식 문서 풍부하다
곤란하면 공식에 의존해라!
※ 저도 실제로 공식 문서를 많이 읽었습니다.
1. 작업공간 준비
작업 공간, 즉 작업 장소.
선택한 블록을 드래그 앤 드롭하여 이동하거나
적목을 연결하는 곳을 가리킨다.
참조: Fixed-sized Workspace
<html lang="ja">
<head>
<meta charset="utf-8"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/blockly_compressed.min.js"></script> <!-- ライブラリを読み込む -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/blocks_compressed.min.js"></script> <!-- ライブラリを読み込む -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/javascript_compressed.min.js"></script> <!-- ライブラリを読み込む -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/msg/js/ja.min.js"></script> <!-- 日本語化 -->
<title>Blockly Sample</title>
</head>
<body>
<div id="blocklyDiv" style="height: 480px; width: 600px;"></div> <!-- ワークスペースを用意 -->
<xml id="toolbox" style="display: none"> <!-- ブロックサンプルを用意 -->
<block type="controls_if"></block>
<block type="controls_repeat_ext"></block>
<block type="logic_compare"></block>
<block type="math_number"></block>
<block type="math_arithmetic"></block>
<block type="text"></block>
<block type="text_print"></block>
</xml>
<script>
var workspace = Blockly.inject('blocklyDiv', // ライブラリに読み込ませる
{toolbox: document.getElementById('toolbox')});
</script>
</body>
</html>
※ CDN을 사용하기 때문에 네트워크 환경을 준비하세요.
아래와 같은 표시일 것이다.
이렇게 하면 사용할 수 있어요!대단해!?
블록을 드래그하여 이동하거나 블록을 서로 붙일 준비가 되어 있습니다.
해보세요!
※ 나는 이 단계에서 감동했다(웃음)
2. 오리지널 블록 준비
오리지널 서비스를 하려면 오리지널 블록이 필요하다.
Google 선생님한테도 잘 준비하고 있습니다(웃음)
참조: Blockly Developer Tools
보자마자 어떻게 쓰는지 몰라서 간단히 설명해 드릴게요.
①의
Input 및 Field 탭에서 준비할 블록을 선택하여 블록에 연결합니다.②의
Preview가 실시간으로 업데이트되므로 준비하려는 블록인지 확인하십시오.※
name 속성 유일 판단 블록을 사용하기 때문에 알기 쉬운 이름을 지어보세요.③의
Block Definition와 Generator stub는 설정으로 얻은 기술을 나타낸다.JSON, Javascript 등 다양한 언어가 있으니 적합한 언어를 사용하세요.
※ 여기서는 자바스크립트를 사용합니다.
name은 block 태그의 type에 지정됩니다.그런 다음 원본 블록이 표시됩니다.
그렇기 때문에 원본을 간단하게 준비해서 사용할 수 있습니다!
토끼를 놀리는 게 이해에 도움이 될 것 같아요.
다양한 것들을 만져보세요!
3. 블록 코드 실행
그럼 이제 조립된 블록 형태의 코드만 실행합니다!
참조: Generating and Running JavaScript
Blockly.JavaScript.addReservedWords('code');
var code = Blockly.JavaScript.workspaceToCode(workspace);
try {
eval(code);
} catch (e) {
alert(e);
}
단순히 문자열로 코드를 추출하고
eval하고 있습니다!응?
연결되지 않은 블록도 실행 대상이 되었나요?
연결된 모듈만 실행하고 싶다고요?
그럼 다음 줄을 추가해 주세요!
workspace.addChangeListener(Blockly.Events.disableOrphans);
캐릭터의 이동을 CSS 애니메이션으로 제어하는 쪽은 어렵지 않나요?생각
자바스크립트로 이루고 싶은 사람은 js의 실행 속도에 곤란을 느낀다.
저도 사실 이거 대처하느라 힘들었어요(웃음)
구글 선생님도 공식 문서에서 따라갔다.
참조: JS-Interpreter
var code = Blockly.JavaScript.workspaceToCode(workspace);
var myInterpreter = new Interpreter(code);
myInterpreter.run();
function nextStep() {
if (myInterpreter.step()) {
setTimeout(nextStep, 10);
}
}
Interpreter 대상을 생성할 때 실행할 코드를 생성합니다setTimeout에서 한 걸음 한 걸음의 실행 시간을 밀리초 단위로 설정할 수 있습니다!※
run 실행 방법은 내부에서nextStep() 사용이 가능합니다.그러나 JS-Interpreter를 사용하는 경우 고려 사항으로
독자적인 방법을 사용할 때는 반드시 속성을 읽는 방법을 사용해야 한다.
function initApi(interpreter, globalObject) {
var wrapper = function(text) {
return alert(arguments.length ? text : '');
};
interpreter.setProperty(globalObject, 'alert',
interpreter.createNativeFunction(wrapper));
wrapper = function(text) {
return prompt(text);
};
interpreter.setProperty(globalObject, 'prompt',
interpreter.createNativeFunction(wrapper));
}
alert와prompt를 읽게 하는 방법.나는 가능한 한 읽는 방법 수가 적은 쪽의 보수성을 높이고 싶으니 주의해야 한다!
최후
어때요?
블락리를 쓰고 싶은 분들에게만 전해주면 될 것 같아요!!
여기까지 봐주셔서 감사합니다!
Reference
이 문제에 관하여(블락리 만져주세요!), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/supreme0110/items/a5cca624acb908fa0102텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
