rabbit-slide-unasuke-hokurikurk01 1.0.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 42340dd22148c561ed96e1294e782ef65a81cef82be160ecff109f6e22d4066b
+  data.tar.gz: 5b99d066dc897e8f8f6e43199eca68accc5b116e4a9da5ccb855a20f8614cd0d
+SHA512:
+  metadata.gz: 908aec689795c5cbf46614d23af91486426abe326660d89a4337912b1356143b3a5ddfc78d930ddc1fa4b1a12535c75e1c74b0f1172562f52c21161f84064207
+  data.tar.gz: a7de61dd14a177c136433071cbef9b20c7b4c97aa1908dce37139fb927b33e5500a6df6b04709f434cf2541dc94ba625068b33186d7665259a871ff28011983b

data/.rabbit

@@ -0,0 +1,2 @@
+--size 1920,1080
+slide.rab

data/README.md

@@ -0,0 +1,24 @@
+# 北陸Ruby会議01
+
+https://regional.rubykaigi.org/hokuriku01/
+
+## 作者向け
+
+### 表示
+
+    rake
+
+### 公開
+
+    rake publish
+
+## 閲覧者向け
+
+### インストール
+
+    gem install rabbit-slide-unasuke-hokurikurk01
+
+### 表示
+
+    rabbit rabbit-slide-unasuke-hokurikurk01.gem
+

data/Rakefile

@@ -0,0 +1,17 @@
+require "rabbit/task/slide"
+
+# Edit ./config.yaml to customize meta data
+
+spec = nil
+Rabbit::Task::Slide.new do |task|
+  spec = task.spec
+  # spec.files += Dir.glob("doc/**/*.*")
+  # spec.files -= Dir.glob("private/**/*.*")
+  # spec.add_runtime_dependency("rabbit-theme-YOUR-THEME")
+end
+
+desc "Tag #{spec.version}"
+task :tag do
+  sh("git", "tag", "-a", spec.version.to_s, "-m", "Publish #{spec.version}")
+  sh("git", "push", "--tags")
+end

data/_slide.md

@@ -0,0 +1,78 @@
+# QUIC(TLS 1.3)実装進捗
+
+author
+:   unasuke
+
+content-source
+:  RubyKaigi 2025 follow up
+
+date
+:  2025-08-30
+
+theme
+: theme
+
+# 自己紹介
+
+* Name: うなすけ
+* Work: フリーランス
+* Kaigi on Rails 2025オーガナイザー (09/26-27 開催)
+* {::tag name='x-small'}GitHub <https://github.com/unasuke>{:/tag}
+* {::tag name='x-small'}Fediverse <https://mstdn.unasuke.com/@unasuke>{:/tag}
+* {::tag name='x-small'}X <https://twitter.com/yu_suke1994>{:/tag}
+* {::tag name='x-small'}<https://unasuke.com>{:/tag}
+
+![](img/icon.jpg){:relative_width='24' align='right' relative_margin_right='-8' relative_margin_top='20'}
+
+# 元ネタない勢(1人)
+
+![](img/timetable.png){:relative_width='100'}
+
+# 経緯
+1. QUICプロトコルをRubyで実装したい
+2. 一旦Python実装のRuby移植は不完全ながらできた(これがGrantでの成果)
+3. より"Rubyらしい"コードになるように実装し直している
+4. *QUICを実装するためにはTLS 1.3を実装しないといけない* ← ｲﾏｺｺ
+
+\\nずっとTLS 1.3の実装してる
+
+
+# 進捗
+実際にご覧いただこう
+
+# 今のは何？
+* `www.example.com` に対して (https) HTTP/1.1 でGET requestを飛ばしている
+* TLS handshakeをする
+* 返ってきた暗号化されたデータを解く
+* 標準出力に表示しておしまい
+
+# 取り組んでいたこと
+* Client側Handshake flowのリファクタ
+* そもそもHTTPSでreq/resをするサンプルクライアントの実装
+* 色々不足していたものたちの実装&リファクタ
+
+# 取り組んでいたことlist
+* [QUIC実装月報 2025年3月 \| うなすけとあれこれ](https://blog.unasuke.com/2025/quic-impl-monthly-report-202503/)
+  * 進捗らしい進捗があるのはここだけかも
+* [QUIC実装月報 2025年4月 \| うなすけとあれこれ](https://blog.unasuke.com/2025/quic-impl-monthly-report-202504/)
+* [QUIC実装月報 2025年5月 \| うなすけとあれこれ](https://blog.unasuke.com/2025/quic-impl-monthly-report-202505/)
+* [QUIC実装月報 2025年6月 \| うなすけとあれこれ](https://blog.unasuke.com/2025/quic-impl-monthly-report-202506/)
+* [QUIC実装月報 2025年7月 \| うなすけとあれこれ](https://blog.unasuke.com/2025/quic-impl-monthly-report-202507/)
+
+# やってたよ
+ruby-jp discordの `#weekly-shinchoku` で垂れ流しています
+
+![](img/discord-log.png){:relative_width='60'}
+
+# 実際にご覧いただこう2
+実際にご覧いただこう
+
+# HELP ME
+会場にお越しのTLS有識者の方
+
+
+# 今後の展望
+* 明日からまた開発中断します
+  * Kaigi on Rails 2025のため……
+* 10月から復活！
+  * したい……

data/_slide.rab

@@ -0,0 +1,440 @@
+= Ruby Implementation of QUIC: Progress and Challenges
+
+: author
+  unasuke (Yusuke Nakamura)
+: content-source
+  RubyKaigi 2023
+: date
+  2023-05-12
+: theme
+  theme
+
+= Self introduction
+
+  * Name: unasuke (Yusuke Nakamura)
+  * Work: freelance Web app developer @ Japan
+  * Itamae gem maintainer, Kaigi on Rails Organizer
+  * (('tag:x-small')) GitHub ((<URL:https://github.com/unasuke>))
+  * (('tag:x-small')) Mastodon ((<URL:https://mstdn.unasuke.com/@unasuke>))
+  * (('tag:x-small')) Twitter ((<URL:https://twitter.com/yu_suke1994>))
+
+
+  # image
+  # src = img/icon_face.jpeg
+  # relative_width = 24
+  # align = right
+  # relative_margin_right = -8
+  # relative_margin_top = 33
+
+= [AD 1] Rubyist Book Authors Stamp Rally
+  # image
+  # src = img/authorsrb.jpg
+  # relative_width = 85
+
+= [AD 2] RubyMusicMixin2023 by pixiv at Day 3
+  # image
+  # src = img/rubymusicmixin2023.jpg
+  # relative_width = 80
+
+= Ruby Association Grant
+  # image
+  # src = img/ruby-association-grant-2022-unasuke.png
+  # relative_width = 90
+
+(('tag:small'))(('tag:center'))((<URL:https://www.ruby.or.jp/en/news/20221027>))
+
+= What is QUIC?
+* UDP-based communication protocol
+* HTTP/3 uses QUIC
+  * Faster than HTTP/2 (TCP)
+
+\n
+  # image
+  # src = img/QUIC-Badge-Dark-RGB-Horiz.png
+  # relative_width = 50
+  # align = center
+(('tag:x-small'))(('tag:center')) image from ((<URL:https://github.com/quicwg/wg-materials>))
+
+
+= What is QUIC? - Diagram by Robin Marx
+  # image
+  # src = img/protocol-stack-h2-h3-improved-readability.png
+  # relative_width = 45
+  # align = center
+
+(('tag:x-small'))(('tag:center')) image from ((<URL:https://github.com/rmarx/h3-protocol-stack>))
+
+= My talks
+* RubyKaigi Takeout 2021
+  * "Ruby, Ractor, QUIC"
+* RubyKaigi 2022 (Tsu)
+  * "Ruby, Ractor, QUIC"
+* Now (2023, Matsumoto)
+
+\n
+  # image
+  # src = img/past-kaigi-slides.png
+  # relative_width = 40
+  # align = right
+
+
+= Implement QUIC from scratch
+(('tag:center'))Have you ever created a Rails application?
+
+  # image
+  # src = img/person-raising-hand.svg
+  # relative_width = 30
+  # align = center
+
+= Implement QUIC from scratch
+(('tag:center'))Have you ever implemented the QUIC protocol?
+
+  # image
+  # src = img/person-raising-hand.svg
+  # relative_width = 30
+  # align = center
+
+
+= Implement QUIC from scratch
+It's too difficult! \n
+
+* When create a Rails application
+  * learn from "Rails Guides" and "Rails Tutorial"
+* When create a QUIC implementation...?
+  * RFCs are not a "implementation guide"
+
+= Try to implement QUIC once
+
+* To learn how to implement QUIC
+  * Implement it once (how?)
+    * Porting existing implementation!
+
+
+= Topics
+
+(1) (('tag:large'))Porting from Python to Ruby
+(2) (('tag:large'))Rubyish QUIC implementation
+(3) (('tag:large'))Future of my implementation
+
+
+= Porting from Python to Ruby
+  # image
+  # src = img/to-ruby-from-python.png
+  # relative_width = 78
+  # align = center
+(('tag:xx-small'))(('tag:center'))((<URL:https://www.ruby-lang.org/en/documentation/ruby-from-other-languages/to-ruby-from-python/>))
+
+= Porting from Python to Ruby
+  # image
+  # src = img/python_easy_code.png
+  # relative_width = 80
+  # align = center
+
+(('tag:center'))Can you port this Python code to Ruby?
+
+= Porting from Python to Ruby - Code amount
+  # image
+  # src = img/aioquic-loc.png
+  # relative_width = 100
+  # align = center
+
+= Porting from Python to Ruby - How I ported it
+* Keep the same structure as Python
+  * Carelessly changed may cause getting stuck
+* Avoid porting asynchronous processing parts 
+  * Difference of functionality
+  * My lack of knowledge
+
+= Porting from Python to Ruby - Built-in types, bytes
+  # image
+  # src = img/aioquic_buffer.png
+  # relative_width = 100
+  # align = center
+
+(('tag:x-small'))(('tag:center'))((<URL:https://github.com/aiortc/aioquic/blob/main/src/aioquic/_buffer.pyi>))
+
+= Porting from Python to Ruby - Built-in types, bytes
+
+* bytes in Python
+  * immutable (bytearray is not)
+* String in Ruby
+  * mutable
+  * has Encoding (not only ASCII)
+
+= Porting from Python to Ruby - Built-in types, bytes
+Python returns 3
+  # image
+  # src = img/bytes_python.png
+  # relative_width = 60
+  # align = center
+
+Ruby returns 1 (return 3 if use String#bytesize)
+  # image
+  # src = img/bytes_ruby.png
+  # relative_width = 60
+  # align = center
+
+= Porting from Python to Ruby - Built-in types, enum
+  # image
+  # src = img/enum_python.png
+  # relative_width = 80
+  # align = center
+
+(('tag:center')) Python
+
+
+= Porting from Python to Ruby - Built-in types, enum
+  # image
+  # src = img/enum_ruby.png
+  # relative_width = 80
+  # align = center
+
+(('tag:center')) Ruby
+
+= Porting from Python to Ruby - Built-in types, enum
+  # image
+  # src = img/enum_python_debug.png
+  # relative_width = 80
+  # align = center
+
+"Oh! 1025 is the SignatureAlgorithm.RSA_PKCS1_SHA256 in TLS 1.3!"
+
+= Porting from Python to Ruby - Built-in types, tuple
+  # image
+  # src = img/aioquic_conn.png
+  # relative_width = 90
+  # align = center
+
+(('tag:center')) Python
+
+= Porting from Python to Ruby - Built-in types, tuple
+  # image
+  # src = img/raioquic_conn.png
+  # relative_width = 90
+  # align = center
+
+(('tag:center')) Ruby
+
+= Porting from Python to Ruby - Code style
+  # image
+  # src = img/aioquic_callback.png
+  # relative_width = 70
+  # align = center
+
+(('tag:center')) Python
+
+= Porting from Python to Ruby - Code style
+  # image
+  # src = img/raioquic_callback.png
+  # relative_width = 75
+  # align = center
+
+(('tag:center')) Ruby
+
+= Porting from Python to Ruby - Code style
+  # image
+  # src = img/aioquic_callback_register.png
+  # relative_width = 80
+  # align = center
+
+(('tag:center')) callback register in Python
+
+
+= Porting from Python to Ruby - Library API
+Not only language themselves but also API differences.
+
+Using OpenSSL functionality from...
+
+* Python (aioquic)
+  * pyca/cryptography
+    * ((<URL:https://github.com/pyca/cryptography>))
+* Ruby
+  * openssl gem
+    * ((<URL:https://github.com/ruby/openssl>))
+
+(to implement TLS 1.3)
+
+= Porting from Python to Ruby - Library API
+(1) looked for API calls to pyca/cryptography's
+(2) find which C API of OpenSSL it corresponds to
+(3) find how it is wrapped in the openssl gem
+(4) port it to a Ruby API call in the openssl gem
+
+= Porting from Python to Ruby - Library API example
+  # image
+  # src = img/key_exchange_python.png
+  # relative_width = 100
+  # align = center
+
+= Porting from Python to Ruby - Library API example
+  # image
+  # src = img/key_exchange_ruby.png
+  # relative_width = 90
+  # align = center
+
+= Porting from Python to Ruby - Result
+  # image
+  # src = img/raioquic-loc.png
+  # relative_width = 90
+  # align = center
+
+= Porting from Python to Ruby - Demo
+  # image
+  # src = img/raioquic-demo.gif
+  # relative_width = 85
+  # align = center
+
+= Porting from Python to Ruby - Insights
+
+(1) QUIC IS VERY DIFFICULT
+(2) TLS 1.3 IS ALSO VERY DIFFICULT
+(3) "writing once" empowers me
+
+= Porting from Python to Ruby - "Raioquic"
+  # image
+  # src = img/raioquic-og.png
+  # relative_width = 80
+  # align = center
+
+(('tag:center'))((<URL:https://github.com/unasuke/raioquic>))
+
+
+= Rubyish QUIC implementation
+  # image
+  # src = img/raioquic_demo_client.png
+  # relative_width = 44
+  # align = center
+
+= Future of my implementation - How to make it Rubyish?
+To make implementation Rubyish...
+
+(1) Use suitable features to Ruby (internal)
+    * tuple → class or dedicated struct or data
+    * bytes → IO::Buffer, not String
+(2) Adapt to existing API styles (public API)
+
+= Future of my implementation - TLS in Ruby
+  # image
+  # src = img/ruby_nethttp.png
+  # relative_width = 90
+  # align = center
+
+(('tag:center'))High level API (use Net::HTTP)
+
+= Future of my implementation - TLS in Ruby
+  # image
+  # src = img/ruby_openssl_socket.png
+  # relative_width = 90
+  # align = center
+
+(('tag:center'))Low level API (use OpenSSL::SSL::SSLSocket)
+
+= Future of my implementation - Faraday style
+  # image
+  # src = img/faraday_like_api.png
+  # relative_width = 90
+  # align = center
+
+(('tag:center'))Very high level API
+
+= Future of my implementation - Net::HTTP style
+  # image
+  # src = img/similer_nethttp.png
+  # relative_width = 90
+  # align = center
+
+(('tag:center'))Net::HTTP style API
+
+= Future of my implementation - Vaporware
+* The APIs like I've been talking about, doesn't exist yet
+  * next year...?
+    * um...
+
+= Future of my implementation - Raise your hand time!
+(('tag:center'))Are you running some Rails apps on production env?
+
+  # image
+  # src = img/person-raising-hand.svg
+  # relative_width = 30
+  # align = center
+
+= Future of my implementation - Raise your hand time!
+(('tag:center'))Are you running some Rails apps on production ((*without*)) reverse proxies or load balancers?
+
+  # image
+  # src = img/person-raising-hand.svg
+  # relative_width = 30
+  # align = center
+
+# = Future of my implementation - Where could it be used
+# 
+# * Are you runs Rails app on production?
+#   * Are you use reverse proxy or load balancer?
+#     * e.g. Nginx, Apache, H2O, ALB...
+# 
+
+= Future of my implementation - Speed!
+
+* Most Rails app is behind of web server (load balancer)
+  * TLS termination is high cost
+  * (asset delivery)
+
+= Future of my implementation - QUIC diagram (again!)
+  # image
+  # src = img/protocol-stack-h2-h3-improved-readability.png
+  # relative_width = 45
+  # align = center
+
+(('tag:x-small'))(('tag:center')) image from ((<URL:https://github.com/rmarx/h3-protocol-stack>))
+
+= Future of my implementation - Faster language impls
+* C or Rust or...
+  * ((<(('socketry/protocol-quic'))|URL:https://github.com/socketry/protocol-quic>)) gem wraps ngtcp2
+    * created by Samuel-san (ioquatix)
+      * "Unleashing the Power of Asynchronous HTTP with Ruby" in Day 3
+  * ((<(('ngtcp2/ngtcp2'))|URL:https://github.com/ngtcp2/ngtcp2>)) written by C
+
+= Future of my implementation - ngtcp2 used by curl
+  # image
+  # src = img/curl-ngtcp2.png
+  # relative_width = 85
+  # align = center
+
+(('tag:center'))((<URL:https://github.com/curl/curl/blob/master/docs/HTTP3.md>))
+
+= Future of my implementation - Worth of Pure Ruby
+* Research
+  * Implementations that make it easy to change internal behavior are useful
+* QUIC implementation itself
+  * Helping QUIC implementation itself
+    * e.g. Build data for test its behavior
+
+= Future of my implementation - Motivation
+  # image
+  # src = img/quic-impl-grep-ruby.png
+  # relative_width = 70
+  # align = center
+
+(('tag:x-small'))(('tag:center')) ((<URL:https://github.com/quicwg/base-drafts/wiki/Implementations>))
+
+= Summary
+
+* Ported aioquic (Python) to Ruby
+  * Diffs from language features, library API makes porting hard
+  * Ported impl could communicate other impls
+* Creating Rubyish implementation
+  * Uses Ruby's built-in features
+  * Make it can apply existing idioms
+* This may be where this implementation would be useful
+  * Research
+  * QUIC implementation itself
+
+= Acknowledgments
+* Ruby Association
+  * For adopting my project
+* Koichi Sasada-san
+  * a mentor of the porting project
+* Kuwayama-san
+  * Author of tttls1.3 gem
+* Daisuke Aritomo a.k.a. osyoyu
+  * Adviser of this talk

data/config.yaml

@@ -0,0 +1,23 @@
+---
+id: hokurikurk01
+base_name: slide
+tags: ["ruby", "rails", "kaigionrails"]
+presentation_date: 2025-12-06
+presentation_start_time:
+presentation_end_time:
+version: 1.0.0
+licenses: ["MIT"]
+slideshare_id:
+speaker_deck_id:
+vimeo_id:
+youtube_id:
+width: 1920
+height: 1080
+source_code_uri: https://github.com/unasuke/hokurikurk01
+author:
+  markup_language: :rd
+  name: unasuke
+  email: yusuke1994525@gmail.com
+  rubygems_user: unasuke
+  slideshare_user:
+  speaker_deck_user:

data/img/shirataki_qr.svg

@@ -0,0 +1,79 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="465.000000pt" height="465.000000pt" viewBox="0 0 465.000000 465.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.16, written by Peter Selinger 2001-2019
+</metadata><g><rect x="0" y="0" width="465" height="465" fill="#ffffff" />
+<g transform="translate(0.000000,465.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M450 3675 l0 -525 525 0 525 0 0 525 0 525 -525 0 -525 0 0 -525z
+m900 0 l0 -375 -375 0 -375 0 0 375 0 375 375 0 375 0 0 -375z"/>
+<path d="M750 3675 l0 -225 225 0 225 0 0 225 0 225 -225 0 -225 0 0 -225z"/>
+<path d="M1800 4125 l0 -75 -75 0 -75 0 0 -150 0 -150 75 0 75 0 0 -75 0 -75
+-75 0 -75 0 0 -300 0 -300 -150 0 -150 0 0 -75 0 -75 150 0 150 0 0 -150 0
+-150 -75 0 -75 0 0 75 0 75 -150 0 -150 0 0 -75 0 -75 -75 0 -75 0 0 225 0
+225 -75 0 -75 0 0 -150 0 -150 -75 0 -75 0 0 150 0 150 -150 0 -150 0 0 -150
+0 -150 75 0 75 0 0 -150 0 -150 -75 0 -75 0 0 -75 0 -75 75 0 75 0 0 -75 0
+-75 -75 0 -75 0 0 -75 0 -75 75 0 75 0 0 -75 0 -75 -75 0 -75 0 0 -75 0 -75
+225 0 225 0 0 150 0 150 375 0 375 0 0 -75 0 -75 -225 0 -225 0 0 -75 0 -75
+225 0 225 0 0 -150 0 -150 75 0 75 0 0 -150 0 -150 -75 0 -75 0 0 -75 0 -75
+75 0 75 0 0 75 0 75 75 0 75 0 0 -75 0 -75 75 0 75 0 0 75 0 75 75 0 75 0 0
+-75 0 -75 75 0 75 0 0 -150 0 -150 -75 0 -75 0 0 75 0 75 -75 0 -75 0 0 -150
+0 -150 225 0 225 0 0 225 0 225 75 0 75 0 0 225 0 225 75 0 75 0 0 -150 0
+-150 225 0 225 0 0 -150 0 -150 150 0 150 0 0 -75 0 -75 75 0 75 0 0 75 0 75
+75 0 75 0 0 150 0 150 -75 0 -75 0 0 75 0 75 75 0 75 0 0 75 0 75 150 0 150 0
+0 150 0 150 -75 0 -75 0 0 -75 0 -75 -75 0 -75 0 0 -75 0 -75 -75 0 -75 0 0
+150 0 150 75 0 75 0 0 75 0 75 75 0 75 0 0 75 0 75 75 0 75 0 0 225 0 225
+-150 0 -150 0 0 -75 0 -75 -75 0 -75 0 0 75 0 75 -75 0 -75 0 0 75 0 75 -150
+0 -150 0 0 -75 0 -75 -225 0 -225 0 0 75 0 75 75 0 75 0 0 75 0 75 150 0 150
+0 0 75 0 75 150 0 150 0 0 75 0 75 -225 0 -225 0 0 -75 0 -75 -75 0 -75 0 0
+375 0 375 -150 0 -150 0 0 75 0 75 -75 0 -75 0 0 -75 0 -75 -75 0 -75 0 0 75
+0 75 -150 0 -150 0 0 75 0 75 75 0 75 0 0 75 0 75 75 0 75 0 0 -75 0 -75 225
+0 225 0 0 -75 0 -75 75 0 75 0 0 75 0 75 -75 0 -75 0 0 75 0 75 75 0 75 0 0
+75 0 75 -375 0 -375 0 0 -75 0 -75 -75 0 -75 0 0 75 0 75 -150 0 -150 0 0 -75z
+m300 -150 l0 -75 -150 0 -150 0 0 75 0 75 150 0 150 0 0 -75z m0 -450 l0 -75
+75 0 75 0 0 75 0 75 75 0 75 0 0 -75 0 -75 -75 0 -75 0 0 -150 0 -150 -75 0
+-75 0 0 -75 0 -75 -75 0 -75 0 0 -150 0 -150 -75 0 -75 0 0 75 0 75 -75 0 -75
+0 0 75 0 75 150 0 150 0 0 75 0 75 -75 0 -75 0 0 75 0 75 75 0 75 0 0 75 0 75
+-75 0 -75 0 0 75 0 75 150 0 150 0 0 -75z m600 -75 l0 -150 75 0 75 0 0 -150
+0 -150 -75 0 -75 0 0 150 0 150 -75 0 -75 0 0 -150 0 -150 -75 0 -75 0 0 150
+0 150 75 0 75 0 0 150 0 150 75 0 75 0 0 -150z m-450 -975 l0 -375 -75 0 -75
+0 0 75 0 75 -75 0 -75 0 0 -150 0 -150 150 0 150 0 0 -75 0 -75 -75 0 -75 0 0
+-150 0 -150 75 0 75 0 0 75 0 75 75 0 75 0 0 75 0 75 225 0 225 0 0 -150 0
+-150 -150 0 -150 0 0 75 0 75 -75 0 -75 0 0 -150 0 -150 75 0 75 0 0 -75 0
+-75 -75 0 -75 0 0 75 0 75 -150 0 -150 0 0 -75 0 -75 -75 0 -75 0 0 75 0 75
+75 0 75 0 0 75 0 75 -75 0 -75 0 0 75 0 75 -150 0 -150 0 0 75 0 75 150 0 150
+0 0 75 0 75 -75 0 -75 0 0 75 0 75 -225 0 -225 0 0 75 0 75 225 0 225 0 0 150
+0 150 150 0 150 0 0 150 0 150 75 0 75 0 0 -375z m600 225 l0 -150 -225 0
+-225 0 0 150 0 150 225 0 225 0 0 -150z m-1800 -225 l0 -75 75 0 75 0 0 -75 0
+-75 -75 0 -75 0 0 -75 0 -75 -75 0 -75 0 0 75 0 75 -75 0 -75 0 0 150 0 150
+150 0 150 0 0 -75z m450 0 l0 -75 -75 0 -75 0 0 75 0 75 75 0 75 0 0 -75z
+m1350 -150 l0 -75 75 0 75 0 0 -75 0 -75 -75 0 -75 0 0 -75 0 -75 -225 0 -225
+0 0 150 0 150 75 0 75 0 0 75 0 75 150 0 150 0 0 -75z m750 -75 l0 -150 75 0
+75 0 0 -75 0 -75 75 0 75 0 0 150 0 150 75 0 75 0 0 -150 0 -150 -75 0 -75 0
+0 -75 0 -75 -150 0 -150 0 0 150 0 150 -75 0 -75 0 0 150 0 150 75 0 75 0 0
+-150z m-2850 -225 l0 -75 -75 0 -75 0 0 75 0 75 75 0 75 0 0 -75z m2550 0 l0
+-75 75 0 75 0 0 -75 0 -75 -225 0 -225 0 0 75 0 75 75 0 75 0 0 75 0 75 75 0
+75 0 0 -75z m150 -600 l0 -225 -225 0 -225 0 0 225 0 225 225 0 225 0 0 -225z
+m300 -600 l0 -75 -75 0 -75 0 0 75 0 75 75 0 75 0 0 -75z"/>
+<path d="M1950 3225 l0 -75 75 0 75 0 0 75 0 75 -75 0 -75 0 0 -75z"/>
+<path d="M3150 1425 l0 -75 75 0 75 0 0 75 0 75 -75 0 -75 0 0 -75z"/>
+<path d="M3150 3675 l0 -525 525 0 525 0 0 525 0 525 -525 0 -525 0 0 -525z
+m900 0 l0 -375 -375 0 -375 0 0 375 0 375 375 0 375 0 0 -375z"/>
+<path d="M3450 3675 l0 -225 225 0 225 0 0 225 0 225 -225 0 -225 0 0 -225z"/>
+<path d="M3750 2925 l0 -75 150 0 150 0 0 -75 0 -75 -75 0 -75 0 0 -75 0 -75
+150 0 150 0 0 150 0 150 -75 0 -75 0 0 75 0 75 -150 0 -150 0 0 -75z"/>
+<path d="M450 975 l0 -525 525 0 525 0 0 525 0 525 -525 0 -525 0 0 -525z
+m900 0 l0 -375 -375 0 -375 0 0 375 0 375 375 0 375 0 0 -375z"/>
+<path d="M750 975 l0 -225 225 0 225 0 0 225 0 225 -225 0 -225 0 0 -225z"/>
+<path d="M3000 825 l0 -75 -150 0 -150 0 0 -150 0 -150 150 0 150 0 0 150 0
+150 75 0 75 0 0 75 0 75 -75 0 -75 0 0 -75z"/>
+<path d="M4050 825 l0 -75 75 0 75 0 0 75 0 75 -75 0 -75 0 0 -75z"/>
+<path d="M1650 600 l0 -150 150 0 150 0 0 150 0 150 -150 0 -150 0 0 -150z"/>
+<path d="M3300 525 l0 -75 75 0 75 0 0 75 0 75 -75 0 -75 0 0 -75z"/>
+<path d="M3900 525 l0 -75 150 0 150 0 0 75 0 75 -150 0 -150 0 0 -75z"/>
+</g>
+</g></svg>

data/slide.rab

@@ -0,0 +1,388 @@
+= Kaigi on Rails 2025におけるsubscreenの実装について
+
+: author
+  うなすけ
+: content-source
+  北陸Ruby会議01
+: date
+  2025-12-06
+: theme
+  theme
+
+= 自己紹介
+
+  * Name: うなすけ
+  * Work: フリーランス
+  * Kaigi on Rails Organizer
+  * (('tag:x-small')) GitHub ((<URL:https://github.com/unasuke>))
+  * (('tag:x-small')) Fediverse ((<URL:https://mstdn.unasuke.com/@unasuke>))
+  * (('tag:x-small')) X ((<URL:https://x.com/yu_suke1994>))
+
+
+  # image
+  # src = img/icon_face.jpeg
+  # relative_width = 24
+  # align = right
+  # relative_margin_right = -8
+  # relative_margin_top = 33
+
+= Kaigi on Railsとは
+
+  # blockquote
+  # title = https://kaigionrails.org/2025/about/
+  Kaigi on Rails is an approachable, inclusive, web-focused tech conference, designed to
+  lower the barrier of entry to participating
+  in conferences.
+
+  Kaigi on Railsのコアコンセプトは「初学者から上級者までが楽しめるWeb系の技術カンファレンス」 です。
+
+
+= Kaigi on Rails 2025
+
+  # image
+  # src = img/kaigionrails_2025_policies.png
+  # align = center
+  # relative_width = 55
+
+
+(('tag:center'))EN/JA
+
+= Kaigi on Rails 2025
+
+  # image
+  # src = img/kaigionrails_2025_policies.png
+  # align = center
+  # relative_width = 55
+
+
+(('tag:center'))国際カンファレンスっぽい！
+
+= Kaigi on Rails 2025は国際カンファレンス？
+
+* 「これができてれば国際カンファレンス」という基準はない
+  * と、思ってるけど……
+* 海外からの参加者
+* 英語による発表
+* 英語によるアナウンス
+* ビザ取得支援
+* 同時通訳
+* 字幕
+
+
+= Kaigi on Rails 2025は国際カンファレンス？
+
+* 「これができてれば国際カンファレンス」という基準はない
+  * と、思ってるけど……
+* 海外からの参加者
+* 英語による発表
+* 英語によるアナウンス
+* ビザ取得支援
+* ((*同時通訳*))
+* ((*字幕*))
+
+
+= Kaigi on Rails 2025の国際化
+
+* JA → EN の同時通訳
+  * 発表数的に厳しい
+* EN → JA の同時通訳
+  * こちらを用意した
+  * 全員分のレシーバーを用意するのは厳しい
+
+同時通訳のリソースが十分ではない
+
+→ 字幕も用意したいよね
+
+= Kaigi on Rails 2025の国際化
+
+  # image
+  # src = img/ioquatix_with_transcribe.jpg
+  # align = center
+  # relative_width = 70
+
+= カンファレンスと字幕
+
+* VimConf 2024
+  * ((<URL:https://pocketalk.jp>))
+* Observability Conference Tokyo 2025
+  * ((<URL:https://www.cuckoo.so/jp/>))
+
+= Kaigiと字幕
+
+* RubyKaigi
+  * ((<URL:https://github.com/ruby-no-kai/takeout-app>))
+  * ((<URL:https://github.com/ruby-no-kai/signage-app>))
+* 東京Ruby会議12
+  * ((<URL:https://github.com/tokyorubykaigi12/captioner>))
+
+Fork?
+
+= keynote speakers
+
+  # image
+  # src = img/kaigionrails_2025_keynote_speakers.png
+  # align = center
+  # relative_width = 100
+
+= Falcon's author
+
+  # image
+  # src = img/esa_tech_todo.png
+  # align = center
+  # relative_width = 100
+
+= new Falcon app
+
+* Falconのアプリって作ったことない
+  * ありますか？KaigiEffectで触った人はいる？
+* リアルタイム文字起こしのアプリって作ったことない
+  * さっきのコードを読めばなんとなくわかるけど
+* リアルタイムにデータを配信するアプリって……
+  * Action Cableではない
+  * WebSocketならちょっとあるけど、WebSocketなの？
+
+= 壁打ち
+
+  # image
+  # src = img/claude_1.png
+  # align = center
+  # relative_width = 90
+
+= 壁打ち
+
+  # image
+  # src = img/claude_2.png
+  # align = center
+  # relative_width = 90
+
+= 壁打ち
+
+  # image
+  # src = img/claude_3.png
+  # align = center
+  # relative_width = 90
+
+= 壁打ち
+
+  # image
+  # src = img/claude_4.png
+  # align = center
+  # relative_width = 90
+
+= 壁打ち
+
+  # image
+  # src = img/claude_5.png
+  # align = center
+  # relative_width = 90
+
+= 壁打ち
+
+  # image
+  # src = img/claude_6.png
+  # align = center
+  # relative_width = 90
+
+= 壁打ち
+
+  # image
+  # src = img/claude_7.png
+  # align = center
+  # relative_width = 90
+
+= 壁打ち
+
+  # image
+  # src = img/claude_8.png
+  # align = center
+  # relative_width = 90
+
+= Vibe Coding
+
+  # image
+  # src = img/vibe_coding_1.png
+  # align = center
+  # relative_width = 100
+
+= Vibe Coding
+
+  # image
+  # src = img/vibe_coding_2.png
+  # align = center
+  # relative_width = 100
+
+= Vibe Coding (9/22)
+
+  # image
+  # src = img/vibe_coding_3.png
+  # align = center
+  # relative_width = 60
+
+(('tag:center'))本番4日前にやることではない
+
+= Vibe codingまとめ
+
+* まずはAIと壁打ちして方針決め
+  * これは6月頃からやっていた
+* 方針をもとに手元でVibe coding
+  * Claude Max
+* AWSの環境を構築するTerraformは人力
+  * やるべきことがわかっているので
+
+= できたもの
+* ((<URL:https://github.com/kaigionrails/shirataki>))
+  * ffmpegで配信を受け取り、音声をAmazon Transcribeに流す
+  * Transcribeの結果をBedrockで英訳する
+  * 日本語とAI訳をValkeyにstreamする
+  * Valkey経由でstreamされた字幕情報をFalconがSSEする
+* ((<URL:https://github.com/kaigionrails/terraform/pull/18>))
+  * Valkey serverless
+  * shiratakiが動くEC2
+  * shiratakiにリクエストを流すALB
+  * などなど
+
+= Kaigi on Rails 2025での構成
+
+  # image
+  # src = img/shirataki_arch_kaigionrails2025.png
+  # align = center
+  # relative_width = 100
+
+= トラブル集
+
+* 本番環境で動かない
+* 配信が止まると全てが止まる
+* 同時通訳との兼ね合い
+* (BedrockのAPI call quotaにひっかかる)
+
+= 本番環境で動かないトラブル
+
+* 検証環境では動いていたのに本番で動かない！
+* ブラウザからのSSE受信ができていない
+* EC2上のプロセスは動いている
+
+= 本番環境で動かないトラブル
+
+* 検証環境では動いていたのに本番で動かない！
+* ブラウザからのSSE受信ができていない
+* EC2上のプロセスは動いている
+* 理由
+  * 本番へのドメイン登録忘れ
+  * ブラウザ(というかOS)がNXDOMAIN？をキャッシュ？
+    * ドメイン登録とOS再起動で解決
+
+= 配信が止まると全てが止まるトラブル
+
+  # image
+  # src = img/sorah_x_post.png
+  # align = center
+  # relative_width = 80
+
+(('tag:center'))((<URL:https://x.com/sora_h/status/1971479957508587953>))
+
+= 配信が止まると全てが止まるトラブル
+
+* インターネットへの接続が不安定
+* Cloudflareへのストリーミングが止まる
+* するとCloudflareからのストリーミングも止まる
+* ffmpegによる受信プロセスが終了し、おしまい
+
+= 配信が止まると全てが止まるトラブル
+
+* インターネットへの接続が不安定
+* Cloudflareへのストリーミングが止まる
+* するとCloudflareからのストリーミングも止まる
+* ffmpegによる受信プロセスが終了し、おしまい
+* 解決策
+  * 手元PCでログをずっと見守る
+  * 止まったら再起動
+  * 部屋から「字幕止まってる」という報告があれば再起動
+
+= 同時通訳セッションのトラブル
+
+  # image
+  # src = img/shirataki_arch_kaigionrails2025.png
+  # align = center
+  # relative_width = 100
+
+= 同時通訳セッションのトラブル
+
+* 音声の言語は動的に変えられない
+* 環境変数で現在の言語を指定している
+* 同時通訳のセッションはJAもENも流れてくる
+  * 翻訳がいらない
+
+\n
+  # image
+  # src = img/shirataki_arch_kaigionrails2025.png
+  # align = right
+  # relative_width = 35
+  # relative_margin_right = -8
+  # relative_margin_top = -20
+
+= 同時通訳セッションのトラブル
+
+* 音声の言語は動的に変えられない
+* 環境変数で現在の言語を指定している
+* 同時通訳のセッションはJAもENも流れてくる
+  * 翻訳がいらない
+* 解決策
+  * セッション切り替えのタイミングで素早く設定を切り替えて再起動
+  * 英語セッションが終わったら戻す
+
+\n
+  # image
+  # src = img/shirataki_arch_kaigionrails2025.png
+  # align = right
+  # relative_width = 35
+  # relative_margin_right = -8
+  # relative_margin_top = -20
+
+= なんとかKaigi on Rails 2025を乗り切った
+
+* おおむね動いていた(と思う)
+* 用意したリソースは十分だった
+  * t3.mediumを4台だっけ？(うろおぼえ)
+* ないよりマシ、くらいのものは提供できたのでは？
+
+= 見えてきた課題
+
+* 前述の問題
+  * 配信が止まったときの復旧
+  * 動的な翻訳の有無
+* SSEの再接続
+  * エラーになったら画面リロード
+* メトリックを取る
+  * 今何人見てるのか
+* 属人化
+  * 自分の脳内にしかない手順
+
+= AIに書かせてみてどうだった？
+
+* 時間がないときには本当に助かる
+  * 質はまあ……それなり
+* 自分のコードじゃない感じ
+  * 責任は自分にあるのはそう
+  * 「自分で書いた」感は本当に希薄
+
+= 「自分で書きたい」という想い
+
+* ((<URL:https://github.com/unasuke/shirataki/tree/hokurikurk01>))
+  * 北陸Ruby会議01に向けて少し手を入れた
+    * ffmpegの再起動
+    * view
+    * OpenTelemetry
+  * このdiffはほぼ手で書いた
+
+= たのしいRuby
+
+  # image
+  # src = img/joyful_ruby.jpg
+  # align = center
+  # relative_width = 70
+
+= まとめっぽく
+
+* 自分たちのカンファレンスは自分たちで作りたい
+* カンファレンスをやるのは楽しい
+* Rubyを書くのは楽しい

data/theme.rb

@@ -0,0 +1,116 @@
+@default_foreground ||= @foreground
+@default_background ||= @background
+@default_shadow_color ||= @shadow_color
+
+# pp font_families
+font_color             = '#333'
+@default_font          = 'BIZ UDPGothic'
+@font_family           = find_font_family(@default_font)
+@bold_font             = @default_font
+@bold_font_family      = find_font_family(@bold_font)
+@monospace_font        = 'Cica'
+@monospace_font_family = find_font_family(@monospace_font)
+
+@xxxx_large_font_size = screen_size(10 * Pango::SCALE)
+@xxx_large_font_size  = screen_size(8 * Pango::SCALE)
+@xx_large_font_size   = screen_size(6 * Pango::SCALE)
+@x_large_font_size    = screen_size(4.5 * Pango::SCALE)
+@large_font_size      = screen_size(4 * Pango::SCALE)
+@normal_font_size     = screen_size(3.5 * Pango::SCALE)
+@small_font_size      = screen_size(3.2  * Pango::SCALE)
+@x_small_font_size    = screen_size(3 * Pango::SCALE)
+@xx_small_font_size   = screen_size(2.8 * Pango::SCALE)
+@xxx_small_font_size  = screen_size(2.5 * Pango::SCALE)
+@script_font_size            = @x_small_font_size
+@large_script_font_size      = @small_font_size
+@x_large_script_font_size    = @large_font_size
+@title_slide_title_font_size = @xxx_large_font_size
+
+@block_quote_fill_color = "#f8f8f8"
+@preformatted_fill_color = "#f8f8f8"
+# @default_headline_line_color = font_color
+@default_headline_line_width = 0
+@default_headline_line_color = '#fff'
+
+@title_slide_background_image = 'img/theme/background_title.png'
+@slide_background_image = 'img/theme/background_with_logo.png'
+
+# set_foreground(@default_foreground)
+# set_background(@default_background)
+
+add_image_path("ruby-images")
+include_theme("default-icon")
+# include_theme("default-title-text")
+include_theme("default-text")
+include_theme("default-title-slide")
+include_theme("default-slide")
+include_theme("default-item-mark")
+include_theme("default-method-list")
+include_theme("default-preformatted")
+include_theme("default-block-quote")
+include_theme("default-foot-text")
+include_theme("default-description")
+include_theme("image")
+include_theme("table")
+include_theme("newline-in-slides")
+include_theme("per-slide-background-color")
+include_theme("background-image-toolkit")
+include_theme("per-slide-background-image")
+include_theme("body-background-image")
+include_theme("tag")
+include_theme("syntax-highlighting")
+include_theme("default-comment")
+
+include_theme("title-slide-background-image")
+include_theme("slide-background-image")
+
+match(TitleSlide, "*") do |elems|
+  elems.horizontal_centering = true
+  elems.prop_set("size", @large_font_size)
+  set_font_family(elems)
+end
+
+match(TitleSlide, Title) do |titles|
+  titles.prop_set("size", @title_slide_title_font_size)
+  titles.padding_bottom = @space * 2
+  titles.prop_set("weight", "SemiBold")
+end
+
+match(Slide, HeadLine) do |heads|
+  heads.margin_bottom = 50
+  heads.prop_set("size", @large_font_size)
+  heads.prop_set("weight", "bold")
+end
+
+match(TitleSlide) do |slides|
+  # slides.margin_left = 900
+  slides.vertical_centering = true
+  slides.prop_set "foreground", font_color
+  slides.prop_set("weight", "bold")
+end
+match(TitleSlide, Subtitle) do |subtitle|
+  subtitle.margin_top = -20
+  subtitle.prop_set("size", @large_font_size)
+end
+match(TitleSlide, Author) do |author|
+  author.margin_top = 50
+  author.prop_set("size", @large_font_size)
+  author.prop_set("weight", "normal")
+end
+match(TitleSlide, Place) do |place|
+  place.prop_set("size", @small_font_size)
+end
+match(TitleSlide, "*") do |elems|
+  elems.horizontal_centering = true
+end
+
+match(TitleSlide, Date) do |dates|
+  dates.prop_set("size", @small_font_size)
+  # dates.prop_set("style", "italic")
+end
+
+match(TitleSlide, ContentSource) do |sources|
+  sources.prop_set("size", @small_font_size)
+  sources.margin_bottom = @space
+  # sources.prop_set("style", "italic")
+end

metadata

@@ -0,0 +1,89 @@
+--- !ruby/object:Gem::Specification
+name: rabbit-slide-unasuke-hokurikurk01
+version: !ruby/object:Gem::Version
+  version: 1.0.0
+platform: ruby
+authors:
+- unasuke
+bindir: bin
+cert_chain: []
+date: 2025-12-06 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: rabbit
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 2.0.2
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 2.0.2
+description: https://regional.rubykaigi.org/hokuriku01/
+email:
+- yusuke1994525@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- ".rabbit"
+- README.md
+- Rakefile
+- _slide.md
+- _slide.rab
+- config.yaml
+- img/bio.png
+- img/claude_1.png
+- img/claude_2.png
+- img/claude_3.png
+- img/claude_4.png
+- img/claude_5.png
+- img/claude_6.png
+- img/claude_7.png
+- img/claude_8.png
+- img/esa_tech_todo.png
+- img/icon_face.jpeg
+- img/ioquatix_with_transcribe.jpg
+- img/joyful_ruby.jpg
+- img/kaigionrails_2025_keynote_speakers.png
+- img/kaigionrails_2025_policies.png
+- img/shirataki_arch_kaigionrails2025.png
+- img/shirataki_qr.svg
+- img/sorah_x_post.png
+- img/theme/background_blank.png
+- img/theme/background_title.png
+- img/theme/background_with_logo.png
+- img/vibe_coding_1.png
+- img/vibe_coding_2.png
+- img/vibe_coding_3.png
+- pdf/hokurikurk01-slide.pdf
+- slide.rab
+- theme.rb
+homepage: https://slide.rabbit-shocker.org/authors/unasuke/hokurikurk01/
+licenses:
+- MIT
+metadata:
+  source_code_uri: https://github.com/unasuke/hokurikurk01
+  markup_language: rd
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 3.6.9
+specification_version: 4
+summary: 北陸Ruby会議01
+test_files: []