スポンサーブースの企画で 『RubyKaigi Map』を 作った話

RubyKaigi2026のスポンサーブース出展のため、簡単なwebアプリケーションを作成した話。
簡単な技術選定と、AI活用で本業と並行して作成した。

Transcript

1. 　 ブース出展に向けてアプリを作った話 2026/05/13 After RubyKaigi 2026 株式会社TOKIUM 池⽥ 新
2. 2 ⾃⼰紹介 池⽥ 新 Arata Ikeda ▪ 経歴 - 2002年9⽉ 北海道⽣まれ、⼤阪育ち - 2025年4⽉ 株式会社TOKIUMに新卒⼊社 - 5⽉ 未経験エンジニアとしてRailsの学習開始 - 7⽉ SaaS製品、TOKIUMインボイス開発チームにジョイン - 同チームにて、現在もエンジニアとして従事 プロフィール - ⼤学時代はアイスホッケー部に所属していました - 趣味はファッションです！
3. 3 今⽇話すこと スポンサーブースの企画で 『RubyKaigi Map』を 作った話
4. 4 作った動機‧なぜ作ったか ▪ 20回⽬の節⽬ • 2006年の⽇本Rubyカンファレ ンスから20年。今回はちょう ど20回⽬の開催 • 初の北海道開催で、RubyKaigi がついに全国を巡った • 函館まで来た⼈は、これまで どの開催地を巡ってきたのだ ろう？ ▪ 会話のきっかけ • 「⽴ち⽌まってもらう」から 「楽しめるブース」へ • 参加歴は、Rubyistなら誰でも 答えられる共通体験 • 初参加でも、過去回をたどる だけでRubyKaigiの歴史に⼊っ ていける ▪ Webアプリへ転換 • 最初は地図パネルにステッ カーを貼るアナログ案 • 20年の節⽬を、もっと動きの ある体験として⾒せたくなっ た
5. 5 実装体制‧設計 ▪ 体制（3名） • UI / フロントエンド ← ⾃分 • バックエンド、Googleフォーム (テキスト収集) • インフラ / 全体設計 (レビュー) ▪ 技術選定 • Ruby on Rails 8.1 (Service / Job / Controller でデー タの取得‧集計‧配信) • Googleフォームで⼊⼒、 スプレッドシートでデータ蓄積 • SVG + Vanilla JS (フロントは単⼀HTMLで完結) • Docker + Render ▪ ⼤事にしたこと シンプルさ 必要な機能に絞り、3⽇間のイベントに最適化 Ruby使う！ RubyKaigiだからこそ、当然のようにRubyで書く 綺麗なアウトプット 実装1ヶ⽉の短期間でも妥協せず形にする
6. 6 こだわり • 何個もUI案を作成しては修正の繰り返し • 過去20年のキービジュアルを、地図上のアイコンに • カードの配置は、地図全体のバランスを微調整を 何度も繰り返し • 投票数は数字で出さず、ドットの⼤きさで直感的に 1. UIへのこだわり UI案たち
7. こだわり 7 • Live Feed = 感想が誰かの記憶になる場所 • アナログなパネル形式ではできないこと • 「⾃分の "良かった" が、別の誰かの "懐かしい" になる」 2. フィード画⾯
8. こだわり 8 3. AI駆動開発 実装の⼤部分を AI に任せて短期間で形に！ • AIが得意な部分（型のある コード）は任せる • AIが苦⼿な部分(今回はUI上の バランス、ぱっと⾒の印象)は ⽬で⾒て直していく • TOKIUM が⽇頃実践している "AI ネイティブな開発" の縮図
9. 9 あとはRubyKaigi現地で、お披露⽬するだけ…！ 地震により 現地参加⾒合わせ😭 ないちゃった😭
10. 10 まとめ 1. AIがあれば思い描いたものを表現するのに時間はいらない 2. 来年こそはRubyKaigiを味わってみたい！！