Slide 1
Slide 1 text
ruby.wasm + unloosenでChrome拡張
機能を作ってみた
After RubyKaigi 2023〜メドピア、ZOZO、Findy〜
株式会社ZOZO
ブランドソリューション開発本部 バックエンド部 WEARバックエンド
近 海斗
Copyright © ZOZO, Inc.
1
Slide 2
Slide 2 text
© ZOZO, Inc.
株式会社ZOZO
ブランドソリューション開発本部 バックエンド部 WEARバックエンド
近 海斗
● 2021年4月（株）ZOZOに新卒入社
○ 新卒3年目
○ RubyKaigiは今年で2回目の参加
○ 先月はRailsConfにも参加
○ TwitterID: @Ver3Alt
2
Slide 3
Slide 3 text
© ZOZO, Inc.
https://wear.jp/
3
● ファッションコーディネートアプリ
● 1,600万ダウンロード突破、コーディネート投稿総数は1,300万件以上
（2023年3月末時点）
● ピックアップタグから最新のトレンドをチェック
● コーディネート着用アイテムを公式サイトで購入可能
● WEAR公認の人気ユーザーをWEARISTAと認定。モデル・タレント・デザ
イナー・インフルエンサーといった各界著名人も参加
Slide 4
Slide 4 text
© ZOZO, Inc.
本題
4
Slide 5
Slide 5 text
© ZOZO, Inc.
今回取り上げるセッション
5
Slide 6
Slide 6 text
© ZOZO, Inc.
今回取り上げるセッション
● Develop chrome extension with ruby.wasm (Day1)
○ ruby.wasm を使った Chrome 拡張機能用の ruby フレームワーク紹介
○ ruby.wasm で簡単に Chrome 拡張機能が作れる
○ フレームワーク名：unloosen
6
Slide 7
Slide 7 text
© ZOZO, Inc.
unloosenのメリット
● Simple Syntax
○ フレームワークの TopLevel に document や alert のエイリアスを読み込んでいるので、それらが簡単
に利用可能
● Live Reload
○ コードの変更があった際に拡張機能の再読み込みしなくてもよくなった
● Chrome 拡張機能の実装に必要なファイルの管理が少なくなる
7
Slide 8
Slide 8 text
© ZOZO, Inc.
● manifest.json という chrome 拡張機能用の設定ファイルで
unloosen-ruby-loader という起動用スクリプトを指定（スクリ
プトは npm install 可能）
● そのスクリプトにて ruby.wasm と unloosen 本体などを読み
込み
● あとは、app.rb に作りたい機能を実装していくだけで、
unloosen がいい感じに読み込んで ruby.wasm にて実行さ
れる
unloosenの仕組み
8
ref: https://github.com/aaaa777/unloosen
Slide 9
Slide 9 text
© ZOZO, Inc.
● unloosen を使えば、app.rb に処理を記述するだけで ruby にて Chrome 拡張機能が作
れる！すごい！
● ruby.wasm あんまり詳しくないけど、 unloosen を使えば動くものが作れそう！
つまり・・・
9
Slide 10
Slide 10 text
© ZOZO, Inc.
ということで
10
Slide 11
Slide 11 text
© ZOZO, Inc.
実際に使ってみよう！
11
Slide 12
Slide 12 text
© ZOZO, Inc.
今回作るchrome拡張機能
● 背景の色を変えたりするだけでは流石に面白くないので、今回は「どのページでも開ける簡単なメモ帳ア
プリ」を作ってみます
12
Slide 13
Slide 13 text
© ZOZO, Inc.
目次
1. unloosen のダウンロード
2. 各種設定ファイルの追加
3. HTML の記述と app.rb の実装
4. Chrome にアップロード
5. 完成 🎉
13
Slide 14
Slide 14 text
© ZOZO, Inc.
1. unloosen のダウンロード
2. 各種設定ファイルの追加
3. HTML の記述と app.rb の実装
4. Chrome にアップロード
5. 完成 🎉
目次
14
Slide 15
Slide 15 text
© ZOZO, Inc.
1. unloosen のダウンロード
● unloosen は npm パッケージにあるので、以下のように package.json を書いて npm install
すればダウンロード可能です
15
Slide 16
Slide 16 text
© ZOZO, Inc.
1. unloosen のダウンロード
16
ruby.wasm と unloosen-ruby-loader がダウンロードできました
Slide 17
Slide 17 text
© ZOZO, Inc.
目次
1. unloosen のダウンロード
2. 各種設定ファイルの追加
3. HTML の記述と app.rb の実装
4. Chrome にアップロード
5. 完成 🎉
17
Slide 18
Slide 18 text
© ZOZO, Inc.
2. 各種設定ファイルの追加(manifest.json)
● manifest.json
○ chrome 拡張機能用の設定ファ
イル
○ content_scripts に
unloosen-ruby-loader を渡して
います
○ 見辛いと思いますが、本題では
ないので割愛...
18
Slide 19
Slide 19 text
© ZOZO, Inc.
2. 各種設定ファイルの追加(unloosen.config)
● unloosen.config.json
○ unloosen 用の設定ファイル
19
Slide 20
Slide 20 text
© ZOZO, Inc.
目次
1. unloosen のダウンロード
2. 各種設定ファイルの追加
3. HTML の記述と app.rb の実装
4. Chrome にアップロード
5. 完成 🎉
20
Slide 21
Slide 21 text
© ZOZO, Inc.
3. HTMLを書く
● 拡張機能ボタンを押したときに表示するHTML（popupと呼ぶ）を記述
21
Slide 22
Slide 22 text
© ZOZO, Inc.
3. HTMLを書く
● popup.html
○ script タグにて、unloosen の popup 用 js を読み込む
22
Slide 23
Slide 23 text
© ZOZO, Inc.
3. app.rbの実装
次に本題の app.rb を書いていきます。実装する機能としては以下
● popup.htmlの入力値を受け取り、Chrome の local storage に保存する機能
○ content_script 側（ページが読み込まれた時に実行される）
■ local storage の初期化
○ popup 側（popup が開かれた時に実行される）
■ popup が開かれたとき、既に local storage に値がある場合、それを取得してテキストエリアに表示
■ save ボタンが押されたら、local storage にメモを保存する
23
Slide 24
Slide 24 text
© ZOZO, Inc.
● app.rb
○ unloosen では、content_script, popup を以下のように記述します
シンプルかつ分かりやすくていいですね
3. app.rbの実装
24
Slide 25
Slide 25 text
© ZOZO, Inc.
● さっそく、content_script にて local storage の初期化処理を書こうとしたのですが、開幕問題に
遭遇・・・
3. app.rbの実装
25
Slide 26
Slide 26 text
© ZOZO, Inc.
● 問題のコードは以下
○ ruby 的な感覚で local storage メソッドにキーワード引数を渡したところ、早速エラーに
○ どうやら hash はそのまま js メソッドには渡せないらしい
3. app.rbの実装
26
Slide 27
Slide 27 text
© ZOZO, Inc.
● ググったところ、右のような形で js object に
変換して渡してあげればいけるとのことで、
Utils クラスに変換メソッドを生やし、それを
呼び出すことで解決
● content_scripts 側の実装は一旦これにて完
了
3. app.rbの実装
27
ref: https://qiita.com/tomoasleep/items/3feef6898e849af3600a
Slide 28
Slide 28 text
© ZOZO, Inc.
3. app.rbの実装
popup 側の実装（１）
● 次に、popup 側の実装になります
● local storage に値があるか確認し、あった場合
は取り出してメモ欄に描写する処理
○ js の undefined は ruby 側だと null という
JS::Object に変換される
○ JS::Object は false 判定にならないので注意
が必要
28
Slide 29
Slide 29 text
© ZOZO, Inc.
3. app.rbの実装
popup 側の実装（２）
● popup.html のメモエリアに書いた文字列を local
storage に保存する処理
○ この辺りはエラーなども起きず、すんなり実
装できました
ここまで来ると js を書いているのか ruby を書いて
いるのかわからなくなってきます
29
Slide 30
Slide 30 text
© ZOZO, Inc.
● あとはフォルダを丸ごと chrome 拡張機能にアップロードするだけ
4. 完成
30
Slide 31
Slide 31 text
© ZOZO, Inc.
● 完成 🎉
4. 完成
31
サンプルコード： https://github.com/Alt70155/test-chrome-extension
Slide 32
Slide 32 text
© ZOZO, Inc.
感想
良かったところ
● ruby で js のようなコードを書くという体験がかなり新鮮で面白かった
● ruby で簡単に Chrome 拡張機能が作れるというのがまず凄い
● ruby.wasm の入り口としても良さそう
● （今回はあまり使いこなせなかったが）他にもできることは多そうなので、ドキュメントなどが整備された
らもっと色々できそう
32
Slide 33
Slide 33 text
© ZOZO, Inc.
課題感
● エラーが起きたときの原因調査がかなり難しかった
○ null を表す JS::Object の挙動や Hash 周り、chrome.runtime.onMessage のエラー、popup で
JS.eval が使えない、など・・・
○ ruby.wasm もあまり情報が多くないので、ちょっと外れたことをしようとするとハマる
■ Hash が使えないから js object に変換して回避するなど、裏側の知識がないと難しい
● js だとこう書くけど ruby だとどうなるんだ、というのがちょくちょくある
● 標準 gem 以外の便利な gem が使えたらもっと色々できそう
感想
33
Slide 34
Slide 34 text
© ZOZO, Inc.
● まだ作られたばかりなので、本格的な拡張機能を作ろうとすると大変そう
● だが、ruby.wasm をちょっと試してみたい！という人にはとても良さそう
● 実際、深掘りしていくと勉強になる部分も多く、技術的にも面白いので触っていて楽しい
まとめ
34
Slide 35
Slide 35 text
© ZOZO, Inc.
結論：楽しいからみんなで試してみよう！
35
Slide 36
Slide 36 text
No content