謎解きサイトを Rails SPA で作って RubyKaigi で配布した話

「忘年LT大会～今年のドヤ！を発表しあおう～」の発表資料です。
https://leanertechnologies.connpass.com/event/376577/

Transcript

1. 謎解きサイトを Rails SPA で作って RubyKaigi で配布した話 Leaner Technologies, Inc. 黒曜 (@kokuyouwind) 1
2. $ whoami 黒曜 / @kokuyouwind Leaner Technologies Inc. 所属 Rails エンジニア・SRE 今はLeaner の認証基盤サービスを 作ってます 2
3. 2025 年のドヤ！ 3
4. Kaigi on Rails で認証基盤の話をした！ https://kaigionrails.org/2025/schedule/#day2 4
5. https://gihyo.jp/magazine/SD/archive/2025/202511 Software Design に記事を寄稿した！ 5
6. RubyKaigi でゲームナイトを開催！ https://leanertechnologies.connpass.com/event/349031/ 6
7. 個⼈的イチオシのドヤ！ 7
8. RubyKaigi で⾃作謎解きを配布！ 8
9. Cursor YOLO 使って1 時間くらいで Rails SPA に移植 当初LINE アプリで作ったが、 海外の⼈はLINE 使ってないと気づいた 9
10. https://escape-game-rubykaigi-2025.kokuyouwind.com/ デモ 10
11. 実装 - 回答判定(Turbo Stream) class KeyController < ApplicationController CORRECT_ANSWERS = [ " ほげ", # 0: 問題1, " ふが", # 1: 問題2 ] def update # 正解判定 key_id = params[:id].to_i is_correct = (params[:value] == CORRECT_ANSWERS[key_id]) if is_correct # 正解の場合のみsession に値を保存 session["key_#{key_id}_value"] = params[:value] else # 不正解の場合はflash.now に不正解フラグを設定 flash.now["key_#{key_id}_incorrect"] = true # 不正解でも⼊⼒値をリクエスト内で保持 @input_value = params[:value] end 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 render turbo_stream: [ turbo_stream.replace( "key_answer_form_#{key_id}", partial: "top/key_answer_form", locals: { index: key_id } ), turbo_stream.replace( "key_answers_table", partial: "top/key_answers_table" ) ] end end 1 2 3 4 5 6 7 8 9 10 11 12 13 11
12. 実装 - カタカナ変換(Stimulus) // クロスワードの答え⼊⼒をカタカナに変換するコントローラー // app/javascript/controllers/key_input_controller.js export default class extends Controller { static targets = ["incorrectIcon", "input", "form"] connect() { // コントローラーが接続された時の処理 // フォーム送信前にカタカナ変換を⾏う if (this.hasFormTarget) { this.formTarget.addEventListener( 'submit', this.handleSubmit.bind(this)) } } ... // 利⽤側ではdata: { key_input_target: "form" } を指定 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 12
13. ドヤポイント 謎解きの主題にイベントに因んだ題材を盛り込んだ Ruby ⾔語, RubyKaigi, 松⼭にまつわるもの リーナーの会社や主催イベントにまつわるもの AI を活かして⼿早くサイト化できた 知ってるけど使ったことのない技術を実例で試せた Turbo Stream Stimulus 13
14. 来年もなんかやるぞ！！！ https://rubykaigi.org/2026/ 14
15. BuriKaigi も登壇するのでよろしくです https://fortee.jp/burikaigi-2026/proposal/59dc9edc-5d05-4ef4-a82c-39f37df4df5b 15