謎解きサイトを Rails SPA で作って
RubyKaigi で配布した話
Leaner Technologies, Inc.
黒曜
(@kokuyouwind)
$ whoami
-
黒曜 / @kokuyouwind
-
Leaner Technologies Inc. 所属
-
Railsエンジニア・SRE
-
今はLeanerの認証基盤サービスを
作ってます

2025年のドヤ!
Kaigi on Rails で認証基盤の話をした!



Software Designに記事を寄稿した!

RubyKaigiでゲームナイトを開催!

個人的イチオシのドヤ!
RubyKaigiで自作謎解きを配布!


Cursor YOLO使って1時間くらいで
Rails SPA に移植
当初LINEアプリで作ったが、
海外の人はLINE使ってないと気づいた
デモ
実装 - 回答判定(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 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実装 - カタカナ変換(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" } を指定ドヤポイント
-
謎解きの主題にイベントに因んだ題材を盛り込んだ
-
Ruby言語, RubyKaigi, 松山にまつわるもの
-
リーナーの会社や主催イベントにまつわるもの
-
-
AIを活かして手早くサイト化できた
-
知ってるけど使ったことのない技術を実例で試せた
-
Turbo Stream
-
Stimulus
-
来年もなんかやるぞ!!!

BuriKaigiも登壇するのでよろしくです

謎解きサイトを Rails SPA で作って RubyKaigi で配布した話
By 黒曜
謎解きサイトを Rails SPA で作って RubyKaigi で配布した話
忘年LT大会~今年のドヤ!を発表しあおう~ の発表資料です https://leanertechnologies.connpass.com/event/376577/
- 92