こんにちは、開発本部の松浦です。先日開催されたPHPerKaigi2024にてPR TIMESはプラチナプランとして協賛し、イベントスポンサーブースとして出展しました。
今回はブース企画について掘り下げて行こうと思います。
企画の制作過程
以前参加したPHPカンファレンス2023では、「PHPのコードを印刷した問題用紙を配り、そのコード上にあるバグを見つける」といった企画を行い、160人以上の方が企画に参加しました。（PHPカンファレンス2023: https://developers.prtimes.jp/2023/10/23/phpcon2023-booth/）
企画自体の感触は良かったのですが、下記のような反省点がありました。
- 問題自体の難易度調整が難しい
- X(Twitter)への反応があまりなかった
- ブースに常時エンジニアが在籍する必要がある
- １回の体験に時間がかかってしまう
上記を踏まえ、PHPerKaigi2024はPHPカンファレンスと違い3日開催されるとのことでしたので、3日間毎日来ても飽きないような楽しい企画にしたいという思いがありました。
そこで今回は問題形式を見送ることにしました。新たな企画をチーム内で壁打ちした結果、競技性のある簡単なゲームにしようという流れになりました。いくつか案が出ていましたが、meiheiさんが案の一つである10秒ストップチャレンジゲームとPHPのバージョンを掛け合わせたゲームの案が出ました。
PHPになるべく関係のあるゲームにしたかったので、チーム内でもすぐにその案の方向で制作することに決まりました。ブース企画担当であった私と土屋さんで企画の作成を進め、uzullaさんのレビューと合わせながら**「PHP8.3秒チャレンジ」**というブース企画となりました。
最初は実機のストップウォッチでやる案もありましたが、PHPを使用したいことや、結果や記録をX(Twitter)への共有をしたいという思いがあり、Webアプリとして開発することになりました。
開発
今回はゲームといっても実際のところはストップウォッチを実装すればほぼ完成といったものだったため、難易度はそこまで高くないWebアプリ開発となりました。
技術スタックは下記になりました。
- フロントエンド
- React
- Bun + Vite
- Tailwind CSS
- バックエンド
- Leaf PHP
- MySQL
- インフラ
- AWS EC2
バックエンドはもちろんPHP8.3です。フロントエンドは自分が担当し、バックエンドは土屋さんに担当していただきました。
今回初めて個人的に以前から気になっていたBun + Viteを使用しましたが、売りにしている速さだけあってnpmやNode.jsと比べると格段に早かったです。特にnpm installと比べると体感で2, 3倍ぐらい速かったと思います。
制作にあたって、苦戦したところ
フロントエンドの方は主にどのようなデザインにするかで苦労しました。最初は3D表示や、アニメーションを取り入れて豪華な演出にしようか検討しましたが、実現するためには今の知識では難易度が高かったため一旦最小構成で作ることにしました。
バックエンドを担当した土屋さんに聞いたところ、下記が苦戦したそうです。
バックエンドとフロントエンドを完全に分けた関係で、API仕様についての認識を揃えるのに苦労しました。最終的には松浦さんに聞きながらAPI TestをPactum JSで作成し、お互いの認識がずれていそうな時にテストを参照して仕様を確認できるようにしました。
終わりに
社内でテストプレイを実施しましたが、その時の最高記録が±0.001でした。本番で±0が出るか怪しかったため、「±0の方は景品を全て渡す！」という指標にしていましたが、本番ではなんと2人の方が±0が出ました！！
3日間に及ぶPHPerKaigi2024本番では、140人以上の方が「PHP8.3秒チャレンジ」に参加していただきました。X(Twitter)上では以前の企画よりも多くの声や反響があり、より多くの方が企画を楽しんでいただけて大変嬉しいです！
https://twitter.com/search?q=%23prtimes_dev until:2024-03-10 since:2024-03-06&src=typed_query&f=live
プレイしていただき、ありがとうございました！
