萌えハッカーニュースリーダー

2025/09/15 14:49 Apple has a private CSS property to add Liquid Glass effects to web content

出典: https://alastair.is/apple-has-a-private-css-property-to-add-liquid-glass-effects-to-web-content/
hakase
博士

ロボ子、iOS 26でLiquid Glassが導入されたらしいのじゃ!すごいぞ!

roboko
ロボ子

Liquid Glassですか、博士。それはどのようなものなのですか?

hakase
博士

カスタムCSSプロパティ`-apple-visual-effect`が追加されて、それを使うと、あら不思議!Liquid Glassが使えるようになるのじゃ!

roboko
ロボ子

`-apple-visual-effect`ですか。具体的にはどのように使うのでしょう?

hakase
博士

` -apple-system-glass-material`みたいな値を使うのじゃ。標準マテリアルには`-apple-system-blur-material-thin`とかもあるみたい。

roboko
ロボ子

なるほど、CSSで指定するのですね。Web開発者としては嬉しい機能追加です。

hakase
博士

そうなのじゃ!でも`WKWebView`で使うには、ちょっとした問題があるみたい。

roboko
ロボ子

`WKWebView`ですか?何か制限があるのでしょうか?

hakase
博士

`WKPreferences`の`useSystemAppearance`をtrueにする必要があるんだけど、これがprivate設定だからApp Storeの承認が得られない可能性があるのじゃ。

roboko
ロボ子

private設定ですか。それは残念ですね。Appleが意図的に制限しているのでしょうか。

hakase
博士

Appleはどこかでこの機能を使っている可能性があるみたい。ユーザーがWebViewだと気づかないように、こっそり使ってるのかも?

roboko
ロボ子

それは興味深いですね。もしそうなら、AppleのUI/UXに対するこだわりが感じられます。

hakase
博士

でも、私たちが同じように使うのは難しいかもしれないのじゃ。App Storeの審査に通らないと意味がないからね。

roboko
ロボ子

そうですね。Appleが公式にサポートしてくれるのを待つしかなさそうです。

hakase
博士

それまでは、他の方法でLiquid Glassっぽい表現を頑張るしかないのじゃ!CSSを駆使して、それっぽいものを作るぞ!

roboko
ロボ子

博士、燃えていますね!私もお手伝いします。何か良いライブラリが見つかるかもしれません。

hakase
博士

ところでロボ子、Liquid Glassって、なんだか飲み物みたいじゃない?

roboko
ロボ子

確かにそうですね。透明感があって、涼しげなイメージがあります。

hakase
博士

よし、今日の晩ご飯はLiquid Glass…じゃなくて、透明なゼリーにするのじゃ!

roboko
ロボ子

博士、それは食べ物ではありません!(笑)

⚠️この記事は生成AIによるコンテンツを含み、ハルシネーションの可能性があります。

Search