- 追加された行はこの色です。
- 削除された行はこの色です。
#title(Blockly:ブロック型プログラムエディタライブラリ 2017年版)
[[Programing]] > Blockly2017
Blockly1.0がリリースされたので、あらためて色々調べてみました。
#ref(blockly_top.png,nolink)
#ref(blocklyp5.js_s.png,nolink)
#contents
* 概要 [#oa8b42a0]
Blockly1.0は、ビジュアルプログラミングエディター用ライブラリです。
Blockly1.0は、ビジュアルプログラミングエディター用ライブラリです。これ自体は、完成したアプリではなく、開発者向けのツールキットという位置付けですね。
公式サイトによると、次の特徴を備えています。
- 純粋なJavaScriptライブラリ。サイズは150Kb未満。
- 100％クライアントサイドで動作。サーバー側には依存しません。
- Chrome、Firefox、Safari、Opera、IEなど、主要なブラウザで動作します。
- 高度なカスタマイズ性と拡張性を備えています。
* 作ってみた [#h135b740]
-blocklyp5.js = p5.js + blockly
--[[demo:https://ycatch.github.io/blockp5.js/]]
--[[Github:https://github.com/ycatch/blockp5.js]]
- はしれ！ヘッポコード - ただいま工事中
-- デモ https://ycatch.github.io/heppo-code-running/
-- https://github.com/ycatch/heppo-code-running
* ニュース [#zaa1d9ab]
- 2017.08.09
--[[blockp5.js:https://ycatch.github.io/blockp5.js/]] p5.jsをblocklyでプログラミングするデモ
--[[Githubで公開:https://github.com/ycatch/blockp5.js]]
- 2017.06.10
--[[Google、ブロックでプログラミング 「Blockly 1.0」を公開 | マイナビニュース:http://news.mynavi.jp/news/2017/06/12/106/]] iOS / Androidにも対応
--[[Google Developers Blog: Introducing Blockly 1.0 for Android and iOS:https://developers.googleblog.com/2017/06/introducing-blockly-10-for-android-and.html]]
* 公式サイト [#e87d0281]
公式サイトの情報がまとまっていてわかりやすいです。Google翻訳による日本語ページも、けっこう意味がわかります。
** 開発者向け [#jcb761ca]
-[[Blockly | Google Developers:https://developers.google.com/blockly/]]
--[[Google翻訳による日本語ページ:https://translate.google.co.jp/translate?hl=ja&sl=en&u=https://developers.google.com/blockly/]]
-[[Introduction to Blockly | Blockly | Google Developers:https://developers.google.com/blockly/guides/overview]]
--[[Google翻訳による日本語ページ:https://translate.google.co.jp/translate?hl=ja&sl=en&u=https://developers.google.com/blockly/guides/overview]]
-[[Blockly Demos:https://blockly-demo.appspot.com/static/demos/index.html]]
-[[Reference | Blockly | Google Developers:https://developers.google.com/blockly/reference/overview]]
--[[Google翻訳による日本語ページ:https://translate.google.co.jp/translate?hl=ja&sl=en&u=https://developers.google.com/blockly/reference/overview]]
-[[ソースコード:https://github.com/google/blockly]]
** デモ [#n2a44be0]
-[[Blockly Demos:https://blockly-demo.appspot.com/static/demos/index.html]]
同じ内容が、ダウンロードしたファイルの「demos」フォルダにあります。
（BDTなど、いくつかのデモは、ダウンロード版では動作しません。）
** Blockly Games [#y045fe7c]
-[[サンプルアプリ:https://blockly-games.appspot.com/]]
-[[ソースコード:https://github.com/google/blockly-games/wiki]]
多言語化用のリソースファイルが、流用できる。
* Blocklyの基本機能を理解する [#dec228f8]
Blocklyのブロックエディタは、ブロック(block types)を格納するtoolboxと、ブロックを配置するためのワークスペースで構成されています
ガイドページから以下の説明を順番にたどっていくと、Blocklyの基本機能を理解できます。
** Blocklyのダウンロード [#u21760ec]
Githubからクローンするか、ファイルをダウンロードします。
-[[Get Started | Blockly | Google Developers:https://developers.google.com/blockly/guides/get-started/web]]
--[[Google 翻訳:https://translate.google.co.jp/translate?hl=ja&sl=en&u=https://developers.google.com/blockly/guides/get-started/web]]
** 固定サイズのワークスペース：fixed-sized Workspace [#ge356fb8]
Blocklyを固定サイズで表示します。
- サンプルファイル： /blockly/demos/fixed
-[[Fixed-sized Workspace | Blockly | Google Developers:https://developers.google.com/blockly/guides/configure/web/fixed-size]]
--[[Google 翻訳:https://translate.google.co.jp/translate?hl=ja&sl=en&u=https://developers.google.com/blockly/guides/configure/web/fixed-size]]
そのために、HTMLファイルに次の5つの領域を記述します。
- Javascriptのコード読み込み
- ロケールファイル
- 空のdivを追加て、サイズを設定します
- ツールボックス
- Javascriptによるロード
** サイズ変更可能なワークスペース：Resizable Workspace [#ha2ad40f]
divタグかテーブルタグに、id="blocklyArea"を設置して、その下に、id="blocklyDiv"のdivタグを設置します。あとは、サイズを自動調整するスクリプトを設置します。
サンプルファイルは、index.htmlではなく、overlay.htmlを見てみましょう。
- サンプルファイル： /blockly/demos/resizable/overlay.html
-[[Resizable Workspace | Blockly | Google Developers:https://developers.google.com/blockly/guides/configure/web/resizable]]
--[[Google 翻訳:https://translate.google.co.jp/translate?hl=ja&sl=en&u=https://developers.google.com/blockly/guides/configure/web/resizable]]
** カスタムブロックの追加：Add Custom Blocks [#j8fac1fb]
オリジナルのブロックを追加することができます。
-[[Add Custom Blocks | Blockly | Google Developers:https://developers.google.com/blockly/guides/configure/web/custom-blocks]]
--[[Google 翻訳:https://translate.google.co.jp/translate?hl=ja&sl=en&u=https://developers.google.com/blockly/guides/configure/web/custom-blocks]]
カスタムブロックを追加するには、次の3つを用意します。
- ブロック定義(/blocksに標準ブロックがある)
- ツールボックスリファレンス(ツールボックスからブロック定義を参照)
- ジェネレータ(ブロックからコードを生成)
ブロック定義は、[[Blockly Developer Tools:https://developers.google.com/blockly/guides/create-custom-blocks/blockly-developer-tools]]で生成することができます。
ツールボックスリファレンスは、ワークスペースに追加したツールボックスと同じ。
** ツールボックス：Toolbox [#e449b9db]
ツールボックスは、サイドメニューにある標準ブロック置き場。
Blokcsに、標準的なブロックがひとやま用意されている。それをtoolsboxに追加するだけで動く。
XMLで記述するんだけど、手書きが面倒な場合は、[[Blockly Developer Tools:https://developers.google.com/blockly/guides/create-custom-blocks/blockly-developer-tools]]で生成できる。
また、カテゴリの記述方法も書いてある。
- サンプルファイル： /blockly/demos/toolbox
-[[Toolbox | Blockly | Google Developers:https://developers.google.com/blockly/guides/configure/web/toolbox]]
--[[Google 翻訳:https://translate.google.co.jp/translate?hl=ja&sl=en&u=https://developers.google.com/blockly/guides/configure/web/toolbox]]
ちなみに、特に説明がないけれど、ゴミ箱をオンにするのは、こんな感じ。
var workspace = Blockly.inject('blocklyDiv',
{toolbox: document.getElementById('toolbox'), trashcan: true});
** コードジェネレータ：Code Generators [#r1f2be01]
ブロックで組んだプログラムをコードに変換します。
- サンプルファイル： /blockly/demos/generator
-[[Code Generators | Blockly | Google Developers:https://developers.google.com/blockly/guides/configure/web/code-generators]]
--[[Google 翻訳:https://translate.google.co.jp/translate?hl=ja&sl=en&u=https://developers.google.com/blockly/guides/configure/web/code-generators]]
** グリッド：Grid [#i75d07b3]
Blocklyのワークスペースには、オプションでグリッドを設置できます。
-[[Grid | Blockly | Google Developers:https://developers.google.com/blockly/guides/configure/web/grid]]
--[[Google 翻訳:https://translate.google.co.jp/translate?hl=ja&sl=en&u=https://developers.google.com/blockly/guides/configure/web/grid]]
** ズーム：Zoom [#xef2be1c]
Blocklyのワークスペースには、オプションでズーム(拡大/縮小)を設置できます。
-[[Zoom | Blockly | Google Developers:https://developers.google.com/blockly/guides/configure/web/zoom]]
--[[Google 翻訳:https://translate.google.co.jp/translate?hl=ja&sl=en&u=https://developers.google.com/blockly/guides/configure/web/zoom]]
** イベント：Event [#x641902f]
ワークスペース上のすべての変更は、イベントのトリガーになります。
- サンプルファイル： /blockly/demos/mirror
-[[Events | Blockly | Google Developers:https://developers.google.com/blockly/guides/configure/web/events]]
--[[Google 翻訳:https://translate.google.co.jp/translate?hl=ja&sl=en&u=https://developers.google.com/blockly/guides/configure/web/events]]
** Cloud Storage [#gfbc9d97]
Googleのクラウドサービス：Google App engineでコードを保存・読み込み・共有できます。
-[[Cloud Storage | Blockly | Google Developers:https://developers.google.com/blockly/guides/configure/web/cloud-storage]]
** その他 [#r5329bdb]
- サンプル一覧： /blockly/demos/index.html
- JavascriptやPython・Luaへの変換： /blockly/demos/code
- Javascriptインタプリタ： /blockly/demos/interpreter
* カスタムブロックの作成 [#naf25190]
* カスタムブロック／ツールボックスのカスタマイズ [#naf25190]
** 概要 [#k94cc0d8]
-[[Custom Blocks | Blockly | Google Developers:https://developers.google.com/blockly/guides/create-custom-blocks/overview]]
** Blockly Developer Tools [#d8d45a28]
カスタムブロックやワークスペースを作るため、次の3つの機能があります。
Blockly Developer Toolsで作ることができます。ここには、カスタムブロックやワークスペースを作るため、次の3つの機能があります。
- Block Factory：ドラッグ＆ドロップでブロックをデザインする
- Block Exporter：デザインしたブロックを管理する
- Workspace Factory：ワークスペースをデザインする
-[[Blockly Developer Tools | Blockly | Google Developers:https://developers.google.com/blockly/guides/create-custom-blocks/blockly-developer-tools]]
-[[Blockly Demo: Blockly Developer Tools:https://blockly-demo.appspot.com/static/demos/blockfactory/index.html]] ツール
-[[Blockly Developer Tools | Blockly | Google Developers:https://developers.google.com/blockly/guides/create-custom-blocks/blockly-developer-tools]] 説明(英語)
-[[Block Factory - YouTube:https://www.youtube.com/watch?v=s2_xaEvcVI0]] Blockly Developer Toolsの動画チュートリアル
** 作り方 [#sabfb3a0]
- [[Blockly1.0：カスタムブロックの作り方>Blockly/CustomBlock]]
- [[Blockly1.0：ツールボックスとワークスペースの設定方法>Blockly/Toolbox_WorkSpace]]
* ブロックの言語指定 [#l66d15c7]
** 既存ブロック [#fe91c131]
既存ブロックの表示言語は、以下を指定する
https://developers.google.com/blockly/guides/configure/web/fixed-size
<script src="msg/js/en.js"></script>
日本語の場合は、こちら。
<script src="msg/js/ja.js"></script>
** カテゴリ [#c8131ef8]
ツールボックスのカテゴリは、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>
** カスタムブロック [#oa77d0d6]
独自に追加したカスタムブロックの表示は、.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("");
}
};
** その他 [#id3ba696]
同じページで言語を切り替える
https://blockly-demo.appspot.com/static/demos/code/index.html
* ライセンス [#v4f869ec]
** ソースコードのライセンス [#caa37bcf]
- Apache License 2.0
** Blocklyサイトのライセンス [#f31bb2bd]
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およびその関連会社の登録商標です。
* 参考になるページ [#ra1b6506]
-[[2014年ごろ調べた情報は、こちら>Programing/Blockly2014]]
-[[000 - Blocklyを使ったオリジナルVisual Programming Editorを作ってみる - Qiita:http://qiita.com/heyhachi/items/f422ffefd959a673ca7b]]
-[[001 - Blocklyを使ったオリジナルVisual Programming Editorを作ってみる - Qiita:http://qiita.com/heyhachi/items/4346bde77719c5b8a7f4]]
-[[003 - Blocklyを使ったオリジナルVisual Programming Editorを作ってみる - Qiita:http://qiita.com/heyhachi/items/02eb9aa843c9bd1aa0a3]]
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
