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

以前のバージョンはこちら
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
```
上のコマンドで開いた後、以下の二つの部分のzetaというところを先ほど設定した自分のユーザー名に変更する
```
#!/home/zeta/.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」を編集する。

average.jsには実行ボタンを押したときの動きが定義されている。
平均値を出すブロックとconsole.logを出すブロックの定義の仕方が以下である。

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

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

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

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

kaiki_yosoku.cgi

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

EX．作ってほしいもの

入出力ファイル

今回、入力出力に使うファイルの形式が決まっているので説明する。

まず、拡張子は.csvである。そしてファイルの中身は以下のようになっている。

blocklyinputandoutputtwo.csv

このファイルの入力で動作して、この形式のファイルで出力するように、pythonのデータ分析等のプログラムを作成してほしい。

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

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

そして、次に入力出力を上記で説明したcsvファイルに対応させて動作させる。

入出力を変更して動いたら.cgiのプログラムを作成して先ほどのpythonのコードをコピーペーストする。

pythonのcgiプログラム（といかajaxを使ってPOST通信で動かすときのpythonプログラム）は以下のようなプログラムの形にする必要がある。コメントに書いてあるように動作する。kaiki_yosoku.cgi

cgiプログラムの上に以下のようなおまじないをつける。zetaの部分を自分の名前に変える。これは、上が自分の使うプログラミング言語の実行コマンド（今回はpython）を入力している。下が、このcgiプログラムの文字コードを記述する。UTF-8が楽なのでUTF-8を推奨する。

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

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

そしてmoduleをimportした後のところに次のおまじないをつける。追記：ガセでした。importの後から最後のおまじないの間なら動きます。

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

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

そして下のコードに送られてきたデータが入る。

data = sys.stdin.read()

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

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

ゼミ　　ブロッコリー

１．横井ページの添付ファイルから、最新版のブロックが入っているzipファイルとWine　～red4 .csvをダウンロードする。

２．エクスプローラーで「\\WSl$」を打つ。アクセス許可がないと言われたら許可する。エクスプローラーのどこにあるか

３．Ubuntu > var > www > html ...①
　　Ubuntu > usr > lib > cgi-bin...2⃣
両方を右クリックで「クイックアクセスにピン止めする」

４．Ubuntuを開いて、①のwwwまでアクセス（cd）する

sudo chmod 777 -R html

※「ls -l」を入力すると"-rwxrwxrwx"と表示されていれば大丈夫
2⃣も同様にする（libまでアクセス）

sudo chmod 777 -R cgi-bin

⑤Ubuntuで、Ubuntu > var > logにアクセスする。

sudo chmod 777 -R apache2

⑥apache2の中の「error.log」にAjax通信に関するエラーのみ表示される

⑦cgi-binの中にある

dend.cgi
Kaiki_Keisu.cgi
Kaiki_yokoi.cgi
NN.cgi のパスをVScodeとかで自分のにする

⑧VS code　の右下が”python”の表示がなければ
「Shell Script」をクリックして"Select Language Mode"のところで「python」を入力して選択
（VS code上で拡張しcgiのファイルがpythonに関連付けされる）→コードに色がつく

⑨google chrome上で[]Ctrl+shift+n→シークレットタブが開けるよ
クロムはキャッシュが残るので&シークレットタブでするのがおすすめ
⑩ubuntuにmatplotlibが入っていないと思うので
ubuntuのとこで
```
pip install matplotlib
```
でインストール

⑪htmlファイルの中に変更に関してはubuntu上で
```
sudo service apache2 restart
```
で更新
cgi-binファイルの中の変更に関しては更新する必要はない

⑫ブロック「クラスター分析する」がデンドログラム図で表示されるので「画像で出力する」ブロックと接続する必要がある

⑬4つの更新ブロックがちゃんと動くか試す
読み込みファイルはwine～read4.csvを使う

kojinnnobunnseki

⑭課題のブロックは3つのフィル

average-block.js
average.js toolbox.xml を編集しcgi-bim📁ないに（課題名）.cgiを作成する

⑮average-block.jsはブロックの見た目
average.jsはブロックんしょり
toolbox.xmlはブロックをツールボックスに追加
（課題名）cgiは分析の計算

⑯（課題名）.cgiを「sudo chmod 777(課題名).cgi」して
アクセス権限を許しておく

目次

1. 目標

2. 環境構築及び実行

必要なもの

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

WSL2のBlocklyのための環境構築

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

エラー対応集

WSL2内でのBlockly環境構築

Blocklyの実行

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

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

分析ブロックの作成方法

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

EX．作ってほしいもの

入出力ファイル

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

kojinnnobunnseki

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

目次

1. 目標

2. 環境構築及び実行

必要なもの

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

WSL2のBlocklyのための環境構築

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

エラー対応集

WSL2内でのBlockly環境構築

Blocklyの実行

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

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

分析ブロックの作成方法

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

EX．作ってほしいもの

入出力ファイル

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

kojinnnobunnseki

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