【ITニュース解説】I Built a Modern Matrimonial Biodata & Wedding Invite Maker with Next.js 16 & Cloudflare Edge 💍

インドの結婚文化では、お見合いの際に「結婚バイオデータ」と呼ばれる詳細な自己紹介資料が不可欠となる。これは個人の経歴、学歴、職歴、家族構成、占星術（クンダリ）の情報、そして理想の相手の条件などを網羅した1～2ページの文書で、WhatsAppなどを通じて共有されることが多い。しかし、既存のツールにはいくつか大きな問題があった。例えば、Microsoft Wordのテンプレートはモバイル端末でレイアウトが崩れやすく、多くのウェブサイトはユーザーに強制的にアカウント作成や電話番号の入力、料金の支払いを求め、さらに広告だらけでデザインも古臭いものばかりだった。

このような状況を解決するため、「BiodataMaker.org」という、高速でモダン、そしてプライバシーを尊重する新しいツールがゼロから開発された。このツールは、既存の不満点を解消し、ユーザーが手軽に結婚バイオデータや結婚式の招待状を作成できるように設計されている。

BiodataMaker.orgの開発では、最先端の技術スタックと堅牢なアーキテクチャが採用された。ウェブアプリケーションの基盤には「Next.js 16（App Router）」が選ばれている。これは、ページの表示を高速化し、Reactという人気のライブラリの最新機能を活用できるフレームワークである。ページ間の遷移が瞬時に行われ、静的なウェブサイトの生成も効率的にできるのが特徴だ。

デザイン面では、「Tailwind CSS v4」というスタイリングフレームワークが採用された。これは、非常に軽量なCSS（スタイルシート）を生成し、上品なダーク／ゴールドの配色でモダンなインターフェースを実現している。

ユーザー認証には「Firebase Auth」が使われている。特に注目すべきは、匿名でのゲストサインインと「Google One Tap」という、ほぼ手間なくGoogleアカウントでログインできる仕組みが導入されている点である。これにより、ユーザーは煩わしい登録プロセスなしにサービスを使い始めることができる。

作成したバイオデータの下書きなどをリアルタイムで複数のデバイス間で同期するためには、「Cloud Firestore」というデータベースが利用されている。これは、データの変更が即座に反映される特性を持つ。写真などの大きなファイルを保存する場所としては、「Cloudflare R2」が選ばれた。これは、Amazon S3という一般的なオブジェクトストレージと互換性がありながら、データ転送にかかる費用（エグレスフィー）がゼロである点が大きなメリットだ。

ウェブサイトのホスティングと高速なコンテンツ配信には、「Cloudflare Pages」が使われている。これにより、世界中に分散されたサーバー（CDN、コンテンツデリバリネットワーク）にウェブサイトのコンテンツがキャッシュされ、ユーザーから見てわずか数ミリ秒という驚異的な速さでページが表示される。

そして、最も重要な機能の一つであるPDFの生成には、「html2canvas-pro」と「jsPDF」というライブラリが組み合わせて使われている。これは、サーバー上で複雑な処理を行うのではなく、ユーザーのウェブブラウザ内でPDFを生成する「クライアントサイド生成」という方式を採用している。この方式の利点は、サーバーにかかるコストを大幅に削減できることにある。

このアプリケーションの根底にある開発哲学は「ゼロ強制サインアップ」である。多くのウェブツールが、サービスを利用する前にログインを強制することでユーザーに不満を与えているが、BiodataMaker.orgでは、まずスタジオを開いてテンプレートを選び、詳細を入力し、写真をアップロードしたら、すぐにPDFのダウンロードやWhatsApp用HD画像の生成ができる。メールアドレスや電話番号、支払い情報の入力を求められることは一切ない。もし、異なるデバイス間で下書きを同期したい場合に初めて、Firebaseの匿名認証とGoogle One Tapを使って、ワンクリックでアカウントと接続できる仕組みになっている。

開発の過程では、いくつかの興味深い技術的課題が解決された。

一つ目は、「汚染されたキャンバス（Tainted Canvases）」の問題なしに、ブラウザ内で複数ページのPDFを生成することであった。サーバーサイドでPDFを生成する方法（例えばPuppeteerを使う方法）は、規模が大きくなると費用が高く、処理も遅くなる傾向があるため、開発者はクライアントサイド生成を選んだ。しかし、ユーザーがCDN（コンテンツデリバリネットワーク）にアップロードした写真を使うと、ウェブブラウザのセキュリティ機能であるCORS（Cross-Origin Resource Sharing）ポリシーによって「SecurityError: The operation is insecure」というエラーが発生し、キャンバスが「汚染」されてPDF生成ができなくなる問題に直面した。これを解決するため、すべての画像ファイルを一時的にBase64 Data URLという形式に変換し、HTMLに直接埋め込む前処理のパイプラインが実装された。Base64は画像データをテキスト形式で表現する方法で、これにより画像が別のサーバーから読み込まれているというCORSの問題を回避し、PDF生成がモバイルSafariやAndroidのWebビューでも確実に成功するようになった。

二つ目は、画像のファイルサイズを大幅に削減することであった。ホームページに表示される28枚のテンプレートプレビュー画像は、圧縮されていないPNG形式だと合計で15MB近くにもなり、ページの読み込み速度を低下させる原因となっていた。そこで、Cloudflare Workersのような実行時に画像最適化を行うサーバーではなく、ビルド時に自動で画像を処理するCI/CD（継続的インテグレーション/継続的デリバリー）の仕組みを導入した。「sharp」という画像処理ライブラリを使い、アプリケーションのビルド（npm run build）が実行されるたびに、プレビュー画像を最大幅700pxにリサイズし、8ビットカラーのパレット量子化とレベル9の圧縮を自動で行うようにした。この結果、プレビュー画像の総ファイルサイズは14.14MBから1.69MBへと約88%削減され、見た目の品質を損なうことなく、ページの読み込み速度が大幅に向上した。

三つ目は、Cloudflare Edgeのキャッシュルールを活用して、TTFB（Time To First Byte）を50ミリ秒未満にすることであった。TTFBとは、ユーザーがウェブサイトにアクセスをリクエストしてから、サーバーが最初のデータ（バイト）を返し始めるまでの時間で、これが短いほどウェブサイトの表示が速く感じられる。Next.jsで生成されるHTMLページは、デフォルトでは動的なコンテンツとして扱われがちで、キャッシュされにくい。これを改善するため、next.config.mjsという設定ファイルでカスタムヘッダーを設定し、ランディングページや公開テンプレートのHTMLがCloudflare Edge（ユーザーに最も近いCloudflareのサーバー）で24時間キャッシュされるようにした。具体的には、「Cache-Control」ヘッダーに「public, max-age=3600, s-maxage=86400, stale-while-revalidate=86400」という値を設定した。これにより、HTMLのレスポンスは、ユーザーに最も近いムンバイ、デリー、シンガポール、フランクフルトなどのエッジノードのRAMから直接配信され、20ミリ秒から40ミリ秒という超高速なTTFBを実現している。

これらの技術的な工夫と開発哲学のもと、BiodataMaker.orgは13種類の豪華なテーマ、2ページのロイヤル小冊子、デジタル結婚招待状メーカー、そしてPDFと写真の結合ツールなど、多彩な機能を備えている。ユーザーはアカウントを作成することなく、すぐにこれらの機能を試すことができ、ウェブ開発コミュニティからのフィードバックも積極的に求めている。このプロジェクトは、既存の不便さを解消し、ユーザー体験を最優先するモダンなウェブアプリケーション開発の良い例といえるだろう。