ruby.wasm + unloosenでChrome拡張機能を作ってみた

twitter: @Ver3Alt
GitHub: https://github.com/Alt70155/test-chrome-extension

Transcript

1. ruby.wasm + unloosenでChrome拡張 機能を作ってみた
 After RubyKaigi 2023〜メドピア、ZOZO、Findy〜
 株式会社ZOZO
 ブランドソリューション開発本部 バックエンド部 WEARバックエンド
 
 近 海斗 Copyright © ZOZO, Inc. 1
2. © ZOZO, Inc. 株式会社ZOZO
 ブランドソリューション開発本部 バックエンド部 WEARバックエンド
 近 海斗
 • 2021年4月（株）ZOZOに新卒入社
 ◦ 新卒3年目
 ◦ RubyKaigiは今年で2回目の参加
 ◦ 先月はRailsConfにも参加
 ◦ TwitterID: @Ver3Alt
 
 2
3. © ZOZO, Inc. https://wear.jp/
 3 • ファッションコーディネートアプリ
 • 1,600万ダウンロード突破、コーディネート投稿総数は1,300万件以上 （2023年3月末時点）
 • ピックアップタグから最新のトレンドをチェック
 • コーディネート着用アイテムを公式サイトで購入可能
 • WEAR公認の人気ユーザーをWEARISTAと認定。モデル・タレント・デザ イナー・インフルエンサーといった各界著名人も参加

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