iframe

iframeとは、あるHTMLページを別のHTMLページに埋め込むことができるHTML要素です。地図や動画、ソーシャルメディアなどをウェブサイトに埋め込む際によく使われます。

iframeタグには、要素をフォーマットするための多くの属性がありますが、埋め込みHTMLファイルへのパスを記述したsrcを含める必要があります。また、この例では、要素の幅と高さを指定しています。

<iframe
  src="/path/to/your/file.html"
  width="100%"
  height="400px"
  title="My file"
></iframe>

Mapboxスタジオでのiframeのリクエスト

Mapboxスタジオを使用して、Mapboxでホストされているスタイルを使用するマップを含むWebページに埋め込むiframeをリクエストできます。

iframeをHTMLページに埋め込む前に、iframeの制限事項と、代わりにMapbox GL JSや他のMapbox製品を使用するタイミングを理解しておくことが重要です。

iframeがサポートしているもの

• HTMLページ上でのMapboxがホストしているスタイルの表示
• パン、ズーム、チルト
• デフォルトのマップロケーションを表示
• 検索

iframeがサポートしていないもの

• ポップアップやクリックイベントなどのフィーチャインタラクション
• その他のMapbox製品へのアクセス
• Mapbox GL JSへのプログラムによるアクセス
• 特定のブログへの埋め込みに必要なoEmbed(英語)規格

WordPress をお使いの場合は、WordPressマップブロックの方がニーズに合っているかもしれません。MapboxはWordPressマップブロックをサポートしていません。

以下の例では、MapboxスタジオのiframeHTML を使用しています。

<iframe
  width="100%"
  height="400px"
  src='https://api.mapbox.com/styles/v1/mapbox/streets-v11.html?title=false&zoomwheel=false&access_token=YOUR_MAPBOX_ACCESS_TOKEN'
  title="Streets"
  style="border:none;"
></iframe>

アクセシビリティ

接続に制限のあるユーザー、スクリーン リーダー、またはその他の支援デバイスは、iframeのタイトルフィールドを使用してマップにコンテキストを追加します。

Mapboxスタジオのデフォルトでは、この値はスタイルの名前です。埋め込む前に、タイトルがわかりやすいものであることを確認してください。

ウェブサイトビルダーへのiframeの追加

ウェブサイトのHTMLページに直接アクセスできない場合は、SquarespaceやShopifyなどのウェブサイトビルダーを使用している可能性があります。

Mapboxはこれらのプラットフォームとの統合を公式にはサポートしていません。しかし、iframe機能はウェブ標準であり、ほとんどのウェブサイトビルダーはコードブロック、HTMLブロック、HTMLエディター、または同様のインターフェースを通じてサポートしています。

以下のリンクは、SquarespaceとShopifyのiframe統合を提供する外部リソースです。これらのリソースについてご質問がある場合は、SquarespaceまたはShopifyのサポートにお問い合わせください。

• iframe in Squarespace(英語)
• iframe in Shopify(英語)

関連ページ(英語)

• iframe documentation
• Styles API documentation