Iframe

IFrame（ Inline Frame）は、別のURLのコンテンツを表示するためにHTMLページ内にフレームまたはウィンドウを作成するHTMLコードの一部です。

Moodleでは、次のようなコンテンツを表示するのに適した方法です。

Googleカレンダー、Microsoft Outlook Webカレンダー、Apple Mobilemeカレンダーなどの外部サイトからのカレンダー
現在のコンテンツを含むWebページ: 例: 天気
現在のMoodleコース外のネットワークロケーションからのコンテンツ（例: 別のMoodleコース、htmlページのネットワークファイル）
Google Picasaウェブアルバム、YouTubeなどのiFrameを介してコンテンツを配信するサイトのコンテンツ

注: 画面の幅は1200ピクセル幅であることが多いため、1000ピクセルまでのiFrameで十分な場合がよくあります。

IFrameのサイズは、周囲のHTMLページで指定することができ、IFrameが読み込まれている間に、周囲のページがすでにブラウザに表示されます。IFrameは、インラインイメージのように動作し、ユーザはスクロールして表示されないようにすることができます。一方、IFrameは、周囲のページのスクロールバーとは独立した独自のスクロールバーを含むことができます。

セキュリティ上の理由から、moodleではどこでもiframeを使用できるわけではありません。一般に、iframeコードは、課題の提出、Wiki、フォーラム、データベース、用語集、ブログの活動など、どの受講者でも書き込み可能で貢献することができるMoodle活動では許可されていません。これらの活動では、iframeに埋め込まれたビデオは、HTMLエディタ上では表示されますが、投稿や提出が保存されると削除されます。

注意: すべてのブラウザがIFrameを認識するわけではありません。ただし、Mozilla Firefox、Opera、およびMicrosoft Internet Explorerでは、contentEditableとdesignModeが導入されました。これにより、ユーザはIFrameに含まれるHTMLのコンテンツを編集できます。この機能を利用する有名なWebアプリケーションの例をいくつか挙げると、Google Docs＆Spreadsheets（以前のWritely）、JotSpot Live、Windows Live Hotmailなどです。

注: 多くのWebサイトでは、ページをiframeでレンダリングすることを許可していません（これは、X-Frame-Options HTTPレスポンスヘッダ[1]によって仲介されます）。
ターゲットとなるウェブアドレスがiframe機能を許可しているかどうかをチェックするウェブサイトがあります（グーグルで検索できます）。

コード例

iframeを作成するには、

セクションヘッダ、ラベル、Webページ、またはフォーラム投稿を編集します
HTMLコード表示をオンにします
次のコードをどこかに貼り付けます

次の例では、300 x 600 ピクセルのスクロール可能なウィンドウを作成し、AdobeReaderとその中のファイルを開きます。

使用例

Iframeを使用してPDFファイルを課題に挿入する方法の例を次に示します。

コース内で、PDFをコースファイル領域にアップロードします
それが終わったら、ファイルをクリックして、ブラウザのアドレスバーにURLアドレスを表示します。
1. ヒント: ブラウザのウィンドウからURLをコピーして、メモ帳に入力します。または、2つ目のブラウザウィンドウを開いてPDFファイルを見つけ、そのウィンドウからURLアドレスをコピーして、コードで開いているウィンドウにコピーします。
新しい課題を作成する（オンラインテキスト）
説明文は、エディタで表示をHTML表示に変更し、手順2で記したPDFのURLを指すiFrameのHTMLコードを埋め込みます。
WYSIWYGモードに戻り、新しく表示されたiframeの下に問題を追加します
保存を実行すると、学生は、解答を入力するウィンドウと同じウィンドウでスクロール可能なPDFを表示できるようになります。

これにより以下が作成されます:

学生にスクロールバーを表示するIframeの例

Documentation

Iframe

コード例

使用例

関連項目