はじめに

こんにちは！ファインディで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をブラウザ上で実行できることで、環境構築をせずにRubyのコードを試せる環境の提供やフロントエンド実装への可能性を広げるといったメリットがあります。

github.com

わかりやすい例だとruby.wasmのREADMEに掲載されている Try Rubyが挙げられます。ブラウザ上でRubyのコードが動くため、RubyをPCにインストールせずともどんな挙動になるのかを簡単に確認できます。

私自身、約1年半ほど前にコードを初めて書いた駆け出しエンジニアなのですが、ブラウザ上で動きが確認できるのは学習スタートのハードルが下がるという点でとても良いなと思いました。

また、ruby.wasmを活用した事例として、Writing Ruby Scripts with TypeProfのセッションで、TypeProfをブラウザ上で試すことができるTypeProf.wasmが紹介されていました。

気軽に試してみて、もしエラーなどあれば報告してくださいというようなお話をしており、ruby.wasmが新しい技術を手軽に試せる環境として機能している点も大きな魅力だなと感じました。

TypeProf を ruby.wasm で完全ブラウザ上で動くようにしてみた。触ったらすぐにいろいろ粗が見つかるんで、気づいたらコントリビュートおねがいしますhttps://t.co/4cF3Tm9QSm
— Yusuke Endoh (@mametter) 2024年12月26日

x.com

gibier2について

gibier2は、ruby.wasmを使ったスライド作成ツールです。 dRuby on Browser Again! でトークセッションをした youchanさんが開発したもので、マークダウンでスライドを作成できます。

#RubyKaigi2025 Day1 の "dRuby on Browser Again!" のスライドを公開しました。ruby.wasmを読みこむのに少々時間がかかります。https://t.co/oUKgrNdipp
— よう (@youchan) 2025年4月18日

x.com

github.com

gibier2の前身としてgibierがあるのですが、こちらはRubyをJavaScriptにコンパイルする Opal を使用しているためスライド作成ツールという点では共通しているものの中身は別物です。

これまで私自身、スライドを作成する際にCanvaやGoogle スライドを使いGUI上で操作して作成していました。しかしながら箇条書きで内容整理をしながら登壇資料が作成できて便利そうということで、マークダウンを使ったスライド作成ツールが気になっていたため早速使ってみました！

セットアップ

開発環境：ruby 3.3.6（RubyのWebAssemblyサポートは3.2.0以降¹）

READMEを参考に実行しました。具体的なコマンドは、次の通りです。リポジトリをcloneしてbundle installします。

$ git clone https://github.com/youchan/gibier2
$ cd gibier2
$ bundle install

その後、wasmディレクトリでのセットアップを行います。 README通りにbundle exec rbwasm build -o dist/ruby.wasmをしたところ失敗したため、先にcd wasm && bundle installを実行しました。

$ cd wasm && bundle install

その後、wasmディレクトリで次のコマンドを実行します。

$ bundle exec rbwasm build -o ../dist/ruby.wasm
$ bundle exec rbwasm pack ../dist/ruby.wasm --dir ./src::/src -o ../dist/app.wasm

初回のbuildには時間がかかるのしばらく待ちます。

ルートディレクトリに戻りRackアプリケーションサーバーを立ち上げます。

$ cd ..
$ bundle exec rackup

http://localhost:9161を開くとサンプルのスライドが表示されます。

Ruby WebAssembly

実際に使ってみる

基本的にslide.mdにマークダウンで資料の内容を書いていきます。

<!-- slide.md -->
## RubyKaigi 2025行ってきました
- ruby.wasmを知ることができた
- gibier2を使ってみた
- スピーカーとお話しできた

スライドの背景画像はpublic/images配下におきます。それをpublic/css/custom.cssで適宜設定します。

/* public/css/custom.css */
.page {
  background-image: url("/images/new_background.png");
  color: #222;
}

Ruby WebAssembly

特にカスタマイズしないと、#だとセンタリングされた状態、##だと見出しとして表示されます。

<!-- slide.md -->
# #が1つの場合

Ruby WebAssembly

<!-- slide.md -->
## #が2つの場合

Ruby WebAssembly

マークダウンのためコードブロックやリンクの追加も可能です。

<!-- slide.md -->
## コードブロックやリンクの挿入も可能

<200b>```ruby
def hello
  puts "Hello, World!"
end
<200b>```

[Findy Tech Blog](https://tech.findy.co.jp/)

Ruby WebAssembly

まとめ

RubyKaigiで関心を持ったruby.wasm、そしてruby.wasmを使ったスライド作成ツールgibier2を使ってみたという内容をまとめました。

発表を聞いてすぐにgibier2を試したのでぜひyouchanさんにお話を聞きたいなと思っていたところ、偶然にも弊社のDrink Upでお会いできました。セッション後、早速使ってみましたと伝えると喜んでもらえて私も嬉しい気持ちになりました。このように、登壇者とコミュニケーションを取りやすいのもRubyKaigiの良いところです。

gibier2について、今回のRubyKaigiの登壇資料用として作ったため、汎用的なツールとしてはこれからだという話をしていました。またGUI上でより細かなデザインをできるようにしたりPDFへ書き出せるようにしたりしたいなど、今後の展望についてもお話を聞くことができとても良い経験となりました。

またビルドの流れでREADMEに記載されている通りに実行したところうまく立ち上がらなかったため、Issueを作成してみました。

github.com

OSSへの貢献したいなと考えていたので、RubyKaigiでの出会いをきっかけに実際に行動に移せてよかったです。