Kaigi on Rails 2023 でTurbolinks嫌いにTurboを食わせる登壇をしました #kaigionrails
先月の大阪Ruby会議03, 松江Ruby会議10 から続く3連続登壇の最終回！
なんと「Kaigi on Rails 2023」で登壇させていただきました。
「Turbolinksアレルギー患者に捧げるTurbo & Stimulusでの時短実装術」 www.youtube.com
スライドはこちらです。
感想
去年のKaigi on Railsに提出したプロポーザルは落選してしまったので、今回は2回目の挑戦でした。
とはいえ今年は100件以上のCFPが提出されていたので「まず通らんやろなぁ……」くらいに思っていましたが、なんと採択いただけたので「ありがたい…うれしい…」という気持ちになっています。
また、Hotwire枠の登壇が3つもあったのが驚きでしたね。世の中のフロントエンドの主流ではありませんが、意外と大きな波が来ているのでしょうか。
最近は htmx も話題になっていましたし、現代のフロントエンドしんどすぎ民としては今後も使われていくとよいなと思います。
参加者400人というデカめの会でしたが、登壇者側としては特に困ることもなく発表することができました。
会場が存在して、その場の休憩時間や懇親会で直接質問したりされたりが発生するので、登壇内容以上の収穫があるイベントでしたね。
コミュの障の者で且つ陰の者なので、勉強会などでは交流できないことも多いのですが、登壇していると発表内容の話ができるので最強でした。 そこから他の方の登壇内容などにも繋げていけるので、今回は話のネタに困ることは無かったように思います。
陰の者たちよ、登壇しよう。
登壇のふりかえり
セッション当日は、会場満席 & サテライト会場の方にご案内 となっており、まさに満員御礼という嬉しい状況でした。オンライン視聴を含めるとかなりの人数になりそうですね。セッションにお越しいただき誠にありがとうございました。
登壇後も「面白かった」という声をたくさん頂けたので、心の中で小躍りしております。
大きな失敗もなく無事に登壇を終えられたので、備忘録もかねてざっくりふりかえりを残しておきましょう。
使用技術
Hotwireの実用例
15分枠だったためHotwire入門をやっている時間はなく、TurboやStimulusを使うと嬉しいケースをいきなり紹介&実践しました。
Turboは機能の1つとしてbodyの全体または一部の要素を差し替える処理を提供しており、それをサーバーサイドで容易に実装することができます。
モーダルダイアログの表示も、以下のようにRailsのviewからダイアログのHTMLを返却しているだけです。
= turbo_stream.update "modal" do
.modal.is-active
.modal-background
.modal-content
.box
.block
p
| この内容で問い合わせてよろしいですか？
.block
= form_with url: inquiries_path, model: @inquiry do |f|
= f.hidden_field :email
= f.hidden_field :subject
= f.hidden_field :body
(以降は省略)
また、HTMLの一部を差し替えるということは「他の要素を変更せず保護する」ということでもあります。
「変更が必要な部分のみrenderし、保持したい要素はrenderしない」という選択肢が取れるのが嬉しい所ですね。
これでエラー表示の際などによく実装する、「ユーザー入力値を再現したフォームをrenderする」という面倒くさい処理を全撤廃することが可能です。
パスワードフォームの値などは平文でHTMLに埋め込んで返す必要がありますからね。セキュリティ的にもやめておいた方がよいでしょう。
こういった使い方を駆使して「時短実装できるぜ！」というような内容の登壇をしました。
Turboを食わず嫌いして無効化する人が減ればよいですねえ。
Hotwireを実用Tipsの解説
Hotwire称賛ばかりでは不誠実だろうと考え、メリット/デメリットの紹介をしました。
- メリット
- Javascript実装の負荷を最小限にできる
- サーバサイドに資産を集約できる
- デメリット
- 毎回サーバと通信してDOM操作するため通信なしでDOM操作がしたい場合に弱い
Hotwireには上記の特徴があるかなぁと個人的には考えています。
あとは細かいハマりどころと対処法もいくつか解説。昔ほどではないとは言え、iOSのMobile Safari対応は強敵ですね。
Mobile Safariはポップアップを無断でブロックするのやめろや。ユーザーに通知しろ。
毎度おなじみの楽しいデモ
今年の登壇は全て動作するデモを用意して壇上で動かしています。今回のKaigi on Railsでも、実際にHotwireを動かした際の挙動をスクリーン上に映して解説しています。
今回は「デモを動かしながらテキストで補足したら分かりやすいのでは…？」と直前に閃いてしまい、スライドとデモ画面を同時にスクリーンに投影する方式を開発/採用しました。もう2週間早く思いついていたらスライド作り直さずに済んだのになぁ。
かなり自然な出来だったようで、スライド中のデモ動画かと思っていた人も居たようです。この辺の技術もいつか書き残したい所ですね。
デモというものは、何故か本番で動かないもののため多用するのは非常にリスキーなのですが、毎回バクチを打ってデモ披露を敢行しています。
しかしながら今年はなんとノーミスです。やったね。
コール & レスポンス
「せっかくオフライン登壇だし、コーレスとかやってみてぇ〜〜〜〜〜」という欲が出てきたので、プレゼンのつかみとして実施しました。
- 「Turbolinksを知ってる人〜？」→ 👏👏👏👏👏
- 「Turbolinksを使ってる人〜？」→ 😐………
なるべく合わせやすいような話し方は心がけましたが、予想以上にバッチリ100%決まってしまったのでビックリしています。
実際の所はTurbolinks使っている人も居たはずですが、みんな流れを読むのがうますぎる
聴衆からのレスポンスを受け取れるのはオフライン登壇の良いところですね。
おわりに
ということで振り返りは以上！
フルタイムで仕事しつつ2ヶ月で3登壇は無茶だった……
体力の限界なのでしばらくはのんびり暮らそう。
松江Ruby会議10でruby.wasmで遊び倒す登壇をしました #matrk10
2週連続の登壇ですが、先日9/16の松江Ruby会議10でも登壇させていただきました。
スライドはこちらです。
皆様ruby.wasmを使い倒していきましょう！
感想
初の松江上陸&登壇！ということでオープンソースラボにお邪魔しました。
採択いただいた運営の皆様ありがとうございました！
駅前にソフトウェア系イベント利用歓迎の設備がドンとあるのすごい。 祖国ワカヤマスタンの田舎っぷりとは大違いだ……
イベントで生で聞く各セッションはもちろんのこと、セッションの合間の雑談にてruby.wasm関連の有益情報を得られたのが、まさにオフラインイベントの醍醐味という感じでとてもよい経験でした！
登壇のふりかえり
使用技術
ざっくり以下のような内容の紹介を行いました。
リリースノート1つとっても、深掘り・実践してみるだけで学びがたくさん得られて面白いですね。
たのしいデモを準備
「ブラウザを酷使する」というタイトルなので、スライドだけではなく実際にブラウザで動かすデモを用意して登壇に臨みました。
ruby.wasmだ！ #matrk10 pic.twitter.com/thpzN85JX9
— Terminal🇺🇦 (@hasumikin) 2023年9月16日
本日デモしたruby.wasm製ゲームのURLはこちらとなります！https://t.co/xZ5ABPxK0B
— ルニ / イカのプログラマ (@lni_T) 2023年9月16日
#matrk10
プログラム全般において、デモや客先でだけ動かないというのは周知の事実かと思われますが、今回はどうにか動いてもらえたので助かりました。
参加者の皆様にも好評いただけたようで嬉しい限りです。
松江で豪遊
松江は大変よいところでした。
おわりに
9月の登壇ラッシュはこれで完了！ 次回はKaigi on Rails 2023でお会いしましょう〜
大阪Ruby会議03でruby.wasmについて登壇&演奏会をしました #osrb03
タイトルの通り、先日の大阪Ruby会議03にて登壇させていただきました。
スライドはこちらです。
感想
外部のイベントにCFPを通して登壇する。という経験は初めてのため緊張しておりましたが、結果的に多くの方に楽しんでもらえたようで嬉しく思います。
「Rubyで笑おう」というイベントのテーマは無事達成できたのでは！と感じています。デモを作り込んだ甲斐がありましたね。
盛り上げていただいた参加者の皆様ありがとうございました！
他のセッションも大変面白く、明日すぐ業務で使える知識からお絵かき/工作/本作りと多種多様で、丸一日楽しめました。
プレゼン方法も参考になりました。DOM要素を見やすく表示した状態でHotwireのデモをするのは分かりやすくて良いですね…
使用技術
"ruby.wasmでgemを使う"をテーマに据えていますが、セッション前半の技術としては以下のようなものを解説しました。
メタプログラミングRuby 辺りの技術が中核となっており、Ruby初心者…は超えたRuby初級〜中級者に向けた内容としたつもりです。
Rubyはならず者の言語
「Rubyは柔軟な言語なのでrequireのような重要な処理も簡単に変更することができる」
的なことを説明したかったのですが、口が滑ってしまい「Rubyはならず者が使う言語」ということに……
その場のノリって怖いねぇ〜
Rubyの勉強会で「演奏」をする
ruby-wasm-synthesizer デモ
前述の通り、技術的な難易度がべらぼうに高い。という訳ではない認識です。
このままでは上級者が楽しめないのでは…ということで
という流れで、セッション後半に自作シンセサイザーで演奏を披露するという暴挙に出ることになりました。
好評だったようで非常にありがたい限りです。
Web Audio APIでプログラムから音源作成→音階の設定→再生という流れをイチから実装しています。
大阪Ruby会議03 の発表にてお見せした「ruby-wasm-synthesizer」のデモ動画とURLを公開しました！https://t.co/6T2IGamZg6#osrb03
— ルニ / イカのプログラマ (@lni_T) 2023年9月9日
盛り上げてくださった参加者の皆様、誠にありがとうございました！ pic.twitter.com/yiMwc4Rs6r
実は基本的な波形(矩形波や正弦波)の生成だけであればオシレーターを使うことでも実現可能なのですが、せっかくなのでRubyでイチからやりたいじゃん？ということで波形データの作成から手で実装しています。
選曲の基準
セッションでは以下の3曲を演奏しました。選定理由は以下の通り。
RYDEEN
シンセサイザーといえばYMO & YMOといえばRYDEEN ということで選曲。
Ruby上級者を狙ったコンテンツなので「年上のおじさまたちに刺されーっ！」という邪な思惑もあったりします。
ヘドウィグのテーマ
映画ハリーポッターでおなじみの曲。こちらは年代/性別問わず幅広く分かるだろうということで選曲。三角波の柔らかい音色にもマッチしていますね。
Get Wild
「もしかしてエンディングとしてGetWildやればウケるのでは」と前日にひらめいてしまったので急遽追加したコンテンツ。
計画通りやや早めに発表を終えられたので演奏を決行しました。大変好評。めでたしめでたし。
その他の施策
名札にアイコン表示
人の顔おぼえられない病が深刻なので、自分だけでも判別が付きやすいようにアイコンを名札に貼り付けていました。
本日 "ブラウザから「今すぐ」gemをロードする方法" で登壇予定です
— ルニ / イカのプログラマ (@lni_T) 2023年9月9日
ruby.wasmで作ったものを紹介します！よろしくお願いします！
これはアイコン貼り付けたらいい感じになった名札！
#osrb03 pic.twitter.com/VKa0ix3qiL
コンビニのネットプリントでシール印刷したアイコンを貼り付けています。 5cm角のシール2枚で300円。お手軽なので大変オススメです。
早く顔の上にアイコンとHNを任意で表示できる時代が来てほしいですね。
おわりに
振り返ってみると登壇準備に工数をかけすぎている！！！！！
工数の制限がないと本当に工数を度外視してしまうのが良くない所、次はもっと余裕をもって登壇したいですね。
次回があれば、また登壇できるようがんばります！
松江Ruby会議10に登壇します #matrk10
はじめに
先週に引き続きの登壇予告となります。
なんと松江Ruby会議10でも登壇させていただけることとなっております。ありがたい！
13:50~14:10 session 3にて 「ruby.wasmでブラウザを酷使してみよう」
というタイトルで登壇予定です。
登壇内容
登壇内容は以下を予定しています。
ruby.wasmから様々なブラウザ側の機能を活用する方法について解説します。 WebAssembly環境にてRubyが動作する「ruby.wasm」は、 今年7月にバージョン2.1がリリースされました。 一方で、ruby.wasm自体はまだリリースされたばかりの機能で、 ライブラリや活用事例の数は多くありません。 このトークでは、「Rubyのコードが動く」に留まらない ruby.wasmの応用実装について解説します。 従来はJavaScriptで実装していた処理をRubyでも実現することができる！ という所が技術的に面白いポイントと考えています。
大阪と同じくruby.wasmの内容ではありますが、よりブラウザ上でrubyを動かす事例の紹介が多めになっています。
おわりに
Rubyを長年使っておきながら実は松江に行くのははじめて！
松江の皆様、お手柔らかにお願いします。
大阪Ruby会議03に登壇します #osrb03
長らくブログを放置していましたが、良い機会なので再稼働します。
ここ何年かは基本的に所属企業のブログの方でこういった記事を書いていました。
Ruby2.7の(実験的)新機能「パターンマッチ」で遊ぶ - メドピア開発者ブログ
Feature Toggleを用いたRailsアプリの継続的なリリースと要注意事項 - メドピア開発者ブログ
はじめに
ということで開催がもう明日に迫っていますが、大阪Ruby会議03にて登壇させていただくこととなりました。うれしいね。
2023/09/09 16:20より ブラウザから「今すぐ」gemをロードする方法
というタイトルのセッションで登壇予定です。
登壇内容
登壇内容は以下を予定しています。
ruby.wasmにて、3rd party製のgemを利用するアプローチや、 ブラウザ側のAPIを利用する方法の解説をします。 RubyKaigi 2023のセッション「Load gem from browser」では、 ブラウザからgemを読み込むアプローチとして「名前とパスをMappingしておいて実行時に探す」 という手法の実現を目指す解説(require_relative の改変など)がなされていました。 参考: https://rubykaigi.org/2023/presentations/ledsun.html#day3 今回のトークでは、それとは別の解決策に焦点を当て、 「Rubyソースコードを1つにBundlingする」を実現することで、 実在する3rd party製のgemをブラウザからロードする方法の解説を行います。 また、メインテーマは「gemのロード」ですが、調査過程で実装した成果として、 JSモジュールを用いての「ブラウザ側APIの活用方法」についても解説します。
おわりに
本番では実在のgemをロードして動かすデモも実施予定です。お楽しみに！
それでは皆様、心斎橋でお会いしましょう。
RubyKaigi2019 1日目 Matz keynote メモ
業務中に見つけたgemのバグにパッチを送ってハッピーになった話
はじめに
このたび初めてOSSにコミットしたのでその顛末を記録する。
内容
業務中のできごと
なぞの挙動発見
久々のRailsアプリフルスクラッチ業務中に日付関連の処理を実装しようとしてこのgemをbundle installしたある日のこと
「validates通すと例外吐いて落ちる文字列がある」とのメンバーから報せが。
よくよく聞くとタイムゾーン指定された不正な時刻をパースさせようとすると死ぬのだとか。
"2019-01-30T25:12:14+09:00"
ただちに困りはしないが、将来良くないことが起きるかもしれないしこまったね。
対応検討
業務で利用するライブラリにバグがあった場合の対応方法としてはだいたい以下のどれかになると思われるが・・・
- 品質が低いと思われるライブラリは使用せず代替を探す
- 自社内でモンキーパッチを当てる
- 直してmasterに取り込んでもらう
今回は豪快に3を採用した。
おうちで対応
特に業務中にOSS活動できる環境でもないし、やり方もわからないし、しばらく放置してもスケジュール上問題なさそうだったので勝手におうちで直すことにした。完全に公私混同なのであまりおすすめできない。
報告
まずIssueをあげる。英語がまじむりつらい。
実装
対象のgemが依存してるgemが悪かったので、そっちのリポジトリをForkして修正する。
ちゃんとテストも書いたのでえらい。
プルリク
そしてプルリクエストを送信。英語がつらい。
その後
無事マージされた結果...
を達成！良いことづくめ！ みんな業務中になんかバグ踏んだらプルリクをだそう！
次は業務時間中にPR送るところまで行けたらいいね。
おわりに
しかしまぁ業務中にPR送ろうにも業務する会社がもう無い訳でしてー
退職したので今日からNEEEEEEEEEEEEEEEET
— ルニ@元イカのプログラマ (@lni_T) 2019年2月16日
ルニ先生の次回作にご期待下さい。
