ブックマーカー
ver.2.0
 
 ◆サンプル

 しおりを挟んだところに移動
 ※まずページ内の任意の場所をクリックしてから
 お試しください。

 
    <機能と特徴>
 
 ・小説など長文を扱う場合に便利な
  しおりを挟むようなスクリプト。

 ・ページ内の任意の場所をクリックすると
  その位置を記録してくれます。
  そして上のリンクをクリックするとそこに移動します。

 ・位置情報の記録はcookieにておこないます。
 



 


公開日 2002.1.18
最終更新日 2003.6.15
バージョン ver.2.0
動作確認 IE6.0,NN4.7,NN7.1,Opera7.2
cookie 使用
CSS 使用
更新履歴 2002.02.10 ver.1.1 表示時間が変更できない点を改善(変更点:ソース1)
2002.08.25 ver.1.2 cookieの読み込みと書き込みを修正(変更点:ソース1)
2002.09.18 ver.1.3 メッセージの背景色が変更できない点を修正
クッキーの読み込みと書き込みを簡略化(変更点:全般)
2003.06.15 ver.2.0 全般に動作を改良(変更点:全般)
 

☆★☆使い方☆★☆
 
 初心者向け解説   中級者向け解説   ダウンロード 

1.カスタマイズフォームを使って設定をしてください。

2.ソース1を<head>〜<head>の間に書き込んでください。

3.ソース2を<body>の直後に書き込んでください。

4.ソース3を記録した位置に移動させるリンクを
  表示したい場所に書き込んでください。

5.ソース4を</body>の直前に書き込んでください。

6.ブラウザでテストしてみてください。
  正常に動作すれば設置は完了です。
 
 
 初心者向け解説   中級者向け解説   ダウンロード 

1.ソース1を<head>〜<head>の間に書き込んでください。

2.ソース2を<body>の直後に書き込んでください。

3.ソース3を記録した位置に移動させるリンクを
  表示したい場所に書き込んでください。

4.ソース4を</body>の直前に書き込んでください。

5.ブラウザでテストしてみてください。
  正常に動作すれば設置は完了です。
 
 
 初心者向け解説   中級者向け解説   ダウンロード 
 
ダウンロードする形式を選択してください。

 【スクリプトを1つのページに組み込む】 

1.カスタマイズフォームを使って設定をする場合は、
  ダウンロードの前に設定をしてください。

2.右のボタンを押してファイルをダウンロードしてください。

 【スクリプトを外部ファイルにする(設定は一括)】 

1.カスタマイズフォームを使って設定をする場合は、
  ダウンロードの前に設定をしてください。

2.右のボタンを押して外部ファイルをダウンロードしてください。
 
3.保存した外部ファイルのファイル名を入力してください。
   (ファイルのパスでも可)
 
4.右のボタンを押してHTMLファイルをダウンロードしてください。

 【スクリプトを外部ファイルにする(設定は各ページ毎)】 

1.カスタマイズフォームを使って設定をする場合は、
  ダウンロードの前に設定をしてください。
 
2.右のボタンを押して外部ファイルをダウンロードしてください。
 
3.保存した外部ファイルのファイル名を入力してください。
   (ファイルのパスでも可)
 
4.右のボタンを押してHTMLファイルをダウンロードしてください。
 
5.複数のページが必要な場合は、カスタマイズフォームで設定をし
  再度HTMLファイルのみダウンロードしてください。
 

 
 
 
 カスタマイズフォーム   補足説明   改造方法 
 
クッキーの名前: (半角英数字)
*詳しくは補足説明を
クッキーの保存期間: (半角数字:正の整数[単位:日])
メッセージの表示時間: (半角数字:正数[単位:秒])
メッセージの背景色: (RGB値,色名)
メッセージの文字色: (RGB値,色名)
場所を記録した時のメッセージ: (タグ可)
場所を記録できなかった時のメッセージ: (タグ可)
クッキーが保存されていない時のメッセージ:
記録した場所に移動するリンクの文字:
 
 カスタマイズフォーム   補足説明   改造方法 
 
クッキーの名前について

 このスクリプトを1つのサイト内で複数使用する場合は、
 それぞれに違うクッキーの名前をつけてください。
 クッキーの名前は半角英数字であれば何でも構いません。
 よくわからない場合は1つ目のスクリプトにはsono1
 2つ目のスクリプトにはsono2としてください。
 
 カスタマイズフォーム   補足説明   改造方法 
 

クッキーの名前を変更する。(半角英数字)

 //設定〜//ここまでの1行目を変更してください。
 同一ディレクトリ内にこのスクリプトを組んだファイルを複数置く場合
 それぞれに違うクッキーの名前を設定します。
b_shiori  = sono1;
クッキーの保存期間を変更する。(半角数字:正の整数[単位:日])

 //設定〜//ここまでの2行目を変更してください。
b_kigen   = 90;
メッセージの表示時間を変更する。(半角数字:正数[単位:秒])

 //設定〜//ここまでの3行目を変更してください。
b_hyozi   = 1.5;
メッセージの背景色を変更する。(RGB値,色名)

 //設定〜//ここまでの4行目を変更してください。
b_bgcolor = '#ccccff';
メッセージの文字色を変更する。(RGB値,色名)

 //設定〜//ここまでの5行目を変更してください。
b_fgcolor = '#000000';
場所を記録した時のメッセージを変更する。(タグ可)

 //設定〜//ここまでの6行目を変更してください。
b_set_ok  = '←ここにしおりをはさみました';
場所を記録できなかった時のメッセージを変更する。(タグ可)

 //設定〜//ここまでの7行目を変更してください。
b_set_ng  = 'しおりをはさめませんでした';
クッキーが保存されていない時のメッセージを変更する。

 //設定〜//ここまでの8行目を変更してください。
b_messege = 'しおりの記録がありません';
 
 
  

ソース1(以下のソースを<head>〜</head>の間に書き込んでください)  
 
<script language="JavaScript" type="text/javascript">
<!--//Script Created by あう,http://www5c.biglobe.ne.jp/~horoau/
    //ver.2.0

//設定 b_shiori = 'sono1'; //クッキーの名前 b_kigen = 90; //クッキーの保存期間(日) b_hyozi = 1.5; //メッセージの表示時間(秒) b_bgcolor = '#ccccff'; //メッセージの背景色 b_fgcolor = '#000000'; //メッセージの文字色 b_set_ok = '←ここにしおりをはさみました'; //場所を記録した時のメッセージ b_set_ng = 'しおりをはさめませんでした'; //場所を記録できなかった時のメッセージ b_messege = 'しおりの記録がありません'; //クッキーが保存されていない時のメッセージ //ここまで
if(b_bgcolor) {b_bgcolor = 'bgcolor="'+b_bgcolor+'"'} else {b_bgcolor = "";} if(b_fgcolor) {b_fgcolor = '<font color="'+b_fgcolor+'">'; b_fgcolor2 = '</font>';} else {b_fgcolor = ''; b_fgcolor2 = '';} table = '<table border="0" cellspacing="0" cellpadding="3"><tr>\n<td '+b_bgcolor+' nowrap>'+b_fgcolor; table2 = '</td>\n</tr></table>';
b_set_ok = table+b_set_ok+table2; b_set_ng = table+b_set_ng+table2;
b_tomegu = 1; b_id = 0;
function bookmarker_timer() {if(b_tomegu != 2) {b_tomegu = 0; setTimeout('b_tomegu = 1',280);}}
function bookmarker_stop() {with(document) {for(i=0;i<forms.length;i++) {for(ii=0;ii<forms[i].elements.length;ii++) {forms[i].elements[ii].onmouseover = teishi; forms[i].elements[ii].onmouseout = saikai;}} for(i=0;i<links.length;i++) {links[i].onmouseover = teishi; links[i].onmouseout = saikai;} for(i=0;i<applets.length;i++) {applets[i].onmouseover = teishi; applets[i].onmouseout = saikai;}}}
function bookmarker(e) {if(b_tomegu == 0) {if(document.all) {if(event.button == 1) {b_posi1 = document.body.scrollTop+event.clientY; b_posi2 = document.body.scrollLeft+event.clientX; b_set_cookie();}} else if(document.getElementById) {if(e.which == 1) {b_posi1 = scrollY+e.clientY; b_posi2 = scrollX+e.clientX; b_set_cookie();}} if(document.layers) {if(e.which == 1) {b_posi1 = e.pageY; b_posi2 = e.pageX; b_set_cookie();}}}}
function b_set_cookie() {b_date = new Date(); b_date.setTime(new Date().getTime()+b_kigen*24*60*60*1000); document.cookie=b_shiori+"="+b_posi1+";expires="+b_date.toGMTString()+";"; if(b_hyozi > 0) {if(document.cookie.indexOf(b_shiori+"="+b_posi1) != -1) {b_info_mes(b_set_ok);} else {b_info_mes(b_set_ng);}}}
function b_info_mes(b_kekka) {with(document) {if(document.all) {all("b_set_ok").style.left=b_posi2; all("b_set_ok").style.top=b_posi1; all("b_set_ok").innerHTML =b_kekka; all("b_set_ok").style.visibility="visible"; clearTimeout(b_id); b_id = setTimeout('document.all("b_set_ok").style.visibility="hidden";',b_hyozi*1000);} else if(document.getElementById) {getElementById("b_set_ok").style.left=b_posi2; getElementById("b_set_ok").style.top=b_posi1; getElementById("b_set_ok").innerHTML =b_kekka; getElementById("b_set_ok").style.visibility="visible"; clearTimeout(b_id); b_id = setTimeout('document.getElementById("b_set_ok").style.visibility="hidden";',b_hyozi*1000);} else if(document.layers) {layers["b_set_ok"].moveTo(b_posi2,b_posi1) layers["b_set_ok"].document.open(); layers["b_set_ok"].document.write(b_kekka); layers["b_set_ok"].document.close(); layers["b_set_ok"].visibility="visible"; clearTimeout(b_id); b_id = setTimeout('document.layers["b_set_ok"].visibility="hidden";',b_hyozi*1000);}}}
function load_bookmark() {if(document.cookie.indexOf(b_shiori) != -1) {b_mark = document.cookie while(b_mark.indexOf(" ") != -1) {b_mark = b_mark.replace(" ","");} b_mark = b_mark.split(";"); for(i in b_mark) {b_mark2 = b_mark[i].split("="); if(b_mark2[0] == b_shiori) {scrollTo(0,b_mark2[1]); i=-1; break;}} if(i != -1) {alert(b_messege);}} else {alert(b_messege);}}
function teishi() {b_tomegu = 2;}
function saikai() {b_tomegu = 1;}
if(document.layers) {document.captureEvents(Event.MOUSEDOWN,Event.MOUSEUP);} document.onmousedown = bookmarker_timer; document.onmouseup = bookmarker;
with(document) {open(); write('<style type="text/css">\n<!-\-\n'); write('#b_set_ok{position:absolute;visibiluty:hidden;}\n'); write('-\->\n<\/style>'); close();}
// --> </script>

ソース2(以下のソースを<body>〜<body>の間に書き込んでください)  
 
<div id="b_set_ok"></div>

ソース3(以下のソースを<body>〜</body>の間に書き込んでください)  
 
<a href="javascript:load_bookmark();">しおりを挟んだところに移動</a>
 
ソース4(以下のソースを<body>〜</body>の間に書き込んでください)  
 
<script language="JavaScript" type="text/javascript"><!--
bookmarker_stop();
// --></script>
 

スクリプト無効時には動作はしません。
 <noscript>を使ってメッセージを書き込むなどしてください。


ウェブ木箱サンプル集
copyright(C) 2002-2004 あう