イフラメ

IFrameのは( 私は Fの RAMEをNLINE)別のURLからコンテンツを表示するには、HTMLページ内のフレームまたはウィンドウを作成するHTMLコードの一部です。

Moodleでは、以下のようなコンテンツを表示するのが良い方法です。

  • Googleカレンダー、Microsoft Outlook Webカレンダー、Apple Mobilemeカレンダーなどの外部サイトからのカレンダー
  • 現在の内容のウェブページ:例えば天気
  • 現在の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の内容を編集できます。いくつか例を挙げると、Google Docs&Spreadsheets(以前のWritely)、JotSpot Live、Windows Live Hotmailなど、この機能を利用する人気のあるWebアプリケーション。

注:多くのWebサイトでは、自分のページをiframeでレンダリングすることは許可されていません(これはX-Frame-Options HTTPレスポンスヘッダー[1]を介して行われます)。
ターゲットのWebアドレスでiframe機能が許可されているかどうかを確認するWebサイト(Googleでこれを使用できます)があります。

コード例

iframeを作成するには、

  • セクションヘッダー、ラベル、Webページ、フォーラムの投稿を編集する
  • HTMLコード表示をオンにする
  • 次のコードをどこかに貼り付けます
<iframe height = "600" width = "900" src = "https://docs.moodle.org">あなたのブラウザはiFrameを表示していません</iframe>

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

<iframe height = "300" width = "600" src = "https://demo.moodle.org/file.php/2/Media_examples /WQ3.pdf"> IFrameを理解できないブラウザ用の代替テキスト</ iframe >

使用例

これは、Iframeを使用してPDFファイルを課題に挿入する方法の例です。

  1. コース内で、コースファイル領域にPDFをアップロードしてください。
  2. ファイルをクリックして、ブラウザのアドレスバーにそのURLアドレスを書き留めます。
    1. ヒント:ブラウザウィンドウからURLをコピーしてメモ帳に貼り付けます。または、2番目のブラウザウィンドウを開いてpdfファイルを探し、そのウィンドウのURLアドレスをコードで開いているウィンドウにコピーします。
  3. 新しい課題を作成する(オンラインテキスト)
  4. 説明については、エディタでビューをHTMLビューに変更し、手順2でメモしたPDFのURLを指すiFrameのHTMLコードを埋め込みます。
  5. WYSIWYGモードに戻り、新しく表示されたiframeの下に質問を追加します。
  6. 保存すると、学生は自分の回答を入力するのと同じウィンドウにスクロール可能なPDFを表示できるようになります。

これは作り出しました:

学生ビューでスクロールバーを表示するiframeの例

関連情報