Blockly1.0：ツールボックスとワークスペースの設定方法

Programing > Blockly2017 > ツールボックスとワークスペースを設定する

Blockly Developer ToolsのWorkspace Factoryでは、Toolbox、ワークスペース、初期のコードブロックを作ることができます。

Workspace Factoryの基本操作 †

1. Blockly Developer Toolsを呼び出す
2. 「Workspace Factory」タブをクリック
3. 「Toolbox」と「Workspace」を切り替える

Toolboxの作り方 †

Toolboxをデザインする †

Toolboxをデザインするには、Blockly Developer ToolsのWorkspace Factoryで「Toolbox」を選択します。

左側のワークスペースにブロックを並べると、右側のワークスペースにプレビューが表示されます。

Blockly Developer ToolsのBlock Factoryで作ったブロックをライブラリに保存しておけば、自動的にWorkspace Factoryに読み込まれます。

1. 「Toolbox」タブを選択
2. 「＋」ボタンでカテゴリーを追加
3. ブロックを追加したいカテゴリを、中央の「Your categolies」で選択する
4. 追加したいブロックを、左側のワークスペースのToolboxからドラッグ＆ドロップする

Code Editorのような既存のコードブロックは、「＋」ボタン > 「Standard categoly」でインポートできます。

ToolboxをExportする †

1. 「Export」>「Toolbox」
2. ****.xmlとして保存する

Toolboxを組み込む †

index.htmlの<xml id="toolbox" style="display: none">・・・</xml>を****.xmlに置き換えます。

ワークスペースのカスタマイズ †

ワークスペースを設定する †

1. 「Workspace」タブを選択
2. 中央のワークスペースのオプションを設定する

設定をエクスポートする †

1. 「Export」>「Starter Code」
2. workspace.jsとして保存する

ワークスペースに組み込む †

index.htmlのスクリプトで、workspace変数に設定するオプションをworkspace.jsの記述に書き換える。

以下は、デモに含まれるGenerating JavaScriptのindex.htmlの場合。

// before
var workspace = Blockly.inject('blocklyDiv',
       {media: '../../media/',
        toolbox: document.getElementById('toolbox')});
   Blockly.Xml.domToWorkspace(document.getElementById('startBlocks'), workspace);

// after
var workspace = Blockly.inject('blocklyDiv',
      {media: '../../media/',
       toolbox: document.getElementById('toolbox')
	collapse : true, 
	comments : true, 
	disable : false, 
	maxBlocks : Infinity, 
	trashcan : true, 
	horizontalLayout : false, 
	toolboxPosition : 'start', 
	css : true, 
	media : 'https://blockly-demo.appspot.com/static/media/', 
	rtl : false, 
	scrollbars : false, 
	sounds : true, 
	oneBasedIndex : true, 
	grid : {
		spacing : 20, 
		length : 1, 
		colour : '#888', 
		snap : true
	}, 
	zoom : {
		controls : true, 
		wheel : true, 
		startScale : 1, 
		maxScale : 3, 
		minScale : 0.3, 
		scaleSpeed : 1.2
	}});
   Blockly.Xml.domToWorkspace(document.getElementById('startBlocks'), workspace);

初期のコードブロック †

コードブロックを並べる †

1. 「Workspace」を選択
2. 初期のコードブロックをワークスペースに配置する

初期コードブロックをエクスポートする †

1. 「Export」>「Workspace Block」
2. workspace.xmlとして保存する

初期コードブロックを組み込む †

index.htmlの<xml id="startBlocks" style="display: none">・・・</xml>をworkspace.xmlに置き換えます。

この時、エクスポートしたxmlは「id="workspaceBlocks"」になっているので、以下で指定したidに合わせます

Blockly.Xml.domToWorkspace(document.getElementById('startBlocks'),workspace);

また、workspace.xmlのidは削除したほうが良いみたい。

その他 †

• Blockly2017
• Blockly1.0：カスタムブロックの作り方