こんにちは、プロダクトエンジニアのkinoppydです。ついにやってきましたね、RubyKaigiの季節ですよ。あまりにもRubyKaigiが待ち遠しくて、もう気持ちは松山の鯛みたいなもんですな。
さて、RubyKaigiでは毎年公式スケジュールアプリ Schedule.select を提供しているSmartHRですが、今年も出ますよスケジュールアプリが！
でもまだ、2024年のバージョンですね！ いま2025年版を最終調整中です。今回は、そんな2025年版の先取り解説です。
Schedule.select 2025
公式スケジュールアプリはOSSとして開発しているので、去年の末あたりから準備していたのがGitHubを見るとわかります。
そうです。今回は早めに動きながら、以下のような大きな変更をたくさん加えています。
- デザインの刷新
- PostgreSQLからSQLite3への移行
- Solid三兄弟の導入（cableはまだ使うかどうかわかりませんが……）
- Rails 8へのアップグレードとPWA対応
- Kamalによるデプロイ
この5つを大きなFeatureとして開発を進めてきました。それぞれの内容に関して、1つずつ専用の記事を書いて解説したいと思います。1回目の今回は、デザインの刷新に関してのお話をします。
Schedule.selectのデザインはどこから始まり、どこに行くのか
この公式スケジュールアプリは、2021年の RubyKaigi Takeout で使用するために開発されました。
2021年のRubyKaigiがどのような状況であったかというと、コロナ禍のまっただ中でオフライン開催中止を余儀なくされ、その中でもなんとかオンライン配信という形で開催された2020年に次ぐ、2回目のオンライン開催の年でした。そのため、当時の状況を考えてデザインでは以下のような点を重視して作っていました。
- 自宅で見るので、PCビューが最優先
- なるべくSNSでシェアして楽しめるような仕掛けを作る
- 急遽作ったので、ReactコンポーネントであるSmartHR UIを採用
その後、ハイブリッド開催になった2022年以降も様々なコード的変更を加えていったのですが、ベースとなる機能やデザインは2021年のものを踏襲していました。
ですが、RubyKaigi 2024から少し様子が変わります。ハイブリッド開催であったRubyKaigi 2023とは変わり、RubyKaigi 2024は完全オフラインイベントに回帰しました。ハイブリッドになった頃から薄々と気づいていたのですが、スケジュールアプリの使われ方も、当初の想定とは異なりモバイルが中心に移っていきました。ですが、SmartHR UIはビジネスの特性上あまりモバイルに強くなく、またReactを使ったMPAもRailsの更新や機能追加等の妨げになっていました。
そこで、2024年はフロントをSmartHR UIからTailwind CSSとHotwireに移行しました。2024年はデザインを変更せずに移行だけ行い、2025年以降によりモバイルを意識した新デザインを適用することを目標としていました。
そして2025年、ついに新しいデザインを適用します。新デザインの方式は、次のようなものです。
- 会場で使われることを考え、完全モバイルファースト
- カンファレンスの現場で知りたい情報を少ない画面に集約する
デザインは、SmartHRのデザイナであるたふみさんに作成をしてもらいました。「SmartHR UIのデザインから離れた、カンファレンスの困りごとを解決するUIを、仕事とは無関係に自由に作ってほしいです」とお願いしたところ、素晴らしいUIを作り上げてくれました。
x.com私は「プロダクトデザイナーを辞めたいプロダクトデザイナーの集まり」を開きたいです
— たふみ (@CreatorQsF) 2024年10月4日
新UI
新UIでは、これまでいくつかのページに分かれていた機能をトップページに集約しています。ファーストビューで、カンファレンス中に必要な情報をすべて手に入れられるように作られています。
スケジュールページ
これまで、ルートページはアプリの説明の画面でしたが、ファーストビューで知りたいのはスケジュールだということでスケジュール画面がルートになりました。こちらが新しいトップの画像です。
（ここから先に出てくるすべてのスクリーンショットは、すべて開発中のFigmaのものです。一部文字列も2024になっていますが、リリース時は2025になります）
トップページにスケジュール作成機能がそのまま来ています。モバイルの画面は縦長なので、左の初期表示ではある時間帯のセッション一覧は縦長に表示されています。ですが、聴講するセッションを決定すると、右のようにその時間帯はそのセッションのみが表示されるようになり表示がシュッとします。
視聴するセッションを選択すると、時間帯表示の横に行くべき場所が表示されるようになります。スクリーンショットの例だと、右側の一番上の時間帯はLarge Hallに行けばよいことがわかります。このように、情報を選択していくと、自分に必要な情報が徐々に浮き上がってきて、最終的にはひと目で次に何をすれば良いのかを知ることができるようになります。会場では常に時間に追われるため、この機能で次にどこに行けばよいのかわからないストレスから解放されてください！
次はタイムライン機能の画像です。
トップ画面の左側に、タイムラインとセッションが開催されている時間のプロットが表示されています。セッションを選択した時間帯は濃い色に、未選択の時間帯は破線で表示され、まるでカレンダーを見ているようにどれくらい空き時間があるのかをひと目で知ることができます。
ひと目でセッションの時間を知ることで、このセッションがどれくらい長いのか、休憩時間がどれくらいあるのか、などをパッと考えることができます。スポンサーブースを回るときなども、現在の時間からどれくらいの余裕があるのかな、などをこの画面でパッと知ることができます。
次は、schedule.blank? 機能の画像です
視聴するセッションを選択していない仲間と、どこかにご飯に行ったり、セッション以外のものを見て回ったりなどのコミュニケーションが生まれることを期待している機能です。
プロフィールページ
プロフィール画面は次の画像のようなります。
シュッとしました。フレンド追加用のQRコードが常に表示されるようになりましたね。
チームページ
チームページは次の画像のようになります。
去年までとは異なり、チームページからスケジュール一覧はなくし、スケジュール一覧はトップページに統合しました。チームページでは純粋にメンバーの管理などを行います。
新UIのまとめ
以上です。ページ数が減り、情報がギュッと集約されています。メニューを見ると、遷移できるページの少なさが伝わると思います。
Hotwire
去年に引き続き、今回もフロントはフルHotwireで作成されています。スケジュール画面のテーブルタグを廃止し、よりHotwireフレンドリーな画面構成になりました。
去年感じたHotwireの欠点として、高レイテンシにめっぽう弱いという点です。そのため、去年はHerokuのUSリージョンを使っていましたが、今年はGoogle Cloudのasia-northeast1にサーバーを置いています。これによって、応答速度が改善され、より体験がよくなると期待しています。
いつリリースされるの？
ここまでの内容を見て、Schedule.selectのページに行ってみた方は、「デザイン変わってないじゃん」と思うかもしれません。すみません、現在はまだ開発中で、2025/03/28(金)に開催されるSmartHRの事前勉強会の日にリリースを目指しています。
次回
次回はSchedule.selectのPostgreSQLからSQLite3への移行をお話ししようと思います。
いつもの
求めています。いや、なにとはいいませんがね。求めてるんですよ。そういうことです。わかりますね？ お求められてください。
