content: chofusai web

src/content/posts/tech/chofusai-2023-website.mdx

@@ -40,6 +40,7 @@ Webサイト制作という形で運営に参加させていただきました
 
 - 技術選定・初期実装(後述する内製Markdownライブラリなど)
 - メンバーの進捗の統合・修正
+- 7~8割の実装
 - パフォーマンスやアクセシビリティの向上
 - デプロイ・インフラの構築
 
@@ -197,9 +198,9 @@ SCSS Moduleではいちいち`page.module.scss`のようなファイルを増や
 また、この際Markdownのフロントマターに必要な情報も書くことで、効率よくページを生成できるようにしています。
 企画データの管理も同様の方法で行いました。かなり楽で良かった。
 
-ちなみにこのライブラリを試験実装したのが[旧個人サイト](https://old.sushichan.live)内のブログだったりします。[^3]
+ちなみにこのライブラリを試験実装したのが[旧個人サイト](https://old.sushichan.live)内のブログだったりします。[^2]
 
-[^3]:
+[^2]:
     <div>
       <span>急に旧個人サイトをNext.js(App Router)で作ったのは調布祭の準備の一環でした。</span>
       <UrlCard url="/blog/post/tech/build-my-website" />
@@ -208,11 +209,12 @@ SCSS Moduleではいちいち`page.module.scss`のようなファイルを増や
 ### Cloudflare
 
 いわずと知れたつよつよCDN+αですね。私が導入を推し進めました。
+CDNというのはContent Delivery Networkの略で、コンテンツをユーザーに近い場所にキャッシュして配信する仕組みのことです。
 
-実際にした設定は多数あるため割愛しますが、これにより<span class="text-xl font-bold">75%</span>のアクセスをCDNで処理できました。
+実際にした設定は多数あるため割愛しますが、複数の最適化により<span class="text-xl font-bold">75%</span>のアクセスをCDNで処理できました。
 また、当然CDNからのレスポンスはオリジンからのものより速く、103 Eary Hintなども併用したので、パフォーマンスの向上に繋がりました。
 
-![Cloudflareの帯域幅分析。総トラフィック約30GBのうち22.5GBをCDN上のキャッシュでさばいている。](https://res.cloudinary.com/sushi-chan/image/upload/v1701318570/tech/chofusai-2023-website/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88_2023-11-30_132841_iomalu.png "帯域幅を22.5GB削減できました。")
+![Cloudflareの帯域幅分析。総トラフィック約30GBのうち22.5GBをCDN上のキャッシュでさばいている。](https://res.cloudinary.com/sushi-chan/image/upload/v1701318570/tech/chofusai-2023-website/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88_2023-11-30_132841_iomalu.png "オリジンへ飛ぶ帯域幅を22.5GB削減できました。")
 
 また、過去の調布祭ページなどを記録用として静的ホスティングするのにCloudflare Pagesを使用しています。第73回サイトもいずれこちらに移行する予定です。
 
@@ -224,17 +226,74 @@ SCSS Moduleではいちいち`page.module.scss`のようなファイルを増や
 というのもVercelは無料枠での帯域幅に月間100GBという制限があるのに対し、Cloudflare Pagesは事実上無制限だったからです。
 
 ただ、どうしても当時Cloudflare Pagesのようなエッジ上でNext.jsの画像最適化をコストを抑えながら動かす方法がなく、
-調布祭サイトで最も帯域を抑えやすいのは画像などの静的アセットの最適化であると判断したので、Vercelに変更しました。[^4]
+調布祭サイトで最も帯域を抑えやすいのは画像などの静的アセットの最適化であると判断したので、Vercelに変更しました。[^3]
 
-[^4]:
+[^3]:
     <div>
       <span>近日中にCloudflareの画像最適化に変更が入るので、それが完了するとかなり現実的に使えるようになります。</span>
       <UrlCard caption="この前の大規模障害が原因で少し遅れているらしい" url="https://blog.cloudflare.com/merging-images-and-image-resizing/" />
     </div>
 
 ## 特に意識したこと
 
-### 可能な限り使用帯域幅を抑える工夫をした
+調布祭サイトは、当然ながら開催期間中はアクセスが集中します。今年度は本格的にコロナ禍前の姿に戻すということで入場予約も不要になり、アクセス数の予測ができない状態でした。
+さらに、もともと学内の電波状況がいいとは言えない状態なため、通信速度がある程度落ちた状態でも高速に読み込める必要がありました。
+
+このため、可能な限りユーザーに近いCDNまででリクエストを完結させて、また配信されるコンテンツのサイズを小さくする工夫をしました。
+
+これにおいて最も重要なのが画像の最適化です。
+Next.jsでは`<Image />`コンポーネントに画像サイズを事前に指定することで、画面幅に合わせて最適な画像を配信してくれます。
+
+<UrlCard url="https://nextjs.org/docs/app/api-reference/components/image" />
+
+しかし、例えば企画情報ページなどでは、団体ごとに提出された画像のサイズやアスペクト比などが異なるため、通常のサイズ指定では対応できません。
+そこで、`fill`と`sizes`を組み合わせて実際の画面専有領域ベースでの最適化に切り替えました。
+途中までこれを忘れていたのですが、やる前とやる後で明らかに使用される帯域幅に変化があったので、忘れずやってよかったです。
+
+また、Google AnalyticsはCloudflare Zarazを経由して使用しました。
+Cloudflare Zarazは、CloudflareのCDNを通過する際にHTMLを書き換えて追加コードを挿入できる機能で、
+これを用いてCDN上でGoogle Analyticsのコードを追加しています。
+こうすると、余分なサードパーティへのリクエストがなくなるので、パフォーマンスの向上に繋がります。
+
+<UrlCard url="https://developers.cloudflare.com/zaraz/" />
+
+他にも`content-visibility`を用いた遅延レンダリングや一部アセットのprefetch、
+重たいコンポーネントの動的読み込みやスケルトン表示を行い、非常に高速な表示が実現できました。
+表示の速さについての声も少し耳にしたのでちょっと嬉しかったです。
+
+## 上手くできなかったこと・今後に向けて
+
+当初はデザインをFigmaなどで組み立ててから実装する予定でした。
+しかし、肝心のWebデザイン経験のある人間がほとんどいなかったためデザインが決まらないまま時間が経ち、
+ぎりぎりになってからその場の勢いで実装するという形になってしまいました。
+このため、かなり簡素な **「エンジニアが考えたデザイン」** になってしまい、スローガンとして **「電通革命」** を掲げたにも関わらずそのワクワク感が伝わらないWebサイトになってしまいました。
+これは本当に悔しくて、お褒めの言葉を頂いていても「もっと華やかなデザインにできたはずなのに」という気持ちがずっとあります。
+
+敗因は、自分たちのことで手一杯過ぎて、パンフレットなどを作成していた部署に助けを上手く求められなかったことです。
+このあたりは来年度の体制を考える上での大きな課題になります。
+
+また、私を含め7割以上の人員が2023年3月以降に初めてHTMLを触った、という初心者だったこともあり、
+十分な講習ができないまま実装を進めてしまいました。
+このため、予想以上の手戻りや遅れが発生し、結果的に調布祭2日目の昼頃にようやく実装が完了するという結果になってしまいました。
+
+<TweetCard id="1728129232050745516" caption="限界作業をやめよう！その1" />
+
+<TweetCard id="1728214512522949091" caption="限界作業をやめよう！その2" />
+
+調布祭が終わった今、次にやるべきことは他メンバーの実力を引き上げる講習・実践です。これも引き続き頑張っていきます。
+
+## おわりに
+
+長くなってしまいましたが、第73回調布祭Webサイトの裏側を話せる範囲で書いてみました。
+この制作は、ほとんどの人員がWeb未経験の状態から数ヶ月で比較的大きなサイトを作るという、私にとって、そして調布祭実行委員会にとって大きな挑戦でした。
+私自身この制作を通して学んだことが非常に多く、春先は新歓サイトの作成で手一杯だったのが今では個人でも様々な制作を行えるようになりました。
+
+たくさんの方にご迷惑をおかけし、また、たくさんの方にご協力いただきました。
+最終的に完全な形にはできなかったとはいえ、多くの方に好評をいただけたことは本当に嬉しかったです。
+記事内では書ききれなかった調布祭実行委員会編集局のメンバーの偉業、およびすべての委員会員やOBの方々、また協力してくださった方々に感謝申し上げます。
+
+<span class="text-xl font-bold">さて、</span>
+明日の記事はローネさんの「入力デバイスとして1年間板タブを使い続けた話orパーフェクト破産教室」です。
+いや、どっちを書くんだよ。楽しみですね。
 
-調布祭サイトは、当然ながら開催期間中はアクセスが集中します。さらに、もともと学内の電波状況がいいとは言えない状態なため、
-通信速度がある程度落ちた状態でも高速に読み込める必要がありました。
+それではまたどこかで。