■スクリプトの概要
栞をcookieへ保存します。保存の単位は「行」ではなく「段落」です。従って、小説本文は原則として <p> を使用します。HTMLの仕様から見ても、その方が自然です。
「栞ポイント」を設置すると、その段落が栞保存の対象になります。設置の仕方はソースの項目を参照してください。
栞ポイントが設置された段落には、要素内の最後に 
が追加されます。これをクリックすると問い合わせダイアログが出現、OKを押せばcookieに記録します。
栞が記録されると、ページ上部に が出現します。押すと該当ページへ飛び、栞が保存してある段落の頭へ案内します。栞アイコンが段落末尾なのに対し、ジャンプ位置が段落先頭なので、段落を長くしすぎると混乱を招くかもしれません。
これは 段落を読んだ後に栞を保存 → 次回はその段落の最初から読み返すことで内容を思い出す …という配慮による仕様（余計なお世話）。
一応、栞を開いた時に「◆ この段落に栞が挟んであります」という案内文を出すようになっています。
HTMLにJavaScriptのコードを一切書かない完全DOM仕様なので、見た目も綺麗だし小説の編集も楽です。その反面、対応ブラウザが非常に限られます。高度なスクリプトエンジンを実装した新しいブラウザでないと、動作は期待できません。
対応してないブラウザでは、 も も出現しません。
このサンプルでは、実際にcookieを使用しています。有効期限は約1日なので、すぐに消えます。
■このスクリプトの対応ブラウザ
- IE5.5以降・Netscape6以降・Opera7以降
- Windows 版では正常動作を確認。
- Mac版Netscape6以降
動くことが期待されますが、当方に環境がないので不明。
※ちゃんと動いたそうです。- Safari
未知。きちんとしたDOM実装と、くだけた表現をいくらか許容してくれる懐の深さがあれば、もしかすると動作が期待できるかもしれません。エラーが発生する時はスクリプトのコメントを外して動作対象から除外してください。
※動かなかったそうです。- iCab
たぶん動かないと思います。動いたところで、ダイアログが文字化けする以上、使いものにはならないでしょう。動作対象から除外する時はスクリプトのコメントを外してください。
※動かなかったそうです。- Win版IE5・Mac版IE5
- DOMを実行するにはバグの多いブラウザですので、ブラウザ判別で除外しています。
- IE4以下・Netscape4以下・Opera6以下
- ブラウザ判別で刎ねてるので動きません。
■ソース
■栞ポイントの設置
<p class="shiori"> 小説の本文。</p>
- 栞保存の対象となる段落に、
class="shiori"を付加するだけです。アイコン表示からID設定、イベント設置まで、すべてスクリプトがやります。 - 全部の段落に設定してもいいですが、あまり多いとアイコンが邪魔なので、適度にしておいた方がいいでしょう。
■ボタンの挿入位置
<div id="buttonInsertPoint"></div>
- ボタンを入れたいタグに
id="buttonInsertPoint"を設定します。スクリプトがcookieを調べて、栞が存在すればボタンを挿入します。（存在しない時は挿入しません） - タグは
<p><div><span>など「閉じるタグ」が存在するものなら、ほぼすべてで有効です。 - タグの中に内容がある場合、一番最後（閉じるタグの直前）に挿入されます。
- ボタンは1ページにつきひとつだけです。設置しなくても構いません。
■栞スクリプトの呼び出し
<script type="text/javascript" charset="Shift_JIS" src="shiori.js"></script>
- お好きな場所で shiori.js を呼び出します。必須ではないですが、
<head>の中を推奨。 - スクリプトはすべて外部ファイルに集約してるので、HTMLにJavaScriptのコードを書く必要は一切ありません。栞ポイントの設定とボタンの挿入位置さえ指定しておけば、この外部ファイルを呼び出すだけで使えます。
■栞スクリプトの内容
- スクリプト本体は shioriInclude.js に入ってます。shiori.js がブラウザを判別し、対応ブラウザでのみ shioriInclude.js を呼び出す…という方式になってます。
- shioriInclude.js の先頭で少しばかりのユーザー設定が可能。
■仕様上の注意
- 栞の保存数はひとつだけ
- このスクリプトでは、栞は「ディレクトリ（フォルダ）ひとつにつき、ひとつまで」という仕様になっています。
- 小説ファイルはすべて同じフォルダへ
- 小説1作につき、それぞれ専用のディレクトリを与える必要があります。そして栞スクリプトを呼び出すファイルは、すべて同じフォルダにまとめないといけません。サブフォルダ等に入れて小分けにしたりすると、cookieのパスが無効になり、動作しなくなります。
また、cookieの仕様上、ディレクトリやファイルを移動したりしてパスが変わると、栞が無効になります。 - 栞を呼び出せるのは小説ファイルが入ってるディレクトリと同じ場所だけ
- パスを指定してないので、小説ファイルより上位のディレクトリではcookieを読みこめません。これは複数の小説でそれぞれ栞を保存できるようにするためです。栞の呼び出しは小説ページに入ってから…という使い方を想定しています。入り口ページとかを設けておくとわかりやすくなるでしょう。（外部スクリプトファイルはすべての小説で使いまわせます）
スクリプトの設定でパスを指定できるようにもなっていますが、そうすると上位階層からでも呼び出せるようになる代わり、栞保存に制限が出ます。（パスをルートにすると「小説一作につきひとつ」でなく「サイト全体でひとつ」になってしまいます）
その気になれば「小説のタイトル・URL・記録してある栞ポイント・段落の最初の方のテキスト」などをcookieの容量（4KB）が許す限り記録して一覧出力することもできますが、手間が増えすぎて見本の域を逸脱するので今回は見送ってます。 - 栞ポイントの変更は基本的に不可
- 栞ポイントが設置してある順に番号を付けて管理しているので、途中の段落に栞ポイントを追加すると、栞がずれます。（一番最後に追加する分には構いません）
当然、一度設定した栞ポイントを削除すると不具合の原因になります。（栞がずれるか、動作しません）
栞ポイントの設定は慎重に。
![[ HTML 4.01 Strict 準拠 ]](../../sys/HTML401.png "HTML 4.01 Strict 準拠"){kind=small}
