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

• 履歴一覧
• 差分 を表示
• 現在との差分 を表示
• ソース を表示
• ビジュアル・プログラミング へ行く。
  • 1 (2020-08-31 (月) 16:18:55)
  • 2 (2020-08-31 (月) 16:36:52)
  • 3 (2020-09-15 (火) 18:40:23)
  • 4 (2020-10-12 (月) 17:23:22)
  • 5 (2020-10-13 (火) 19:22:35)
  • 6 (2020-10-22 (木) 15:49:25)
  • 7 (2020-10-22 (木) 15:49:38)
  • 8 (2020-11-02 (月) 14:16:21)
  • 9 (2020-11-16 (月) 15:31:07)
  • 10 (2020-11-17 (火) 08:19:33)
  • 11 (2020-11-20 (金) 14:45:01)
  • 12 (2020-11-20 (金) 16:31:51)
  • 13 (2020-11-20 (金) 20:02:07)
  • 14 (2020-11-26 (木) 13:50:36)
  • 15 (2020-11-26 (木) 17:05:50)
  • 16 (2020-12-09 (水) 15:57:32)
  • 17 (2020-12-09 (水) 18:20:33)
  • 18 (2020-12-14 (月) 17:33:08)
  • 19 (2020-12-24 (木) 23:33:56)
  • 20 (2021-01-11 (月) 03:22:27)
  • 21 (2021-02-04 (木) 06:01:24)
  • 22 (2021-11-18 (木) 15:49:36)
  • 23 (2023-02-01 (水) 16:37:30)
  • 24 (2023-11-01 (水) 14:53:00)
  • 25 (2023-11-01 (水) 20:23:14)
  • 26 (2023-11-01 (水) 22:02:36)
  • 27 (2023-11-02 (木) 11:41:27)
  • 28 (2023-11-02 (木) 14:34:58)
  • 29 (2023-11-02 (木) 15:47:56)
  • 30 (2023-11-02 (木) 20:15:17)
  • 31 (2023-11-03 (金) 13:28:28)
  • 32 (2023-11-04 (土) 16:36:14)

---

技術資料

目次 

1. 目標 

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

2. 環境構築 

必要なもの 

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

blocklyのダウンロード・インストール 

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

使い方が２つあるので、簡単なほうと難しいほうを教える。

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

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

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

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 より大きい必要があります。

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) 管理コマンドを実行できます。

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

ダウンロードしたフォルダ中に入っている、average.jsとaverage_block.jsと index.htmlを主に編集して作っていく。
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のプログラムである。

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

5．実行