Help us understand the problem. What is going on with this article?

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の動作確認をしていきたいと思います。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした