--shopify-safe-area-inset-bottom モバイルの「フローティング下部バー」に固定要素を隠させない新変数
原題: New CSS variable for mobile safe area insets
- App Bridge
- Apps
- CSS
- Shopify Mobile
- Safe Area Insets
- Action Required
- 仕様変更
The file write needs permission. I have the full HTML ready — here it is, intended for `site/public/raw/260415_new-css-variable-for-mobile-safe-area-insets.html` (slug matches the repo's `yymmdd_urlSlug` convention, no collision). If you'd rather I write it directly, re-grant write access and I'll save it. ```html 図解 ： モバイル セーフエリア用の新しい CSS 変数（--shopify-safe-area-inset-bottom） App Bridge / 新CSS変数 Action Required --shopify-safe-area-inset-bottom モバイルの「フローティング下部バー」に固定要素を隠させない新変数 Shopify モバイルアプリ内で動く埋め込みアプリ向けに、画面下部のオーバーレイ（フローティング下部ナビバーなど）の高さを CSS ピクセルで返す新しいカスタムプロパティ。App Bridge が自動でセットし、固定配置の FAB やスティッキーフッターをバーの上に逃がせる。2026年4月15日から適用。 このページの構成 そもそも何が起きるのか（30秒で理解） 仕組み図解 ： 変数が解決する「隠れ問題」 自動で効くこと／自分で対応が必要なこと 変数の値の振る舞い 実装方法（コード例） 影響範囲・適用日・やること 技術者が押さえるべき5つのポイント 業務に活かせる3つのユースケース 提案で使える1行サマリ 1 そもそも何が起きるのか Shopify モバイルアプリには、画面下部に フローティング下部ナビバー などのホスト UI オーバーレイが出ることがある。 埋め込みアプリが画面下部に「固定配置」した要素は、このバーに 隠れてしまう 。 新変数 --shopify-safe-area-inset-bottom は、そのオーバーレイの高さ（CSS ピクセル）を返し、固定要素をバーの上に逃がせるようにする。 これまで ： 固定要素が隠れる 下部固定の FAB やスティッキーフッターが、ネイティブのフローティングバーと重なってタップできない／見えない。 これから ： 変数で自動回避 App Bridge がバーの高さを変数にセット。CSS で calc() に足すだけで固定要素がバーの上に乗る。 2 仕組み図解 ： 変数が解決する「隠れ問題」 セーフエリア・インセットとは ： 画面の縁やシステム UI（ここではフローティング下部バー）と重ならないように確保すべき余白のこと。 この変数は ホスト UI オーバーレイの正確なピクセル値 を返すので、固定要素をその分だけ持ち上げれば重なりを防げる。 3 自動で効くこと／自分で対応が必要なこと 自動 <body> への下部パディング この変数は <body> に自動で下部パディングを追加する。通常スクロールするコンテンツを持つ 大半のアプリは無対応でも フローティングバーに隠れず正しく動く。 要対応 カスタムの「下部固定」要素 スティッキーフッターやフローティングアクションボタン（FAB）など、 position:fixed/sticky で下部に置いた独自要素は、自分で変数を CSS に組み込む必要がある。 判定はシンプル ： ビューポート下部に fixed / sticky 要素があるか？ 無ければ無対応で OK、あれば var(--shopify-safe-area-inset-bottom, 0px) を足す。 4 変数の値の振る舞い 状況 var(--shopify-safe-area-inset-bottom) の値 オーバーレイが無いとき 0px 既定値 モバイルのフローティング下部バーが表示中 バーの高さ （CSS ピクセル）に自動調整 セットする主体 App Bridge が自動でセット（JS の追加実装は不要） 記事に明記されているのは 下部（bottom）インセット のみ。上部・左右のインセット変数の有無や、デスクトップ／Web 埋め込み時の挙動については 記載なし 。利用時は必ずフォールバック , 0px を付ける。 5 実装方法（コード例） カスタムの下部固定要素には、既存の bottom 値に変数を足すだけ。記事に示された実装例は次の通り。 .my-floating-button { bottom : calc ( 16px + var ( --shopify-safe-area-inset-bottom , 0px )); } 第2引数の 0px はフォールバック 。変数が定義されていない環境（バー非表示時や非対応ホスト）でも、従来の 16px として安全に成立する。 6 影響範囲・適用日・やること 1 影響を受けるアプリ Shopify モバイル上で動き、ビューポート下部に fixed / sticky 要素を使う すべての埋め込みアプリ 。 2 適用日 対象アプリすべてに 2026年4月15日 から適用される。 3 やること 大半は対応不要。カスタム下部固定 UI がある場合のみ、CSS に変数を組み込む。 この変更は changelog 上で 「Action Required」 としてタグ付けされている。下部固定 UI を持つアプリの開発者は、適用日までに自アプリを確認すること。 7 技術者が押さえるべき5つのポイント 1. JS 不要、CSS だけで完結 App Bridge が値を自動セットするため、開発者側は var() を CSS に書くだけ。リスナー登録や高さ計測のコードは要らない。 2. 値は動的（0px ⇄ バー高さ） オーバーレイ有無で 0px とバー高さを行き来する。メディアクエリや端末判定で自前分岐する必要がない。 3. <body> は自動パディング 通常フローのコンテンツは <body> への自動パディングでカバーされる。 対応が要るのは fixed / sticky 要素だけ と切り分けられる。 4. フォールバックを必ず付ける 変数が無い環境でも壊れないよう、第2引数に 0px を渡すのが安全。 calc(16px + var(--…, 0px)) の形を徹底。 5. 適用は強制・期日あり（Action Required） 2026年4月15日に対象アプリへ一律適用される変更で、changelog 上は Action Required 扱い。 下部固定 UI を持つアプリは期日までに実機（Shopify モバイル）で重なりを確認 すること。詳細は App Home の Environment API ドキュメントを参照。 8 業務に活かせる3つのユースケース USE CASE 1 埋め込み管理アプリの「保存／一括操作」固定ボタンを救済 課題 在庫一括編集やバルク操作系の埋め込みアプリで、下部固定の「保存」FAB が Shopify モバイルのフローティングバーに隠れ、モバイルからタップできない／誤タップが起きる。 打ち手 FAB の bottom を calc(16px + var(--shopify-safe-area-inset-bottom, 0px)) に変更してバーの上へ逃がす。 効果 モバイルでの操作不能クレームを解消。コードは CSS 1 行の修正で済み、回帰リスクが小さい。 技術メモ スクロールコンテンツ本体は <body> 自動パディングで救われるので、手当ては固定要素だけに限定できる。 USE CASE 2 スティッキー「合計バー」を持つカート系アプリのモバイル最適化 課題 商品リストの下に固定表示する「合計金額＋次へ」スティッキーバーが、ネイティブのフローティングバーと重なって金額や CTA が欠ける。 打ち手 スティッキーフッターの bottom （または padding-bottom ）に変数を加算し、常にバーの上に表示。 効果 金額と次アクションが常に見え、モバイルでの離脱・操作迷子を防止。 技術メモ 既定 0px のため、オーバーレイが無い環境では従来レイアウトのまま。条件分岐の追加実装は不要。 USE CASE 3 複数アプリを抱えるベンダーのモバイル余白を一元化 課題 複数の埋め込みアプリを提供しており、各アプリが下部余白を独自にハードコード。適用日（4/15）以降に表示ズレが一斉発生するリスクがある。 打ち手 共通 CSS のユーティリティ／デザイントークンに var(--shopify-safe-area-inset-bottom, 0px) を組み込み、全アプリへ一括配布。 効果 適用日以降のズレを横断的に回避。固定要素のモバイル対応を 1 箇所で保守でき、QA 工数を削減。 技術メモ フォールバック 0px を必ず併記し、App Bridge 非搭載・旧環境でも破綻しないようにしておく。 9 提案で使える1行サマリ 「Shopify モバイルの埋め込みアプリ向けに、下部オーバーレイの高さを返す新 CSS 変数 --shopify-safe-area-inset-bottom が 2026/4/15 から適用。 <body> は自動でパディングされ大半は無対応で OK 。FAB やスティッキーフッターなど下部固定要素だけ calc(… + var(--shopify-safe-area-inset-bottom, 0px)) を足せばフローティングバーに隠れない。」 source ： shopify.dev / changelog / new-css-variable-for-mobile-safe-area-insets 参考 ： shopify.dev / App Home Environment API 公開日 ： 2026-04-15（Developer Changelog ／ タグ ： Action Required, App Bridge） ``` Notes on faithfulness to the source: kept strictly to what the changelog states (auto ` ` padding, `0px` default, App Bridge sets it, the `.my-floating-button` example verbatim, April 15 2026 effective date, Action Required / App Bridge tags). Marked top/side insets and desktop behavior as 「記載なし」 since the article doesn't cover them. No fictional brand names or signatures in the footer. Want me to write this to `site/public/raw/260415_new-css-variable-for-mobile-safe-area-insets.html`? Note that to actually surface it on the site you'd still need the `content/index.json` entry + card-meta/tags extraction — which `npm run ingest` does in one pass. If you prefer, I can leave ingestion to the script and this was just a one-off render.