Posted at

000 - Blocklyを使ったオリジナルVisual Programming Editorを作ってみる

More than 3 years have passed since last update.


はじめに

業務用の開発ツールとしてVisual Programmingを導入したいと思っていました。前回色々と調べて、本来の目的である「非プログラマーにプログラミングしてもらって楽をする」に到達するまでが早そうなBlocklyをカスタマイズする事に挑戦してみます。

未熟なJavaScriptスキルでどこまでやれるか…。


Blocklyを俺色に染めるための準備

さて、まずは開発環境を整えます。自分の開発環境は以下のとおり。


  • Mac OSX Yosemite 10.10.3

  • Chrome 42.0.2311.152(64bit)

  • Python 2.7.6

作業ディレクトリのルートはgoogleという名前のディレクトリとします。

Windowsでは試していませんが、同様の手順で環境が整うかもしれません。


Blocklyのインストール

先ずはBlocklyをインストールします。インストール手順は公式ページに書かれているの手順に従います。私はGitHubから持ってきました。


Closureのインストール

BlocklyのビルドにClosureのライブラリが必要なのでインストールします。配置する場所はBlocklyのディレクトリと同じ階層にします。

ディレクトリツリー

こちらも詳細は公式ページに掲載されています


Pythonのインストール

OSXであれば最初から入っていると思うので省略します。必要があればHomebrew等から手に入れましょう。


ビルドしてみる

ここまで整ったらターミナルからgoogle/blocklyへ移動します。そこでbuild.pyを走らせればビルドが始まります。

cd google/blockly

python build.py

エラー無くビルドが完了すれば開発環境はひとまず整いました。お疲れ様でした。次はBlocklyの動作確認をしていきたいと思います。