ちょいと一工夫 -WEB編-

 ここでは、当サイトで使っている javascript や スタイルシートをご紹介します。
お、こいつぁ使えるじゃん? なんて思ったら、どうぞご利用下さい。改造もOKです。
もっと効率の良いやり方があれば、ぜひ教えて下さいっ

  直リンク対応
  ブラウザチェック
  バナー切り替え表示
  バナー切り替え(その2)
  次ページへ
  INDEXへ


 
直リンク対応
 色々なサイトを見るときに、fakerは検索エンジンをよく使うのでが、ヒットしたページがTOPページであることって少ないですよね。
そして、フレーム構成のサイトさんの場合、各コンテンツページにトップページへのリンクがない事があるんです。(まぁ、フレームでインデックスを表示してるわけですから、トップページからアクセスしていれば問題無いんですけどね)
 興味をひいてもいちいちトップページを探すのは面倒なので、リンクがなければそれでおしまい。これってもったいないですよねー。

 というわけでうちのサイトでは、直接コンテンツのページにアクセスされた場合だけトップページへのリンクが出現させるべく、これを書きました。
これは、別途jsファイルに書き、<script type="text/JavaScript" src=ファイル名></script>で呼び出しています。

〜 JavaScriptの記述内容 〜
refer=document.referrer;
if(refer.indexOf('www.friend.jp/myweb/docs/faker')==-1){
document.write("<hr>本サイトのトップページは<a href=./index.htm>こちら</a>です。<hr>");
}

 赤字のURL部分が、個別に変更する個所です。最初の部分は、自分のファイルが置いてあるURL(ルートディレクトリ)名で、これ以外のURLからのアクセス時に、下の部分の赤字で記述された文字列が表示される。というわけです。
 試しに、このページを直接アドレス部へコピーして、開いてみてください。

  http://www.friend.jp/myweb/docs/faker/tips_web.htm


 
ブラウザチェック
 当サイトで利用しているスタイルシートはIE5.5以降でサポートされているものがあるため、IE5.5以前やネットスケープ等、他のブラウザでは一部作者の思い通りな表示がされません。
 なので、そういうブラウザな方たちがアクセスした場合は、その旨をお断りしておきたいと思い、これを書きました。
これも別途jsファイルに書き、<script type="text/JavaScript" src=ファイル名></script>で呼び出しています。

〜 JavaScriptの記述内容 〜
function BrowserType(){
  ua=0;
  MS1="<table border=1 width=65%><th bgcolor=#99ffff>ご注意</th><tr><td>当サイトで利用しているスタイルシートは、";
  MS2="<a href=\"http://www.microsoft.com/japan/ie/\" target=\"top\">Internet Explorer 5.5以降</a>";
  MS3="でサポートされてるため、貴方のブラウザでは正しく表示されないかもしれません。<BR>";
  MS4="をご利用頂くと、正しく表示されたコンテンツをご覧頂けます。</td></table><p>";

  //ブラウザの判別
  if(navigator.appVersion.charAt(0) < "4") {ua=1;}
  if(navigator.appName=="Netscape") {ua=1;}
  //メッセージ表示
  if(ua==1){document.write(MS1 + MS2 + MS3 + MS2 + MS4);ac=1;}
}

 最初のMS1〜4の中身が表示するメッセージです。MS1〜4まで分けてるのは、1つだとソースが見づらいからです。
 ブラウザの判別は、中ほどのifでやってます。appVersion で取れる値が4以下の場合メッセージを表示します。
 これは、トップページだけで表示されます。トップページから、

  <script language="JavaScript"><!--
    BrowserType()
  //--></script>

 で呼び出しています。
 当サイトに、IE5.5 or IE6.0 以外でアクセスして頂くと、見ることができますよ。


 
バナー切り替え表示
 せっかくサイトを立ち上げたからには、バナーを貼ってちょいとお小遣いを稼ぎたいですよねっ。
 でも、あまりペタペタ貼るのはどうも気に入りません。それならば、リロードのたびにランダムに切り替わるバナーにすれば、貼る場所は1個所で、何個もバナーが入れられるな、と思い、書いてみました。

〜 JavaScriptの記述内容 〜
function poster(){
  MSG1 ="";
  MSG2 ="";
  MSG3 ="";
   r = Math.floor(Math.random()*2);   //()の後の数字は、乱数の最大数
  if ( r == 0){
   MSG1= "広告Aバナーのソース(その1)";
   MSG2= "広告Aバナーのソース(その2)";
   MSG3= "広告Aバナーのソース(その3)";
  }if ( r == 1){
   MSG1= "広告Bバナーのソース(その1)";
   MSG2= "広告Bバナーのソース(その2)";
   MSG3= "広告Bバナーのソース(その3)";
  }if ( r == 2){
   MSG1= "広告Cバナーのソース(その1)";
   MSG2= "広告Cバナーのソース(その2)";
   MSG3= "広告Cバナーのソース(その3)";
  }
  document.write(MSG1 + MSG2 + MSG3);
}

 MSG×× は、1つの変数に長々とバナーのソースを入れるとソースが見難いので分けてます。
 で、"r = " の部分が乱数を取り出す部分で、赤数字がファイル数となります。この場合、A/B/C の広告があるので、2を指定しています。
 if の部分で、取り出した乱数と、広告のソースを決定しています。そして、最後の "document.write" で、それを書き出しています。
 あとはこのfanctionを呼び出したいページに、下記のように記述して完成です。

  <script language="JavaScript"><!--
    poster()
  //--></script>

 これで、リロードされるたびにバナーが切り替わります。試しにこのページをリロードしてみて下さい。先頭のも最後のも、ランダムにバナーが切り替わってると思います。
 広告が増えたら、その分赤い部分の数値を増やし、if文を追加していけばOK。

 そうそう、これ、1つ問題があります。これをやってしまうと、広告主さんから各ページのソースチェック等で見つけてもらえない可能性があります。(バナーの書き込み先が htmファイルではなく、jsファイルになるので。)
 ですので、これはあくまでもサブとして利用したほうがいいかもしれません。。

2003.04.22
 表示するバナーの数を増やしてみました。それぞれランダムに表示されます。
 詳細はバナー切り替え(その2)をご覧下さい。


 
バナー切り替え(その2)
 前回のバナーは、1つのバナーをリロードの度にランダムに切り替えるものでしたが、今回は複数の広告をリロードごとにランダムに切り替えるようにしてみました。

〜 JavaScriptの記述内容 〜
function poster(){
  MSG1 ="";
  MSG2 ="";
  MSG3 ="";
  br = 0;  // 前回の乱数を格納する変数
  FLG = 4;  //回す回数(表示する広告数)
  for (i=0;i<FLG;i++){  //iが FLG(広告数)になるまで繰り返す
  r = Math.floor(Math.random()*10);  //()の後の数字は、乱数の最大数
  while (br == r){r = Math.floor(Math.random()*14);}  //前回と同じ数値になったらもう1回乱数GET
   r = Math.floor(Math.random()*10);   //()の後の数字は、乱数の最大数
  if ( r == 0){
   MSG1= "広告Aバナーのソース(その1)";
   MSG2= "広告Aバナーのソース(その2)";
   MSG3= "広告Aバナーのソース(その3)";
  }if ( r == 1){
   MSG1= "広告Bバナーのソース(その1)";
   MSG2= "広告Bバナーのソース(その2)";
   MSG3= "広告Bバナーのソース(その3)";
             ・
             ・
             ・
  }if ( r == 9){
   MSG1= "広告Jバナーのソース(その1)";
   MSG2= "広告Jバナーのソース(その2)";
   MSG3= "広告Jバナーのソース(その3)";
  }
document.write(MSG1 + '\n' + MSG2 + '\n' + MSG3 + "\n\n");
}

 まぁ、要は for で表示したい広告数分繰り返しただけですね。
 ちなみに、上の例では、10種類のバナーから4つをランダムに選択し、横に並べて表示します。このページとリンクページもランダムに4つ並んでますよね。

 12行目の while では、ランダム選択した数値が前回と同じだった場合、違う数値に変更させています。ただ、1個前しかチェックしてないので、1つ飛んで同じバナーが出ることはあります。ま、そうなったらそのバナーはラッキーってことで。。。

 あ、HTMLへの記述は、上の バナー切り替え表示 と同じです。

2003.04.25
 現在ふみづきで動いてるスクリプトは、これとは少し変えてあります。(forで回すのをやめ、列ごとにランダム表示させてます。)


SEO [PR] 爆速!無料ブログ 無料ホームページ開設 無料ライブ放送