|
==============================================================
うちのホームページはどーなってるんだ！
Vol.031 発行／2004.06.29
==============================================================
▼アクセス解析はここを見ましょう！（２）
筆者／石井研二
前回、HTMLには、画面に表示されない「ヘッダ」部分と、表示される「ボディ」
部分があると書きました。ヘッダはブラウザに伝達する決まりごとをしっかり書
く部分ですが、ここが長いとサーチエンジンロボットがうまく巡回できません。
肝心のボディ部分まで見てくれない恐れがあるので、ヘッダはできるだけ短くす
るべきです。
そこで、今回はヘッダを長くしてしまう原因を見て、これを短くする方法につい
て解説します。これ、重要ですからしっかり憶えましょう。企業ウェブマスター
のかたは制作会社さんとしっかり相談して、コンセンサスをつくってください。
HTMLソースがいっぱい出てきて「難しそう」に見えるかもしれませんが、制作者
には簡単に分かることですし、ヘッダのソースをダイエットするのは非常に有意
義なことですから、じっくり見て、できればプリントアウトして打ち合わせに使
ってください。
========================================================================
■ ヘッダを長くする原因は２つある
------------------------------------------------------------------------
ブラウザはボディを表示する前にヘッダ部分を読んで、そこに書かれた設定をし
っかり認識します。そのために、ページに機能を加えるJavaScriptの定義や、レ
イアウトを整えるスタイルシートの定義を書くのがこの部分、ということになり
ます。
このJavaScriptとスタイルシートの定義が、ヘッダを長くしている２大原因と言
って良いでしょう。この２つを短くするのは簡単です。
JavaScriptでは、ヘッダ内にこんな感じで、自由に機能を定義できます。
<script language="JavaScript">
<!--
function linkConfirm(){
if(confirm("他のサイトに移動しますが良いですか？")){
location.href="http://www.sitegram.com/";
}
}
//-->
</script>
ヘッダ内にこう書いておきます。linkConfirm()がこの機能の名前です。
そして、ボディ内の任意のリンクのところに、
<a href="#" onClick="linkConfirm()">
別ドメインのホームページへリンクします。
</a>
と名前を呼びだしてやればこの機能を利用できるわけです。
これは、リンクをクリックすれば警告を表示して、YESがクリックされれば指定
したURLに移動し、NOがクリックされれば、リンクをキャンセルする、という機
能です。（実際にこのまま使えるソースなので、リンク先のURLやメッセージを
変えてご自由にご利用ください）
こんな形で、ヘッダ内に定義を書いておけば、ページ内の任意の位置で機能を利
用できるので大変便利なものです。
しかし、長い。上の簡単な機能を定義するだけで、９行もかかっていますね。本
当に有効な機能を定義しようと思うと、すぐに数十行のスクリプトになってしま
います。
企業ホームページで、最も良く使われるJavaScriptソースは、次のようなもので
しょう。リンク画像にマウスカーソルが来たら絵が変わり、カーソルを絵からは
ずすと元の絵に戻る、という機能です。これをベストセラーのホームページ制作
ソフト「ドリームウィーバー」で記述すると、４つの機能パーツから成り立つス
クリプトとなり、
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length
&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments;
for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){
d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0
&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document;
n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n];
for (i=0;!x&&i
for(i=0;!x&&d.layers&&i
x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array;
for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x;
if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
となってしまいます。制作にドリームウィーバーが使われているホームページな
ら、ソースを見れば多くの場合この通りのことが書かれた部分がヘッダに見つか
るはずですから見てください。
今、メールの横幅の関係でソースを折り返していますが、実際はこれだけで２６
行も使っています。絵を差し替えるだけで２６行！ この他の機能も使って、使
い勝手の良いページにしようと思うと、ヘッダはすぐに１００行以上の長いもの
になってしまうわけですね。
同じような機能が他の多くのページでも必要とされますから、ほとんどのページ
に同じことが書かれている状態となります。つまりサイト全体でヘッダが長いホ
ームページになってしまうのですね。
そこで対策。上記のようなひとまとまりの機能を実現するスクリプトパーツは、
１つのテキストファイルにして、a.jsといったファイル名をつけます。そして、
元のHTMLファイルのヘッダの中に、
<script language="JavaScript" src="/a.js"></script>
と、１行書いてやれば、上記の２６行を書いたのと同じ機能が得られるのです。
これだけで２５行もヘッダをダイエットしたことになります。
同じ機能を使うすべてのページでこの１行を使えるので、全ページでダイエット
が実現します。
また、a.jsというファイルはそれ自体独立したファイルなので、ブラウザが「キ
ャッシュ」してくれます。一度あるページを表示する際にこのa.jsを読み込んだ
ら、次のページでまたa.jsを呼びだすとき、キャッシュから読んでくれるのでブ
ラウザの反応（ページの表示）も早くなります。
しかも、a.jsの内容を変更すれば、これにリンクしている全ページに変更を反映
することができます。何百ページあるホームページでも、たった１ファイル直す
だけで、全ページに変更を反映することができる！ これは便利な仕組みです。
スタイルシートについても同様に、すべての定義を外部ファイルにして元のHTML
からリンクすることで便利に使うことができます。これについては次回ご覧いた
だくことにしましょう。
========================================================================
■ 今回の注目URL
------------------------------------------------------------------------
このコーナーでは、毎回、私が発見した面白いサイトをご紹介しています。
★ まぐまぐ
http://www.mag2.com/
このメルマガ自体もまぐまぐを使って発行しています。非常に有名なメールマガ
ジン発行システムです。もちろん、読者はみなさんご存知だと思いますが、改め
てこのサイトをご紹介するのは、わけがあります。
このトップページのセカンドスクロールの部分を見てください。「メールマガジ
ンカテゴリ分類」というリストがありますね。Yahooみたいにずらりとリンクが
並んで、面白いメルマガを見つけるのに便利なインターフェイスです。
実はこのリンクリスト、ホームページでマーケティングを考えている人には、別
の意味でものすごく「使える」リストなのです。
ホームページというのは地縁を超えて、生活者をその興味関心に基づいて集合さ
せ、分類してくれている素晴らしいマーケティング装置です。あなたのお客さん
になる人たちを、あらかじめ誰かがメルマガという形で集めてくれています。
例えばあなたがアウトドア関連の商品を売ろうと思っているとしましょう。「メ
ールマガジンカテゴリ分類」から「アウトドア」という項目をクリックしましょ
う。なんとこのカテゴリだけで１０８件もメルマガがあることが分かります。発
行部数なども分かりますから、１０８メルマガ全部見てみましょう。どんなメル
マガが人気を集めていますか？ あるメルマガが多くの読者を集めているという
ことは、あなたの商品分野に関心がある人が、そのメルマガに集まっているとい
うことなのです。
そう考えると、まぐまぐの「メールマガジンカテゴリ分類」リストは、宝の山だ
と分かりますね。ウェブマーケティングの分類棚なのです。人気のあるメルマガ
の紹介文やバックナンバーを見、さらに実際に購読することで、あなたの顧客と
なる人がどんな情報を求めているか、どんなキーワードを使えば人気を集められ
るか、すべて分かります。
素人が発行しているような媒体でも、平気で２０００人なんて多数の読者を集め
ているのです。日本企業は大企業サイトの真似ばかりして個人の活動を軽視する
傾向がありますが、それは非常に損なことです。ぜひじっくり読んでください。
========================================================================
【筆者プロフィール】
石井研二（いしい・けんじ） 61年生まれ。有限会社いなかどっとコム代表。
アクセス解析サービス「サイトグラムPro」で年間3億ページビューを分析し、
多くのサイトのアクセス向上を指南する「日本一のログ読み男」。
========================================================================
▼▼▼▼▼▼▼▼
ＳＩＴＥＧＲＡＭメールマガジン「うちのホームページはどーなってるんだ！」
◆週刊発行 購読無料
◆転載はご自由にどうぞ。事後にご連絡いただければ幸いです。
◆購読登録／削除は、こちらから→ http://www.sitegram.com/
◆ご連絡／お問い合わせ等は → info@sitegram.com
編集発行／有限会社いなかどっとコム http://www.inaka.com/
〒530-0053 大阪市北区末広町3-7 矢崎ビル2F
PHONE 06-6316-7599 FAXIMILE 06-6316-7630
========================================================================
|
