Raspberry Pi (Pi400) での利用 (開発者環境 開発手順編)

注: SmrAI 開発ガイド も参照せよ．こちらの方がブロックの作り方が詳しく書かれている．

開発方法

smalruby3(Webアプリ)の変更ファイル

• smalruby3-guiから変更したsmalruby3-gui-iotのファイルを以下に示す．

  Rubyカテゴリのブロックを定義するコード
  smalruby3-gui-iot/src/lib/define-ruby-blocks.js
  
  ブロックの見た目を作る
  smalruby3-gui-iot/src/lib/make-toolbox-xml.js:
  
  命令ブロックからRuby
  smalruby3-gui-iot/src/lib/ruby-generator/
  
  Rubyから命令ブロック
  smalruby3-gui-iot/src/lib/ruby-to-blocks-converter/ 
  
  シミュレータをデフォルトプロジェクトに追加する．
  smalruby3-gui-iot/src/lib/default-project/
  
  smalruby3の出力ファイルの要素の変更
  smalruby3-gui-iot/src/lib/ruby-generator/index.js

• もとのscratch-vmから変更したファイルを以下に示す．

  追加したブロックの内部プログラム(シミュレータ)
  scratch-vm/src/blocks/scratch3_ruby.js

Electron開発(Winアプリ)

• 開発したsmalruby3をelectronに適用するために，smalruby3-gui-iotディレクトリ内で以下のコマンドを実行するとwebpackによってsmalruby3をいくつかのファイルに圧縮することができる．

  >npm run build

• 圧縮されたファイルは smalruby3-gui-smt/build に出力され，このディレクトリ内のファイル(staticディレクトリも含む)をまるごと electron_smt/app 直下にコピーすることで，開発内容を反映させることができる．

• 以下にelectron_smalruby/app内の前述のファイル以外のファイルの内容を示す．

  Electronのメインファイル(主にここを編集する)
  main.js
  
  ESP32にプログラムを書き込むコードと表示用のファイル
  flash.js，flash.html, flash.bat
  
  ESP32のプログラムをビルド前に戻すコードと表示用のファイル
  clean.js，clean.html, clean.bat
  
  ESP32のプロジェクトディレクトリ
  esp/

• 作成したelectronアプリは以下のコマンドで実行ファイルとしてパッケージングできる．

  >cd electron_smalruby
  > npx electron-packager ソースディレクトリ(app) 新しいアプリ名 --platform=プラットフォーム(x64) --arch=アーキテクチャ(win32) --version バージョン(4.2.9)
  
    platform ・・・ all, linux, win32, darwin のいずれかを選択。
           「--all」は全部入りのパッケージング。
           「darwin」はmacのこと。複数選択はカンマ区切り。
    arch ・・・ all, ia32, x64 のいずれかを選択。
    version ・・・ Electronのバージョンを指定。(npx electron -vで確認)

具体的な手順

• smalruby3-gui-smt において，ブロックの定義やブロックと Ruby コードとの対応を記述する．

  以下の 3 つのファイルを変数すれば良い
  
    Rubyカテゴリのブロックを定義するコード
    smalruby3-gui-iot/src/lib/define-ruby-blocks.js
  
    ブロックの見た目を作る
    smalruby3-gui-iot/src/lib/make-toolbox-xml.js:
  
    命令ブロックからRuby
    smalruby3-gui-iot/src/lib/ruby-generator/

• 編集を終えたら webpack する．

  $ cd ~/SmT/smalruby3-gui-smt/
  $ npm run build

• webpack したファイルを electron_smt にコピーする．

  $ cp -r ~/SmT/smalruby3-gui-smt/build/*  ~/SmT/electron_smt/app/

• Smt (electron) を実行して動作確認する

  $ cd ~/SmT/electron_smt
  $ npx electron app