段落単位の栞機能


■Q&A

■Question

DOMと非DOMのはざまで 2003.12.16.Tue No.2729

こちらで色々とお世話になり、JavaScript と cookie を使った栞機能を作成しました。現在は方々に動作テストをお願いしつつ、細かいバグを潰している段階です。

今のところ、DOMに対応した新しいブラウザでは順調に動作しているようですが、非DOMのNC4.7をサポートするか、DOM対応でなければ、外部ファイルそのものの読み込みさせない方針で行くかで悩んでいます。

動かないよりは動く方がよいので、ネット検索やお世話になった方のアドバイスを参考に、できる限りの手は尽くしましたが、テスト用のマシンが不調で動作確認ができません。

NC4.7をおもちの方がいらしたら、アドバイスをお願いいたします。

■Answer

Re:DOMと非DOMのはざまで ぴろあき 2002.12.17.Wed No.2743

Win版 Netscape 4.78 でテストしてみたところ、ページの読みこみと同時にエラーが起きました。解析を試みようとはしたものの、HTMLを見てちょっと気が遠くなってしまったので…。

■Netscape4.78の言い分
  document.images[bmID] has no properties.

■訳
  「指定されたオブジェクト document.images[bmID] にプロパティはないよ」

これはオブジェクト(この場合は画像)を取得できてないのに、そのプロパティへアクセスしようとしたことが原因のエラーです。おそらく、document.images[bmID] がなんらかの問題で取得できず、undefined になってると思われます。

■Question

対策その2 2003.12.18.Thu No.2748

動作チェックありがとうございます。
埋込み先のHTMLファイル……作っている本人も目まいがしそうなので、雀の涙ほどの短縮化を試みました。

1枚目は一般の人からのリクエストで本文を埋込んでありますが、しおりフィールドの2ページ目以降はデバック&スクリプト改良用でXページX行目としか書いてないので若干マシかもしれません。
対応ブラウザの幅を狭めればもう少し削れますが、現状ではこれで精いっぱいです。

肝心のエラー対策は、画像が取得できていないらしいと言うことなので、画像のパスが外部ファイルと実行先のHTMLで同じになるよう、JSファイルの設置場所を変え、ファイル名のデータからハイフン(-)を消してみました。

もしよろしければ、また Netscape4.78 の言い分を聞いていただけないでしょうか?(OS9.1 が動くMac、どうも本格的に壊れたようで……泣)

■Answer

Re:DOMと非DOMのはざまで ぴろあき 2002.12.19.Fri No.2757

内容がある程度のレベルを超えると、人のスクリプトを解析するのはなかなか大変な所業です。力になれずすみません。

お詫びというわけでもないんですが、参考までに本物DOMを使った栞スクリプトを作ってみました。
でも当方Macの環境が一切ないため、期待通りに動くかは確認してません。残念ながら、まともに動くと期待できるのは Netscape7 くらいです。(確認報告をしていただけるとありがたいです)
http://faq.creasus.net/03/1219/about.html
//高度なスタイルシートを使ってるので、下手なブラウザで入るとページの閲覧もままならないかも。

■非DOMブラウザの切り捨てについて
WindowsはIE5.5・Netscape6・Opera7 と高度なDOMを実装したブラウザが出揃ってる(しかも8割以上がIE5.5以降)ので、旧ブラウザを除外しても問題は少ないですが、MacでのDOMはまだ時期尚早では?…というのが個人的な意見です。なにせまともなDOMを実装できてそうなのが Netscape6 以降しかない。(IE5は問題外)
しかし、栞スクリプトというのは(エラーさえ起きなければ)動作しなくても閲覧に支障は出ませんから、がっつりDOMでもいいような気はします。非DOMブラウザにも、ブックマークという便利な機能があるはずですしね。
大事なのは、みだりにページのURLを変えないこと、これに尽きます。

■Res

サンプル提供、ありがとうございます 2003.12.19.Fri No.2763

完全なDOMは、おっしゃるとおりMacの世界では通用しないようです。
Netscape7.1 では正常に動作しましたが、IEは 5.2.3 が最新版のため動作対象外、iCab2.9.6 や Opera6.02、Safari1.0 は栞アイコンそのものが表示されません。

5年くらい前のパソコンでサイトを訪れても、可能な限り最近のパソコンで見るのと同じレイアウトや機能を保つ、というのがページ作りの方針なので、ブラウザの下限を NC4.7(Mac版)と IE5.0 くらいにできるよう、頑張ろうと思います。

■Answer

Re: DOMと非DOMのはざまで ぴろあき 2002.12.20.Sat No.2764

とりあえず Win Netscape4.78 でのエラーだけ解析しました。

例のエラーは、<img> へIDでアクセスしようとしてるのが原因です。Netscape4.x で <img> へアクセスするには、name 属性を使わないといけません。 つまり <IMG src="img/blank.gif" width="16" height="16" border="0" id="gin003" name="gin003" alt="03"> とする必要があります。

これだけで正常動作するようになりましたので、ご報告を。Mac版もこれで動くんじゃないかな、という期待も持てます。
http://faq.creasus.net/03/1220/desktop.png (146KB)

ついでに、テキストブラウザの多くは、画像の alt 属性をテキストとして展開します。
http://faq.creasus.net/03/1220/linx.png (26KB)
<img alt="" title="03"> のように、alt を空にして title にした方が適切かと思います。HTML4.01 の仕様でも、特に意味のない画像には空の alt を使うことが許されていますし。

>Netscape7.1 では正常に動作しましたが、IEは5.2.3 が最新版のため動作対象外、iCab2.9.6 や Opera6.02、Safari1.0 は栞アイコンそのものが表示されません。

Netscape7.1 では動きましたか。わざと(ブラウザにとって)過酷な組み方をしたのですが、Win版と同じレベルのDOMを実装してるみたいですね。さすがです。他はまぁ予想通りということで。
ちなみに、自分は「古いブラウザを使ってる人は旧式のPC(つまりパフォーマンスに余裕がない)か、あるいは物好きなので、JavaScript を実行しなくてもよい。ただし、閲覧に支障をきたしてはならない」という方針ゆえ、組むスクリプトのほとんどがDOMになリます。もっとも、古いブラウザに足を引っ張られるのが嫌だって方が大きいんですが…。とほほ。

■Res

対応ブラウザの下限目標をクリアしました 2003.12.22.Mon No.2780

12/20付けの修正により、Mac版のNC4.7でも栞機能が正常動作するという情報をメールでいただく事ができました。
感無量です。

ぴろあきさんの助言を受けて、画像の alt を空にして title で対応する処理も実行済みです。
この掲示板でアドバイスをしてくださった皆さまに、改めて御礼申し上げます。


■実行結果

動作例として3ページの小説を仮定して作ってありますので、実際の小説のつもりで試してみてください。


■スクリプトの概要

栞を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>

■ボタンの挿入位置

<div id="buttonInsertPoint"></div>

■栞スクリプトの呼び出し

<script type="text/javascript" charset="Shift_JIS" src="shiori.js"></script>

■栞スクリプトの内容


■仕様上の注意

栞の保存数はひとつだけ
このスクリプトでは、栞は「ディレクトリ(フォルダ)ひとつにつき、ひとつまで」という仕様になっています。
小説ファイルはすべて同じフォルダへ
小説1作につき、それぞれ専用のディレクトリを与える必要があります。そして栞スクリプトを呼び出すファイルは、すべて同じフォルダにまとめないといけません。サブフォルダ等に入れて小分けにしたりすると、cookieのパスが無効になり、動作しなくなります。
また、cookieの仕様上、ディレクトリやファイルを移動したりしてパスが変わると、栞が無効になります。
栞を呼び出せるのは小説ファイルが入ってるディレクトリと同じ場所だけ
パスを指定してないので、小説ファイルより上位のディレクトリではcookieを読みこめません。これは複数の小説でそれぞれ栞を保存できるようにするためです。栞の呼び出しは小説ページに入ってから…という使い方を想定しています。入り口ページとかを設けておくとわかりやすくなるでしょう。(外部スクリプトファイルはすべての小説で使いまわせます)
スクリプトの設定でパスを指定できるようにもなっていますが、そうすると上位階層からでも呼び出せるようになる代わり、栞保存に制限が出ます。(パスをルートにすると「小説一作につきひとつ」でなく「サイト全体でひとつ」になってしまいます)
その気になれば「小説のタイトル・URL・記録してある栞ポイント・段落の最初の方のテキスト」などをcookieの容量(4KB)が許す限り記録して一覧出力することもできますが、手間が増えすぎて見本の域を逸脱するので今回は見送ってます。
栞ポイントの変更は基本的に不可
栞ポイントが設置してある順に番号を付けて管理しているので、途中の段落に栞ポイントを追加すると、栞がずれます。(一番最後に追加する分には構いません)
当然、一度設定した栞ポイントを削除すると不具合の原因になります。(栞がずれるか、動作しません)
栞ポイントの設定は慎重に。

■■■ 注意 ■

この見本は、そのまま使えるように作ってはいるものの、基本的に「高度な処理を使えばこんなこともできるので、将来用の参考にどうぞ」という程度のものです。


■ このページについて

このページは、質疑応答掲示板で使用した回答の残骸です。検索エンジンに捕まったりリサイクルしたりすることもあろうので、なんとなく残してあります。広く公開しているページではありませんが、第3者の閲覧を禁止するものでもありません。
恒久的なURIは保証できないものの、よほどのことがない限り削除されることはないでしょう。心配性な人はページの保存をおすすめします。(IEは mht 形式でないと保存できないかも)