ちょいと一工夫 -WEB編-

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

  マウスオーバーでメッセージ
  ナビリンク表示
  おみくじ
  ファイル名取得
   
  INDEXへ


 
マウスオーバーでメッセージ
 リンクのテキスト部分にマウスを乗せると、ステータスバーにメッセージを表示し、マウスを放すと消えます。
当サイトでは、フレーム表示時の、インデックスに利用しています。各項目にマウスを乗せると、簡単な説明をステータスバーで見る事ができます。

 とまぁこんなふうに、「常に表示させておく程重要な内容ではないんだけど、ちょっとした説明はしておきたい」なんて場合に便利だと思います。
 ただし、、残念ながらこのやり方ではネスケで表示されません(普通にリンク先のURLが表示されます)ので、そのあたりをご理解の上利用されると良いです。

〜 JavaScriptの記述内容 〜
<a href="リンク先URL" onMouseOver="status='メッセージ文'; return true" onMouseOut="status=' '; return true">

  使うのは、 onMouseOver と onMouseOut ですね。これらに status で表示したいメッセージを書き込んで、その後ろに return true を書けばOKというわけ。
ちなみに return true を省くとうまくいきません。ま、お約束だと思えばいいですね。

 onMouseOut の status に文字を入れれば、マウスが離れた時に別のメッセージを表示することもできます。
 ただ、その場合、他のリンクにマウスを乗せるまで、ステータスバーにメッセージが表示されっぱなしになってしまいますけどね。

 例えばこんなカンジ
 ソース:<a href="#mo" onMouseOver="status='ひゃはぁ。'; return true" onMouseOut="status='わほぉぅ。'; return true">

 いかがでしょう。いろいろと使えそうですよね。ただ、これをやるとリンク先のURLをステータスバーから知る事ができなくなります。これの多用は "ユーザビリティ" に影響を及ぼすかもしれませんのでご注意を。。


 
ナビリンク表示
 フレーム表示をOFFにしてる方用に、フレーム無し版のTOPページを追加したんですが、フレーム無し版からリンクを辿ると、TOPページに戻ってこられないという不具合が出てしまいました。

 それまでは常に左側にINDEXが表示されるので、各ページからの "TOPページへのリンク" は不要だったんですが、フレーム無し版では そのINDEXが表示されないので、他のページを見る場合毎回TOPページに戻ってもらわないといけません。でも、そのリンクが各ページに無いので戻れないというわけ。
 かといって、各ページにTOPへのリンクを付けると、今度はフレーム表示の時にうざったいのでスタティックには書きたくありません。

 そこで、フレームなし版TOPからアクセスされた場合のみ、TOPページへのリンクを表示させるようにしました。さらに、サイト内検索も付けたので、検索結果からアクセスされた場合は、"TOPページへのリンク" の他に、"検索結果へ戻るリンク" も表示させる事にしました。
 もちろん、上で書いた 直リンク対応もしっかり残します。

〜 JavaScriptの記述内容 〜
refer=document.referrer; //元のURL取得
FNM=document.location;  //現在のURL取得
MNM="http://www.friend.jp/myweb/docs/faker/index_main_nf.htm"; //フレーム無し版TOPのURL

//referrer が「ふみづき」のURLではなく、検索結果でもなく、location が index_main_nf.htm でもない場合
if(refer.indexOf('ふみづきのドメイン(URL)')==-1){
 if(refer.indexOf('サイト内検索のURL')==-1){
  if(FNM != MNM){
   document.write("<div align=center><hr>「ふみづき」へようこそ!");
   document.write(" トップページは<a href=./index.htm>こちら</a>です。</div><hr>");
  }
 }
  //referrerが検索結果だった場合
 else{
  document.write("<div align=left>[<a href=./index_main_nf.htm target=_top>フレーム無し版TOPへ</a>]");
  document.write("[<a href=./index.htm target=_top>フレーム版TOPへ</a>]");
  document.write("[<A href=\"javascript:history.back()\">検索結果へ戻る</a>]</div><br>");
 }
}
// referrer が「ふみづき」のURLではなく、自ページがフレームの一部ではなく、index_main_nf.htm でもない場合
else{
 if (top == self) {
  if(FNM != MNM){
   document.write("<divalign=lef>[<a href=./index_main_nf.htm target=_top>フレーム無し版TOPへ</a>]");
   document.write("[<a href=./index.htm target=_top>フレーム版TOPへ</a>]</div><br>");
  }
 }
}

 まず、document.referrer、document.location で "リンク元" と "現在" のURLを取得しておきます。さらに、表示させたくないURLも変数に入れておき、あとはそれらを比較するだけですね。
 ちなみに、自ページがフレームの一部として表示されてるかどうかは、下から7行目の if(top == self) でチェックしてます。

 試しに「フレーム無しメニュー」から各ページにアクセスしてみて下さい。一番上の左側にTOPページへのリンクが表示されます。また、検索結果からアクセスの場合は、ちゃんと「検索結果へ戻る」が表示されていると思います。

2005.04.01
 現在は、muginaviというナビゲーションバーを付けているので、表示がちょっと変わっています。
 muginaviについては、リンク-お役立ち(WEB) から作者のサイトへいけますぞ。


 
おみくじ
 バナー表示の応用で、おみくじを作ってみました。吉凶の確立を変える部分をちょっと工夫しています。

〜 JavaScriptの記述内容 〜
function Mikuji(){
  var msg="";
  var num = Math.floor(Math.random()*100);
  //0〜5(5%)
    msg = "大吉";
  //6〜35(30%)
    if (num > 5) {msg = "中吉";}
  //35〜75(40%)
    if (num > 34) {msg = "吉";}
  //75〜95(20%)
    if (num > 74) {msg = "凶";}
  //95〜98(4%)
    if (num > 94){msg = "大凶";}
  // 98〜100(3%)
    if (num > 97){msg = "超吉";}

 //メッセージ表示
  document.write(msg);
  document.write("<p><FORM><INPUT TYPE=\"button\" VALUE=\"閉じる\" onClick=\"window.close();\"> ");
  document.write("<INPUT TYPE=\"button\" VALUE=\"もう1回\" onClick=\"JavaScript:location.reload();\"></FORM>");
}

 今回のポイントは、赤字の部分です。
スクリプトは上から順に流れて行きますから、Math.tandom で100までの数字をランダムに出力し、その数値を特定の範囲で括ることで確立を変えています。

 また、ヒットした際の振る舞いは、この例では msg に吉凶のメッセージを入れてるだけですが、他コメントを足すと良いですね。
さらに、ラッキーカラーやアイテムなんかもランダム抽出させて、その結果を別の変数に入れておけば、最後の document.write で (msg + 追加変数1 + 追加変数2) とすることで、色々なコメントをつけることもできます。(「ふみづき」でもそうしてます。)

 ちなみに呼び出しは、小窓で出したいので、window.open を使っています。

<a href="xxx.htm" target="blank" onClick="window.open
 ('xxx.htm','width=300','height=250', 'toolbar=no','location=no','directories=no',
 'status=no','menubar=no','scrollbars=no');return(false)">

 とまぁ、こんなカンジで。window.openのオプションは、まぁ見れば分かりますよね。


 

ファイル名取得(2005.04.08)
 まぁ、工夫というわけではないんですが、アクセスしたページ(ファイル)によって動作を変えたいときなんかに使えますぞ。

〜 JavaScriptの記述内容 〜
(1) ファイルパスを取得
  var path=window.location.href;
(2) ファイル名のみ取得
  var fil=path.substring(path.lastIndexOf ('/',path.length) +1,path.length);
(3) ファイル名から拡張子以降を外す
  var fil1=fil.substring(0,fil.lastIndexOf ('.'));

 まず最初にファイルパスを変数に取り込みます。それが項(1)ですね。ここでは " path " という変数に入れています。
取り込む対象は location.pathname でも document.URL でもいいんですが、とにかくファイル(URL)のパスが取れていればOKです。
ただ、location.hrefで取得する場合、アンカータグ(a name で指定するやつ)付きでアクセスされたページを取得すると、そのアンカーも一緒に取得してしまうので、拡張子を利用したい場合はちょっと注意が必要です。

 下記はこのページをlocation.href、location.pathname、document.URL で取得した結果です。

 次に、この取得したファイルパスから下記を組み合わせてファイル名や拡張子を取得します。

  ・文字の取出 : 変数名.substring(開始位置 , 終了位置 )
  ・文字の検索 : 変数名.lastIndexOf(検索文字列,検索開始位置)

 substringでは対象の文字列の開始/終了位置を指定して取り出します。そこで、その開始位置に、lastIndexOfで検索した文字の位置を指定するわけです。
 項(2)は、検索文字列を " / " にして、それに1をプラスすることで、" / の次の文字 " を指定しています。 lastIndexOfでは文字列を末尾から検索しますので、lastIndexOfの検索開始位置には、その文字列の総数(変数.length)を入れます。(これ省略も可です)

 下記は、このページで上記「JavaScriptの記述内容」を実行した結果の、変数pathの検索開始位置と文字の総数です。

 項3では fil を対象に、substringの開始位置を 0 にして、終了位置で "." を検索対象することで拡張子を外しています。
この場合のポイントは、取得する元の変数を、フルパスのもの(path)から ファイル名だけのもの(fil)に変えてるところです。
 ちなみに項(1)の構文で、対象を path から fil に、検索文字の " / " を " . " に変更すると、拡張子以降を取得することができます。

 項(1)、(2)、(3)をこのページで実行すると、結果は下記のようになります。

 というわけで、使う機会はあまり多くなさそうですが、知ってると便利だと思います。
 例えば「ふみづき」では、スタイルシートを切り替えたり、メニューバーの表示/非表示なんかに使ってますぞ。


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