App Home を「UI 拡張」として作る 専用 Web サーバー不要のアプリ表紙ページ

図解 ： App Home を UI 拡張として作る（admin.app.home.render） Admin Extensions / API 2026-07 App Home を「UI 拡張」として作る 専用 Web サーバー不要のアプリ表紙ページ 新しい admin.app.home.render ターゲットで、アプリの表紙（App Home）を Preact ベースの admin UI 拡張として作れるように。他の admin UI 拡張と同じ束（バンドル）に同梱され、App Home を描画するための別 Web サーバーが要らなくなる。 このページの構成 そもそも何が変わるのか（30秒で理解） 仕組み図解 ： 従来 iframe 方式との違い この拡張タイプを使うべきケース 提供条件（対象 / 非対象） 始め方（コマンド手順） 技術者が押さえるべき5つのポイント 業務に活かせる3つのユースケース 提案で使える1行サマリ 1 そもそも何が変わるのか アプリを開いたときに最初に出る App Home（アプリの表紙ページ） を、これまでは 自前の Web サーバーで iframe ホストして描画していた。 今回 admin.app.home.render ターゲットが追加され、App Home を Preact ベースの admin UI 拡張 として作れるようになった。 他の admin UI 拡張と同じバンドルに同梱されるため、 App Home 描画のための別 Web サーバーが不要 になる。 従来 ： iframe ホスト方式 App Home を別の Web アプリとして用意し、Admin 内に iframe で埋め込む。表紙ページのためだけにサーバーの運用・ホスティングが必要だった。 新 ： UI 拡張方式 admin.app.home.render で App Home を UI 拡張として記述。他の admin 拡張と同梱され、Polaris web components の性能・デザイン面の利点をサーバーなしで得られる。 2 仕組み図解 ： 従来 iframe 方式との違い App Home ＝ アプリを開いたときに最初に表示される「アプリの主要ワークスペース（表紙ページ）」のこと。 新方式では、これを他の admin UI 拡張と同じ束に入れて配布するので、 アプリの主 UI の「正本（single source of truth）」が一箇所にまとまる 。 3 この拡張タイプを使うべきケース 記事が挙げる「この拡張タイプを使いたいとき」の 3 条件。 常設・全画面のワークスペース 別 iframe ホストの Web アプリではなく、 拡張バンドルに統合された常設フルページ のワークスペースが欲しいとき。 主 UI の正本を一本化 アプリの主要 UI を、 他の admin UI 拡張と並べて単一の正本 として管理したいとき。 Polaris の利点をサーバーなしで App Home のために Web サーバーをホストせずに、 Polaris web components の性能・デザインシステムの利点 を得たいとき。 4 提供条件（対象 / 非対象） 項目 内容 対応 API バージョン 2026-07 以降 App Home UI 拡張はこのバージョンから利用可能 想定アプリ種別 カスタム配布アプリ custom-distribution apps 向け 公開アプリ（App Store） 対象外 Shopify App Store 向けの公開アプリは、引き続き iframe ベースの App Home を使うこと 公開アプリ（App Store 配布）を開発している場合は、この UI 拡張方式ではなく 従来の iframe ベース App Home を継続して使う こと、と明記されている。新方式はあくまでカスタム配布アプリ向け。 5 始め方（コマンド手順） 1 パターンA ： 新規アプリで始める 拡張のみのアプリを scaffold する。プロンプトで 「Build an extension-only app」 を選択。 2 パターンB ： 既存アプリに追加 既存アプリに App Home UI 拡張を追加する場合は、プロンプトで 「App home」 を選択。 3 リファレンスを確認 ターゲット API・web components・設定オプションの一覧は App Home UI extension reference を参照。 パターンA ： 拡張のみアプリを新規 scaffold $ shopify app init # プロンプトで「Build an extension-only app」を選択 パターンB ： 既存アプリに App Home 拡張を追加 $ shopify app generate extension # プロンプトで「App home」を選択 レンダリングのエントリポイントは admin.app.home.render ターゲット。詳細な API・利用可能な web components・設定オプションは公式の App Home UI extension reference に集約されている。 6 技術者が押さえるべき5つのポイント 1. Preact ベースの UI 拡張 App Home を admin.app.home.render ターゲットで描画する Preact ベースの admin UI 拡張。フロントを iframe 内の独立 Web アプリとして持つ必要がなくなる。 2. Web サーバー運用が消える App Home を描画するためだけの別 Web サーバーが不要に。ホスティング・スケーリング・監視の運用負荷が、表紙ページに関しては丸ごと無くなる。 3. 他の admin 拡張と同梱 App Home が block / action 等の他の admin UI 拡張と同じバンドルに入る。デプロイ・バージョニングが拡張バンドル単位で一元化される。 4. Polaris web components 前提 Polaris web components の性能・デザインシステムの利点を、サーバーホスティングなしで利用できる。Admin と一貫した UI を素直に組める。 5. 適用範囲はカスタム配布アプリ ＋ API 2026-07 利用は API バージョン 2026-07 以降 、かつ カスタム配布アプリ 向け。 App Store の公開アプリは引き続き iframe ベース App Home を使う 。配布形態で採否が分かれるので、案件種別を先に確定させてから設計に入ること。 7 業務に活かせる3つのユースケース USE CASE 1 社内 / クライアント専用アプリの「管理 UI をサーバーレス化」 課題 特定企業向けのカスタム配布アプリで、表紙ページのためだけに Web サーバーを立て、ホスティング・SSL・スケールを保守し続けている。 打ち手 App Home を admin.app.home.render の UI 拡張に移行し、他の admin 拡張と同じバンドルに同梱する。 効果 表紙ページ用サーバーの運用・コストを撤廃。Admin と一貫した Polaris UI を維持したまま保守対象を削減。 技術メモ API 2026-07 以降が前提。 shopify app generate extension →「App home」で既存アプリに追加できる。 USE CASE 2 拡張だらけの内製ツールを「ひとつのバンドルに統合」 課題 block / action など複数の admin UI 拡張がある内製ツールで、表紙だけ別リポ・別デプロイになっており、UI の正本が分散している。 打ち手 App Home を UI 拡張化し、既存の admin 拡張と同一バンドルに集約。主 UI の single source of truth を一本化する。 効果 デプロイ・バージョニングが拡張バンドル単位で揃い、UI の一貫性とリリース管理が単純化。 技術メモ 記事は「他の admin UI 拡張と並ぶ単一の正本」を明示。CI も拡張バンドルのビルド/デプロイに寄せられる。 USE CASE 3 受託開発の「カスタムアプリ立ち上げをテンプレ化」 課題 クライアントごとにカスタム配布アプリを量産するが、毎回 App Home 用のサーバー構成から組み直していて立ち上げが重い。 打ち手 shopify app init →「Build an extension-only app」で拡張のみアプリを scaffold し、App Home まで拡張として完結させる雛形を社内標準化。 効果 サーバー無しで表紙ページまで含む初期構成が立ち上がり、案件ごとの初期工数とインフラ調達を圧縮。 技術メモ App Store 公開予定の案件は対象外（iframe ベース継続）。受託＝カスタム配布が中心なら適合しやすい。 8 提案で使える1行サマリ 「アプリの表紙ページ（App Home）を admin.app.home.render の Preact 製 UI 拡張として作れる新方式。 専用 Web サーバー不要・他の admin 拡張と同梱・Polaris の利点そのまま。 対象は API 2026-07 以降のカスタム配布アプリ（App Store 公開アプリは iframe 方式を継続）。」 source ： shopify.dev / changelog / build-app-home-as-a-ui-extension