な！自転車でやせる >> IFRAMEというタグ(101)

な！自転車でやせる > 記事一覧 > IFRAMEというタグ
<< 前：稲光だ | 乗りたいなー：次 >>

2004-07-09

IFRAMEというタグ

Flashを使ったアナログ時計を設置してみた。
(すでに外してしまったが)

Nucleusの設定というわけではないが、備忘録として残しておく。

＜参考＞
Image Canvas
analog clockをいただいた。

(豚)ボンジュール時計レンタル
Flash analog clockでは有名かつクール。

これまでにも何度か設置を試みたのだが、うまくいかなかった。
問題はNucleusでは動的にページが作成される。
また、表示されるページごとにパスが変化する。
これにより、flashでできたアプリケーション（というのか？）の相対位置がズレるため、うまく表示できるページとそうでないページが生まれる。

解決策として、ひとつのページに小さな窓のようなものがあり、その中には別のページが表示できるような工夫が必要だろうと考えていた。
なにかjavascriptとかphpとかで作るのかと思っていたら、なんとそのもののタグが存在した。

IFRAMEはInline Frameの略とのこと。
IFRAMEを使用すると、 FRAMESETのようにウィンドウを水平・垂直に分割する形式だけではなく、ウィンドウの中に独立して表示される形式のインラインのフレームが作成できる。

まず、Image CanvasからFlashアナログ時計をdownloadしてきた。
数あるanalog clockから↑を選んだ理由は、シンプルなのとストップウォッチ機能がついていて、そこが自転車乗りらしいから。

設定タグ例を元にFlashを呼び出すhtmlファイルを以下のように作成する。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=EUC_JP"> <title>Flash analog clock</title> </head> <body> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="100" height="100" id="ac" align=""> <param name="movie" value="ac.swf?conf=config.txt" /> <param name="quality" value="high" /> <param name="bgcolor" value="#F7FFF8" /> <embed src="ac.swf?conf=config.txt" quality="high" bgcolor="#F7FFF8" width="100" height="100" name="ac" align="" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"> </object> <br /> <noembed> <a href="http://www.macromedia.com/jp/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash&Lang=Japanese" target="_blank">要Flash Player</a> </noembed> </body> </html>

このファイルをIFRAMEを使ったテンプレートから呼び出す。
テンプレート名をclockなどとして作成。

<iframe src="http://nakachi.org/clock/clock.html" id="clock" align="left" scrolling="no" frameborder="0" width="102" height="102" marginheight="1" marginwidth="1">この部分は iframe 対応のブラウザで見てください。</iframe> <br style="clear:left;">