【特別企画】 トラフィックエクスチェンジを作ってみよう! > 1、フレームを作ってみる

1、フレームを作ってみる

さて、トラフィックエクスチェンジと言えばフレームです。 天地開闢以来変わることのない鉄の伝統です。これがなきゃトラフィックスクチェンジを名乗る資格はない。 切っても切れない? いいや違うね。切れと言われても切らぬ。鋼の意志で貫き通す。 それこそがフレームだ。それこそがトラフィックエクスチェンジだ。

というわけで深く考えずに最初に画面のレイアウトを決めてしまいましょう。

大体こんな感じですよね。トラフィックエクスチェンジって。

ではこれをHTMLで実現していこうではありませんか。

フレームのHTMLタグはこうです。

  <frameset rows="20%,80%">
    <frame id="naviFrame" src="タイマーのある側">
    <frame id="surfFrame" src="ユーザーの宣伝したいページ">
  </frameset>

と、言いたいところですが、なんと! フレームタグがサポートされていたのはHTML4.01までなんですってよ。 今をときめくHTML5ではサポートされていないとのこと。ガビーン。もはやトラフィックエクスチェンジもこれまでか。 いや別に今出回ってるブラウザでこのタグが動かないってわけじゃないのでこれで押し通してもいいんですけどね。 一応今回の企画では代わりにインラインフレームを使っておこうかなと思います↓ 何が一応なのかは私にもよくわからないので聞かないでください。

  <iframe src="http://xxxxxxxxxxx"></iframe>

さて、インラインフレームを無造作に使うと、なんというか、こう、画面に異次元への穴が開いたみたいなファンキーな画面になりますよね。

この窓の中に宣伝先のページを表示ってわけですか? 僕らの知ってるトラフィックエクスチェンジとはちょっと違う感じですね?  別にこれでもアクセス自体は発生するからいいっちゃいいんですけどね。どうせ画面なんて誰も見てないんだし。 とは言うものの、こういうのは「そうそう、これこれ!」っていう? デジャヴ感? お馴染み感? っていうの? みたいなのがなんかその大事? じゃないですか?  と、切れ切れに語尾を上げつつ、ゴリゴリとコーディングしてノスタルジーを具現化しようではありませんか。

<body>

    <!-- タイマーが表示される側 -->
    <div id="surfNavi">
        あとxx秒
    </div>

    <!-- 宣伝先のページが表示される側 -->
    <iframe id="surfFrame" src="http://xxxxxxxxxxx"></iframe>

</body>

このようにdivタグで画面の上側にナビゲーションパネルというか、要するに「タイマー側」ですね。 その領域を確保します。

あとはスタイルシートで適当に形を整えます。

<style>
    /*  画面端のスキマをぴっちりと詰めておく */
    html,body {
        margin:0;
        padding:0;
        height : 100%;
    }
    
    /*  タイマー側 */
    #surfNavi {
        width : 100%; /*  横幅いっぱい */
        height : 20%; /*  画面の上20%。比率はお好みで */
        background-color : #eeeeff; /*  背景色。なくてもいいですが今は見た目のわかりやすさのために指定 */
    }
    
    /*  宣伝ページ側 */
    #surfFrame {
        width : 100%; /*  横幅いっぱい */
        height : 80%; /*  100 - 20 */
        border : 0px; /*  境界線を0に。これがないと微妙にスクロールバーが出たりしてうっとうしい */
        position : absolute; /*  スクロールバー対策が目的のおまじない。他にちゃんとした方法知ってたらそれで */
        
    }
</style>

するとこんな感じに。

おお、これだよこれ! 僕らが求めていたのはコレなんだ! 
このままどこまでも突っ走りたい! オートサーフを放置して宇宙の果てまで買い物に行きたい! 
うむ。まだ形だけですが、見た目が整うと心が踊りますね。びちびち。

今回のまとめ

今回作成したソース全文です。
ご丁寧にDOCTYPE宣言や文字コード指定のメタタグなんかもつけてみましたよ。UTF-8じゃない派のお友達は適宜合わせておいてね。 全体を見渡せるように1枚にしてありますが、スタイルシートを別ファイルにしたい派のお友達は遠慮しなくていいですよ。

ファイル名:surf.html、かな?
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>トラフィックエクスチェンジだぜ!</title>
        <style>
            /*  画面端のスキマをぴっちりと詰めておく */
            html,body {
                margin:0;
                padding:0;
                height : 100%;
            }

            /*  タイマー側 */
            #surfNavi {
                width : 100%; /*  横幅いっぱい */
                height : 20%; /*  画面の上20%。比率はお好みで */
                background-color : #eeeeff; /*  背景色。なくてもいいですが今は見た目のわかりやすさのために指定 */
            }

            /*  宣伝ページ側 */
            #surfFrame {
                width : 100%; /*  横幅いっぱい */
                height : 80%; /*  100 - 20 */
                border : 0px; /*  境界線を0に。これがないと微妙にスクロールバーが出たりしてうっとうしい */
                position : absolute; /*  スクロールバー対策が目的のおまじない。他にちゃんとした方法知ってたらそれで */
            }
        </style>
    </head>
    <body>
            <div id="surfNavi">
                あとxx秒
            </div>
            <iframe id="surfFrame" src="http://xxxxxxxxxxxxx/"></iframe>
    </body>
</html>

フレーム内に表示するURLとしては、とりあえず何か適当にデフォルトページを作って当てはめておくとよいでしょう。

次回予告

トラフィックエクスチェンジと言えばフレーム。そしてタイマーです。 誰が何と言おうとタイマーなのです。誰にも邪魔はさせないぜ。
というわけで次回は今回作った画面にタイマーを仕込んでいきます。 みなさんの大好きなJavaScriptを使いますよ。お楽しみに〜。

サイトTOPへ戻る
目次へ戻る
前のページ
次のページ