mrubyメモ

mrbgemに必要なもの

mrbgem.rake

WebRubyのインストール

事前に必要な準備

llvmの入手とセットアップ

emscriptenのサイトで手順に従いインストールを行う。その後、emscriptenを動かせば、.emscriptenが作成されているので、必要な項目は設定しておく。

LLVM_ROOT
NODE_JS

以上の設定を事前にしておけば、gem一発で入れたあとすぐに使える

gemでインストール

gem install wewbruby

rbenvだからか

which webrubyしても出てこなかったので、以下を実施

rbenv rehash

自前のwebrubyのプロジェクトを作成

webruby new MyFistProject
cd MyFirstProject

多くの場合必要そうな設定

mruby-jsの有効化

プロジェクトフォルダ直下のRakefileの編集して mruby-jsを有効にする。

具体的には以下の様のコメントアウトされている行を有効にする。

  # conf.gem :git => 'git://github.com/xxuejie/mruby-js.git', :branch => 'master'

   conf.gem :git => 'git://github.com/xxuejie/mruby-js.git', :branch => 'master'

app.rbを編集

# This is the entrypoint file for webruby

root_object = MrubyJs::get_root_object

# get jQuery selected object
container = root_object.call("$", "#container")

# appends <p> tag

5.times { container.call("append", "<p>This is inserted in Webruby using WEBRUBY#run()!</p>") }

ビルド

rake

で、buildフォルダ配下にいろいろできる、webruby.js出来るはず。

動かす

HTML

<!DOCTYPE html>
<meta charset="UTF-8">
<title>test</title>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="webruby.js"></script>

<h1>This is a test!</h1>
<div id="container"></div>
<script>
  $(function() {
  var w = WEBRUBY();
  
  /* Runs embedded source code in mruby.js file. */
  w.run();
  
  w.close();
  });
</script>

簡易HTTPサーバー

それなりに開発すると.rbファイルをajaxで読む事になりそうなので、ローカルでもサーバを立てて動かした方が良い気がする。

python -m SimpleHTTPServer

リンク

LLVM_ROOT = os.path.expanduser(os.getenv('LLVM') or '~/local/llvm/clang+llvm-3.2-x86-linux-ub
untu-12.04/bin')

emscriptenの置き場所が気になる件

/usr/localとかメジャーな場所が必要か？ emscriptenは同梱されていた。

設定は~/配下の.emscriptenを参照している NODEに関してもNODE環境変数でnvmな環境でも対応できた。

nvm use 0.10
export NODE=`which node`

WebGLのコード見て

RubyからDomをいじる感じ。なので、Three.jsも普通に使える AjaxでロードするつくりにしておいてTry&Errorでやっていく以外は難しそう、ネイティブRubyで動かせない気がする。

RubyでWebGL

Three.jsで楽するのが吉？

$window = MrubyJs::get_root_object
$document = $window.document
$three = $window.THREE

$container = $stats = nil
$camera = $scene = $renderer = nil

$renderer = $three.WebGLRenderer.invoke_new({antialias: true})
$renderer.setSize($window.innerWidth, $window.innerHeight)

$camera = $three.PerspectiveCamera.invoke_new(
      45, $window.innerWidth / $window.innerHeight, 1, 2000)
$camera.position.y = 400

$scene = $three.Scene.invoke_new

$container = $document.createElement('div')
$document.body.appendChild($container)

$container.appendChild($renderer.domElement)

def do_render
  $renderer.render($scene, $camera)
end

def animate
  $window.requestAnimationFrame(:animate.to_js_proc($window, 0))

  do_render
  $stats.update[]
end

リンク

WebrubyをMacにインストールしてみる

kjunichi/webruby.md

関連記事

関連ツイート