技術資料

目次 

1. 目標 

ビジュアルプログラミングによるデータ処理を行う。Blocklyというオープンソースのビジュアルプログラミングを用いる。使用するプログラミング言語は主にJavascriptである。

2. 環境構築 

必要なもの 

blocklyのダウンロード・インストール 

ダウンロードすべきファイルを以下のzipファイルにまとめたので、これをダウンロードし任意のフォルダに置く。

使い方が2つあるので、簡単なほうと難しいほうを教える。

Visual Studio Codeでの使い方(簡単) 

まずVisual Studio Codeを入れる。以下にリンクを貼った。
https://azure.microsoft.com/ja-jp/products/visual-studio-code/
リンクを開いたら、今すぐダウンロードをクリックし、次の画面で自分のOSに合わせてクリックする。
すると、インストーラのダウンロードが始まるので、完了後そのファイルを実行する。
インストールは適当で良い。
インストール後、実行し拡張機能を入れる。
拡張機能は左にある箱が4つあって1つだけ離れているものである。

kakutyou-2.png
添付ファイルの画像

そして、拡張機能の検索バーでLive Serverを検索してインストールする。
ダウンロードしたフォルダのindex.htmlを開いてVS Code右下に表示される「Go Live」をクリックすると、ブラウザで http://127.0.0.1:5500/ が実行される。

golive.png

Windows SubSystem for Linux2(WSL2)(Linux、UNIXでも可)での使い方(難しい) 

3. Blocklyのブロックの作り方 

ダウンロードしたフォルダ中に入っている、average.jsとaverage_block.jsと index.htmlを主に編集して作っていく。
average.jsには実行ボタンを押したときの動きが定義されている。
平均値を出すブロックとconsole.logを出すブロックの定義の仕方が以下である。

blockly_average2.PNG

average_block.jsには、ブロックの見た目と表示されたときの動作が定義されている。
平均値を出すブロックとconsole.logを出すブロックの定義の仕方が以下である。

blockly_average.PNG

index.htmlにはページの構成と使うjavascriptファイルが定義されている。
toolbox.xmlにブロックを書くことによって初めて使えるようになる。

toolboxxx.PNG

トップ   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS