謎解きサイトを 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