ビジュアル・プログラミングの履歴(No.28)

以前のバージョンはこちら
Blocly技術資料(2023/10以前)バックアップ

x64 システムの場合: バージョン 1903 以降、ビルド 18362 以上。
ARM64 システムの場合: バージョン 2004 以降、ビルド 19041 以上。
- 18362 より前のビルドは WSL 2 をサポートしていません。 Windows 更新アシスタントを使用して、お使いのバージョンの Windows を更新します。Windows 10 バージョン 1903 または 1909 を実行している場合は、Windows メニューから [設定] を開き、[更新とセキュリティ] に移動して、[更新プログラムのチェック] を選択します。ビルド番号は、18362.1049+ または 18363.1049+ で、マイナービルド番号は .1049 より大きい必要があります。windowsのマイナービルド番号を満たしていない場合は、windowsマークをクリックして、歯車マークをクリックして設定を開きWindows Updateを行う。

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

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

PCを再起動して 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を再起動する(Ubuntuを閉じて再度開く)。再起動後、次のコマンドを実行する。

このコマンドはapache2というWebサーバーソフトウェアをインストールしている。インターネット上で企業や官公庁の公式サイトで情報を入手したり、動画やSNSを利用したりする場合には、必ずWebサーバーソフトウェアのお世話になる。そのうち半数でApacheが稼働している。

sudo apt install apache2
apache2 -v

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

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

sudo apt install -y build-essential libffi-dev zlib1g-dev liblzma-dev libbz2-dev libreadline-dev libsqlite3-dev git net-tools libssl-dev

ここでWSL2(Ubuntu)を再起動。次に以下のコマンドで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(Ubuntu)を再起動。再起動後に次へ

以下のコマンドでpyenvがインストールできたかを確認（pyenvはLinuxにおいて、Pythonの実行環境を管理するツール。つまりいろんなバージョンのpythonを管理する有能）

pyenv -v

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

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

以下必要なライブラリのインストール

   python -m pip install pyocr matplotlib pydotplus pulp pandas scikit-learn graphviz opencv-python docopt
   sudo apt install tesseract-ocr libtesseract-dev tesseract-ocr-jpn
   sudo apt-get dist-upgrade
   sudo apt-get install build-essential
   sudo apt-get update
   sudo apt-get install graphviz mecab libmecab-dev mecab-ipadic-utf8

   cd ~
   sudo apt install swig
   →エラー(11)
   sudo apt install python3-pip
   sudo pip3 install mecab-python3
   sudo apt install build-essential cmake git libgtk2.0-dev pkg-config libavcodec-dev libavformat-dev libswscale-dev

https://www.engineer-log.com/entry/2019/10/31/tesseract5-install

下記のライブラリは必要に応じてインストールする(専門ゼミでは飛ばす)

自然言語処理系のBlockを動かす場合

   git clone https://github.com/neologd/mecab-ipadic-neologd.git
   cd mecab-ipadic-neologd
   sudo bin/install-mecab-ipadic-neologd
   → 所要時間約13分
   cd /etc
   sudo vim mecabrc
   # ここで:set pasteをし，aを押し，以下にコピペで変更する
   dicdir = /usr/lib/x86_64-linux-gnu/mecab/dic/mecab-ipadic-neologd
   :wq　で保存

手書き文字認識(OCR)や画像処理系のBlockを動かす場合

   cd
   git clone https://github.com/opencv/opencv.git
   git clone https://github.com/opencv/opencv_contrib.git
   cd ~/opencv
   mkdir build
   cd build
   cmake -D CMAKE_BUILD_TYPE=Release -D CMAKE_INSTALL_PREFIX=/usr/local -D WITH_TBB=ON -D WITH_OPENGL=ON -D OPENCV_EXTRA_MODULES_PATH=~/opencv_contrib/modules -D OPENCV_GENERATE_PKGCONFIG=ON ..
   make -j7
   → 所要時間約7分
   sudo make install

エラー対応集

(11)「E: Unable to locate package swig」の表示で，swigのインストールができない

以下のコマンドを試した後に再度「sudo apt install swig」を実行
```
git clone https://github.com/swig/swig.git
```
参考「https://askubuntu.com/questions/893932/sudo-apt-get-install-swig-on-ubuntu-14-04」

WSL2内でのBlockly環境構築

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

20201118product.zip

エクスプローラーのパスのところで、\\wsl$と入力しEnter。アクセス許可がないと言われたら許可する。

これによって、Ubuntu(Blocklyサーバー側)のファイルにアクセスできる以下のパスを辿る
```
Ubuntu-20.04 > var > www > html
Ubuntu-20.04 > usr > lib > cgi-bin
```
簡単アクセスのため、両方を右クリックで「クイックアクセスにピン止めする」

「/var/www/html」内に先ほどダウンロードしたhtmlの中身を、「/usr/lib/cgi-bin」内にcgi-binの中身を入れる。

htmlにはサイトを構成するファイル、cgi-binにはpythonで動かすデータ処理に関するファイルが入っている

次に以下のchmodコマンドでファイルのアクセス権限を変更する

Linuxでは管理者/準管理者グループ/外部ユーザの人に対してと、読み込み/書き込み/実行許可に対しての2種類設定する
r(読み込み許可)、w(書き込み許可)、x(実行許可)とし、r=4, w=2, x=1と表現する
755は、管理者はr,w,xすべて可能、準管理者グループはr,xが可能、外部ユーザもr,xが可能を意味する(「ll /usr/lib/」などを打つと、そのディレクトリ内のファイルがr,w,xが可能か確認できる)

sudo chmod 755 /usr/lib/cgi-bin

sudo chmod 755 /usr/lib/cgi-bin/kaiki*.cgi

sudo chmod 755 /var/www/html

例題では「回帰分析ブロック」を動かすので、以下のコマンドで「kaiki～.cgi」の編集画面を開く

Blockly処理時にはpythonのプログラムをそのまま認識できないので、cgiファイルにpythonのコードを書き込むことでデータ処理できるようにしている
```
sudo nano /usr/lib/cgi-bin/kaiki_Analyze.cgi
sudo nano /usr/lib/cgi-bin/kaiki_keisu.cgi
sudo nano /usr/lib/cgi-bin/kaiki_yosoku.cgi
```
上のコマンドで開いた後、以下の二つの部分のrthetaというところを先ほど設定した自分のユーザー名に変更する
```
#!/home/rtheta/.pyenv/shims/python
```

「Ctrl+X」→「y」→「Enter」で保存する。

次のコマンドでcgiモジュールを有効にできる。これはcgi-binに入っているファイルを実行するためのmodを有効にしている。

sudo a2enmod cgid

~~次に、CSVファイル入れるところ作る。~~

cd
~~mkdir kaiki~~
~~sudo chmod 777 kaiki~~

~~入れるとき拒否られたら次のコマンドをubuntuで。chmodで読み込みや書き込みを他の人からでもできるようにしている。~~
~~sudo chmod 777 /var/www/html~~
~~sudo chmod 777 /usr/lib/cgi-bin~~
~~cgi-binなかったら次のコマンド。cgi-binディレクトリを作成している~~
~~mkdir /usr/lib/cgi-bin~~

その後以下を実行。ファイルの権限を変えてる。755にするのは、この後のウェブ上のサイトから他のパソコンからでも使えるようにするため。（しかし書き込みはできない。これについて知りたかったらchmodについて調べて）
~~sudo chmod 755 /usr/lib/cgi-bin~~
~~sudo chmod 755 /usr/lib/cgi-bin/kaiki.cgi~~

~~python -m pip install pandas~~
~~python -m pip install scikit-learn~~

~~以下のコマンドでエディタ開ける。~~
~~sudo nano /usr/lib/cgi-bin/kaiki.cgi~~

~~上のコマンドで開いた後、以下の二つの部分のzetaというところを自分のUbuntuのユーザー名に変える~~
~~#!/home/zeta/.pyenv/shims/python~~
~~wine.to_csv('/home/zeta/kaiki/123456.csv', header=False, index=False)~~

~~「Ctrl+X」→「y」→「Enter」で保存する。~~

~~次のコマンドでＣＧＩモジュールを有効にできる。これはcgi-binに入っているファイルを実行するためのmodを有効にしている。~~
~~sudo a2enmod cgid~~

Blocklyの実行

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

sudo service apache2 start

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

ifconfig

WSL2のIPアドレスはeth0のinetのところに書かれているIPアドレスである。次に自分のWindowsでそのIPアドレスをGoogle Chromeに入力し移動すると、Blocklyを開くことができる。

ビジュアルプログラミングの例題(回帰分析)

以下のデータを用いる。

kaiki_keisu_yosoku.csv

このCSVファイルは、数種類の説明変数と1つの目的変数から構成されたデータとなっている
このデータを「回帰Block」に入れることで、目的変数と説明変数の関係(関数)を予測する。

csvファイルの一行目はデータ数を表す。
二行目は、回帰分析であれば、1～11列が説明変数、12列目が目的変数など、入力と出力のような関係を表す。
三行目は、その列のデータのラベルである。文字であれば何でもよい。
四行目は、その列のデータの型である。例えば、intやfloat、stringなどが入る。
それ以下の行は、データである。

まず、「FILE_INPUT」から入力「CSV読み込み」ブロック、「ANALYZE→DIV1」から分析「回帰分析」ブロック(上図オレンジ)、「OUTPUT」から出力「CSV出力」ブロックを取り出す。

赤ブロックの「CSVファイルを選択してください」をクリックして、先ほどのcsvを入れる

入れるとデータの中身(1599)が表示される
入力、分析、出力ブロックをパズルのように合体させ、上図の形を作る

中央の歯車をクリックし、ラベルリストに左のブロックのいずれかを入れる

「ラベルを一つ選択」を入れると一列を目的変数、別一列を説明変数とする単回帰分析になる
「ラベルを一つ選択」を複数入れると、それらの列を説明変数、一列を目的変数とする重回帰分析となる
「ラベルをまとめて選択」を入れると、ある列からある列を説明変数、一列を目的変数とする重回帰分析となるオレンジ右端で回帰予測をするか回帰係数を出力するかを選べる

例えば「ラベルをまとめて選択」にした場合、目的変数の欄にl(CSVのl列)、説明変数の欄にa～k(CSVのa～k列)と入れれば重回帰分析が行える

単回帰or重回帰、回帰予測or回帰係数を選択したら、右上の「実行」をクリックする

出力ファイル保存画面が出るので保存
出力ファイルを開くと回帰予測なら「Predictの列」、回帰係数なら別CSVファイルが新たにできているので、確認する

3. 【課題】新たな分析ブロックの作成

Blocklyのメリットの一つに様々な統計分析をブロック操作のみで行える点がある
「ANALYZE→DIV1」にある分析ブロックは、今までにブロック化された統計手法である。
ここにはない統計手法を実装することが重要なテーマとなる

分析ブロックの作成方法

以下2つの手順を行う

分析ブロックのもととなる処理をPythonで記述した「～.cgi」ファイルを作成する。(ダウンロードフォルダ「cgi-bin」に作成する)
ダウンロードフォルダ(html)中に入っている「average.js」「average_block.js」「toolbox.xml」を編集する。

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

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

CGIファイル(分析ブロックのプログラム)の作り方

回帰分析ブロックを例に考える
pythonのcgiプログラム（ajaxを用いたPOST通信で動かすときのpythonプログラム）は以下のようなプログラムの形にする必要がある。

cgiプログラムの例(回帰分析cgi)

kaiki_yosoku.cgi

(1) 1行目をrthetaの部分を自分の名前に変える。

1行目は使用する、プログラミング言語の実行コマンド（今回はpython）を入力している。
2行目にこのcgiプログラムの文字コードを記述する。
- UTF-8が楽なのでUTF-8を推奨する。

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

(2) 15,16行目のようなおまじないをつける

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

このおまじないは、ajax通信で送られてきたものがjson形式で書かれていることをcgiプログラムに認識させている。

(3) 74,75行目のようなクライアントに返すためのおまじないをつける。

wine_jsonの部分がクライアントに送信するものである。
JSONにエンコードしているのは、ajax通信ではjsonで送られてきたものはjsonで返信しなければならない掟があるからである。

基本的に、上と下のおまじないの間(17～72行目)に実装したいPythonプログラムを書けば新しい分析ブロックを動かせる。

(4)入力ブロックからのデータ受け取り部分の実装

赤の入力ブロックに入れたファイルは19行目の「data」に入る

26行目で受け取ったデータをデータフレームにしている

入力データによく使うのはcsvなのでデータフレームの加工が多くなる
26行目は通常のPythonコードだと以下と同じ意味なる
```
df = pd.read_csv('data',encoding="shift-jis(or utf-8)",header=None)
```
上図のようなインデックスとカラム番号が自動で割り振られたデータフレームとなる
31行目でインデックス4(5行目)以降のデータのみを取り出して回帰分析を行っている

(5)生成したデータフレームを出力ブロックに送信

Pythonの処理が終わり、結果のデータフレーム(wine_df)をwine_json(67行目)に格納している
データフレームを再びjsonデータにしてサーバーに返送している

3.2 jsファイルの編集

cgi(分析ブロック)を動かすために「average.js」「average_block.js」「toolbox.xml」を編集する。

(1)average.jsの編集

average.jsには実行ボタンを押したときの動きが定義されている。
ダウンロードしたaverage.jsではこのOCRが一番最後の分析ブロックになっている
新たなcgi(分析ブロック)を作る際は、この下の行にOCRの5行をそのままコピペする
['ocr']の行を['bunseki12']など適当な名前にする
"read_csv11"の行を"read_csv12"に変更する
- 新たなブロックを追加するたびに12,13,14・・・と増やしていく
「url: '../cgi-bin/～～～.cgi」の部分に自分の作ったcgiファイル名を入れる

(2)average_block.jsの編集

average_block.jsには、ブロックの見た目と表示されたときの動作が定義されている
同じようにocrの約15行を下の行にコピペする
['ocr']の行を(1)と同じ['bunseki12']にする
"read_csv11"の行を"read_csv12"に変更する
appendField("をOCRにより文字")の部分を「を(統計分析の名前)により(出力されるデータ形式)をCSVで出力する」の文章になるようにする
- 「を(統計分析の名前)により(出力されるデータ形式)」の部分だけ考える
「setOutput(true, "txtFile")」を "csvFile"にする
「this.setTooltip("入力は画像ファイル。出力はテキストファイル。\n画像にある文字を判別する。")」はブロックの説明文になるので、適当なものに変更する

(3)toolbox.xmlの編集

toolbox.xmlにはBlockly画面上でのブロックの並びが定義されている
ocrの下に以下2行を追加する
```
<block type="bunseki12">
</block>
```

目次

1. 目標

2. 環境構築及び実行

必要なもの

Windows SubSystem for Linux2（WSL2）（Linux、UNIXでも可）

WSL2のBlocklyのための環境構築

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

エラー対応集

WSL2内でのBlockly環境構築

Blocklyの実行

ビジュアルプログラミングの例題(回帰分析)

3. 【課題】新たな分析ブロックの作成

分析ブロックの作成方法

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

CGIファイル(分析ブロックのプログラム)の作り方

3.2 jsファイルの編集

ビジュアル・プログラミング の履歴(No.28)

目次

1. 目標

2. 環境構築及び実行

必要なもの

Windows SubSystem for Linux2（WSL2）（Linux、UNIXでも可）

WSL2のBlocklyのための環境構築

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

エラー対応集

WSL2内でのBlockly環境構築

Blocklyの実行

ビジュアルプログラミングの例題(回帰分析)

3. 【課題】新たな分析ブロックの作成

分析ブロックの作成方法

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

CGIファイル(分析ブロックのプログラム)の作り方

3.2 jsファイルの編集

ビジュアル・プログラミングの履歴(No.28)