次の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時を境に値がきっちり変わります。
<script type="text/ruby"> タグを1行書くだけでブラウザ上でRubyが動きます。Time.now も RUBY_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のコードがそのままブラウザで動くのは不思議な感覚です。
LEDに数字を表示するために、各文字の点灯パターンをハッシュで手書きしています。
'2' => [[1,1,1],[0,0,1],[1,1,1],[1,0,0],[1,1,1]],
1 が点灯、0 が消灯です。配列をそのまま眺めると、なんとなく "2" の形に見える…かも?
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