Scratch at FreeBSD
https://gyazo.com/1b23f640e591db0ac6638e417d87e094
2022/12/01: FreeBSD Advent Calender 2022
by むとうたけし(/610t/610t)
このページは、 FreeBSD Advent Calender 2022の1日目(2022/12/01)として書きました。
最初のエントリなので緊張しますが、よろしくお願いします(_O_)
はじめに
Advent Calenderの季節です!!
Xmasは、子供たちのためのイベント!!
全ての(年の)子供たちなら、みんな大好きScratch!!
Lifelong Kindergarten
というわけで、Scratch3サーバーを手元のFreeBSDで作って、遊んでみましょう!!
おまけ1:Scratch3をFreeBSDのChromiumから使う
いきなりおまけですが、FreeBSD ChromiumからScratchを使うための方法です。
Scratch3をFreeBSDのChromiumで使うためには、ちょっとしたコツがある。
WebGLのエラーが出て使えない場合がある。
https://gyazo.com/ec1e284756055bd85a76added4bfd358
chrome://flags から"Override software rendering list"をenableにすると動く。
https://gyazo.com/55c526825eb2ae0ca1311e288a439ec2
流石に、WebBluetoothとかはコードが無いのでムリ!!
おまけ2: Scratch 1.4をFreeBSDで使う
https://gyazo.com/a5d65b7f04586c59c507b50a9fcbfd90
さらにおまけですが、Scratch 1.4をFreeBSDで動かす方法です。
Scratch 1.4は、古いバージョンのSqueak(Smalltalk)から派生した、最初の公開版Scratch。
FreeBSDで動かすには、以下のPR読んでください(;-;)
ports-pr:216811: TimeoutしてCloseされたorzけど、再Openしてみた!!
ビルドできるようになったと思われる最新版は、こちら→ scratch-1.4.0.7.tar.gz
devel/pkgconfのインストールが必要
おそらく、MakefileにUSES=pangoの追加でなおる?
手元のpoudriereでは、lang/rustの構築で止まるので、検証できないorz
lang/rustだけpkgで入れるとか、ズルはできんのか?
さらに、ソースファイル scratch-1.4.0.7.src.tar.gz がどこにあるのかわからない…
ここにあるらしい:
正しくは、こちら
Smalltalkの開発環境も出せるので、魔改造が可能。
画面左上のSCRATCHのロゴの”R”の部分をShiftキーを押しながら左クリックすると以下のメニューが開く。
https://gyazo.com/513f410475770777183afa1596685299
"turn fill screen off"を選ぶと白い背景が見えるので、ここを左クリックするとSmalltalkのメニューが出てくる。
https://gyazo.com/68139b3ce1d58a66f31556d8584c9363
open...->browserとすると、システム(not Web)ブラウザが現れるので、がんばって!!
https://gyazo.com/cc6fc4acf3438b56a41ad0934c9e2b9a
後は、hackするだけ!!
公式のScratch3サーバのみを立ち上げる
https://gyazo.com/e4aebe9f7486d0bc4f787b30c1aab8d0
さて、本題です。
Scratch3の公式サーバーはgithubでオープンソースとして公開。
github: https://github.com/LLK/scratch-gui
作業手順の参考
大人のためのScratch Scratch を改造しようの2. Scratch 3を自分のパソコンで動かしてみよう
事前に必要な準備
gitコマンドのインストール: pkg install git
Node.jsの環境構築(npmも含む): pkg install npm
www/npmを入れると、依存でwww/nodeも入る。
追加拡張機能の無いScratch3サーバーを準備。
git cloneする時に--depth 1をつけているのは、大量のソース更新ログを取ってこないためで、必要なら外せば良い。
code:shell
$ git clone --depth 1 https://github.com/LLK/scratch-gui
$ cd scratch-gui
$ npm install
サーバーを起動する(scratch-gui/ディレクトリで実行)。
サーバーは、デフォルトでは、port 8601で動作。
code:shell
$ npm start
サーバーが動いているマシンから、 http://localhost:8601/ にアクセス。
独自拡張機能を追加する
https://gyazo.com/42144157efd31b09e1c5808ffaf64e95
Scratch拡張機能: Scratchを拡張するための仕組み。
Scratchは拡張機能を自分で作成することができ、Stretch3などで提供。
作成手順の詳細は、大人のためのScratch Scratch を改造しようの3. ブロックの見た目を変えるを参照。
これらの拡張機能を手元のサーバーで動かすことも可能。
ここでは、2つの拡張機能のインストールをやってみる。
以下、 scratch-gui/ディレクトリで作業。
Microbit More拡張機能を追加する
Microbit Moreは、Scratchからmicro:bitの全ての機能を使えるようにする拡張機能。
code:shell
$ git clone --depth 1 https://github.com/microbit-more/mbit-more-v2
$ ln -s mbit-more-v2 microbitMore
$ sh ./microbitMore/install-stretch3.sh
AkaDako拡張機能を追加する。
AkaDako (購入)は、ScratchからUSB経由で利用できるGroveシールド。
code:shell
$ git clone --depth 1 https://github.com/tfabworks/xcx-g2s
$ sh ./xcx-g2s/scripts/stretch3-install.sh
https://akadako.com/wp-content/themes/akadako/img/top-catch-img.png
実際に、https://stretch3.github.io/ にstretch3を作る手順は、以下を参照。
https://github.com/stretch3/stretch3.github.io/blob/source/.github/workflows/deploy.yml
さらに、GitHub Actions で独自 Scratch を動かすもgithubでMy Scratchサーバーを立てる時に参考になる。
外部からのhttp接続では制限されている機能を使う
https://gyazo.com/7a4387b1d112620ac50502f7b819ffb0
基本的に、カメラやマイクを使う機能(WebRTC)や、 WebUSB 、WebBluetooth などを使う拡張機能は、localhostではない外部からはhttp経由ではなくhttps経由でしか使えない。
Chrome 47 WebRTC: Media Recording, Secure Origins and Proxy Handling
外部から接続する場合には、httpsが使えるように設定する必要がある。
nginxやapacheでSSLを使う設定にして、proxyでScratchサーバにつなぐ設定をする。
自己署名証明書(オレオレ証明書)を使う(今回の記事)。
外に出すサーバーだと、最低でもLet’s Encrypt使うべきだと思う。
nginxを利用する場合
自己署名証明書(オレオレ証明書)を作成する。
code:shell
$ mkdir -p /usr/local/etc/nginx/ssl
$ cd /usr/local/etc/nginx/ssl
$ sudo openssl genrsa -out server.key 2048
$ sudo openssl req -new -key server.key -out server.csr
(適切に項目を埋める)
$ sudo openssl x509 -days 3650 -req -signkey server.key -in server.csr -out server.crt
nginxの設定ファイルを調整する。
以下の例では、10443ポートでSSLを受けて、Scratchサーバーデフォルトの8601にproxyする。
code:/usr/local/etc/nginx/nginx.conf
worker_processes 1;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
server {
listen 10443 ssl;
server_name localhost;
ssl_certificate /usr/local/etc/nginx/ssl/server.crt;
ssl_certificate_key /usr/local/etc/nginx/ssl/server.key;
location / {
proxy_pass http://localhost:8601/;
}
}
include servers/*;
}
このサーバにアクセスした時、Chromeブラウザで警告が出た場合、以下のどちらかでアクセス可能。
"詳細情報"ボタンを押して、出てきた"<host>にアクセスする(安全ではありません)" リンクを押す
"thisisunsafe"と入力する
https://gyazo.com/ead08484e14513696a9bf35fb5c8d434
おわりに
これで、おうちでScratchサーバーを立てて、遊ぶことができるようになりました!!
クライアントとして、Chromiumから利用することも可能です!!
たまには、Scratch 1.4のことも思い出してください…
Let's play your scratch server at FreeBSD!!
明日は、 @nanorkyoさんのFreeBSD を Oracle Cloud Infrastructure 環境にインストールしてみたです。
どんな内容でしょうか?
楽しみですね!!
参考資料
Scratch3
大人のためのScratch Scratch を改造しよう: 3章までは無料で読める。今回の話的には、それで十分。
/610t/Scratchサーバーを手元で立ち上げる: 今回のよりもっとザクッとした説明。
Scratch 1.4 - 3
Scratch at FreeBSD: このページ。
Scratch@BSD: AsiaBSDCon 2017あたりのBoFで発表しようと思ってたもの。
Scratch 1.4
lang/scratchがFreeBSD portsに入るまでの顛末
portsにlang/scratchが入った時の経緯; Special thanks to nork-san!!
2023/06/01: 第98回FreeBSDワークショップで発表?
/M5S/うち、やっぱ、Scratch Remote Sensorが、むっちゃ好っきゃねん: 1.4で利用可能なScratch遠隔センサーについて。
#FreeBSD
#Scratch
#MicrobitMore #AkaDako