10月27日 ビジュアルプログラミング の変更点

• 追加された行はこの色です。
• 削除された行はこの色です。
• 10月27日 ビジュアルプログラミング へ行く。
• 10月27日 ビジュアルプログラミング の差分を削除

#author("2022-12-07T07:53:25+00:00","","")
#author("2022-12-07T07:53:45+00:00","","")
[[専門ゼミ　榊原]]

*目次 [#e890b3d5]

#CONTENTS

#ref(スキャン_20201209.png,,40%)
#ref(スキャン_20201209 (2).png,,40%)
ゼミ　　ブロッコリー~
~
１．横井ページの添付ファイルから、最新版のブロックが入っている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→シークレットタブが開けるよ~
クロムはキャッシュが残るので&COLOR(red){シークレットタブでするのがおすすめ}
~
⑩ubuntuにmatplotlibが入っていないと思うので~
ubuntuのとこで
 pip install matplotlib
でインストール~
~
⑪htmlファイルの中に変更に関してはubuntu上で
 sudo service apache2 restart
で更新~
cgi-binファイルの中の変更に関しては更新する必要はない~
~
⑫ブロック「クラスター分析する」がデンドログラム図で表示されるので「画像で出力する」ブロックと接続する必要がある~
~
⑬4つの更新ブロックがちゃんと動くか試す~
読み込みファイルはwine～read4.csvを使う~
***kojinnnobunnseki [#ja672005]
⑭課題のブロックは3つのフィル~
-average-block.js
-average.js
toolbox.xml
を編集しcgi-bim📁ないに（課題名）.cgiを作成する~
~
⑮average-block.jsはブロックの見た目~
average.jsはブロックんしょり~
toolbox.xmlはブロックをツールボックスに追加~
（課題名）cgiは分析の計算~
~
⑯（課題名）.cgiを「sudo chmod 777(課題名).cgi」して~
アクセス権限を許しておく
*目次 [#e80b3d5]


#CONTENTS

**1. 目標 [#i67428c5]

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

**2. 環境構築及び実行 [#e321d51d]

***必要なもの [#j04453c8]

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

***Windows SubSystem for Linux2（WSL2）（Linux、UNIXでも可） [#v743175a]
とりあえず、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

お使いのパソコンを&size(20){&color(red,white){再起動};};して WSL のインストールを完了し、WSL 2 に更新します。

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

[[x64:https://wslstorestorage.blob.core.windows.net/wslblob/wsl_update_x64.msi]]

[[ARM64:https://wslstorestorage.blob.core.windows.net/wslblob/wsl_update_arm64.msi]]

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

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

 wsl --set-default-version 2

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

[[Ubuntu 20.04 LTS:https://www.microsoft.com/store/apps/9n6svws3rx71]]

複数のデバイスで使うか聞かれたら必要ないと答える。

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

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

***WSL2のBlocklyのための環境構築 [#s827ee10]

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

 sudo apt update
 sudo apt -yV upgrade

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

 sudo apt install apache2
 apache2 -v

***WSL2へのpyenv(python)のインストール [#m9448d25]
以下のコマンドは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環境構築 [#v88fa7b7]
ダウンロードすべきファイルを以下のzipファイルにまとめたので、これをダウンロードし任意のフォルダに置く。~
#ref(20201118product.zip)
エクスプローラーのパスのところで、\\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

***実行 [#ic4c479f]
次のコマンドをWSL2上で実行するとサーバーが立ち上がる。
 sudo service apache2 start
自分のWSL2のIPアドレスを調べるためにWSL2上で次のコマンドを実行する。
 ifconfig
#ref(ifco.PNG,,40%)
WSL2のIPアドレスはeth0のinetのところに書かれているIPアドレスである。次に自分のWindowsでそのIPアドレスをGoogle Chromeに入力し移動すると、Blocklyを開くことができる。

#ref(blockly_main.PNG,,40%)

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

#ref(winequality-red3.csv)

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

**3. Blocklyのブロックの作り方 [#e321d51d]


ダウンロードしたフォルダ中に入っている、average.jsとaverage_block.jsと index.htmlを主に編集して作っていく。 ~
average.jsには実行ボタンを押したときの動きが定義されている。~
平均値を出すブロックとconsole.logを出すブロックの定義の仕方が以下である。
#ref(blockly_average2.PNG,,40%)
average_block.jsには、ブロックの見た目と表示されたときの動作が定義されている。~
平均値を出すブロックとconsole.logを出すブロックの定義の仕方が以下である。
#ref(blockly_average.PNG,,40%)
index.htmlにはページの構成と使うjavascriptファイルが定義されている。~
toolbox.xmlにブロックを書くことによって初めて使えるようになる。
#ref(toolboxxx.PNG,,40%)

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

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

**EX．作ってほしいもの [#ic4c479f]
***入出力ファイル [#ua705440]
今回、入力出力に使うファイルの形式が決まっているので説明する。

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

#ref(blocklyinputandoutputtwo.csv)

#ref(blocklyinputandoutputtwo.PNG,,40%)

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

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

***pythonのCGIデータ分析プログラムのブロック [#ua705440]
作ってほしいものは、回帰分析などのデータ分析ができるものである。とりあえず、pythonで出来るデータ分析を調べて、
通常のpythonで動かしてみる。できるだけ、csvファイルやjsonファイルを使っているものが好ましい。

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

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

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

#ref(cgiteigi1.PNG,,60%)
#ref(cgiteigi2.PNG,,60%)
#ref(cgiteigi3.PNG,,60%)

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

**未実装 [#sec91ee7]

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

まずVisual Studio Codeを入れる。以下にリンクを貼った。~
https://azure.microsoft.com/ja-jp/products/visual-studio-code/~
リンクを開いたら、今すぐダウンロードをクリックし、次の画面で自分のOSに合わせてクリックする。~
すると、インストーラのダウンロードが始まるので、完了後そのファイルを実行する。~
インストールは適当で良い。~
インストール後、実行し拡張機能を入れる。~
拡張機能は左にある箱が4つあって1つだけ離れているものである。
#ref(kakutyou-2.png,,40%)
そして、拡張機能の検索バーでLive Serverを検索してインストールする。~
ダウンロードしたフォルダのindex.htmlを開いてVS Code右下に表示される「Go Live」をクリックすると、ブラウザで http://127.0.0.1:5500/ が実行される。
#ref(golive.png)

##サーバー

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