プライベートでは基本的に誰の役にも立たないプログラムを作ってるんだけど、たまにうっかり MySQL Parameters みたいな役に立つものを作ってしまう。 MySQL Parameters は5年くらい前に Vue.js の勉強のために作ってみたんだけど、結局そのまま Vue.js は触らず放置状態だった。MySQL の新しいバージョンが出るたびにデータは更新してたけど。 ruby.wasm で Ruby が WebAssembly 上で動くようになり、ブラウザ上で JavaScript の代わりに使えるようになったんで、MySQL Parameters を Ruby で作り直してみた。 ruby.wasm ruby.wasm のページに載ってるけど、これだけでブラウザ上で Ruby が動く。簡単。 <html> <script src="https://cdn.jsdelivr.ne
Ruby WASM/WASI の発表にえらくテンションが上がったので、勢いで作ったものが窓の杜で紹介されてびっくりしました。(それだけ注目されているということですね) Ruby On Browserは51行しかないHTMLでまだまだ荒削りなのでもっとちゃんとしたものを試したい方は是非TryRuby playgroundのCRuby 3.2.0dev をお試しください。 Ruby On Browser自体もまだまだ発展させていくつもりですが、現状Ruby WASM/WASIを触ってみていいなあと思ったことです。 1. 簡単に自分好みのブラウザRubyが作れる Try Rubyのようにブラウザ上でプログラミング言語が試せること自体は現在はそこまで珍しくないですが、クライアントサイドだけで(しかもとても短いコードで)動かせるのは大変魅力的です。個人のPCやイントラネット上に好みのカスタマイズを加
rubyで仮想DOMを扱えるようにする「ruby-wasm-vdom」をライブラリとして公開しました - Qiita
この記事は何 以前Qiitaで以下のようなRubyで仮想DOMを扱う方法を記事にしました。 これらで紹介した仮想DOMを使って、Brainf*ckのインタプリタを作ってみたのですが、簡単なプロトタイプを作るのにはかなり便利なことが改めて実感できたので、せっかくなのでライブラリとして公開してみました。 この記事では作成したruby-wasm-vdomについて紹介していきます。 ruby-wasm-vdomとは ruby-wasm-vdomは、文字通りRubyで仮想DOMを扱えるようにするためのライブラリです。 以下のような感じで仮想DOMを全てRubyのみで書くことができます。 <html> <head> </head> <body> <div id="app"></div> <script src="https://getty104.github.io/ruby-wasm-vdom/ind
ブラウザで動くMastodonを作るまでの道のり、これからのruby.wasmの開発方針。深掘りRubyKaigi 2024 文字起こしレポート vol.1 - STORES Product Blog
2024年6月20日に『深掘りRubyKaigi 2024 with kateinoigakukun & ledsun & remore』を開催しました。イベントの内容をほぼ全文文字起こし形式でお届けします。この記事は第1部です。 hey.connpass.com イベントのアーカイブはYouTubeでも公開しています。 登場人物 ゲスト kateinoigakukun/齋藤さん ledsun/中島さん remore/澤田さん STORES fujimura/藤村 大介 mame/遠藤 侑介 自己紹介 fujimura：藤村です。STORES でCTOをやっています。 mame：遠藤です。STORES でフルタイムRubyコミッターをしています。ruby.wasmはkateiさんが開発を始めた初期から話を聞いたりサポートさせてもらったりしてます。ruby.wasmはまだ仕事で使った人はほと
Ruby on Rails アプリケーションである Redmine の Wasm 化を試しました。 基本機能は動作しましたが、ディスクアクセスが必要な機能（例: 添付ファイルのアップロード）は動作しませんでした。 Mastodon in the browser demo を参考に、Redmine を Wasm 化する手順を解説します。 前田 稔です。プログラミング言語Rubyの国際会議 RubyKaigi 2024 のセッション「RubyGems on ruby.wasm」で紹介された Mastodon in the browser demo を拝見し、 Redmine も同様にブラウザ内で動作させられるのではないかと考えました。本記事では、その検証結果と Wasm 化の手順についてまとめています。 期待と検証結果 Mastodon は Ruby on Rails で開発されたアプリケーシ
ruby.wasm で遊ぶ ～Web Workerを使ってバックグラウンドで動かすまで - Qiita
Ruby 3.2 から WASI ベースの WebAssembly がサポートされるということで、すでに Preview 版も公開されています。 この記事は、正直 WebAssembly とか WASI とかよく分かっていない1人間がブラウザ上で Ruby を色々動かしてみる記事です。とりあえず動けばいいという感じなので、おそらく無駄な記述も多いかと思います。ご了承ください。 作るもの テキストボックス等に記述された任意の Ruby スクリプトをブラウザ上で動かして、その実行結果を得られるようなもの。 要するに RubyOnBrowser とか TryRuby とかの二番煎じを作りたいのです。 とりあえず Ruby スクリプトを動かす ruby.wasm の github 上に Quick Start (for Browser) が載っているので、まずはこれをほぼそのまま。 <html>
進化した『メタプログラミングRuby』問題集 —— ruby.wasmでブラウザ対応 - SmartHR Tech Blog
こんにちは。SmartHRでRails顧問業をしているwillnetです。健康のために家の周りをジョギングしているのですが、この時期にそれをすると命の危険があるのでチョコザップに通い始めました。冷房って素晴らしいですね。 さて今回はメタプログラミング問題集の話です。この問題集はSmartHR社内で開催されたメタプログラミングRuby 第2版読書会で生まれたもので、読書会後に誰でもこの問題を通じてメタプログラミングを学べるように改良が加えられました。詳しい経緯については過去のエントリにまとまっています。 SmartHRでのメタプログラミングRuby読書会と、その成果物 - SmartHR Tech Blog Rubyのメタプログラミング問題集をブラッシュアップした話 - SmartHR Tech Blog 改良後にどれくらいの人がこの問題にチャレンジしたのか正確な数字はわかりませんが「やって
After RubyKaigi 2024の登壇資料です。 https://findy.connpass.com/event/315981/ RubyKaigi 2024 のruby.wasm関連セッションの紹介と、 発表内容を活かして作ってみたMockServerの解説をしています。 D…
とちぎRubyの勉強会 拡大版 https://toruby.connpass.com/event/286678/ ruby.wasmのどこをどう変えると何が変わるか？を説明した資料です。 参考資料へのリンク - https://github.com/ruby/ruby.wasm - …
最近はずっと ruby.wasm で遊んでます。 2023/5/19 に ruby.wasm 2.0 が出ました。 ruby.wasm 1.0 では await がうまく動かないことがあったけど、2.0 でちゃんと動くようになったんで、記念に前の記事以降にやったこと等をまとめてみた。 await ruby.wasm で await を使うには２つ問題がある。 Ruby スクリプトを eval ではなく evalAsync で実行する必要がある。 スタックサイズが小さくてすぐに SystemStackError エラーが出てしまう。 Ruby スクリプトを eval ではなく evalAsync で実行する必要がある HTML 内で <script type="text/ruby"> で気軽に Ruby スクリプトを書いたときに await を使うとエラーになってしまう。（ruby.wasm
タイトルの通り、先日の大阪Ruby会議03にて登壇させていただきました。 スライドはこちらです。 speakerdeck.com 感想 外部のイベントにCFPを通して登壇する。という経験は初めてのため緊張しておりましたが、結果的に多くの方に楽しんでもらえたようで嬉しく思います。 「Rubyで笑おう」というイベントのテーマは無事達成できたのでは！と感じています。デモを作り込んだ甲斐がありましたね。 盛り上げていただいた参加者の皆様ありがとうございました！ 他のセッションも大変面白く、明日すぐ業務で使える知識からお絵かき/工作/本作りと多種多様で、丸一日楽しめました。 プレゼン方法も参考になりました。DOM要素を見やすく表示した状態でHotwireのデモをするのは分かりやすくて良いですね… 使用技術 "ruby.wasmでgemを使う"をテーマに据えていますが、セッション前半の技術としては以下
RubyKaigi 2025で紹介されたruby.wasmのスライド作成ツールgibier2を使ってみた - Findy Tech Blog
はじめに こんにちは！ファインディでFindy Team+を開発している中嶋（@nakayama__bird）です！ RubyKaigi 2025に参加してきました！ 今回のRubyKaigiが初参加で楽しみ半分緊張半分だったのですが最高な3日間でした！ Rubyを使う人、Rubyを作る人、そしてRubyで遊ぶ人などたくさんの出会いがあり、日頃の業務でRuby on Railsに触れるのとはまた違った視点でRubyを考えるきっかけとなりました。 複数のセッションに参加した中で特に関心を持ったruby.wasm、そしてruby.wasmを使ったスライド作成ツールgibier2を使ってみての感想をまとめていきたいと思います。 ruby.wasmとは？ ruby.wasmとは、WebAssemblyという技術を使用してRubyのコードをブラウザ上で実行できる仕組みのことです。 Rubyをブラウザ
https://rconv.ongaeshi.me Ruby on Browser に続いて Ruby WASM/WASI で電卓っぽいものを作りました。 ongaeshi.hatenablog.com テキストボックスの内容を入力としてRubyスクリプトに渡して評価し実行結果を出力します。つまり入力→変換→出力するRubyアプリケーションがブラウザ上で簡単に作れます。コードはURLに記録されるので簡単に共有することができます。 基本 Rconv.set()メソッドに渡したブロックの中身が変換プログラムになります。ブロック引数に渡されるのはテキストボックスの内容がevalされたものです。Always string = true のときは常に文字列になります。ブロックの戻り値、もしくは標準出力に何か出力されたときはその内容が、そうでないときはブロックの戻り値が出力されます。 例えば irb
どんなアプリケーション？ ひらがなの書き方を練習する紙を印刷するためのアプリケーションです。 なんでつくったの？ 社内でアプリデプロイチャレンジというイベントがありました。 このイベントをきっかけに作りました。 特徴 印刷したらA4にぴったり 印刷して使うことを想定しています。 ブラウザの表示内容は印刷するとくずれがちです。 A4用紙にあわせて印刷出来ます。 フォントが教科書体 日本語になれていると気がつきませんが、 書き方の初学者にはOSのデフォルトフォントの書体は難しいです。 読みやすくはあるのですが、クセがあるため学習上は問題になります。 たとえばメイリオの「ふ」はこのような字体です。 字の練習用としてみると次のように不自然な点があります。 1画目が水平すぎる ハネがない 3画目が反っている 教科書体を採用しました。 具体的にはGoogleフォントを使ってKlee Oneを表示してい
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
ruby.wasmバイナリにgemを組み込むときのトラブル回避HACK(2024/06版) - ルニラボ
はじめに ruby.wasmバイナリに3rd party製のgem組み込んだ際のトラブルシュートのログを書き残しておきます。 2024年6月現在のHACKです。今後の開発が進めば不要になると想定しています。 こちらのスライドの補足記事です。 speakerdeck.com 前提 下記PRにより、Bundlerと ruby_wasm gemを利用して独自のruby.wasmバイナリが作成できるようになっています。 github.com $ bundle init Writing new Gemfile to /tmp/tmp.ZeVCP05HyB/Gemfile $ bundle add ruby_wasm $ bundle add rainbow $ bundle exec rbwasm build -o ruby.wasm (snip) INFO: Packaging gem: rain
<html> <script src="https://cdn.jsdelivr.net/npm/ruby-3_2-wasm-wasi@1.0.1/dist/browser.script.iife.js"></script> <script type="text/ruby"> puts "Hello, world!" a = [1,2,3] b = [4,5,6] a.concat(b) puts a[0..1] </script> </html> ブラウザ画面上には表示されていませんが、ブラウザの開発者ツールで確認するとコンソールにHello, world!と配列の値が表示されていました。 おわりに これまでブラウザ上ではjavasciptが実行されることは頭の中にありましたが、実際にruby.wasmを触ってみてRubyコードが実行されていたので非常に新しい発見でした。 また、Ruby
https://rubykaigi.org/2024/presentations/kateinoigakukun.html#day2
How to build ruby.wasm on Apple Silicon Mac - ローファイ日記
ここまでのあらすじ ＜読み飛ばし推奨＞ 子どもたちのためにJava版マインクラフトを買い、よーしパパ*1MOD作って「威厳*2」を見せちゃうぞ〜 と思ったが全くやる気配がない。 一方で、子どもは無限の時間をScratchに費やしていた。Scratch 3.0はReactで作られていることが知られており、いわゆるSPA（もしかして、この用語もう古い？）であり、基本的にはGitHub Pagesのようなバックエンドレスな環境にもデプロイできる。 また、TypeScript/JavaScript＋Reactで拡張を書くことが出来る。自作の拡張は残念ながら公式のScratchでは利用できないが、自分でビルドしてデプロイしたScratchインスタンスで使うことができる。一種のMODである。例えば機械学習に触れることが出来る拡張を有効にしたMODが知られている。 champierre.github.i
作ったもの モチベーション 使った技術 感想 作ったもの https://sue445.github.io/annict-vod-search/ github.com モチベーション 最近縁があって Annict の編集者*1 になって、気がついた時に各アニメの配信サイトの情報を登録しています。 その時にいちいち複数の配信サイトでアニメのタイトルを検索するのが大変なので一箇所で検索できるようにしたくて作りました。（製作時間は2〜3時間） 使った技術 いつもだとこの手の雑なページはVue.jsを使うことが多いのですが、今回は面白全部 *2でruby.wasmを使ってみました。 ruby.wasmで仮想DOMを扱うためにruby-wasm-vdomを利用しています。 ruby-wasm-vdomについては下記を参照。 github.com qiita.com 感想 使い慣れたRubyで書けるの
Wordleという、いくつかのヒントをもとに5文字の英単語を当てるゲームがあります。 ヒントには次のような物があります。 正解の単語に含まれない文字 正解の単語に含まれる文字 正解の単語に含まれて、位置が一致した文字 これらの情報を元に英単語の辞書から候補となる単語を検索するアプリケーションを作りました。 次にスクリーンショットを表示します。 上から 正解の単語に含まれない文字 正解の単語に含まれる文字 正解の単語に含まれて、位置が一致した文字 を入力して検索すると、候補になる文字列を表示します。 このアプリケーションは辞書を検索するだけです。 辞書も5文字の英単語に限定されているので、せいぜい4500語です。 ブラウザに配信するスクリプトに埋め込める分量です。 つまり辞書と検索機能の両方をブラウザだけで完了出来る小さなアプリケーションです。 現在RubyのWebAssemblyバイナリが
ruby.wasm の JS::Object のプロパティ呼び出しをさらに便利にする - おんがえしの blog
ruby.wasm でいろいろ遊んでいます。実験場も作りました。 rubywasm-sample.ongaeshi.me JS::Object が楽しくて、JSのオブジェクトをRubyから透過的に扱えます。メソッド呼び出しもできるしブロックで関数を渡せたしりします。 require 'js' JS.eval("return 1 + 2") # => 3 JS.global[:document].write("Hello, world!") div = JS.global[:document].createElement("div") div[:innerText] = "click me" JS.global[:document][:body].appendChild(div) div.addEventListener("click") do |event| puts event # =>
ruby.wasm の JS ライブラリは JavaScript に対する薄いラッパーなので、そのままだと Ruby では使いにくいことがあるので、最近は JS を Ruby らしく使えるようにするためのライブラリを作ってそれを使ってる。 github.com 使い方 <!DOCTYPE html> <html> <script src="https://cdn.jsdelivr.net/npm/@ruby/3.3-wasm-wasi@2.6.2/dist/browser.script.iife.js"></script> <script type="text/ruby" src="https://cdn.jsdelivr.net/gh/tmtm/jsrb@v0.1.0/jsrb.rb"></script> <script type="text/ruby"> ... </script> <
ruby.wasmはじめの一歩: Ruby Next Playground構築の舞台裏（翻訳）｜TechRacho by BPS株式会社
概要 元サイトの許諾を得て翻訳・公開いたします。 英語記事: First steps with ruby.wasm: or how we built Ruby Next Playground—Martian Chronicles, Evil Martians’ team blog 原文公開日: 2024/02/06 原著者: Vladimir Dementyev（首席バックエンドエンジニア）、Travis Turner（技術記事編集者） サイト: Evil Martians -- ニューヨークやロシアを中心に拠点を構えるRuby on Rails開発会社です。良質のブログ記事を多数公開し、多くのgemのスポンサーでもあります。 日本語ブログ: 合同会社イービルマーシャンズ - Qiita はじめに 当初はHTMLやCSSのレンダラーに過ぎなかったWebブラウザは、やがて洗練された実行環境へ
GitHub - ruby/ruby.wasm: ruby.wasm is a collection of WebAssembly ports of the CRuby.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
RubyKaigi 2024 のブースコンテンツ用に ruby.wasm を使用したクイズアプリを作成しました - クラウドワークス エンジニアブログ
こんにちは、 @t0yohei です。 ruby.wasm は、Ruby のコードを Wasm に変換しブラウザー上で実行できるようにする技術です。 今回は、この ruby.wasm を使用してちょっとした web アプリを作成したので、そのことについて記載してみようと思います。 ※ この記事は、RubyKaigi 2024 のクラウドワークス社ブースにて展示するクイズアプリの解説記事です。 目次 目次 作ったもの クイズアプリの解説 大まかな仕組み 使わせてもらったライブラリ i18n 対応 問題について デプロイ先 難しかったこと タイマーの部分の実装 Ruby のコード規約、JavaScript のコード規約の使い分け サンプルコード探し 感想 作ったもの Ruby に関するクイズを出題して、それに答えてもらうクイズアプリを作成しました。 RubyKaigi でのクラウドワークス社ブ
Ruby製の自作RDBMSをruby.wasmにてWasm化し、Wasmtimeで動かしてみた - メモ的な思考的な
前回、ruby.wasmを使ってRubyスクリプトをWasm化しました。 ruby.wasmにてRubyスクリプトをWasm化し、Wasmtimeで動かしてみた - メモ的な思考的な 次に、以前作成したRuby製の自作RDBMSをWasm化してみたことから、メモを残します。 目次 環境 Wasm化したら、何の環境で動かすかを検討 実装 simple_ruby_db を使うRubyスクリプトを作成 rbwasmによるビルドとパッケージング 動作確認 ソースコード 環境 WSL2 Ruby 3.3.6 ruby.wasm 2.7.0 Wasmtime 28.0.0 なお、Ruby製の自作RDBMSはこちらです。 https://github.com/thinkAmi-sandbox/simple_ruby_db Wasm化したら、何の環境で動かすかを検討 自作RDBMSは gemとして作成して
「ruby.wasmで多人数リアルタイム通信ゲームを作ろう」 関西Ruby会議08 前夜祭 RejectKaigi での登壇資料です。
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ruby.wasm で MySQL Parameters を作り直した - tmtms のメモ
Ruby On BrowserとRuby WASM/WASIの雑感 - おんがえしの blog
ruby/ruby.wasm を使って Redmine をブラウザ内で動かす話
ruby.wasm 最前線 2024 - wasmでMockServerをつくる #rubykaigi
Hacking Guide of the ruby.wasm
ruby.wasm で await を使う - tmtms のメモ
大阪Ruby会議03でruby.wasmについて登壇&演奏会をしました #osrb03 - ルニラボ
rconv - Ruby WASMでプログラム電卓を作りました - おんがえしの blog
ruby.wasmでひらがなの書き方を練習する紙を印刷するアプリケーションをつくりました - Qiita
ruby.wasmでrequire_relativeを使えるようにしたい - Qiita
【RubyKaigi2023】 初耳だったruby.wasmを簡単に触ってみる - Qiita
RubyGems on ruby.wasm
ruby-wasm-vdomで雑なオレオレツールを作った - くりにっき
Wordle攻略用のアプリケーションをruby.wasmで作りつつ貢献した話 - Qiita
JSrb - ruby.wasm の JS を Ruby ぽく使えるようにする - tmtms のメモ
ruby.wasmで多人数リアルタイム通信ゲームを作ろう