1. はじめに：無邪気な機能要件と、開いてしまったパンドラの箱
事の始まりは、個人開発しているケーキ記録アプリ『Cake Keeper』で、「お目当てのケーキのリストを画像にして、家族や友人とサクッと共有したい」という単純な思いつきでした。
PC（Chrome）環境での実装はあっという間に完了。「できた！」と喜んだのも束の間、iOS実機（Safari）でテストをした瞬間に、地獄の釜の蓋が開きました。
PWA（Webフロントエンド）開発において、「DOMの画像化」と「ネイティブシェア」を組み合わせることは、思いがけない仕様とバグが絡み合う鬼門中の鬼門だったのです。
本記事は、ただのシェアボタンを実装するためにSafariの理不尽な仕様と戦った、泥沼のデバッグと設計の記録です。
2. 立ち塞がった3つの壁
この機能一つを完成させるまでに、私は3つの巨大な壁と死闘を繰り広げました。各トラブルの技術的な詳細と解決策については個別の記事にまとめていますが、ここではその全容を振り返ります。
壁１：見えない敵（Safari、画像が真っ白になる話）
👉 【PWA/iOS】SafariでDOM画像化が「真っ白・見切れる」バグへの最終回答
Safari特有のレンダリングバグにより、画面外に置いたDOMを画像化しようとすると、一部が真っ白に抜け落ちる問題に直面。描画タイミングのハックを重ねても全く解決しないという絶望。
壁２：無慈悲なタイムアウト（Web Share APIの罠）
👉 【PWA】Web Share APIで「NotAllowedError」になる原因と「事前生成」による回避策
白抜けを防ぐため画面上に表示してから画像化しようとすると、今度は「画像生成の非同期処理を待っている間に、Safariの厳格なセキュリティ制限（タイムアウト）に引っかかりシェア画面が開かない」というジレンマ。
壁３：モダンCSSの裏切り（Tailwind v4の oklch で画像化エンジンが即死する話）
👉 【解決】html2canvasで「Attempting to parse an unsupported color function "oklch"」エラーが出る原因と対策（Tailwind v4）
問題解決のためにライブラリを載せ替えたところ、最新のTailwind v4のカラー仕様（oklch）を旧式のパーサーが理解できず、パースした瞬間にクラッシュする罠。
3. 教訓：AIエージェント時代の「人間の役割（問いを立てる力）」
今回の開発は、次世代IDEである自律型AIエージェント「Google Antigravity」と共に行いました。Antigravityは非常に優秀で、私がエラーを伝えるたびに、複雑なDOM操作やスクロール制御、描画タイミングのハックコードなどを一瞬で書き上げてくれました。
しかし、ここでAIエージェント開発の大きな落とし穴に気づきました。
AIは時として、「与えられた制約（現在のライブラリや設計）の中で、なんとかハックして動かそうとする」という局所最適化に陥る弱点があります。AIが書いてくれる泥沼のDOM操作ハックでは問題解決には至りませんでした。
この壁を突破したのは、人間が複雑なコードを書いたからでも、高度な技術知識を持っていたからでもありません。
**人間が「大局的な視点から、前提を覆す『問い』を投げた」**からです。
実際に、AIの局所的な思考を反転させた「問い」の例がこちらです。
- 「画面外だとSafariがサボって描画しないなら、いっそプレビューをHTMLにしてユーザーの目の前に表示させてしまえばいいのでは？」
- 「HTMLプレビューを見せてから共有ボタンを押すとタイムアウトになるなら、プレビュー画面そのものを（HTMLではなく）生成済みの画像にしてしまえばいいのでは？」
- 「描画エンジンを変えたなら、もう画面外の裏側にDOMを隠したままでも動くのではないか？」
これからのAIエージェント時代、人間（PM）が果たすべき真の役割は、AIが提示する小手先のハックコードを鵜呑みにすることではありません。
「そもそも別のアーキテクチャにできないか？」と示唆的な質問を投げ続け、AIに根本的な解決策（ライブラリの載せ替えや設計の変更）を"引き出させる"ことなのだと痛感しました。
4. おわりに：削ぎ落とした先にある「美しい設計」
度重なる方針変更とAIとの対話の末に、最終的に残ったコードは驚くほどシンプルなものでした。
AIが最初に書いた複雑なDOM操作（ハック）はすべて消え去り、「裏側で最新のエンジン（html2canvas-pro）に模写させ、出来上がった画像をプレビューとして出し、遅延ゼロでシェアする」という一本の美しい線に繋がったのです。
ブラウザの理不尽な制約に無理やりハックで抗うのではなく、制約を仕様として受け入れた上で、ユーザー体験（UX）から逆算してアーキテクチャを再設計する。それこそが、Webフロントエンド開発の最も苦しく、最も面白いところなのだと思います。
「ただの画像シェアボタン」に翻弄されたこの死闘録が、どこかでPWAの闇と戦っている誰かの希望になれば幸いです。