結婚式の席札を手書きしたくなかったので技術で解決した話

ちょうど１ヶ月に結婚式を挙げたのですが、とてもアナログな世界でエンジニアっぽいことができたので社内 LT 大会（通称 FFLT）で発表しました。その時の反応が良かったので、ちょっと修正してスライドを公開しました！

このスライドは Feedforce Advent Calendar 2019 の 23 日目です。

https://adventar.org/calendars/4169

昨日は maeda さんの「フィードフォースにポーカー部ができたってよ」でした。
ポーカー部、気づいたらすごく活発に活動してて、気づいたら大会で海外行ってました...ガチすぎる！！！(笑)

明日は 公式note編集部 の「Slackの雑チャンネル紹介（予定）」です。
たくさんありすぎて僕もよく分からないチャンネルをどこまで紹介するのか注目です！

Transcript

1. 結婚式の席札を手書きしたくな かったので技術で解決した話 @sukechannnn
2. • @sukechannnn（すけちゃん） • フィードフォース新卒3年目 • EC Booster というプロダクトを作って いるエンジニア • 2019/11/23 に結婚式をしました（ちょ うど１ヶ月前！） • このスライドは、超絶アナログな結婚 式業界に新風を巻き起こした話です （新風は巻き起こらない） 自己紹介
3. 結婚式の準備でこんなことがありました
4. 結婚式の準備でこんなことがありました • 席札にメッセージ書くの頑張ろうね！ by 奥さん
5. 結婚式の準備でこんなことがありました • 席札にメッセージ書くの頑張ろうね！ by 奥さん • 頑張る…？何を…？ by 私
6. 結婚式の準備でこんなことがありました • 席札にメッセージ書くの頑張ろうね！ by 奥さん • 頑張る…？何を…？ by 私 • 席札の裏にメッセージを手書きするんだよ〜知らないの？ by 奥さん
7. 結婚式の準備でこんなことがありました • 席札にメッセージ書くの頑張ろうね！ by 奥さん • 頑張る…？何を…？ by 私 • 席札の裏にメッセージを手書きするんだよ〜知らないの？ by 奥さん • 知らない！嫌だ！！！ by 私
8. 結婚式の準備でこんなことがありました • 席札にメッセージ書くの頑張ろうね！ by 奥さん • 頑張る…？何を…？ by 私 • 席札の裏にメッセージを手書きするんだよ〜知らないの？ by 奥さん • 知らない！嫌だ！！！ by 私 • 手書きしたくない！いつの時代だよ！タイピングさせろ！！！ by 私
9. というわけで、メラメラ燃えた私は、手書き しないでメッセージを伝える方法を考えは じめました
10. Webでメッセージを伝える方法 • メッセージカード（デジタル） • 作ったカードを表示する仕組み • 席札からアクセスできる仕組み 以下の３つが用意できれば良さそう
11. Webでメッセージを送るのに必要な仕組み • メッセージカード（デジタル） ◦ メッセージカードの画像 • 作ったカードを表示する仕組み ◦ 画像を配信するサーバー • 席札からアクセスできる仕組み ◦ QRコード 以下の３つが達成できれば良さそう
12. メッセージカードの画像
13. メッセージカードの画像 Canva を利用！ 1. 良い感じのメッセージカードの テンプレを作る 2. 全員分のメッセージを書く (spreadsheet) 3. ひたすらコピペ
14. メッセージカードの画像 • Canva そのままの画像 だとサイズが1.3MBとか あってでかい • ImageMagic でリサイズ するスクリプトを Ruby で実装 • 80KBくらいまで圧縮
15. 画像を配信するサーバー
16. • 使用した技術 ◦ Go と Fargate で画像が埋め込まれた超シンプルなHTMLを配信するサー バーを実装 ◦ 普段は Ruby on Rails + Heroku なので、ここぞとばかりに使ったことない技 術を使う 画像を配信するサーバー
17. • 超時間なかったので ◦ 来賓のリスト作成とかルーティングとかの管理に Ruby を使用 ◦ スタティックなサーバーにした（DB なし） ◦ Go & docker で画像配信できた！（超シンプルだけど確実） 画像を配信するサーバー
18. QRコード
19. • rqrcode gem ◦ https://github.com/whomwah/rqrcode • 生成したQRコード画像をImageMagickで変換 • 誰のQRコードか分かるように名前を入れたり QRコード
20. QRコード コンビニでインデックスプリントして切って貼り 付け（一番大変だった）
21. できたもの サーバー 席札に貼ってある QRコードを読み取 ると... かわいいメッ セージカードが 表示！ 嬉しい！！！
22. ハマったポイント（こんな単純なものでもハマるんですね ...） • Fargate のヘルスチェックでエラーになって、なぜか10分おきにタスクが走って無 限に再起動し続けた ◦ 個別のメッセージカード配信に特化したものなので、ルートパスは 404にしてた ◦ Fargate のヘルスチェックはデフォルト設定でルートを見に行くようになってた ◦ 現象に気づいたのが前日で、 10分おきにアクセス不能になっててめちゃくちゃ焦った ... ◦ 幸いにも原因に気づけたので、ヘルスチェックで見るパスを変えることで解決！ • Wifi では見れたメッセージカードがスマホの4Gだと表示できない ◦ 単純に画像サイズが大きすぎたんだけど、危うく気づかぬところだった ◦ 本番に近い環境での QA の大切さを噛み締めた
23. • 手書きしないで済んだ • ギリギリまで他の準備に充てられた ◦ 席札は1週間前に提出だが、QRコードだけ先に提出すれば良い ◦ おかげでメッセージの推敲に時間をかけられた • なんか弊社のテーブルが盛り上がってた ◦ 独自ドメイン取ってたからか、謎の調査が繰り広げられていた ◦ 「乗っ取られるぞ！」と脅さご助言頂いた やって良かったこと
24. やって良かったこと なによりみんな見れた！ 最後の最後まで不安だったので、本当に良かった ...。 作ったものがちゃんと利用されて、見た人が喜んでくれたのが本当に嬉しかったです。
25. おしまい