Code011: ちょっとした小技集ほか

この記事は2002年に書かれたものです。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
【 Webプログラミング Code Sample 】                          Since2001/11/23

                        Code011: ちょっとした小技集ほか

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
                                                    Produced by ichikoro.com

           ▼毎週月曜日配信です。
           ▼等幅フォントでご覧いただくとキレイに見えます。
           ▼登録・解除はこちらから可能です。
               < http://www.ichikoro.com/webp/ >
                  ※バックナンバーへのリンクもあります。
                  ※お友達にもぜひお勧めください(^^)/

─【Contents】───────────────────────────────
    01. Q&A ................... もっと画像を早く読み込むには?
    02. Q&A ................... ピクセル単位でマージン(余白)を設定したい
    03. Q&A ................... URLの書き方


今回は特別号です。

なかなか本流の話では出てこないちょっとしたチップスをご紹介、解説いたします。
もし違っているところや、あなたの知っているチップスがあったら、ぜひ教えてくだ
さいね(^^)/

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  01.Q&A  「もっと画像を早く読み込むには?」
──────────────────────────────────────

    Q.もっと画像を早く読み込めるような裏技はありませんか?
    A.ページ構成よっては、キャッシュを利用することで実現できます。

    ---------------------------------------------------------------------
    ★ 解 説 その1
    ---------------------------------------------------------------------
        色数を落とすとか、ファイル形式を変更してみるとか、解像度やサイズ
        をできる限り削るのが一番効果あるのですが、ここまでやって直、表示
        の速さを求めるにはどうすればどうすればいいのでしょうか?
            ※線を太くするとか、サーバを増強するというのは無し
             ということで(^^;

        基本的にはキャッシュを効果的に用いるようなページを作成するのが一番
        です。例えばサイト全体で使っているロゴなどは、共通の画像を呼び出す
        ことでずいぶんと違ってきます。

        上部にタブを用いたナビゲーションを使っているサイトでは、すでに定石
        となっています。

            ・アップルコンピューター
                http://www.apple.co.jp/

            ・アマゾン
                http://www.amazon.co.jp/
                    ※いずれも画像を細かく切ってありますよね?

    ---------------------------------------------------------------------
    ★ 解 説 その2
    ---------------------------------------------------------------------
        ページの構成によっては、“先読み”することでも実現できます。
        やり方は簡単です。次のページで表示する画像を、あらかじめ前の
        画面で呼び出します。

            <IMG src="next_page_no_image.jpg" width="1" height="1">

        すると、次の画面ではキャッシュが使われ、ほぼ一瞬で表示されることに
        なります。前の画面でサムネイルを表示し、次の画面で大きな画像を表示
        するというようなページでは有効だと思います。
        ただ、これは

            「ん?全部読み込んだハズなのに、まだ読み込み完了にならないなぁ。
             一体何を読み込んでるんだろう???」

        と、ユーザーを不安にさせることもありますので実際に使うときは注意が
        必要です。


        一番気をつけないといけないのは、不必要に画像を使わないことです。
        文字などを画像にすれば、OSやブラウザに依存せず好き勝手にフォント
        などを使えるので、デザイナーさんの気持ちも分からないではないですが、
        ユーザーは必ずしもそれを望んでいるとは限りません。
            ※また、ロボット式の検索エンジンにヒットしなくなるので、トータ
             ルで考えるとマイナスの面もあります。

    ---------------------------------------------------------------------
    ★ 解 説 その3
    ---------------------------------------------------------------------
        ちなみに、HTML4.0ではLINKタグという物が定義されており、

            <HTML>
                <HEAD>
                  <TITLE>Chapter 2</TITLE>
                  <LINK rel="Index" href="/index.html">
                  <LINK rel="Next"  href="Chapter3.html">
                  <LINK rel="Prev"  href="Chapter1.html">
                </HEAD>

        なんてことを記述しておくと、それを見越して先読みをしてくれる
        ブラウザがあるかもしれません。
            ※IEやNCでの実装は未確認です。
             期待しない方がよいでしょう。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  02.Q&A  「ピクセル単位でマージン(余白)を設定したい」
──────────────────────────────────────

    Q.BRやPよりももっと柔軟に、ピクセル単位でマージン(余白)の設定を
     したいのですが...。
    A1.透過GIFを使いこなすことによって実現できます。
    A2.スタイルシートを使いましょう。

    ---------------------------------------------------------------------
    ★ 解 説 その1
    ---------------------------------------------------------------------
        まず、古くから使われている方法を説明しましょう。
        原理は簡単です。1×1ピクセルの透過GIFを用意します。
        後はスペースを空けたいところで、

            <IMG src="spacer.gif" width="300" height="10">

        と言った具合に画像を呼び出すだけです。

        元々1×1ピクセルの画像ですので重さは大したことありませんし、ページ
        内でたくさん使っても2回目以降はキャッシュが使われます。とは言っても
        たくさん使うと、ブラウザが表示(レンタリング)する処理に時間がかかる
        場合があります。また、サーバが鈍足の場合最初の一個がなかなか取って
        これない...なんて事態も考えられます。
            ※まぁ、極端なことしなければそんな神経質になること
             もないでしょう。


        もう一個これを応用して、

            <TABLE border="3">
                <TR>
                    <TD>あいうえお</TD>
                    <TD>かきくけこ</TD>
                </TR>
                <TR>
                    <TD>さしすせそ</TD>
                    <TD></TD>
                </TR>
            </TABLE>

        というようなテーブルを書いた場合、右下のセルがハズカシイことになって
        しまいます(トーフと呼んでいます)。
        そこで、ここに

            <TABLE border="3">
                <TR>
                    <TD>あいうえお</TD>
                    <TD>かきくけこ</TD>
                </TR>
                <TR>
                    <TD>さしすせそ</TD>
                    <TD><IMG src="spacer.gif" width="1" height="1"></TD>
                </TR>
            </TABLE>

        とすることで、このトーフ現象を阻止することができるのです。
        もっとも、

            <TABLE border="3">
                <TR>
                    <TD>あいうえお</TD>
                    <TD>かきくけこ</TD>
                </TR>
                <TR>
                    <TD>さしすせそ</TD>
                    <TD><BR></TD>
                </TR>
            </TABLE>

        としてもいいのですが(^^;
        他にも

            <TABLE border="3">
                <TR>
                    <TD>あいうえお</TD>
                    <TD>かきくけこ</TD>
                </TR>
                <TR>
                    <TD>さしすせそ</TD>
                    <TD><IMG src="spacer.gif" width="250" height="1"></TD>
                </TR>
            </TABLE>

        としておけば、テーブル幅を250ピクセルに保つことができます。

            <TABLE border="3" width="80%">

        とした場合でも、最低幅を250ピクセルにすることができます。


    ---------------------------------------------------------------------
    ★ 解 説 その2
    ---------------------------------------------------------------------
        本来のHTMLの意図から言うと、上の方法は邪道です。
            ※昔は“工夫”だったんですがねぇ(^^;

        スタイルシート(CSS)を使うのが正攻法です。
        では具体的にどうすればいいのでしょうか?詳しいことは本流の流れで
        後程説明しますが、CSSにはマージンをそのまま設定できます。

            <HTML>
                <HEAD>
                    <TITLE>ま〜じん</TITLE>
                </HEAD>
                <BODY>
                    ここがページの先頭

                    <DIV style="margin: 100px;">
                        これがマージンだ!
                    </DIV>

                    ここがページの最後
                </BODY>
            </HTML>

        とすると、DIVの前後左右に100ピクセルの余白ができます。
        DIVタグや、詳しいことについては、長くなりますので後日
        解説します。

        「うお〜、一刻も早く知りたいぜ!」という方は、とりあえず
        こちらをご覧くださいませ。

            ・とほほのスタイルシート入門
             http://tohoho.wakusei.ne.jp/wwwcss.htm

            ・DIVタグ
             http://tohoho.wakusei.ne.jp/html/div.htm

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  03.Q&A  「URLの書き方」
──────────────────────────────────────

    Q.“http://www.yahoo.co.jp/new”と“http://www.yahoo.co.jp/new/”は
       違うものなんですか?
    A. はい、違います。

    ---------------------------------------------------------------------
    ★ 解 説    やさしく解説
    ---------------------------------------------------------------------
        結論から言うと

            ・http://www.yahoo.co.jp/new  ←ディレクトリ
            ・http://www.yahoo.co.jp/new/ ←ファイル
                ※↑index.htmlなどを省略している指定方法なのです。

        ということになります。


        ディレクトリを指定しまった場合、サーバはブラウザに

            「これはファイルではなくディレクトリだから表示できなんだよね〜。
             悪いけど、指定する場所に移動してくれない?」

        と返してきます。
        ブラウザは再びその場所にあるファイルをくれと、サーバに呼びかけます。

        このやり取りは、普段IEやNCなどを使っていると見ることはできませんが、
        実際にブラウザは2回のアクションをしなくてはいけなくなります。またサ
        ーバも2回応答せねばならず、少なからず負荷がかかることになります。

        そこで、ブランディングなどの理由が特別に無いのであれば、ディレクトリ
        の最後にはスラッシュ'/'をつけましょう。


    ---------------------------------------------------------------------
    ★ 解 説    小難しく解説
    ---------------------------------------------------------------------
        では本当にそうなのか確認してみます。

        ここではHTTPレベルの話をしましょう。これが一番確実です。
        まずは後者(スラッシュ有り)の場合ですが、

            HEAD /new/ HTTP/1.0

        とした場合、

            HTTP/1.1 200 OK
            Date: Mon, 14 Jan 2002 10:20:56 GMT
            Cache-Control: private
            Pragma: no-cache
            Connection: close
            Content-Type: text/html;charset=euc-jp

        きちんとファイルが帰ってきます。
        が、今度は

            HEAD /new HTTP/1.0

        としてみましょう。
        すると...

            HTTP/1.1 301 Moved Permanently
            Date: Mon, 14 Jan 2002 10:23:32 GMT
            Location: http://w11.yahoo.co.jp/new/
            Connection: close
            Content-Type: text/html

        と帰ってきてしまいました!


        ちなみに、これを試すのはtelnetでもいいんですが、Windowsな人の場合、
        下記のソフトが便利です。

            ・httpRequest
             WEBサーバの送ってくるヘッダを確認
              http://www.vector.co.jp/soft/win95/net/se065240.html


━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
                           編    集    後    記
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

いかがでしたでしょうか?

普段書き溜めていた物を、まとめてみました。
リクエストがあったり気が向いたら(^^; また発行いたします。

他にも、
 「こんなことできないの?」
 「こんなこと知ってます!」
というトピックスがあったら教えてくださいね!

ご応募はこちらから

  	mm-webp@ichikoro.com


ではでは、また月曜日発行の本誌でお会いしましょう (^-^)/~~

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

                   【 Webプログラミング Code Sample 】

                    発  行 : ichikoro.com
                発行責任者 : 勝部 麻季人
                              < mailto:katsube@ichikoro.com >
                  発行部数 : 1458部(前回)
                 Webサイト : < http://www.ichikoro.com/webp/ >
            お問い合わせ先 : < mailto:mm-webp@ichikoro.com >

                            Powerd by まぐまぐ
    All Right Reserved, CopyRight(C) 2001 Webプログラミング Code Sample
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

コメント

コメントを入力. Wiki文法が有効です:
Q​ P G K O