Road to RubyKaigi 2027 in Miyazaki

2026-04-28 ruby /posts/2026/2026-04-28-ruby-kaigi-counter.png

次のRubyKaigiまでの日数を表示するカウンターを作りました。数え方はお馴染みの(?)開催前日=Day0になる奴です。本当はワークショップで頂いたRP2040搭載のBoard43に実装して壁に飾っとこうと思って始めたんですが、現在時刻の取得方法を思いつかず…断念して、ruby.wasmを使ったウェブページとして実装しました。誰かよいアイデアがあれば教えてほしいです🙏

# 2027/4/14 までの日数 (4/12=-1, 4/13=0, 4/14=1)
now = Time.now
day1 = Time.new(2027,4,14, 0, 0, 0, "+09:00")
n = ((now - day1 + 86400) / 86400).ceil

day1 はカンファレンス1日目(4/14)の深夜0時です。now - day1 は秒単位の差なので、4/14の深夜0時ちょうどならゼロ、4/13の深夜0時なら -86400 になります。そのまま86400で割ると4/14=0・4/13=-1 になってしまい、4/13を「Day0」と呼べなくなります。分子に86400を足すことで1日分前倒しにして、4/13=0・4/14=1 が得られます。

ceil(切り上げ)を使っているのは、カウントダウンらしい表示にするためです。「あと0.x日」は「あと1日」と表示したほうが自然ですし、深夜0時を境に値がきっちり変わります。

RubyKaigi 2027 Counter

おまけ1: ruby.wasmでブラウザ上でRubyを動かす

<script type="text/ruby"> タグを1行書くだけでブラウザ上でRubyが動きます。Time.nowRUBY_VERSION もそのまま使えます。DOMを触りたいときは JS.global[:document] 経由になります。

<script src="https://cdn.jsdelivr.net/npm/@ruby/4.0-wasm-wasi/dist/browser.script.iife.js"></script>
<script type="text/ruby">
  require 'js'
  doc = JS.global[:document]
  doc.getElementById("debug")[:textContent] = "Hello from Ruby #{RUBY_VERSION}!"
</script>

ロード時間はそれなりにかかりますが、Rubyのコードがそのままブラウザで動くのは不思議な感覚です。

おまけ2: 3×5ピクセルフォントを手書きする

LEDに数字を表示するために、各文字の点灯パターンをハッシュで手書きしています。

'2' => [[1,1,1],[0,0,1],[1,1,1],[1,0,0],[1,1,1]],

1 が点灯、0 が消灯です。配列をそのまま眺めると、なんとなく "2" の形に見える…かも?

おまけ3: Rubyのロゴ

Board43風のLEDクラスを作って、set_rgbを使って描画しています。

[51,52,53,66,67,68,69,70,83,84,85,100].each do |pos|
  led.set_rgb(pos, 230, 50, 25)
end
RubyKaigi 2026 Day3 at Hakodate