- 追加された行はこの色です。
- 削除された行はこの色です。
#title(Blockly:パズル式プログラム開発ライブラリ 2017年版)
[[Programing]] > Blockly2017
Blockly1.0がリリースされたので、あらためて色々調べてみました。
#contents
* 概要 [#oa8b42a0]
Blockly1.0は、ビジュアルプログラミングエディター用ライブラリです。
公式サイトによると、次の特徴を備えています。
- 純粋なJavaScriptライブラリ。サイズは150Kb未満。
- 100％クライアントサイドで動作。サーバー側には依存しません。
- Chrome、Firefox、Safari、Opera、IEなど、主要なブラウザと互換性があります。
- 高度カスタマイズ性と拡張性を備えています。
* 公式サイト [#e87d0281]
公式サイトの情報が分かりやすくまとまっているので、読めばだいたい分かります。Google翻訳による日本語ページも、けっこう意味が分かります。
-[[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]]
-[[ブロックリー入門:https://translate.google.co.jp/translate?hl=ja&sl=en&u=https://developers.google.com/blockly/guides/overview]]
-[[github.com/google/blockly:https://github.com/google/blockly]]
-[[Reference | Blockly | Google Developers:https://developers.google.com/blockly/reference/overview]]
-[[Blockly Demos:https://blockly-demo.appspot.com/static/demos/index.html]]
-[[リファレンス:https://translate.google.co.jp/translate?hl=ja&sl=en&u=https://developers.google.com/blockly/reference/overview]]
* Blocklyの基本機能を理解する [#dec228f8]
Blocklyのブロックエディタは、ブロック(block types)を格納するtoolboxと、ブロックを配置するためのワークスペースで構成されています
ガイドページから以下のデモを順番にやっていくと、Blocklyの基本機能を理解できます。
** ファイルのダウンロード [#u21760ec]
-[[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]]
Githubからクローンするか、ファイルをダウンロードします。
** 固定サイズのワークスペース：fixed-sized Workspace [#ge356fb8]
- サンプルファイル： /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]]
Blocklyを固定サイズで表示します。
そのために、HTMLファイルに次の5つの領域を記述します。
- Javascriptのコード読み込み
- ロケールファイル
- 空のdivを追加て、サイズを設定します
- ツールボックス
- Javascriptによるロード
** サイズ変更可能なワークスペース：Resizable Workspace [#ha2ad40f]
- サンプルファイル： /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/overview]]
divタグかテーブルタグに、id="blocklyArea"を設置して、その下に、id="blocklyDiv"のdivタグを設置します。あとは、サイズを自動調整するスクリプトを設置します。
** カスタムブロックの追加：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/overview]]
カスタムブロックを追加するには、次の3つを用意します。
- ブロック定義(/blocksに標準ブロックがある)
- ツールボックスリファレンス(ツールボックスからブロック定義を参照)
- ジェネレータ(ブロックからコードを生成)
ブロック定義は、[[Blockly Developer Tools:https://developers.google.com/blockly/guides/create-custom-blocks/blockly-developer-tools]]で生成することができます。
ツールボックスリファレンスは、ワークスペースに追加したツールボックスと同じ。
** ツールボックス：Toolbox [#e449b9db]
- サンプルファイル： /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/overview]]
ツールボックスは、サイドメニューにある標準ブロック置き場。XMLで記述するんだけど、手書きが面倒な場合は、[[Blockly Developer Tools:https://developers.google.com/blockly/guides/create-custom-blocks/blockly-developer-tools]]で生成できる。
** コードジェネレータ：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/overview]]
ブロックで組んだプログラムをコードに変換します。
** グリッド：Grid [#i75d07b3]
-[[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/overview]]
Blocklyのワークスペースには、オプションでグリッドを設置できます。
** ズーム：Zoom [#xef2be1c]
-[[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/overview]]
Blocklyのワークスペースには、オプションでズーム(拡大/縮小)を設置できます。
** イベント：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/overview]]
ワークスペース上のすべての変更は、イベントのトリガーになります。
* ライセンス [#v4f869ec]
** ソースコードのライセンス [#caa37bcf]
** 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]
-[[003 - Blocklyを使ったオリジナルVisual Programming Editorを作ってみる - Qiita:http://qiita.com/heyhachi/items/02eb9aa843c9bd1aa0a3]]
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
