技術資料

目次 

1. 目標 

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

2. 環境構築及び実行 

必要なもの 

Windows SubSystem for Linux2(WSL2)(Linux、UNIXでも可) 

とりあえず、WSL2のインストールから始める。以下のサイト見ながらでできる。 https://docs.microsoft.com/ja-jp/windows/wsl/install-win10

一応ここにその内容を記す。まず、管理者権限でPowerShellを開き、次のコマンドを入力する。

dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart

次に、同じくpowershellでwindowsのどのシステムを使用しているか次のコマンドで確認する。

systeminfo | Select-String  "システムの種類"

コマンドプロンプトの場合はこれ

systeminfo | find "システムの種類"

次にwindowsのバージョンを確認する。バージョンとビルド番号を確認するには、 Windows ロゴ キー + R キー を押して、「 winver 」と入力し、 [OK] を選択します。 (または、Windows コマンド プロンプトで ver コマンドを入力します)。 一つ前の手順で調べたシステムに必要な最新の Windows バージョンを満たしてない場合、更新します。

WSL 2 をインストールする前に、" 仮想マシン プラットフォーム " オプション機能を有効にする必要があります。管理者として PowerShell を開き、以下を実行します。

dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart

お使いのパソコンを再起動して WSL のインストールを完了し、WSL 2 に更新します。

次にWSL2Linuxカーネル更新プログラムパッケージをダウンロードする。システムがx64の場合はx64、ARM64の場合はARM64をクリックする。

x64

ARM64

ダウンロード後、ダウンロードしたファイルを実行する。

次に、次のコマンドで、新しい Linux ディストリビューションをインストールする際の既定のバージョンとして WSL 2 を設定します。

wsl --set-default-version 2

次に、Ubuntu 20.04 LTSをMicrosoft Storeからインストールする。 下のリンクに行って入手を選択する。

Ubuntu 20.04 LTS

その後、起動し、ユーザー名とパスワードを設定する。もちろん、どちらも覚えるか記録しておく。

このユーザー名およびパスワードは、インストールする Linux ディストリビューションごとに固有であり、Windows ユーザー名とは関係ありません。 ユーザーがユーザー名およびパスワードを作成すると、そのアカウントがディストリビューションの既定のユーザーとなり、起動時に自動的にサインインされます。 このアカウントは、Linux 管理者と見なされ、sudo (Super User Do) 管理コマンドを実行できます。

WSL2のBlocklyのための環境構築 

ここから、Ubuntuで作業する。Ubuntuで次のコマンドを実行する。

sudo apt update
sudo apt -yV upgrade

WSL2を再起動する。再起動後次のコマンドを実行する。

sudo apt install apache2
apache2 -v

WSL2へのpyenv(python)のインストール 

以下のコマンド実行後再起動。以下のコマンドはpythonを使用するために必要な機能をインストールしている。

sudo apt install -y build-essential # c++コンパイラ
sudo apt install -y libffi-dev
sudo apt install -y libssl-dev # openssl
sudo apt install -y zlib1g-dev
sudo apt install -y liblzma-dev
sudo apt install -y libbz2-dev libreadline-dev libsqlite3-dev # bz2, readline, sqlite3
sudo apt install -y git
sudo apt install -y net-tools

ここで再起動。 次に以下のコマンドでpyenv本体のダウンロードとインストールをする。

git clone https://github.com/pyenv/pyenv.git ~/.pyenv

次に、以下のコマンドで.bashrcの更新をする。

echo 'export PYENV_ROOT="$HOME/.pyenv"' >> ~/.bashrc
echo 'export PATH="$PYENV_ROOT/bin:$PATH"' >> ~/.bashrc
echo 'eval "$(pyenv init -)"' >> ~/.bashrc
source ~/.bashrc

WSL2を再起動。再起動後に次へ

以下のコマンドでpyenvがインストールできたかを確認

pyenv -v 

以下のコマンドでpythonのインストール

pyenv install 3.8.5 # 例えば,version 3.8.5
pyenv versions # インストール済みのpyenvのバージョンを確認できる

これにて、pythonのインストールは完了である。

WSL2内でのBlockly環境構築 

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

エクスプローラーのパスのところで、\\wsl$と入力しEnter。そしてまず、/var/www/html内に先ほどダウンロードしたhtmlの中身を、/usr/lib/cgi-bin内に cgi-binの中身を入れる。 入れるとき拒否られたら次のコマンド

sudo chmod 777 /var/www/html
sudo chmod 777 /usr/lib/cgi-bin

cgi-binなかったら次のコマンド

mkdir /usr/lib/cgi-bin

実行 

次のコマンドをWSL2上で実行するとサーバーが立ち上がる。

sudo service apache2 start

自分のWSL2のIPアドレスを調べるためにWSL2上で次のコマンドを実行する。

ifconfig
ifco.PNG

WSL2のIPアドレスはeth0のinetのところに書かれているIPアドレスである。次に自分のWindowsでそのIPアドレスをGoogle Chromeに入力し移動すると、Blocklyを開くことができる。次のリンクを右クリックして名前を付けてリンク先を保存を選択する。

そして、ファイルを選択するブロックにこのファイルを入れる。

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

4. Common Gateway Interface(CGI)プログラム(データ処理)の作成 

こちらからデータを送ってそのデータに基づいてサーバで処理を行ない、結果を返すものをCGIという。今回は、CGIプログラムをpythonで作る。pythonを使う理由は、機械学習やデータ処理の部分を書くことが簡単だからである。以下がpythonで書かれた拡張子.cgiのプログラムである。

このプログラムを実行できるようにjavascript内で記述することで実行できる。 実行すると、単回帰分析ができる。

EX.作ってほしいもの 

pythonのCGIデータ分析プログラムのブロック 

やり方としては、とりあえず、pythonで出来るデータ分析を調べて、 通常のpythonで動かしてみる。できるだけ、csvファイルやjsonファイルを使っているものが好ましい。

そして、それが動いたら.cgiのプログラムを作成して先ほどのpythonのコードをコピーペーストする。

プログラムの上に以下のようなおまじないをつける。zetaの部分を自分の名前に変える。

#!/home/zeta/.pyenv/shims/python
# -*- coding: utf-8 -*-

そしてmoduleをimportした後のところに次のおまじないをつける。

print("Content-type: application/json") print("\n\n")

data = sys.stdin.read()

最後にクライアントに返すためのおまじないをつける。resultの部分がクライアントに送信するものである。

print(json.JSONEncoder().encode(result))
print('\n')

そして、使うcsvファイルを選んで、

未実装 

Visual Studio Codeでの使い方(CGIの動かし方分からない。) 

まず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

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