自分たちの結婚式のためにサイトを立ち上げた

1年ちょっと前に妻と結婚式をしたのですが、自分たちなりの考えからオリジナル結婚式という選択をしました。

CRAZY WEDDINGさんに協力いただき、結婚式のコンセプトを考えていったのですが、どうしてもWebデザイナーの妻とWebエンジニアの僕でやりたいことがありました。

それは、招待状やご祝儀の支払い、参列者の紹介などをWebで行えるようにし、そのWebサイトを自分たちで立ち上げることです。何回かに分けて、どのような機能を持つサイトを立ち上げたのかや利用した技術スタックの紹介をしていきたいと思います。

サイトを立ち上げた理由

巷にはオンラインご祝儀やWeb招待状のサービスはすでにありますが、次のような理由から自分たちでサイトを立ち上げることにしました。

• Webエンジニアの自分とWebデザイナーの妻で何かものづくりをしたかった
• 当日身軽で来て帰ってもらうために配布物をなくしたり、ご祝儀の手渡しをなくしたかった
• 結婚式当日までにコンテンツを小出しにして、当日が楽しみになるようにワクワク感を演出したかった
• オリジナルのコンテンツを作りたかった
• 自分たちのスキルでどこまでできるか試してみたかった

参加者への連絡は、結婚式用のLINE公式アカウントを別途立ち上げて、それを利用しました。

結婚式サイトの機能

サイトに盛り込みたい機能は妻と相談して次のようにすることにしました。

• LINEアカウントを使ったログイン機能
• 出欠の登録と編集
• ご祝儀の支払い
• 結婚式に関する情報（日時、場所、新郎新婦プロフィール）
• 参加者の紹介ページ（Notionで管理している参加者情報と連動）
• 写真アルバム（結婚式用公式LINEに写真を送るとこのページに表示される）

機能の細かい説明については今後の記事に書いていきたいと思います。

利用したサービス・技術

基本的にはAWS Amplifyを利用してバックエンド構築からホスティングまで行いました。

バックエンドとしてはAWSのS3（写真アルバムのバケット）、Cognito（サイトの認証）、DynamoDB（参加者の情報保存）、AppSync+Lambda（主に外部サービスとの連携）などを利用しました。Amplifyの標準のリソースで手が届かないところはCustom Resourceを書きました。

決済機能構築にはStripeを、参加者紹介ページの情報元にはNotionを、写真アルバムのアップロードインターフェースには連絡用に使っていたLINE公式アカウントを利用しました。

フロントエンドにはJavaScriptとReact（当時はまだTypeScript, Next.jsなどは勉強していなかった）、AWS Lambdaは当時興味のあったGo言語で書きました。また、APIには（これも当時興味があった）GraphQLを採用しました。

妻との作業分担については、基本僕がバックエンドの構築と画面遷移を実装して、妻がページの内容を作り込んでいくという形になりました。

作ってみて

当初考えていた以上に大変で（主にAmplify CLIが思ったように動かなくて）、すべての作業が完了したのは結婚式当日の朝4時のことでした。

とても大変でしたが、妻のおかげもあってとても素敵なサイトにすることができました。参加してくれた友人たちや結婚式のスタッフさんも自分たちのサイトのことを褒めてくださってとても嬉しかったです。

また、認証機能や支払い機能などこれまでチャレンジしたことない機能作成を行うことができて自分自身の成長にも繋がりました。

次の記事からは、それぞれの機能についてもう少し詳しく書いていきたいと思います。