- ベストアンサー
スクロールバーの制御
[チャット使用時にスクロールバーのデフォルトの位置を下にしたい。] PerlによるCGIでチャットを作成しております。 アプリケーションのチャットの場合はレスをすると前の発言の下の行に加えられる 場合が多いです。 しかし、多くのCGIチャットではその逆でレスは直前の発言の上の行に追加 され，より過去の発言をみるためには下方向にスクロールさせます。 私の自作チャットではスクロールバーを最下端に設定したいのですが方法がわからないので教えてください。 本心としてはHTMLのみ(JavaScriptなし)にしたかったのですが調べたところ スクロールバーの色の設定などにJavaScriptを使っている場合が多かったので JavaScriptならできるかと思い質問いたしました。 質問やご回答お願いいたします。 [実行環境] WindowsXP+ActivePerlv5.80+Apache1.3.28+IE6.0 [自分の知識] JavaScript :なし Perl:入門書読んでいる最中。簡単な掲示板程度なら作成可能 HTML：リファレンスを見ながら使う程度 その他Webプログラム知識：入門書レベルのJavaApplet
- JavaScript
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
チャットがどういう仕組みになっているのか分かりませんが、 自動リロードなどであるならば、 <meta>でページを再読み込みしていると思います。 それを、リロードではなく、 <meta http-equiv="Refresh" content="30;chat.cgi?name=hoge#end"> で良いのでは？ 発言のほうの処理はどうなってるのかが分かりませんので答えようがありませんが、 同じように#endを加えれば良いかと。
その他の回答 (2)
横から失礼しますが… JavaScriptでページを開いた直後の表示位置をスクロールさせることで制御するのであれば、出力部の<body>タグを <body onLoad="window.scrollTo(0,10000)"> などのようにしてみてはいかがでしょうか。 window.scrollTo(x,y)は、JavaScriptのメソッドで、座標x,yの位置にスクロールさせる動作を行います。 これをonLoad=""というイベントハンドラで、ページロード終了後に自動的に実行させるようにしていますので、ページがロードされるとページ上部から10000ピクセルの位置に自動でスクロールしてくれるはずです。 スクロール位置については、少々過剰気味に、いいかげんに決めて書いてあります。 実際にスクロールされるのは、スクロールバーが出ている範囲内に収められるので、内容を無視して10000ピクセルの位置に移動してしまうということはなく、実質的にページ下端にスクロールされると思います。 アンカーを利用して<a name="end"></a>の位置に飛ばすのであれば、出力部のHTMLのbodyタグを <body onLoad="location.href='#end'"> としても良いかと思います。 この場合は、ページロードの終了時にendというフラグに自動的に移動する動作になるはずです。 ただ、先の方も指摘されていますが、あまり良い処理に思えないのが正直な感想です。 この場合、チャットの表示部が再読込みされる度にページ下端に遷移する可能性がある訳ですよね。 30秒ごとにリロードされるとなると、表示されるログの件数によってはそこにあるログをすべて読み終えるより前に、リロードがかかってページ下端に移動してしまい、最新の発言を読むのにも苦労する可能性がある気がするのですが… 素人考えでしょうか? 失礼しました。
お礼
長期外出のため遅くなりました。 JavaScriptでもアンカーを使っても同様の結果 が得ることができました。 やはり仕様上描画自体をページの下部からはじめる のは不可能のようです。 the845さんのPerlで解決する方法が少し気になるので もう少し締切はしないつもりです． ありがとうございました。
- the845t
- ベストアンサー率33% (246/743)
ページ最下部に <a name="bottom">hoge</a>を加え、 ページ更新の度に #bottomにアクセスするようにしては？ 余談： 多くのチャットCGIが上へ上へと追加するのは、 そうした方が便利だからです。 メッセンジャーなどの場合は、発言が更新することなく、 挿入されていくのでその方が都合が良いですが、 ブラウザで読むとなると、一度すべてのページを読みこむことになりますから、 下に置くより上へ追加した方がより早く発言が読めますし、 その方が楽ですね。
補足
ご回答ありがとうございます。遅くなってしまい申し訳ありません。 自力で色々試しておりました。 一番の希望であったHTMLでの方法を教えていただきありがとうございます。 チャットは投稿フレームと会話ログフレームを用いており、会話ログを表示する部分は CGIによる出力をしています。 #bottomにアクセスする方法がちょっとわからなかったのでHTML,Perl，JavaScriptのどれかで 可能なら教えてください。 会話ログの最後に<a name="end">と出力したのですが 当然そこにアクセスする必要があるのですが投稿フレームのsubmit では会話ログ生成＋表示をするだけなので<a href="#end">などでa nameにアクセスする動作がありません。 余談に関して。 適切なご指摘だと思います。 発言が読める時間はともかくインタフェースとしては 普段使っているようなほうがいいなと思ったので。 単なるわがままなんですが自作するのだからちょっと 変わったのがいいかな．．と思いまして。 アドバイスよろしくお願いいたします。
お礼
遅くなってしまい申し訳ございませんでした。 結局のところhtmlのメタタグやnameタグを使うことが よさそうだと判断しました。 CGIについてはhoge#endに飛ぶという処理はできないままでした。 丁寧に教えていただきありがとうございました。
補足
早い回答ありがとうございます。 試行錯誤したのですができませんでした。すみません。 chat.cgiについて説明不足でした。 見た目はKent web様(http://www.kent-web.com/)のCOMCHATのような投稿とログが分かれている フレーム形式のチャットです。 １．chat.cgiは最初にアクセスされるとrows=*,15でtop(log.html)とbottom(chat.cgi?mode=form) というフレームを生成します ２．bottom部にchat.cgiが生成した投稿フォームがあり，formのアクションでtarget=topのchat.cgi?mode=sendが呼び出される ３．sendではユーザのコメントをlog.htmlに書き込んみ，log.htmlをprintで出力 となっています。 log.htmlには <meta http-equiv="Refresh" content="30">が書かれています。また<body>の最下部には<a name="end">hoge</a> が書いてあります。 the845tさんのおっしゃる <meta http-equiv="Refresh" content="30;chat.cgi?name=hoge#end"> を実行したところchat.cgiが呼び出されたのですが結局name=#endには飛びませんでした。 要するに技術的には print "<html><head></head><body>・・・<br><a name="end">hoge</a></body></html>"; を出力した直後に#endに飛べればいいのですがその方法がわからない状態です。 htmlファイルならcontent="30;URL=log.html#endなのはわかったのですが飛ぶ対象がファイルでなく CGIの出力なのでわからないです。 chat.cgi?name=hoge#end だとchat.cgiが呼ばれ$ENV{'QUERY_STRING'}にname=hoge#endが格納されるだけのように思えるのですが この処理でCGIの出力の指定部に飛べるのでしょうか。 私の実験ではできなかったのでchat.cgi?name=hoge#endの挙動について説明いただけるとたすかります。 #本題がJavaScriptと離れて来たので(私としては望ましいことですが) ご返信いただけたらPerlカテゴリに移動たほうがよいのかもしれないと思っているところです。