catch.jp-wiki
プログラミング
英語学習
履歴
検索
Dropdown
一覧
Blockly/Toolbox_WorkSpace
をテンプレートにして作成
開始行:
[[Programing]] > [[Blockly2017>Programing/Blockly2017]] >...
#title("Blockly1.0：ツールボックスとワークスペースの設定...
Blockly Developer ToolsのWorkspace Factoryでは、Toolbox、...
#contents
* Workspace Factoryの基本操作 [#m3d5e356]
+ [[Blockly Developer Tools:https://blockly-demo.appspot....
+「Workspace Factory」タブをクリック
+「Toolbox」と「Workspace」を切り替える
#ref("bdt_workspace_factory.png")
* Toolboxの作り方 [#hc6a4ace]
** Toolboxをデザインする [#j91f84a6]
Toolboxをデザインするには、Blockly Developer ToolsのWorks...
左側のワークスペースにブロックを並べると、右側のワークス...
Blockly Developer ToolsのBlock Factoryで作ったブロックを...
+「Toolbox」タブを選択
+「＋」ボタンでカテゴリーを追加
+ ブロックを追加したいカテゴリを、中央の「Your categolies...
+ 追加したいブロックを、左側のワークスペースのToolboxから...
[[Code Editor:https://blockly-demo.appspot.com/static/dem...
** ToolboxをExportする [#m437c351]
+「Export」>「Toolbox」
+ ****.xmlとして保存する
** Toolboxを組み込む [#o80861ff]
index.htmlの<xml id="toolbox" style="display: none">・・...
* ワークスペースのカスタマイズ [#w54dcf90]
** ワークスペースを設定する [#sbf502f9]
+「Workspace」タブを選択
+ 中央のワークスペースのオプションを設定する
** 設定をエクスポートする [#d29da7cc]
+「Export」>「Starter Code」
+ workspace.jsとして保存する
** ワークスペースに組み込む [#abd1c93a]
index.htmlのスクリプトで、workspace変数に設定するオプショ...
以下は、デモに含まれるGenerating JavaScriptのindex.htmlの...
// before
var workspace = Blockly.inject('blocklyDiv',
{media: '../../media/',
toolbox: document.getElementById('toolbox')});
Blockly.Xml.domToWorkspace(document.getElementById('s...
// 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('s...
* 初期のコードブロック [#j98a111f]
** コードブロックを並べる [#y85df6b1]
+「Workspace」を選択
+ 初期のコードブロックをワークスペースに配置する
** 初期コードブロックをエクスポートする [#n45bd50a]
+「Export」>「Workspace Block」
+ workspace.xmlとして保存する
** 初期コードブロックを組み込む [#i0a73ca2]
index.htmlの<xml id="startBlocks" style="display: none">...
この時、エクスポートしたxmlは「id="workspaceBlocks"」にな...
Blockly.Xml.domToWorkspace(document.getElementById('star...
また、workspace.xmlのidは削除したほうが良いみたい。
* その他 [#g76a495c]
- [[Blockly2017>Programing/Blockly2017]]
- [[Blockly1.0：カスタムブロックの作り方>Blockly/CustomBl...
終了行:
[[Programing]] > [[Blockly2017>Programing/Blockly2017]] >...
#title("Blockly1.0：ツールボックスとワークスペースの設定...
Blockly Developer ToolsのWorkspace Factoryでは、Toolbox、...
#contents
* Workspace Factoryの基本操作 [#m3d5e356]
+ [[Blockly Developer Tools:https://blockly-demo.appspot....
+「Workspace Factory」タブをクリック
+「Toolbox」と「Workspace」を切り替える
#ref("bdt_workspace_factory.png")
* Toolboxの作り方 [#hc6a4ace]
** Toolboxをデザインする [#j91f84a6]
Toolboxをデザインするには、Blockly Developer ToolsのWorks...
左側のワークスペースにブロックを並べると、右側のワークス...
Blockly Developer ToolsのBlock Factoryで作ったブロックを...
+「Toolbox」タブを選択
+「＋」ボタンでカテゴリーを追加
+ ブロックを追加したいカテゴリを、中央の「Your categolies...
+ 追加したいブロックを、左側のワークスペースのToolboxから...
[[Code Editor:https://blockly-demo.appspot.com/static/dem...
** ToolboxをExportする [#m437c351]
+「Export」>「Toolbox」
+ ****.xmlとして保存する
** Toolboxを組み込む [#o80861ff]
index.htmlの<xml id="toolbox" style="display: none">・・...
* ワークスペースのカスタマイズ [#w54dcf90]
** ワークスペースを設定する [#sbf502f9]
+「Workspace」タブを選択
+ 中央のワークスペースのオプションを設定する
** 設定をエクスポートする [#d29da7cc]
+「Export」>「Starter Code」
+ workspace.jsとして保存する
** ワークスペースに組み込む [#abd1c93a]
index.htmlのスクリプトで、workspace変数に設定するオプショ...
以下は、デモに含まれるGenerating JavaScriptのindex.htmlの...
// before
var workspace = Blockly.inject('blocklyDiv',
{media: '../../media/',
toolbox: document.getElementById('toolbox')});
Blockly.Xml.domToWorkspace(document.getElementById('s...
// 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('s...
* 初期のコードブロック [#j98a111f]
** コードブロックを並べる [#y85df6b1]
+「Workspace」を選択
+ 初期のコードブロックをワークスペースに配置する
** 初期コードブロックをエクスポートする [#n45bd50a]
+「Export」>「Workspace Block」
+ workspace.xmlとして保存する
** 初期コードブロックを組み込む [#i0a73ca2]
index.htmlの<xml id="startBlocks" style="display: none">...
この時、エクスポートしたxmlは「id="workspaceBlocks"」にな...
Blockly.Xml.domToWorkspace(document.getElementById('star...
また、workspace.xmlのidは削除したほうが良いみたい。
* その他 [#g76a495c]
- [[Blockly2017>Programing/Blockly2017]]
- [[Blockly1.0：カスタムブロックの作り方>Blockly/CustomBl...
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
