Add speakers section
Rails World 2026 用にスピーカー情報のコレクション、一覧ページ、個別詳細ページを新設し、23 名のスピーカーをフルバイオとトーク情報で掲載できるようにしました。ページ全体にネオン風デザインとソーシャルリンクを組み込み、既存サイトのレイアウトにシームレスに統合しています。
背景
この PR は Rails World 2026 の公式サイトにスピーカー情報を公開する必要性に応じて作成されました。従来はスピーカーのデータが CSV のみで管理され、ページ表示が実装されていませんでした。新たに Jekyll のコレクション world_speakers を設定し、Markdown ファイルで各スピーカーを定義することで、コンテンツ管理とページ生成を一元化しています。これにより、スピーカー情報の追加・更新がコードベースのプルリクエストだけで完結し、サイトの保守性が向上します。
技術的な変更
_config.yml に world_speakers コレクションの設定が追加され、output: true と layout: "world/2026/speaker" がデフォルトレイアウトとして定義されました。
- scope:
- path: "_world_speakers/2026"
- type: "world_speakers"
- values:
- layout: "world/2026/speaker"
スピーカー情報は _world_speakers/2026/speakers/*.md に Markdown 形式で格納され、23 件が追加されています。各ファイルは first_name, last_name, image_path, talk_title などのフロントマターを持ち、Jekyll が自動的にページを生成します。
新規レイアウト _layouts/world/2026/speaker.html が導入され、写真フレーム、バイオ、ソーシャルリンク、トークカードを組み込んだ詳細ページを提供します。ページ構造は CSS グリッドで左側に写真、右側にテキスト情報を配置し、neon‑glow‑outer ミックスインでネオン枠を実装しています。
<div class="speaker-page__photo-frame">
<img src="{{ page.image_path }}" alt="{{ page.first_name }} {{ page.last_name }}" loading="lazy">
</div>
表示デザインは _sass/world/2026/modules/_speaker_page.scss と _speakers_page.scss で定義され、カードレイアウトや 4 列グリッド、ヘッダーのカウボーイハットイラストが追加されています。また、トーク情報を表示する _sass/world/2026/modules/_talk_card.scss が新設され、同様にネオン枠と内部グローを適用しています。
スピーカーカルーセルは _includes/world/2026/homepage_sections/speaker_carousel.html を修正し、従来の keynote フラグと名前ソートから specific_order に基づくソートへ変更しました。これにより公式リストと同一順序での表示が保証されます。
{% assign all_speakers = site.world_speakers | where_exp: 'item', 'item.path contains "2026"' | sort: 'specific_order' %}
フォントロードは _includes/world/2026/head.html において、Clash Grotesk のウェイト 200,300 が追加され、デザインの細部調整が可能になりました。さらに _sass/world/2026/common/_social_icons.scss に GitHub アイコンのマスク画像が追加され、ソーシャルリンクの統一感が向上しています。
スポンサー情報は _data/world/2026/sponsors.yml に新規エントリ(SerpApi、Crunch Loop、TRMNL など)が追記され、_sass/world/2026/modules/_sponsor_grid.scss にロゴサイズやフィルタの調整が加えられました。これにより新規スポンサーのロゴがレイアウト崩れせず表示できます。
設計判断
スピーカー情報を Jekyll コレクション として管理する選択は、Markdown ベースのコンテンツをそのまま静的ページに変換できる点で最適でした。既存の world_speakers コレクションに layout を指定するだけで新規ページが生成でき、追加のビルドロジックが不要です。
specific_order によるソートは、公式プログラムと完全に一致させるために導入された決定的な判断です。元の keynote フラグと名前ソートでは順序が保証できなかったため、明示的な順序フィールドをフロントマターに持たせることで、将来のスケジュール変更にも柔軟に対応できます。
デザイン面では、既存の neon‑glow ミックスインを再利用し、写真枠・トークカード・スポンサーグリッドすべてに統一感のあるネオンエフェクトを適用しました。新規 SCSS モジュールは _speaker_page.scss, _speakers_page.scss, _talk_card.scss と分割し、責務を明確にすることでメンテナンス性を確保しています。
フォントウェイト拡張とソーシャルアイコンのマスク画像追加は、ビジュアル一貫性を保ちつつカスタマイズ性を向上させるための小規模な調整です。これらは既存のスタイルに最小限の変更で組み込まれ、ページ全体のロードやレンダリングへの影響はほぼありません。
まとめ
本 PR は Rails World 2026 のスピーカー情報を コレクション+レイアウト+スタイル の三層構造で実装し、23 名のスピーカーをフルバイオとトーク情報で公開できるようにしました。ソート順序の明示化、ネオンデザインの統一、フォントとアイコンの拡張により、ユーザー体験と管理効率の両方が向上しています。