Help us understand the problem. What is going on with this article?

Electronでmrubyを動かす

More than 1 year has passed since last update.

はじめに

Electronのレンダラーサイドでもmrubyが動きます。
ということを紹介する簡単な記事になります。

Emscriptenの準備

HomebrewでもEmscriptenが用意されているようなので、
そちらを使う向きには、全く不要の作業。

古ければ新しくしておく

cd $(EMSDK_HOME)
./emsdk update
./emsdk install latest
./emsdk activate latest

Emscripten SDKの環境変数設定

source ./emsdk_env.sh

webrubyを入れる

ここからが本題、WebRubyにはGemが用意されているので、それを
インストールします。

gem install webruby
rbenv rehash  

webrubyを使う

webruby newコマンドで
指定したプロジェクト名のフォルダが作成され。
app/app.rbに以下のようなコードが生成されます。
これを書き換えて、Electronで実行したいコードにします。

# This is the entrypoint file for webruby

5.times { puts 'Ruby is awesome!' }

その後、rakeコマンドでビルドすれば、
Emscripten SDKが使われて、c => js変換が行われ、
build/webruby.jsが作成されます。

webruby new ElectronMeetsMruby
cd ElectronMeetsMruby
rake

Electronでmrubyを動かす

rakeコマンドで生成されるwebruby.jsは以下の様にブラウザで使うことが
前提のコードになっています

<script src="./webruby.js"></script>
<script>
  const w = WEBRUBY();

  /* Runs embedded source code in mruby.js file. */
  w.run();

  w.close();
</script>

コマンドラインでElectronを動かして、確認するには

以下の様にすることで、ElectronをNode.jsとしてコマンドラインで動かして、
そこで、mrubyを動かすことが可能になります。

cp build/webruby.js .
echo "(function (){const w = WEBRUBY();w.run();})();" >> webruby.js                            
ELECTRON_RUN_AS_NODE=1 electron webruby.js

mrbgemをつかうには

以下の自分が書いた記事があります。通常のmrubyのbuild_config.rbに
記述する要領で、Rakefileを編集すれば良いようになっています。

当然ながら、Emscriptenでビルド可能なモジュールでないと、webrubyのビルドが出来ません。

関連記事

kjunichi
WebRubyがきっかけで、mrubyで実装されたhttp2サーバーのtrusterdに絡んだ事をやってみたり、ElectronのIssue眺めたり、手元で動かしたり、node.js関連。WASMも少々。投稿する記事の内容は個人の意見であり、所属する企業の見解を代表するものではありません。
https://abrakatabura.hatenablog.com/
japan-systems
「2019年に50周年を迎えたIT企業です。最先端の技術により全国の企業、官公庁、自治体に多くの実績があります。」
https://www.japan-systems.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away