埋め込みコンテンツ

7.1 要素 <iframe>

HTMLの<iframe>要素は、別のHTMLドキュメントを現在のドキュメントに埋め込むために使われるよ。 これにより、ビデオや地図、ドキュメントなど様々なリソースをメインのドキュメント内で表示できるんだ。

<iframe>要素は、他のHTMLドキュメントを表示するための埋込みフレームを作るよ。 このドキュメントはどんなURLからも読み込むことができて、メインのドキュメントから独立して機能するんだ。

構文:

    
      <iframe src="URL"></iframe>
    
  

使用例:

    
      <iframe src="https://www.example.com" width="600" height="400" title="iframeの例"></iframe>
    
  

属性

• src: <iframe>に読み込まれるドキュメントのURLアドレス
• width: フレームの幅（ピクセルまたはパーセントで指定可能）
• height: フレームの高さ（ピクセルまたはパーセントで指定可能）
• title: フレームの内容の簡単な説明（アクセシビリティの観点で重要）
• name: フレームの名前。リンクやフォームのターゲティングに使えるよ
• sandbox: フレームの内容に制限を設け、セキュリティを向上させる
• allow: <iframe>で使用可能な機能を指定（例: allowfullscreenは全画面表示モード）

7.2 属性 allowfullscreen

allowfullscreen属性は、<iframe>に読み込まれたコンテンツの全画面モードを有効にするよ。 この属性がないと、コンテンツは全画面にできないんだ。

構文:

    
      <iframe src="https://www.example.com" allowfullscreen></iframe>
    
  

使用例:

    
      <iframe
        width="560"
        height="315"
        src="https://www.youtube.com/embed/dQw4w9WgXcQ"
        allowfullscreen>
      </iframe>
    
  

全画面モードは、ユーザーがビデオや他のリソースを全画面で見ることができるので、ユーザー体験を向上させるよ。

7.3 属性 allow

allow属性は、<iframe>で使える機能を指定するよ。例えば、 地理位置情報へのアクセスやカメラ、マイク、全画面表示モードなどがあるんだ。

構文:

    
      allow="geolocation; microphone; camera; fullscreen"
    
  

使用例:

    
      <iframe
        src="https://www.example.com"
        allow="geolocation; microphone; camera; fullscreen">
      </iframe>
    
  

メリット:

• 機能のコントロール: 埋め込まれたコンテンツが使用できる機能やAPIを指定できるよ
• 権限管理: 地理情報やカメラなどのアクセス権を柔軟に管理できる

7.4 属性 sandbox

sandbox属性は、<iframe>に読み込まれたコンテンツに制限をかけるために使用されるんだ。これにより、 スクリプトの実行やポップアップの表示などの特定のアクションを防ぎ、セキュリティを高めることができるよ。

構文:

    
      sandbox="allow-scripts allow-same-origin"
    
  

sandbox属性の値:

• allow-forms: フォームの送信を許可する
• allow-modals: モーダルウィンドウの使用を許可する
• allow-orientation-lock: 画面の向きの固定を許可する
• allow-pointer-lock: ポインタのキャプチャを許可する
• allow-popups: ポップアップの表示を許可する
• allow-popups-to-escape-sandbox: ポップアップがsandboxを抜けることを許可する
• allow-presentation: プレゼンテーションAPIへのアクセスを許可する
• allow-same-origin: 同じオリジンからのスクリプトの実行を許可する
• allow-scripts: スクリプトの実行を許可する
• allow-storage-access-by-user-activation: ユーザーの操作によるストレージへのアクセスを許可する
• allow-top-navigation: トップレベルのナビゲーションを許可する
• allow-top-navigation-by-user-activation: ユーザーの操作によるトップレベルのナビゲーションを許可する

使用例:

    
      <iframe
        src="https://www.example.com"
        sandbox="allow-scripts allow-same-origin">
      </iframe>
    
  

メリット:

• セキュリティ: 潜在的に有害なスクリプトの実行を防ぎ、埋め込まれたコンテンツの機能を制限する
• アクセス制御: 開発者が埋め込まれたコンテンツに許可する機能を正確に指定できる

7.5 属性 loading

loading属性は、<iframe>の読み込み方法を管理し、要素が画面に表示されるまで読み込みを遅らせる（遅延読み込み）ことができるんだ。

loading属性の値:

• lazy: <iframe>の読み込みを要素が見えるまで遅らせる
• eager: 要素の可視性に関わらず、すぐに<iframe>を読み込む

構文:

    
      loading="ステータス"
    
  

使用例:

    
      <iframe
        src="https://www.example.com"
        width="600"
        height="400"
        loading="lazy">
      </iframe>
    
  

メリット:

• パフォーマンスの最適化: 遅延読み込みは、読み込むデータ量を減らし、ページのロード時間を短縮する
• リソースの使用削減: ユーザーが実際に見る／使う要素のみを読み込む