ちょいと一工夫 -WEB編-

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

  日付表示
  ファイルの更新日付表示
  ツリーメニュー
  ページ切り替え
  次ページへ
  INDEXへ


 
日付表示
 当サイトのトップページ、タイトルの下に表示されていますね。なんてこたぁない、本日の日付です。特に深い意味もないですが、当サイトのjavascript第1号でした。
 というわけで。

〜 JavaScriptの記述内容 〜
function Date1(){
  today = new Date();
  year = today.getYear();
  if(year < 2000) year += 1900;
  document.write(""+year+"年"+(today.getMonth()+1)+"月"+today.getDate()+"日<br><P>")
}

 特に説明はいりませんよね。これはトップページから

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

 で呼び出しています。


 
ファイル更新日付表示
 よく、"最終更新日:○月×日" というような表示を見かけますよね。アレ、毎回手動で変えるのってとても面倒臭そう。
 そこで、ファイルの更新日付を表示すれば、自動で書き換えられるじゃん! ってなもんで、書いてみました。
 これは、各ファイルに直接記述しています。

  <script language="JavaScript"><!--
    document.write(" Last update:",document.lastModified);
  //--></script>

 内容は超簡単。ファイル更新日付を取ってくるコマンド(赤字の個所)があるので、その前に好きな文字(最終更新日:とか。ウチの場合 Last update:)を入れて表示させればOK。
 当サイトのどのページにも、一番下に表示されていますよ。(更新時間が平日の昼間でも、追求は無しの方向で。。。)

2003.06.16
 各ファイルに直接記述しないでjsファイルから呼び出しても、ちゃんと呼び出したファイルの更新日付を取得してくれる事がわかったため、現在はjsファイルに記述して呼び出す形に変えました。

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


 
ツリーメニュー
 当サイトは左右にフレームを分け、左側にインデックスを置いてますよね、このインデックスをダイナミックに展開したくていくつかjavascriptを探したのですが、シンプルで簡単なものを 「ホームページ裏技大全」というサイトさんで発見しました。

 これにちょこっと手を加えて、インデックスクリック時に下階層が表示されると同時にそのページを右のフレームに表示させるようにしました。
 ついでに展開した階層を元に戻す際は、右のページは更新をかけないようにしてみました。
 これは各ファイルに直接記述しています。

〜 JavaScriptの記述内容 〜
<script language="JavaScript"><!--
iType = ["none","block"];
function iMenu(INDEX,URL){
  INDEX = document.all[INDEX].style;
  INDEX.display = iType[INDEX.display.indexOf("none") + 1];
  if(INDEX.display == "block"){parent.main.location.href = URL;}
  else{}
}
// --></script>

 function の引数は、INEX(青字のところ)が、展開する対象で、URL(赤字)が右のフレームに表示するURLです。
 下の赤字部分が、右のフレームに表示させるスクリプトです。
 で、実際の本文では、

  <a href="javaScript:iMenu('1st','./index_1st.htm')">はじめに</a>
  <div id="1st" style="display:none">

 という形で呼び出します。
 詳しくは、左のインデックスのソースを見てください。

 ただ、、、このスクリプトはネスケに対応してません。クリックしても何もおきないので、代替手段を考える必要があります。


 
ページ切り替え
 netscapeユーザの皆様、大変申し訳ありませんでした。なんとネスケだとINDEX展開されないのですねー。失敗しっぱい。
 というわけで、ネスケユーザの方にも見ていただけるよう、ブラウザによってインデックスのファイルを切り替えることにしました。
 もしかすると、IEでもバージョンの古いのはNGかもしれませんので、appVersionが4以前のも切り替えることにしました。
 これは各ファイルに直接記述しています。

〜 JavaScriptの記述内容 〜
<script language="JavaScript"><!--
function NS(){
  if (navigator.appName=="Netscape"){location.href = "index_ln.htm"}
  if (navigator.appVersion.charAt(0) < "4") {location.href = "index_ln.htm"}
}
// --></script>

 要はブラウザがネスケだったら違うHTMLファイルをロードする。ってことですね。
 これを、BODYタグでロードした際に走らせるようにすると、ネスケの時だけ専用のインデックスを表示するようになります。

 BODYタグに記述する内容は、

  onload ="NS()"

 です。 "NS()" は、上のスクリプトの function と対応しています。
 これでようやく、ネスケユーザさんにも見ていただけるようになりました。ふぅ。


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