TL;DR
実装するなら最初から計画立てて実装しよう。公式のExampleにしたがえ。コードみろ。AIだけに投げるな。パフォーマンス考えよう。
---
このポートフォリオで一番沼った箇所、それはLiquid Glassです。
Liquid Glassってかっこいいじゃないですか。私はiPhoneユーザーではないので、いままで身近にLiquid Glass UIが存在しなかったのです。ですから、それに対する憧れも多分にありました。
少し調べたら、liquid-glass-reactという便利そうなリポジトリも見つけたので、実装してみることにしました。地獄でした。
とりあえず実装する
一旦UIの雛形が完成したので、Liquid Glassをインストールして、ガラス化することにしました。うまくいきませんでした。
背景にBlurがかからない。透明な板が乗っているだけで、後ろの画像や文字が全く滲みません。キャッシュを消しても、dev serverを再起動しても、何も変わりませんでした。
この時点でかなり嫌な予感がしていました。
- ライブラリがわるい
- 自分のCSSが競合している
- ブラウザがわるい
- コードの書き方がわるい
全部あり得るように見えたからです。
公式exampleを見る
まず公式サイトのexampleを見ました。困ったときには公式。
公式のDOMでは、LiquidGlassの中に.glass__warpがあり、そこにbackdrop-filter: blur(...) saturate(...)とSVG filterが乗っています。さらに外側にはハイライト用のspanや、edge refraction用のfilterがありました。
そのまま再現して、ローカルに公式exampleに似せたページを作ると、そこでは普通にblurしました。ここでライブラリそのものは無罪になり、問題はこのポートフォリオ側にあることが確定しました。まあ当然だけど。Issueも出てなかったし。
混ざっていた問題
ややこしかったのは、場所によって動いたり動かなかったり、挙動がまちまちだったことです。
- 公式Exampleの再現ではblurする
- 他のほとんどの箇所では一切blurしない
- テキストが背景に来たときだけblurする
- 画像だけblurする
とにかく挙動がバラバラすぎて、修正が堂々巡りになっていました。
結局作り直す羽目に
Codexくんも、白っぽい低opacityの背景を雑に入れて「完成した」とか、上手く動かないからと勝手にliquid-glass-reactのパッケージを削除して独自実装に進むとか、適当なことばっかりしやがるので今回ばかりは解雇しました。
結局、Example通りのdiv要素を作って、blurすることを確認してから、それをベースにナビゲーションメニューとかを手作業で再構築しました。久しぶりにコードを書いた気がします。
動いたけど激重
最後は見た目と負荷の調整です。どれだけデザインが良くてもパフォーマンスがわるいと見てもらえないので、描画がカクつくようでは話になりません。同様に、コントラストが悪くてテキストが読めなければ本末転倒です。
どうせパフォーマンスにはblurの量、コントラストにはtintが効くに決まってると過去のプロジェクトからなんとなく分かっていたので、パフォーマンスと見た目のバランスをとりながら調整を進めました。全部の要素にLiquid Glassをかけると普通に重かったので、ナビゲーションとFeatured Workの項に絞ってLiquid Glassを入れ、他はなんちゃって実装で誤魔化すことにしました。
結論
最初にやるべきだったのは、公式exampleをそのまま配置して、動く最小構成を作ることでした。最小構成、大事です。ものを試すときは最小構成、Issueを立てるにも最小再現構成。小さく試して拡げることの重要性を改めて痛感しました。Codexへの指示の出し方もまだまだ改善の余地があるのでしょう。精進します。