Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
11
Help us understand the problem. What is going on with this article?
@heyhachi

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

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

11
Help us understand the problem. What is going on with this article?
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
heyhachi
都内で働く人。 業種的には組み込み系寄りだが、ハードを叩くコードを書いたりすることはそんなにない。 基本的に業務はC言語で行うが、広く浅く色々とちょっかいを出す浮気症。 酒と写真が好き。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
11
Help us understand the problem. What is going on with this article?