Apple、WebコンテンツにLiquid Glass効果を追加する非公開CSSプロパティを導入

 (alastair.is)
4 ポイント 投稿者 GN⁺ 2025-09-16 | 5件のコメント | WhatsAppで共有
  • AppleがiOS 26で利用できる非公開CSSプロパティ -apple-visual-effect を追加
  • このプロパティにより、Liquid Glassや標準のblurマテリアルのような新しいデザイン効果をWebコンテンツにも適用可能
  • この機能は SafariブラウザやWKWebViewでデフォルトでは有効になっていない
  • WKWebViewで使うには useSystemAppearance という非公開設定を有効にする必要があるが、これを変更すると App Storeの承認が難しくなる
  • この機能は主に Apple内部で独自に使用されているとみられ、一般の開発者は当面活用できない

概要

  • 筆者はWebKitのGitHub ChangeLogを趣味でよくチェックし、iOSの次期アップデートを予測している
  • 最近、WWDC直後にWebKitへ「[Materials] Rename 'hosted blur' materials to reference 'glass'」というPull Requestが上がっているのを発見
  • 2025年のWWDCで強調された Liquid Glass は、iOS 7以降で最大のユーザーインターフェース(UI)の変更点
  • これまではネイティブUIにのみ適用されるデザイン変更だったが、今回のPRはWebビューとの関連を示唆している

Appleの非公開CSSプロパティ

  • PRから、Appleが -apple-visual-effectという非公開CSSプロパティ を導入したことが明らかになった
  • このプロパティにより、iOS 26では Liquid Glass効果（例: -apple-system-glass-material）を適用できる
  • すべてのバージョンで 標準のblurマテリアル（-apple-system-blur-material-thin など）を使うことも可能
  • 公式のデザインガイドでも、こうしたマテリアルに言及されている

実際の適用可能性

  • SafariでCSSを編集して適用しようとしても、Web上では動作しない
  • WKWebViewベースのアプリでも デフォルトでは無効
  • WKPreferencesのuseSystemAppearance の値をtrueに変更しなければ動作しないが、この設定自体が非公開のため、正式な手段では利用できない
  • 非公式にハックして値を有効化したうえで、以下のようなCSSを適用すると効果を確認できる 
    .toolbar {  
  border-radius: 50%;  
  -apple-visual-effect: -apple-system-glass-material;  
  height: 75px;  
  width: 450px;  
}

CSSの例と条件付き適用

  • Appleはこの効果をCSSプロパティとして実装し、サポート有無に応じてさまざまなルールを簡単に指定できるようにしている

  • たとえば @supports クエリを使えば、対応デバイスでのみ -apple-visual-effect を適用できる

    .toolbar {  
  border-radius: 50%;  
  height: 75px;  
  width: 450px;  
  background: rgba(204, 204, 204, 0.7);  
}  

@supports (-apple-visual-effect: -apple-system-glass-material) {  
  background: transparent;  
  -apple-visual-effect: -apple-system-glass-material  
}

意味と限界

  • Apple内部を除けば一般の開発者は使えない機能である
  • ただし、これによって「なぜアプリ内webviewがしばしば評判が良くないのか」へのヒントが得られる
  • シームレスにうまく統合されたwebviewは、ユーザーがその存在自体を意識しないため、問題が表面化しにくい
  • Appleがこれを開発したことは、自社のサービスやアプリで実際に活用していることを間接的に示唆している
  • 私たちは日常の中で、気づかないうちにwebviewベースのUIを体験している可能性がある

関連記事

5件のコメント

 
ahwjdekf 2025-09-18

こんなばかげたものは無視して、誰も使わないべきだ
 
coremaker 2025-09-17

AppleがFlashを終わらせたときは利害が一致していたので歓迎しましたが、
今のこの選択は既存のエコシステムを無視する決定に感じられるのが皮肉ですね。

IEの再来でしょうか？
 
spp00 2025-09-18

IE以降、フロントエンド開発者の立場からすると、IEのポジションにいたのはChromeではなくSafariでした。Safariのせいでフロントエンド開発者は高価なMacを買わされるんですよね。ChromeやFirefoxでは問題なく動くのに、Safariだけ動かなかったり妙な表示になったりすることがあります。
 
GN⁺ 2025-09-16
Hacker Newsの意見
  • OSの機能を自社アプリにしか提供しないのは、明らかに競争を阻害する慣行だ。スマートフォンやOS市場での優越的地位を利用して、競合には認めない機能をアプリ市場で自社だけが使うのは、その典型例だ
    • 本当はAppleに腹を立てたいところだが、そこまでの気持ちにはならない。WinAPIのドキュメントを読むだけでも reserved パラメータは大量にある。OS開発者はしばしば内部利用専用の機能を作る。今回は単なるUI改善なので、わざわざ非公開にする必要はないと思うが、おそらくAppleはこれを継続的に面倒見たくなくて非公開にしているのだろう
    • 非標準のCSSプロパティはすべて「競争阻害的」なのだろうか。Googleの -webkit-tap-highlight-color も同様に非難されるべきなのか疑問だ。要するに独自CSSプロパティを作る慣行そのものを禁じるべきだという話になるが、自分にはこの主張は大げさに見える
    • 法的な意味で本当に「明白な競争阻害行為」かどうかは確かではない。米国なら反トラスト法であるSherman ActとClayton Actが適用される。この法律で列挙されている「当然違法（per se）」の一覧には含まれないので、「合理の原則（rule of reason）」が適用されるはずだ。この場合、その行為が直接的に競争へ害を与え、目立った積極的効果もなく、より制限の少ない代替手段もない場合にのみ認められる。CSSプロパティが実際に競争へどんな損害を与えるのか立証するのは難しいし、望む人が liquid glass CSS を自作しても誰にも止められないのだから、適用は難しいと思う
    • コンピュータハードウェアのように、もっと制限が強いケースについてはどう考えるのか気になる。たとえばゲーム機では、すべてのコードに暗号署名が必要で、メーカーの許可なしにサードパーティーはどんなソフトウェアも配布できない
    • UIの文字を読みにくくすることが競争上の優位だと考えるなら、そう見なすこともできるかもしれない
  • 「Alastairのアプリ内WebView大理論」は気に入った。アプリ内WebViewが悪名高い主な理由は、うまく統合されたWebViewはユーザーがそもそも気づかないからだ
    • 実際にWebViewを実装したことがある人と、Webアプリをそのままネイティブアプリで包めば出せると聞かされただけの人との間には、大きな差がある。大半は後者だ
    • だからたぶんこの機能が導入されたのだと思う。アプリがサードパーティー製UIツールキットを使っているかを手軽に見分ける方法は、システムテーマを変えてみて、アプリがテーマや色・スケール変更にきちんと追従するかを見ることだ。Apple製アプリでもテーマを正しく反映しないものが一部あり、その結果として非公開CSSプロパティを作ったのだろう。一方で、別のOSベンダーの中には、未完成なツールキットをいくつも面倒見る問題を避けるために、テーマ制御機能そのものを削除するところもある
    • 誰かが1つでも完璧に統合されたWebViewアプリの実例を挙げられるなら認める。平均的なユーザーは気づかないかもしれないが、本当にあったならHacker Newsで一度は話題になっているはずだ。「でもFooアプリもWebViewでできていて、完璧にうまく動いているじゃないか」といった形で、WebView論争のたびに反証として持ち出されていたはずだ
    • 「かつらはいつも偽物に見える。本物そっくりのかつらは一度も見たことがない」みたいな話だ
  • 「Appleがきっと使うからこの機能が作られた」というが、どこで使われているのかは誰も知らない。推測するなら、iCloud設定（設定アプリ内）やApp Store / Music / TVアプリのアカウントページ（右上のプロフィールアイコンをタップ）あたりだろう。こうしたページは大半が、ネイティブに見せかけた隠れWebViewだ。長押しすると `` リンクのWebページプレビューが出るのが手がかりだ。Tipsアプリのユーザーガイドなども候補だ。まず確認してみる価値がある場所だ
  • 「Appleがどこかで使うはずだ」と推測されているのに、実際には自分たちがどこで使われているか見抜けていない点が面白い。日常的にiOS上でWebViewに頻繁に触れているのに、まったく認識していなかったわけだ
    • 特に設定アプリ、とりわけアカウントやiCloudまわりはWebViewっぽいとよく疑っている。読み込み時にアイコンの表示が遅れるような細かい違いから推測できる
    • App StoreアプリもWebViewをかなり多用しているように見える
    • MailやCalendarアプリもかなりWebViewを使っていると聞いている
    • Apple.comでも使う予定だと思う。以前iOSで背景ぼかし効果に backdrop-filter を使っていたのと同じようなものだ
    • Apple Musicも相当WebViewを使っているようだ
  • これは良い発見だ。Appleの新しいガラスUIは批判も多いが、自分はむしろ気に入っている。OSにまた実際の個性が戻ってきたように感じるし、単調でのっぺりした印象から抜け出している。クリック可能な領域もより分かりやすくなり、ボタンと通常テキストを視覚的に区別しやすくなった。歓迎すべき変化だと思う。単なる「懐かしさ」ではなく、実際に実用的な変化だ。iOS 26 Betaを先に入れてWebサイトをテストしているが、多少の問題はあるものの、全体としてOSにもっと個性を持たせる方向は良いと思う。一般ユーザーにも受けるだろう
    • ガラス効果や美的要素は好きだが、複数のアプリで機能面は以前より不便になった部分がある。簡単に触れられたボタンがメニューの下に隠され、見つけにくくなった
    • 自分は、一般大衆は大きく見ればこの変化を好まないと思う。このように「OSには個性が必要だ」と考える人は、少数のテック愛好家だけだ。大多数はOSを何かを片付けるための「手段」としか見ていないので、こうした視覚的変化は面白ネタ以上の意味を持たないことが多い。特にliquid glassデザインで最大の不満は、新しい下部タブバーだ。Apple Musicが最もひどい。Searchインターフェースを使うのにクリック回数が1回増えたし、Search Boxをクリックした後も別途押さないとキーボードが出ない。しかも、あらゆる操作に複雑で遅いアニメーションが加わっている。たとえばHomeからLibraryへ行くと、タブバーの上でタブが泡のように膨らみながらきらめいて移動するが、これは気が散るだけで役に立たない。Reduce TransparencyやReduce Motionのようなアクセシビリティ設定も、こうしたアニメーションに適用されていない。実際、最近のApple純正アプリの多くがアクセシビリティオプションの適用を忘れていたり、不十分だったりする。たとえばReduce Motionを有効にすると、アルバムを開くような一部のアニメーションは簡略化されるが、左スワイプや他の操作では依然として大げさなアニメーションのままだ。Apple PodcastsやiMessageも同様だ。Reduce Transparencyは、一部のアプリでは透明度を下げる代わりに背景をすべて黒（#000000）にしている。iOS全体にこういう例があふれている。リリース数日前になっても、dropdownや無効化されたキーボードボタンのような箇所にアクセシビリティ設定が反映されていない
    • 「クリックターゲットの大きさが視覚的に分かり、ボタンがテキストとはっきり違う」と言うが、正直それほど高い基準ではない
    • 個人的には「このデザインは本当にひどい」派だ。Appleが何を考えていたのか分からない
  • もしかするとAppleは、まだ誰にもこの機能を使ってほしくないのかもしれない。最新OSの発表で多くの開発者がすぐ導入する可能性が高いので、公開前にまず社内での活用を固めたかったのだろう。このスレッドでは根拠の薄い非難もいくつか飛び交っている。どちらが正しいかは、まだ分からない
  • 「Appleが使うためだから」という命題は、実際にはいつも正しいわけではない。現実のソフトウェアには使われていないコードや機能が大量にある。開発方針を何度も変える中で、第2段階で追加されたCSSプロパティが第4段階では完全に消えている、といったことはよくある
  • liquid jellyがトレンドにならないことを心から願う
    • liquid glassが好きでも嫌いでも、「UIクロームはアプリのコンテンツを包むもの」から「UIがコンテンツの上を覆うもの」へのパラダイムシフトは未来志向だ。ARとも相性がよく、さまざまな画面サイズに応じてUIとコンテンツを分離できる。今回の実装そのものには長所と短所があるが、このアプローチは今後さらに広く使われるようになるだろう。Overlay UIモデルは必ずしも透明である必要はない。opaqueだが浮いている形にもできる
    • 若い世代はAero/Glass時代の美学にノスタルジーを抱いている。Appleが導入した以上、トレンド化する可能性は高い。業界全体として、Appleがやることは何でも真似する空気がある
    • 個人的にはバウンス/ぷるぷる効果だけでもなくなればいいと思う。揺れすぎて震えすぎて、本来のガラス感よりゼリー状のblobに見える
    • 自分も流行ってほしくない派だが、正直Appleがやれば結局みんな追随すると思う
    • もうすでに流行っている
  • WKPreferencesで useSystemAppearance という設定を有効にしなければならないらしいが、これは非公開なのでApp Storeの審査を通らないという話だ。本当なのか気になる。iOS開発には詳しくないが、さまざまな内部APIを使ってホーム画面ウィジェットをアニメーション化したアプリを逆コンパイルする動画を見た記憶がある
    • そういうものはApp Store審査を通過できない
    • この動画のこと？
  • 角丸と広いパディング以来、これほど醜い流行は見たことがない。一日も早く消えてほしい
 
addons 2025-09-17

ふざけたことはやめて、Safari の互換性管理をちゃんとしてくれ