ローカルスクラッチ３

LANなどのローカル上に配置するスクラッチ３です。
その環境下で、スクラッチ３（ブラウザ）と外部コンピュータ(ラズベリーパイなど)間をリモートアクセスする拡張ブロックを追加しました。

ローカルな環境で、個人または少人数で、プログラミングを学習する（遊べる）構成です。
スクラッチ３ではプログラムの理解の手助け、ラズベリーパイでは、それに伴う実際の物の動きを実感してもらえるのではないかなと思います。

拡張ブロック

・ラズベリーパイ


リモートアクセスとラズベリーパイ通信・チャット通信をミックスした拡張ブロックです。

・リモートアクセス

リモートアクセスブロックはメッセージを送受信する通信の本体です。
各通信ブロックは、通信の種類、送信するメッセージの作成、返信・イベントメッセージを参照するためのリモートアクセスの部品です。
リモートアクセスのブロックに各通信ブロック（部品）を貼り付けます。

ホームページ
ローカルスクラッチ３

試験的に公開したスラッチ３サイト
スラッチ３サイト

あくまでも実験中です。
動かなかったり、ページが開かなかったりしたらごめんなさい。

拡張ブロックの例
bbfactory/scratch-examples

拡張ブロックの例です。

詳細は上記ホームページをご参照ください。

node.jsの非同期関数をCのマルチタスク風にプログラムする方法

履歴
2018/11/13
・task.js(timeout interval)、 task-test05-main.js追加

・task.jsファイル中のコメント(grobal->global)

2018/11/08
・バグ(タスクの切り替え)を取りました
・いろいろな問題とは作成中のセマフォのP/V操作の問題（自分のバグ）でした
・コールバック（CB)以外にタスク機能(TCB)を追加しました
・ソースコードをダウンロード用Gitサーバ(GitBucket)にアップしました

2018/10/24
・ソース公開
・バグといろいろな問題より中断

環境
IDE：Visual Studio 2017 Community
アプリ：nodejs v8.12.0
パッケージ：readline/uuid

マルチタスク
node.js(javascript)は、Promise、async-awaitという非同期処理があります。
これを使用して、node.jsの非同期関数をCのマルチタスク風にプログラムする方法（Javascriptモジュール）です。

特徴
・タスク(TCB)はタスクを管理するクラス・コンストラクタです
・コールバック(CB)は非同期関数、イベントのコールバック関数を管理するクラス・コンストラクタです
・タスク(TCB)とコールバック(CB)間の待ち(wait)と通知(post)
・１タスク(TCB)の複数コールバック(CB)待ち(OR待ち）
・１コールバック(CB)の複数タスク(TCB)待ちと通知方法の選択（待ちタスク全通知と待ちタスク順通知）
・コールバック(CB)の非同期処理キャンセル(cancel)
・コールバック(CB)の遅延(sleep)と次タスク(next)
・コールバック(CB)のセマフォ(semaphore)のP/V操作
・タスク(TCB)間コール(call)
・タスクの切り替えは優先順位無しのラウンドロビンです（当前？ですがタイムスライス無しです）
・コールバック(CB)の待ちタスクへの通知(post)は一過性です（フラグなどの状態を持ちません）

ソースコード
ソースコードは下記のサイトにあります。
http://u-iwasaki.com:8080/gitbucket/git/bbfactory/node-task.git

このページの「Dawnload Zip」よりダウンロード、任意のフォルダに解凍してください。
％このページはダウンロード専用です
％このサイトはhttps未対応です

主なファイル
・task.js
マルチタスクのJavascriptモジュールです。
バージョンは0.0.1α版です。

・task-test01-main.js
コンソール入力とタイマーの複数待ちのタスク(main関数)と秒をカウントするタスク(count関数）のサンプルです。

・task-test02-post.js
通知待ちの２つのタスク(task1,tasku2関数)に定周期に通知するタスク(main関数)のサンプルです。
通知方法（待ちタスク全通知と待ちタスク順通知）の選択より動きが変わります。

・task-test03-semaphore.js
サンプル（task-test02-post.js）の各関数(main,task1,task2関数)のコンソール出力を複数行にして、そのコンソール関係をセマフォの相互排除（ロック）により同期させるサンプルです。

・task-test04-call.js
サンプル（task-test03-semaphore.js）に現在時刻を読み込むコールタスク(time関数)を追加して、各関数(main,task1,task2関数)よりコールタスク(time関数)を呼び出すサンプルです。

・task-test05-main.js
サンプル（task-test01-main.js）にタイムアウトコールバック((cbTimeout))とキャンセル(cancel)処理を追加。

カウントタスク(count関数）が２０秒以上経過するとメインタスク(main関数)が終了します。

マルチタスクモジュール(task.js)の説明
task.jsのバージョンは0.0.1のα版で、新しい関数を作成中です。

まだ仕様が固まっていない関数がありますので、これが落ち着いたら別ページにアップする予定です。

非同期処理のキャンセル
２つの完了（処理要求->必ず正常かエラーでコールバックされる）する非同期関数を同時に実行したとします。
１つの非同期関数が完了（コールバック）した段階で、もう一方の実行中の非同期処理をキャンセルする必要がある場合があります。
タイマーではclearTimeout,clearIntervalなどのキャンセルする関数がありますが、他の非同期関数のキャンセル方法がよく分りません。（javascript,node.jsは勉強中です・・・）
そのため、非同期関数が完了することを前提に、キャンセルする場合は、その関数のコールバック関数を無効化（コールバックされても何もしない）し、新しいコールバック関数を作成、古いコールバック関数と入れ替え、古いコールバック関数への参照を解消しています。古いコールバック関数（オブジェクト）の開放は非同期関数側とガーベージコレクション（GC)に委ねます。
これでも完全ではなくタイミングによっては、また、コンソール入力(readline)などでこれを実行し続けるとメモリリークが発生します。
もしかすると、キャンセル処理は、もともとのJavascriptかPromise、async-awaitでサポートされているかもしれませんが、念のためです。（ホントに勉強中です・・・）
 

利点

マルチタスクモジュール(task.js)は、急いでいたり、テストなどの簡単でシーケンシャルなプログラムを作成するのに便利だと思います。
 

プログラム支援ツール V3.00 (studies)

登録サイト：　/xampp/XAMPPサイト
 
プログラム支援ツール(studies)

「シンプルブラウザとWEB学習支援ツール (mekki)」をプログラム支援ツールとして拡張しました。
「シンプルブラウザ」機能は、別途mekkiとして継続する予定です。

シンプルブラウザとWEB学習支援ツール (mekki)


mekkiとの違い
 

・名前とタイトルで複数のサイトを管理
・メニュー「サーバ」を「コード」へ変更
・設定ファイル(mekki.json)をsettings.jsonへ変更
・各アプリ（「編集」「コード」）の自動起動
・WebSocketサーバ(WSサーバ)を追加
・ヘルプのWSサーバ対応
・コンピュータ間の支援ツールの共有と同期（予定）


サイト管理

メニュー「ファイル」->「サイト選択」をクリックします。




・「サイト一覧」

登録サイトの一覧です。


・▲▼

行を移動します。


・「登録」

サイトを登録します。
登録には「名前」が必要です。
サイト一覧と名前が一致すると更新、新規は追加します。


・「削除」

サイト一覧で選択したサイトを削除します。


・「選択」

サイト一覧で選択したサイトを「選択サイト」へ読み込み（コピー）します。
（サイトのダブルクリックも同様）


・「選択サイト」

「タイトル」「名前」はサイトのタイトル、名前です。
「フォルダ」はサイトのフォルダ、「URI」はサイトのURIです。
「ファイル」をチェックすると、URIはファイルの絶対パスになります。
％
「名前」は任意の識別子でファイル名ではありません。
ファイル名はメニュー「ファイル」->「ファイル選択」で設定します。


・「その他」

上記「選択サイト」以外の情報です。
「ファイル」はメニュー「ファイル」->「ファイル選択」の設定値、「アプリ情報」は各アプリ(編集、コード）の情報です。
「クリア」よりアプリ情報をクリアします。
「OK」は更新、「Cancel」はキャンセルです。


・「サイト一覧」の列幅

列幅は変更可能です。


・「OK」

「サイト一覧」のサイト・列幅、「選択サイト」を保存します。
保存前に「選択サイト」を「サイト一覧」の同名サイトにコピーします。


・「Cancel」

キャンセルします。


WSサーバ

WebSocketサーバはwebsockets-sharpを使用しています。

GitHub - sta/websocket-sharp: A C# implementation of the WebSocket protocol client and server


WSサーバ(http)

・ルートサイト

実行ファイルのフォルダ下の「root」フォルダです。


・URI

http://localhost:9999/<ファイルパス>

<ファイルパス>省略時はindex.htmlです。


・ファイル

「選択サイト」にルートフォルダと同名のフォルダ(root)がある場合、下記の順でファイルを探します。

①「選択サイト」のフォルダ(root) 
②ルートフォルダ

ルートフォルダのindex.htmlとsite.htmlはメニュー「ヘルプ」にとって特別の意味があります。
ヘルプの「はじめに」はindex.html、「サイト情報」は各サイトのsite.htmlを表示します。

index.html
プログラム 支援ツールの目的とか作業の流れなど全体を記述します。

site.html
サイト情報で、サイトの説明を記述します。
各サイトのrootフォルダにsite.htmlを置くことで、ルートフォルダでは無く、「選択サイト」の情報を読み込みます。

％
site.htmlのsiteは<サイトトークン>です


・サイトURI

http://localhost:9999/<サイトトークン>{.<サイト名>}/<ファイルパス>

%{}は省略可

サイトをリンクします。

<a href="/site/site.html">選択サイト</a>
<a href="/site.index/site.html">はじめに</a>
<a href="/site.index/chat.html">chat.html</a>
<a href="/site.chat/site.html">WSチャット</a>


・特別なサイト名

http://localhost:9999/<サイトトークン>.exe/<ファイルパス>

実行環境をリンクします。

<a href="/site.exe/settings.json">設定</a>

％
サイトURIは登録サイトのサイト情報(site.html)を表示するだけですが、WSサーバ(WS)のマクロでは支援ツールのサイトを選択することが可能です。

サイトのリンク・マクロ例は登録サイト「ルートサイト」(index)を参照ください


WSサーバ(ws)

・サブプロトコル

ws://localhost:9999/Chat

websockets-sharpのサンプルではEchoとChatがありましたのでChatを選択しました。
このChatにマクロ機能を追加しました。


・メッセージ

Chatサブプロトコルのメッセージ形式です。

{"<id>":{....}}

JSON形式です。
<id>はメッセージの識別子です。
ルートサイトのchat.html、console.html、macro.jsのメッセージもこの形式です。


・マクロ

{"macro":{"order":"site","name":"<サイト名>"[,"file":"<ファイル名>"][,"reply":"<返信>"]}}

%[]は省略可

<サイト名>のサイトを選択します。
<ファイル名>はそのサイトのファイル名(URIのファイルパス)です（省略可）。
<返信>は、その内容を返信（ブロードキャスト）します（省略可）。

ルートサイトのmacro.jsのselsite関数は、選択するサイト名(name)とファイル(file)、移動するページのURI(uri)を送信します。
サイト選択後、配信されたURI(uri)のメッセージ(reply)よりページを移動します。

％
サイトのリンク・マクロ例は登録サイト「ルートサイト」(index)を参照ください


 ヘルプ

サイト情報　http://localhost:9999/site.html
はじめに　　http://localhost:9999
チャット      http://localhost:9999/chat.html
コンソール  http://localhost:9999/console.html

上記URIを表示します。


アプリケーション

・起動

各アプリ（メニュー「編集」「コード」)は常時実行が原則です。
プログラム支援ツール立ち上げ時に、各アプリを自動起動します。


・キー送信

各アプリのサイトパス、ソリューションの設定はキー送信で行います。
キー送信のタイミングは設定(settings,json)で調整します。
キー送信シーケンスが崩れた時は、一度アプリを終了し、表示と再起動（下記）してください。


・表示と再起動

アプリ（メニュー「編集」「コード」）をクリックするとアプリをウインドウの最前面に表示します。

①サイトが管理するアプリが実行中の場合、それを表示
②他に実行中のアプリがある場合、それを管理・表示
③アプリの起動メッセージを表示
④アプリを起動
⑤アプリの起動終了を確認後、再度アプリ（メニュー「編集」「コード」）をクリック


・アプリ情報

選択サイトのアプリ情報がクリアされていると、起動時に「ユーザーファイル」を要求するウインドウが開きますので、アプリに必要な情報を入力します。
（「コード」のみ）

ダウンロード

プログラム支援ツール
http://u-iwasaki.sakura.ne.jp/studies/studies_v300-20180403.zip

ダウンロード後、ZIPファイルのブロックを解除します。
(329M 少し大きいです・・・)


参照

・上記、キー送信のタイミング
・その他のメニュー、ウインドウ、操作方法
・各アプリのインストール
・ダウンロードファイルの解凍、ブロック解除とインストール

これらは下記を参照ください。

シンプルブラウザとWEB学習支援ツール (mekki)

注意

登録サイト「ルートサイト」、「サンプル・・・」のコードは簡単なサンプル程度で、チェックがあまかったり、切断時のタイマーによる再接続処理なども含みません。
また、プログラムが間違っている可能性もあります（勉強中です）。