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

https://www.catch.jp:443/wiki/index.php?Blockly%2FToolbox_WorkSpace

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

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

Workspace Factoryの基本操作

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

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は削除したほうが良いみたい。

その他


  トップ   差分 バックアップ リロード   一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
添付ファイル: filebdt_workspace_factory.png 557件 [詳細]
Last-modified: 2017-07-05 (水) 20:44:01 (840d)