ページに関するTips


・しおり

NN2Unknown NN3OK NN4OK MozillaOK IE3Bug IE4OK

複数ページからなる一連の文章を見る時、 単行本や文庫本のように読んだところまで「しおり」をはさんで、 続きを別の機会に見たくありませんか?

以下に挙げるコードは Frame 形式のドキュメントの位置をオペレータの指示で Cookie に記憶し、次回呼出された時に記憶した場所を表示するためのものです。

長い解説や小説のように複数のページを順番に読むようなドキュメントで使用できます。

Frame の親( MenuTop.htm )

<head>
    :
<script language="JavaScript"><!--
// 設定項目
expireperiod = 1000*60*60*24*365;     // 有効期間( 1年間 )
cookiename   = 'shiori';              // Cookie 名
defaultURL   = '../Title.htm';        // デフォルトのページ
menuURL      = 'Contents.htm';        // メニューページ
mainWname    = 'tips';                // 本文フレーム名
menuWname    = 'index';               // メニューフレーム名
shiori       = '';
// ====================== cookie functions ====================
function setCookie(name,value,expire){
  document.cookie
    = name + '=' + escape(value)
    + ((expire==null)?'':('; expires='+expire.toGMTString()));
}
function getCookie(name){
  var search = name + '=';
  if (document.cookie.length>0) {
    offset = document.cookie.indexOf(search);
    if (offset != -1){
      offset += search.length;
      end = document.cookie.indexOf(';',offset);
      if (end == -1)
        end = document.cookie.length;
      return unescape(document.cookie.substring(offset,end));
    }
  }
  return '';
}
// ====================== bookmark functions ===================
function setShiori(){                 // しおり設定関数
  var today   = new Date();
  var expires = new Date();
  expires.setTime(today.getTime()+expireperiod);
  setCookie(
    cookiename,eval('window.'+mainWname+'.location.href'),
    expires
    );
  getShiori();
}
function clearShiori(){               // しおり削除関数
  var expires = new Date(0);
  setCookie(cookiename,'',expires);
  shiori = '';
}
function getShiori(){                 // しおり取出し関数
  shiori = getCookie(cookiename);
  return shiori;
}
// ===================== フレーム生成 ==========================
getShiori();
// --></script>
</head>
<script language="JavaScript"><!--
document.writeln(
   '<frameset cols="30%,*">'
  +  '<frame src="'+menuURL+'" name="'+menuWname+'">'
  +  '<frame src="'
  +     ((shiori=='')?defaultURL:shiori)
  +     '" name="'+mainWname+'">'
  +'<\/frameset>'
  );
// --></script>
    :

Frame の子( Contents.htm )

<script language="JavaScript"><!--
if(parent.setShiori){
  document.writeln(
     '<div align=center><form name="f"><b>しおり:<\/b>'
    +  '<input type="button" value="設定" '
    +          onClick="parent.setShiori();">'
    +  '<input type="button" value="解除" '
    +          onClick="parent.clearShiori();">'
    +'<\/form><\/div>'
    );
}
// --></script>

この文字の部分は必要に応じて修正します。

cookiename, expireperiod はしおりの名称と有効期間です。
expireperiod は記憶したページの有効期間を msec 単位で指定します。

defaultURL, menuURL はフレームに表示するページの URL で、 defaultURL はしおりが設定されていないときに表示する本文の URL、 menuURL はここでは目次を表示するフレームの URL です。
また、menuURL は FRAMESET タグの出力を JavaScript で行っているために使用するのみなので、ページのレイアウトに応じて適当に修正するか、 FRAMESET の出力時に直接記述するなら不要なので削除します。

mainWname, menuWname はそれぞれ本文と目次を表示する フレームの名称です。 menuWnamemenuURL と同様に framset タグの出力に使用しているのみなので、必要に応じて修正します。
FRAMESET の出力はフレーム構成やレイアウトにに応じて 適当に修正します。

子フレーム側のスクリプトは単なるサンプルです。 「しおり」の機能を必要とするページで parent.setShiori 関数を呼び出せば 現在 mainWname のフレームに表示しているページを Cookie に記憶しますし、parent.clearShiori 関数を呼び出せば記憶しているページを クリアします。


使用例

このコードのサンプルは こちらです。


注意事項

IE3
Microsoft Internet Explorer3.0 では location.href プロパティが、 完全な URL を示さない( hash つまり、アンカー名が設定されていない )ので ページの途中にたいする「しおり」の設定ができずページの先頭になります。 (「JavaScriptの食えない事情」->「hash の値」を参照)

Copyright(c) 1998 - 2001 ShinSoft. All rights reserved.