Programing > Blockly2017
Blockly1.0がリリースされたので、あらためて色々調べてみました。
Blockly1.0は、ビジュアルプログラミングエディター用ライブラリです。これ自体は、完成したアプリではなく、開発者向けのツールキットという位置付けですね。
公式サイトによると、次の特徴を備えています。
公式サイトの情報がまとまっていてわかりやすいです。Google翻訳による日本語ページも、けっこう意味がわかります。
同じ内容が、ダウンロードしたファイルの「demos」フォルダにあります。
(BDTなど、いくつかのデモは、ダウンロード版では動作しません。)
多言語化用のリソースファイルが、流用できる。
Blocklyのブロックエディタは、ブロック(block types)を格納するtoolboxと、ブロックを配置するためのワークスペースで構成されています
ガイドページから以下の説明を順番にたどっていくと、Blocklyの基本機能を理解できます。
Githubからクローンするか、ファイルをダウンロードします。
Blocklyを固定サイズで表示します。
そのために、HTMLファイルに次の5つの領域を記述します。
divタグかテーブルタグに、id="blocklyArea"を設置して、その下に、id="blocklyDiv"のdivタグを設置します。あとは、サイズを自動調整するスクリプトを設置します。
サンプルファイルは、index.htmlではなく、overlay.htmlを見てみましょう。
オリジナルのブロックを追加することができます。
カスタムブロックを追加するには、次の3つを用意します。
ブロック定義は、Blockly Developer Toolsで生成することができます。
ツールボックスリファレンスは、ワークスペースに追加したツールボックスと同じ。
ツールボックスは、サイドメニューにある標準ブロック置き場。 Blokcsに、標準的なブロックがひとやま用意されている。それをtoolsboxに追加するだけで動く。 XMLで記述するんだけど、手書きが面倒な場合は、Blockly Developer Toolsで生成できる。 また、カテゴリの記述方法も書いてある。
ちなみに、特に説明がないけれど、ゴミ箱をオンにするのは、こんな感じ。
var workspace = Blockly.inject('blocklyDiv', {toolbox: document.getElementById('toolbox'), trashcan: true});
ブロックで組んだプログラムをコードに変換します。
Blocklyのワークスペースには、オプションでグリッドを設置できます。
Blocklyのワークスペースには、オプションでズーム(拡大/縮小)を設置できます。
ワークスペース上のすべての変更は、イベントのトリガーになります。
Googleのクラウドサービス:Google App engineでコードを保存・読み込み・共有できます。
Blockly Developer Toolsで作ることができます。ここには、カスタムブロックやワークスペースを作るため、次の3つの機能があります。
既存ブロックの表示言語は、以下を指定する
https://developers.google.com/blockly/guides/configure/web/fixed-size
<script src="msg/js/en.js"></script>
日本語の場合は、こちら。
<script src="msg/js/ja.js"></script>
ツールボックスのカテゴリは、name属性を変更する。
<category name="ロボット" colour="#ED225D"> <block type="run_foward"></block> <block type="jump_forward"></block> <block type="is_ball"></block> <block type="is_wall"></block> </category>
独自に追加したカスタムブロックの表示は、.appendFieldで指定する。
Blockly.Blocks['run_foward'] = { init: function() { this.appendDummyInput() .appendField("前に進む"); this.setPreviousStatement(true, null); this.setNextStatement(true, null); this.setColour(0); this.setTooltip(""); this.setHelpUrl(""); } };
同じページで言語を切り替える
https://blockly-demo.appspot.com/static/demos/code/index.html
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License, and code samples are licensed under the Apache 2.0 License. For details, see our Site Policies. Java is a registered trademark of Oracle and/or its affiliates.
特に明記されていない限り、このページのコンテンツはCreative Commons Attribution 3.0 Licenseの下でライセンスされ、コードサンプルはApache 2.0ライセンスの下で使用許諾されます。 詳細については、 サイトポリシーをご覧ください。 Javaは、Oracleおよびその関連会社の登録商標です。