Mame Block Development Guide
=================================

MameBlockは、ビジュアルプログラミング言語を開発するときに利用できる、Webフロントエンドのライブラリである。

このドキュメントでは、MameBlockを利用したWebアプリの開発者のために、内部構成を解説する。



Description
------------

MameBlockは、100行ほどのJavascriptコードと、各種OSSライブラリで構成されている。
ブロックのドラッグ＆ドロップには、jquery-sortableを使っている。
jqueryプラグインであるjquery-sortableは、ネストした要素をドラッグ&ドロップできる。

Webページのデザインと主なUIには、HTML Kickstarterを使っているが、ユーザーのHTMLでは独自のCSSツールキットを使用できる。



Files
------------

ここでは、MameBlockを構成する主なファイルについて解説する。


* 主なファイル

MameBlockは、次のようなファイル構成を持っている。


 MameBlock
 | 
 +---docs : Documents
 | 
 +---css
 |   |
 |   +--- mameblock.min.css
 |   +--- mameblock.src.css
 |   |
 |   +---fonts
 |   +---img
 |   +---src
 |
 \---js : JavaScript files
     |
     +--- jquery-1.11.2.min.js
     +--- mameblock.min.js
     +--- mameblock.src.js
     |
     +---src

\css\srcフォルダのcssファイルと、\js\srcフォルダのJavascriptファイルは、gulpfile.jsによって、mameblock.*.cssとmameblock.*.jsに変換される。



Functions
------------

ここでは、MameBlockの主な機能とコードの対応について解説する。



### Edit Dialog

コードを編集する画面は、ツールパレット・メイン編集・ゴミ箱という3つのエリアを持つ


### Tool Pallet area

コードを組み立てるためのブロックは、ツールパレットにある。
ツールパレットで、各ブロックは、グループごとに折りたたまれている。
ブロックは、ツールパレットからメイン編集エリアにドラッグ＆ドロップできる。


### Blocks

ブロックは、<li>タグで構成されており、jquery-sortableにより、ネストしたままドラッグ＆ドロップできる。
この<li>タグによる要素は、ブロックとして表示するテキスト(class = "block-body")と、変換時にコードとして出力するテキスト(class = "code-body")を持っている。

class="exp-body"を持つ<span>要素のテキストは、数式エディタで編集できる。
ブロック内に複数の数式がある場合、数式ごとにclass="item1"、"item2"というように、クラスを割り当てる。

 Example

 <li class="basic-block">
 	<div class="block-body">
 		var <span class="exp-body item1">input</span> = prompt(<span class="exp-body item2"></span>);
 	</div>
 	<div class="code-body">
 		var <span class="exp-body item1">input</span> = prompt(<span class="exp-body item2"></span>);
 	</div>
 </li>



### Main editing area

メイン編集エリアは、ブロックスタイルでコードを編集する画面である。

コードを表すブロックをドラッグ＆ドロップで配置できる。
ここに配置されたブロックがコードを持つ。


### Trash Can area

メイン編集エリアにある不要なブロックは、ゴミ箱にドラッグ＆ドロップして捨てることができる。
ゴミ箱に捨てたブロックは、ゴミ箱のすぐ下に表示される。
再度、メイン編集エリアに移動できる。
ゴミ箱をクリックすると、捨てたブロックは完全に削除される。



### Express line Editor

ブロックの数式部分をクリックすると、数式エディタがポップアップする。
この数式エディタで、数式部分を編集できる。




API
---------


### MAME_BLOCK.init("#loading_area", "mameBlock_template.html");

Editエリアを初期化する

 #loading_area : 親HTMLファイルに設置した、Editエリアの枠組みを指定

 mameBlock_template.html : Editエリアに読み込むテンプレートファイルを指定



### MAME_BLOCK.getCodeBlock()

ブロック編集エリアのコードを取得する。