この記事はRails Girls Japan Advent Calendar 2025の1日目の記事です。
今年もトップバッターを務めます、だいたい仙台*1在住でソフトウェアエンジニアをしている あのぶる と申します。 Rails Girls関連のロールとしては以下のようなものを持っています。
- Sendai 1st、2ndのオーガナイザー
- Sendai, More!の運営
- Rails Girls Japanメンバー
- Rails Girls Gathering Japan 2022スタッフ
- Rails Girls 競プロ同好会の部長(？)
そのほかのRubyコミュニティ関連のロールとして、Sendai.rbのスタッフもしています。
今回は去年から温めすぎてようやく日の目を見た、Rails Girlsイベントページのスマホ対応の話をします。
railsgirls.comの日本国内向けイベントページをスマホ対応した(現在進行中)
「イベントページ」とはRails Girlsのワークショップイベントごとに用意するこのページのことです。 railsgirls.com (リンク先は例として2019年に開催したSendai 2ndのもの)
実は似たような方向性の話を去年のSendai Frontend Meetupでしていたんですが(こっちは会社の技術ブログの話)、時系列としては実はRails Girlsの方が先に始まっている話なのです。なんだかスマホ対応ばっかりやってるな？
そしてこれは余談なのですが、先行作業となるこちらで地道にCSS書いたのが結構骨で、それを経験したからこそのこれ↓という流れだったのでした。
時は2024年初め、何故かCSS書きたい病にかかった私はかねてより気になっていたRails Girlsワークショップイベントページのスマホ対応を始めたのでした。直前に前職の有休消化期間という長い冬休みがあったのに何故そこで……
サンプルとして直近で自分がオーガナイザーをしていたSendai 2ndのイベントページで実験的に組んでみて、意見を募るつもりでDraft状態のものを置いていたのですがそこからあまりリソースを割けずにいたのを今年になってようやく反映させたものです。成果は10月に開催されたSapporo 2ndのページでも確認することができます。Tokyo 18thの方も近々作業しようと思っているのでよろしくお願いします(？)。今後オーガナイザーをされる方も含め、イベントページを運用してみて何か気になるところがあればこっそり教えていただければ頑張って対応します。こっそりじゃなくても大丈夫です。
従来のものから構成として大きく変わっているのはインフォメーションの欄(主に会場情報)がモバイル表示だとタイムテーブルより優先して表示されるようになることと、パートナー(スポンサー)欄がページ下部に移動した代わりに表示が大きくなったことかなと思います。
個別にスマホ対応をしていたEhime 2ndのページも結構参考にさせてもらいました 🙏
今後の展望など
諸々含めて出来れば今までのHTMLの構造を崩さずに行きたいとは思いつつ、私の力不足かなかなか難しく… Sapporo 2ndのときのPull Requestを見ても分かりますがけっこうがっつり構造が変わっているためあまり気軽な移行ができず、直近のイベントから遡る形で順次対応していこうと思っています。工事現場(Pull Request)を見かけましたら温かい目で見守ってくださいませ。試しにCopilotに手伝ってみてもらおうかな…？
スマホ画面の宿命ではありますが、真っ当な表示サイズですべての情報を出そうとするとページがだいぶ縦長になってしまうのが現在の一番の悩みどころ。今後の展望としてはスマホ表示向けの画面構成の作り方なんかも勉強したいなと思ったりしています。ご興味のある方はお声がけいただけるとうれしいです。
Rails Girls Japanのアドベントカレンダーはまだまだ執筆者募集中です！よろしくお願いしますー
