10月27日 ビジュアルプログラミング の履歴(No.2)

• 履歴一覧
• 差分 を表示
• 現在との差分 を表示
• ソース を表示
• 10月27日 ビジュアルプログラミング へ行く。
  • 1 (2022-11-17 (木) 13:22:20)
  • 2 (2022-11-29 (火) 14:20:06)

---

#ref(): File not found: "スキャン_20201209.png" at page "10月27日 ビジュアルプログラミング"

#ref(): File not found: "スキャン_20201209 (2).png" at page "10月27日 ビジュアルプログラミング"

ゼミ　　ブロッコリー

１．横井ページの添付ファイルから、最新版のブロックが入っている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. 目標 

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

2. 環境構築及び実行 

必要なもの 

• パソコン(OSはいずれでもよいがLinuxで運用するのが普通だと思う)

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 バージョンを満たしてない場合、更新します。

• 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

お使いのパソコンを再起動して 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を再起動する。再起動後次のコマンドを実行する。このコマンドは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のインストールは完了である。

   python -m pip install pyocr matplotlib pydotplus pulp pandas scikit-learn graphviz opencv-python docopt
   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　
   git clone https://github.com/neologd/mecab-ipadic-neologd.git
   cd mecab-ipadic-neologd
   sudo bin/install-mecab-ipadic-neologd
   cd /etc
   sudo vim mecabrc
   ここで:set pasteをし，aを押し，以下にコピペで変更する
   dicdir = /usr/lib/x86_64-linux-gnu/mecab/dic/mecab-ipadic-neologd
   :wq　で保存
   sudo apt install swig　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
   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
   sudo make install

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

WSL2内でのBlockly環境構築 

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

#ref(): File not found: "20201118product.zip" at page "10月27日 ビジュアルプログラミング"

エクスプローラーのパスのところで、\\wsl$と入力しEnter。そしてまず、/var/www/html内に先ほどダウンロードしたhtmlの中身を、/usr/lib/cgi-bin内に cgi-binの中身を入れる。htmlはサイトを構成するファイルが入っていて、cgi-binはpythonで動かすデータ処理の部分のファイルが入っている

次に、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

実行 

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

sudo service apache2 start

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

ifconfig

#ref(): File not found: "ifco.PNG" at page "10月27日 ビジュアルプログラミング"

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

#ref(): File not found: "blockly_main.PNG" at page "10月27日 ビジュアルプログラミング"

次のリンクを右クリックして名前を付けてリンク先を保存を選択する。

#ref(): File not found: "winequality-red3.csv" at page "10月27日 ビジュアルプログラミング"

そして、ファイルを選択するブロックにこのファイルを入れる。 その後、回帰分析のブロックの中にそのブロックを入れ実行するとUbuntuのpythonで行われた回帰分析の結果がコンソールに返ってくる。コンソールはGoogle ChromeをアクティブにしてF12を押すと見れる。

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

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

#ref(): File not found: "blockly_average2.PNG" at page "10月27日 ビジュアルプログラミング"

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

#ref(): File not found: "blockly_average.PNG" at page "10月27日 ビジュアルプログラミング"

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

#ref(): File not found: "toolboxxx.PNG" at page "10月27日 ビジュアルプログラミング"

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

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

#ref(): File not found: "kaiki_yosoku.cgi" at page "10月27日 ビジュアルプログラミング"

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

EX．作ってほしいもの 

入出力ファイル 

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

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

#ref(): File not found: "blocklyinputandoutputtwo.csv" at page "10月27日 ビジュアルプログラミング"

#ref(): File not found: "blocklyinputandoutputtwo.PNG" at page "10月27日 ビジュアルプログラミング"

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

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

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

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

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

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

pythonのcgiプログラム（といかajaxを使ってPOST通信で動かすときのpythonプログラム）は以下のようなプログラムの形にする必要がある。コメントに書いてあるように動作する。&ref(): File not found: "kaiki_yosoku.cgi" at page "10月27日 ビジュアルプログラミング";

#ref(): File not found: "cgiteigi1.PNG" at page "10月27日 ビジュアルプログラミング"

#ref(): File not found: "cgiteigi2.PNG" at page "10月27日 ビジュアルプログラミング"

#ref(): File not found: "cgiteigi3.PNG" at page "10月27日 ビジュアルプログラミング"

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')

未実装 

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

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

#ref(): File not found: "kakutyou-2.png" at page "10月27日 ビジュアルプログラミング"

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

#ref(): File not found: "golive.png" at page "10月27日 ビジュアルプログラミング"

##サーバー

https://qiita.com/S-Masakatsu/items/63b9e0e7a869d2aafc4b

https://qiita.com/salt_field/items/3e255c3356006a1e020f

https://qiita.com/ksugawara61/items/ba9a51ebfdaf8d1a1b48

sudo yum install gcc zlib-devel bzip2 bzip2-devel readline readline-devel sqlite sqlite-devel openssl openssl-devel git libffi-devel