ドキュメント

App Embed Extension を使用してウェブサイトのコンテンツを表示する

更新日 March 28, 2025

Evlop のモバイルアプリ埋め込み拡張機能の使い方

概要

モバイルアプリ埋め込み拡張機能を使うと、ウェブサイトや Shopify のページを Evlop のモバイルアプリにシームレスに埋め込めます。ページの主要コンテンツだけを表示し、ヘッダーやフッターなど不要な要素は自動的に非表示になるため、アプリ内でスムーズなユーザー体験を提供します。

利用シーン

  • カスタムページや複雑なページを再作成せずに素早く表示。
  • ウェブサイトとモバイルアプリ間の一貫性を確保。
  • ポリシー、FAQ、特別ページなどをアプリに直接組み込む。

仕組み

この拡張機能は、ウェブサイトまたは Shopify の <body> タグ内に直接配置された <main> HTML 要素を検出し、そのコンテンツだけをアプリ内に表示し、他の要素は非表示にします。最適な表示結果を得るには、テーマで <main> タグが <body> の直下に配置され、ヘッダーやフッターは <body> 内で <main> の外側にあることをご確認ください。

トラブルシューティング

1. 有効化後に何も表示されない場合

  • Check: ウェブサイトテーマが、主要コンテンツを囲むように <body> 内に直接 <main> HTML タグがあるか確認してください。
  • Resolve: <main> タグがない場合は、テーマコードに追加するか、テーマ開発者にお問い合わせください。
  • Check: Shopify テーマ設定で Mobile App Embed が有効になっているか確認してください:
    • 「Shopify Admin > Online Store > Themes > Customize」へ移動。
    • 「Theme Settings > App Embeds」を開く。
    • Mobile App Embed 拡張機能を有効化。
  • Resolve: 有効になっていない場合は、設定を有効にして保存してください。

2. If header or footer is still showing

  • Check: ウェブサイトテーマの構造を確認してください。ヘッダーとフッターは <body> タグ内にあり、<main> タグの外側に配置する必要があります。
  • Resolve: ヘッダーとフッターを <main> の外側に移動してテーマ構造を調整してください。コード編集に自信がない場合は、テーマ開発者にご相談ください。

さらにサポートが必要な場合は、Evlop Support までお問い合わせください。