2019/12/13 【学生限定】Akatsuki Geek Live Vol.4【LT会：12/13（金）】 にて発表した資料です。 https://aktsk.connpass.com/event/154350/ 社内のイベントをRailsで作ったウェブアプリで盛り上げた話をしました。

1. アカツキ ちょう
ウェブアプリで
イベントを盛り上げる
1

2. 今日話すこと
エンジニアとして、ウェブアプリで宴会の余興を盛り上げた話を
します。
2

3. 自己紹介：ちょう
アカツキ2019新卒
サーバーエンジニア
現役外国人
League of Legendsをやっています
最近はポケモン厳選にはまってます
3

4. 話の背景
アカツキでは人と人の繋がりを大切にしています
毎月各チームでチームディナーが開催され、
食事とともに、余興のレクで絆を作ったり...
100人規模のプロジェクトで
とある月の余興のレクを私が担当することになりました...
4

5. ウェブアプリを余興に導入
必要な情報は手元の携帯でいつでも確認できる！
複雑な仕様でも対応できる！最高！
言葉の遊び
「ワード・リンク・バトル」
をRailsでサクッと作ります
5
普通にレクを用意してもいいけど、どうせなら...
エンジニアにしか作れないものを作ろう！

6. 【仕様】ワード・リンク・バトル
一人ひとりに言葉が割り振られている
5 - 7人でチームを作って
言葉を繋ぎ、文を投稿する
自分以外の一番面白い文に投票し
票数が一番高かったチームが優勝
6
PEN APPLE PINEAPPLE

7. ウェブアプリの実装
ゲームの進行と共に表示内容が変わる
➡フェーズを表す変数を作って
キャッシュに載せる
進行状況に応じたページ、内容を返せる（同じ
URLでも）
7
開始前
開始
グループ作り
投稿
投票
結果発表
0
100
200
300
400
500

8. 受け付ける操作（Controller）
8
Controller 必要な機能（抜粋） フェーズ
セッション
ログイン
ログアウト
チーム
チーム作成
メンバー追加
[ 200 - 400 )
投稿 文の投稿（修正） [ 300 - 400 )
投票
投票（修正）
票数一覧
[ 400 - 500 )
[ 500 - ∞ )
ほかにもお待ちいただく画面とか、ルール説明画面などなど

9. データモデル
9
参加者 チーム

10. ビュー
Bootstrapで頑張る
10
待ち画面 投稿画面
・再読み込みボタンを作る
・JSで使われるワードをハイライト
などなど
本番で実際作られた文⬇

11. もちろん、管理画面も
運営メンバーしか触らないので
サクッと作りました〜
進行状況や途中結果の確認は
ちゃんと入っています。
11

12. 負荷を考慮
100人だとはいえ、再読み込みの連打ともなると、それなりに負
荷があるのでは？（Railsが遅いと言いますし...）
かといって、負荷試験をする暇もなく...
投票数集計の部分をRedisキャッシュに載せた
（もちろんMySQLにも保存されるが、クエリをいちいち叩かないように）
12

13. いざ、デプロイ！
自前サーバーにデプロイする
環境：ConoHa VPS
- メモリ：2GB、CPU：３コア
同じホスト上でNginx（PHPサイトがいくつか）、Railsのサーバー、MySQL、Redisなど
が存在
（自分のデプロイスクリプトを書いたり...） 13
インフラ構造

14. とても楽しかったと好評！
サーバーエンジニアたちも盛り上がった
管理画面にハッキングを仕掛けたり...
単語がハイライトされないバグ
を見つけたり...
さすが、ゲーム会社... 14
雑談チャット⬇
「楽しかった」という画像
公開できず、すみません！

15. 負荷大丈夫か？
結果：大丈夫でした。
（メモリ使用、CPU使用ともに）全然上がりませんでした。
15
リクエスト
最大：881rpm
CPU
最大：4%
Load Average
最大：< 0.25%

16. 結論
ウェブアプリは余興にも使える！
Railsでサクッと作れるぜ！
気軽に作れる、周りにも喜ばれる
ぜひ、試してみてください！
16
一緒にやってくれた幹事たちに感謝！
やってみてもいいこと
負荷試験をしてキャパシティプランニング
> どのくらいのリクエストをさばけるか
> 必要なインスタンスサイズの見積もり
幹事たち
公開できず、すみません！