Blockly/Toolbox_WorkSpace のバックアップの現在との差分(No.1)



  • 追加された行はこの色です。
  • 削除された行はこの色です。
[[Programing]] > [[Blockly2017>Programing/Blockly2017]] > ツールボックスとワークスペースを設定する

#title("ツールボックスとワークスペースを設定する")
#title("Blockly1.0:ツールボックスとワークスペースの設定方法")

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

#contents

* Workspace Factoryの基本操作 [#m3d5e356]

+ [[Blockly Developer Tools:https://blockly-demo.appspot.com/static/demos/blockfactory/index.html]]を呼び出す
+「Workspace Factory」タブをクリック
+「Toolbox」と「Workspace」を切り替える

#ref("bdt_workspace_factory.png")

* Toolboxの作り方 [#hc6a4ace]

** Toolboxをデザインする [#j91f84a6]

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

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

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

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

[[Code Editor:https://blockly-demo.appspot.com/static/demos/code/index.html]]のような既存のコードブロックは、「+」ボタン > 「Standard categoly」でインポートできます。


** ToolboxをExportする [#m437c351]

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


** Toolboxを組み込む [#o80861ff]

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



* ワークスペースのカスタマイズ [#w54dcf90]

** ワークスペースを設定する [#sbf502f9]

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

** 設定をエクスポートする [#d29da7cc]

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

** ワークスペースに組み込む [#abd1c93a]

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);


* 初期のコードブロック [#j98a111f]

** コードブロックを並べる [#y85df6b1]

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

** 初期コードブロックをエクスポートする [#n45bd50a]

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

**  初期コードブロックを組み込む [#i0a73ca2]

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

* その他 [#g76a495c]

- [[Blockly2017>Programing/Blockly2017]] 
- [[Blockly1.0:カスタムブロックの作り方>Blockly/CustomBlock]]


トップ   一覧 単語検索 最終更新   ヘルプ   最終更新のRSS