지난번 포스팅 (https://ahnbk.com/?p=469)대로 Blockly 소스를 받아 빌드하고, 그 결과물로 실행보도록 한다. 나중에 iOS나 Android에서도 어짜피 webview를 이용해서 실행해야 하므로, 과정은 동일하다.
먼저 작업할 디렉토리를 생성한다. 여기에선 편의상 blockly_demo란 디렉토리를 사용한다.
$ mkdir blockly_demo
$ cd blockly_demo이제 이 디렉토리에 빌드된 파일을 복사한다.
javascript_compressed.js
blocks_compressed.js
blockly_compressed.js다음으로 demos/mobile/html/toolbox_standard.js 툴박스 파일도 작업 디렉토리로 복사한다. 또 localization 관련한 디렉토리도 복사한다. 복사 위치는 msg 디렉토리 밑으로 한다. 본래 Blockly 디렉토리의 msg/js 디렉토리를 현재 개발 디렉토리로 복사한다. 완료되었으면 다음과 같이 보여야 한다.
이제 에디터를 이용해서 파일을 하나 생성한다. 파일 이름은 index.html 이다. 파일 내용은 다음과 같다.
<!DOCTYPE html>
<!-- HTML file to host Blockly in a mobile WebView. -->
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="styles.css">
<script src="blockly_compressed.js"></script>
<script src="blocks_compressed.js"></script>
<!-- TODO: Select msg file based on locale. -->
<script src="msg/js/en.js"></script>
<script src="toolbox_standard.js"></script>
</head>
<body>
<div id="blocklyDiv"></div>
<script type="text/javascript">
var workspacePlayground = Blockly.inject('blocklyDiv', {
media: 'media/',
toolbox: BLOCKLY_TOOLBOX_XML['standard'],
zoom: {controls: true}
});
</script>
</body>
</html>또 style.css 파일로 생성하여 다음과 같이 입력한다.
html, body, #blocklyDiv {
border: 0;
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}이제 크롬, 사파리, 인터넷 익스플로러 등 웹브라우저를 이용해 index.html을 열어본다.
Blockly가 잘 로딩되어 실행됨을 볼수 있다.
아 제가 지금 글쓴 분에 따라서 직접 실행을 해보고 있는데요.
“localization 관련한 디렉토리도 복사한다”는 말이 무슨 말인가요?
말 그대로 msg 디렉토리 아래에 js 디렉토리 전체를 복사해야 합니다.
실행은 되지만 그 말이 무슨 뜻인지 궁금합니다
블록, 카테고리 등에 표시되는 문자들을 각종 언어로 맵핑 해주는 기능입니다.