DOMと非DOMのはざまで 2003.12.16.Tue No.2729
こちらで色々とお世話になり、JavaScript と cookie を使った栞機能を作成しました。現在は方々に動作テストをお願いしつつ、細かいバグを潰している段階です。
今のところ、DOMに対応した新しいブラウザでは順調に動作しているようですが、非DOMのNC4.7をサポートするか、DOM対応でなければ、外部ファイルそのものの読み込みさせない方針で行くかで悩んでいます。
動かないよりは動く方がよいので、ネット検索やお世話になった方のアドバイスを参考に、できる限りの手は尽くしましたが、テスト用のマシンが不調で動作確認ができません。
NC4.7をおもちの方がいらしたら、アドバイスをお願いいたします。
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
になってると思われます。
対策その2 2003.12.18.Thu No.2748
動作チェックありがとうございます。
埋込み先のHTMLファイル……作っている本人も目まいがしそうなので、雀の涙ほどの短縮化を試みました。
1枚目は一般の人からのリクエストで本文を埋込んでありますが、しおりフィールドの2ページ目以降はデバック&スクリプト改良用でXページX行目としか書いてないので若干マシかもしれません。
対応ブラウザの幅を狭めればもう少し削れますが、現状ではこれで精いっぱいです。
肝心のエラー対策は、画像が取得できていないらしいと言うことなので、画像のパスが外部ファイルと実行先のHTMLで同じになるよう、JSファイルの設置場所を変え、ファイル名のデータからハイフン(-)を消してみました。
もしよろしければ、また Netscape4.78 の言い分を聞いていただけないでしょうか?(OS9.1 が動くMac、どうも本格的に壊れたようで……泣)
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を変えないこと、これに尽きます。
サンプル提供、ありがとうございます 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 くらいにできるよう、頑張ろうと思います。
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になリます。もっとも、古いブラウザに足を引っ張られるのが嫌だって方が大きいんですが…。とほほ。
対応ブラウザの下限目標をクリアしました 2003.12.22.Mon No.2780
12/20付けの修正により、Mac版のNC4.7でも栞機能が正常動作するという情報をメールでいただく事ができました。
感無量です。
ぴろあきさんの助言を受けて、画像の alt
を空にして title
で対応する処理も実行済みです。
この掲示板でアドバイスをしてくださった皆さまに、改めて御礼申し上げます。
栞をcookieへ保存します。保存の単位は「行」ではなく「段落」です。従って、小説本文は原則として <p>
を使用します。HTMLの仕様から見ても、その方が自然です。
「栞ポイント」を設置すると、その段落が栞保存の対象になります。設置の仕方はソースの項目を参照してください。
栞ポイントが設置された段落には、要素内の最後に が追加されます。これをクリックすると問い合わせダイアログが出現、OKを押せばcookieに記録します。
栞が記録されると、ページ上部に が出現します。押すと該当ページへ飛び、栞が保存してある段落の頭へ案内します。栞アイコンが段落末尾なのに対し、ジャンプ位置が段落先頭なので、段落を長くしすぎると混乱を招くかもしれません。
これは 段落を読んだ後に栞を保存 → 次回はその段落の最初から読み返すことで内容を思い出す …という配慮による仕様(余計なお世話)。
一応、栞を開いた時に「◆ この段落に栞が挟んであります」という案内文を出すようになっています。
HTMLにJavaScriptのコードを一切書かない完全DOM仕様なので、見た目も綺麗だし小説の編集も楽です。その反面、対応ブラウザが非常に限られます。高度なスクリプトエンジンを実装した新しいブラウザでないと、動作は期待できません。
対応してないブラウザでは、 も も出現しません。
このサンプルでは、実際にcookieを使用しています。有効期限は約1日なので、すぐに消えます。
<p class="shiori"> 小説の本文。</p>
class="shiori"
を付加するだけです。アイコン表示からID設定、イベント設置まで、すべてスクリプトがやります。
<div id="buttonInsertPoint"></div>
id="buttonInsertPoint"
を設定します。スクリプトがcookieを調べて、栞が存在すればボタンを挿入します。(存在しない時は挿入しません)<p><div><span>
など「閉じるタグ」が存在するものなら、ほぼすべてで有効です。
<script type="text/javascript" charset="Shift_JIS" src="shiori.js"></script>
<head>
の中を推奨。この見本は、そのまま使えるように作ってはいるものの、基本的に「高度な処理を使えばこんなこともできるので、将来用の参考にどうぞ」という程度のものです。
このページは、質疑応答掲示板で使用した回答の残骸です。検索エンジンに捕まったりリサイクルしたりすることもあろうので、なんとなく残してあります。広く公開しているページではありませんが、第3者の閲覧を禁止するものでもありません。
恒久的なURIは保証できないものの、よほどのことがない限り削除されることはないでしょう。心配性な人はページの保存をおすすめします。(IEは mht 形式でないと保存できないかも)