![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
[チャット使用時にスクロールバーのデフォルトの位置を下にしたい。]
PerlによるCGIでチャットを作成しております。
アプリケーションのチャットの場合はレスをすると前の発言の下の行に加えられる
場合が多いです。
しかし、多くのCGIチャットではその逆でレスは直前の発言の上の行に追加
され,より過去の発言をみるためには下方向にスクロールさせます。
私の自作チャットではスクロールバーを最下端に設定したいのですが方法がわからないので教えてください。
本心としてはHTMLのみ(JavaScriptなし)にしたかったのですが調べたところ
スクロールバーの色の設定などにJavaScriptを使っている場合が多かったので
JavaScriptならできるかと思い質問いたしました。
質問やご回答お願いいたします。
[実行環境]
WindowsXP+ActivePerlv5.80+Apache1.3.28+IE6.0
[自分の知識]
JavaScript :なし
Perl:入門書読んでいる最中。簡単な掲示板程度なら作成可能
HTML:リファレンスを見ながら使う程度
その他Webプログラム知識:入門書レベルのJavaApplet
No.2ベストアンサー
- 回答日時:
チャットがどういう仕組みになっているのか分かりませんが、
自動リロードなどであるならば、
<meta>でページを再読み込みしていると思います。
それを、リロードではなく、
<meta http-equiv="Refresh" content="30;chat.cgi?name=hoge#end">
で良いのでは?
発言のほうの処理はどうなってるのかが分かりませんので答えようがありませんが、
同じように#endを加えれば良いかと。
この回答への補足
早い回答ありがとうございます。
試行錯誤したのですができませんでした。すみません。
chat.cgiについて説明不足でした。
見た目はKent web様(http://www.kent-web.com/)のCOMCHATのような投稿とログが分かれている
フレーム形式のチャットです。
1.chat.cgiは最初にアクセスされるとrows=*,15でtop(log.html)とbottom(chat.cgi?mode=form)
というフレームを生成します
2.bottom部にchat.cgiが生成した投稿フォームがあり,formのアクションでtarget=topのchat.cgi?mode=sendが呼び出される
3.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カテゴリに移動たほうがよいのかもしれないと思っているところです。
遅くなってしまい申し訳ございませんでした。
結局のところhtmlのメタタグやnameタグを使うことが
よさそうだと判断しました。
CGIについてはhoge#endに飛ぶという処理はできないままでした。
丁寧に教えていただきありがとうございました。
![](http://oshiete.xgoo.jp/images/v2/common/profile/M/noimageicon_setting_02.png?e8efa67)
No.3
- 回答日時:
横から失礼しますが…
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で解決する方法が少し気になるので
もう少し締切はしないつもりです.
ありがとうございました。
No.1
- 回答日時:
ページ最下部に
<a name="bottom">hoge</a>を加え、
ページ更新の度に
#bottomにアクセスするようにしては?
余談:
多くのチャットCGIが上へ上へと追加するのは、
そうした方が便利だからです。
メッセンジャーなどの場合は、発言が更新することなく、
挿入されていくのでその方が都合が良いですが、
ブラウザで読むとなると、一度すべてのページを読みこむことになりますから、
下に置くより上へ追加した方がより早く発言が読めますし、
その方が楽ですね。
この回答への補足
ご回答ありがとうございます。遅くなってしまい申し訳ありません。
自力で色々試しておりました。
一番の希望であったHTMLでの方法を教えていただきありがとうございます。
チャットは投稿フレームと会話ログフレームを用いており、会話ログを表示する部分は
CGIによる出力をしています。
#bottomにアクセスする方法がちょっとわからなかったのでHTML,Perl,JavaScriptのどれかで
可能なら教えてください。
会話ログの最後に<a name="end">と出力したのですが
当然そこにアクセスする必要があるのですが投稿フレームのsubmit
では会話ログ生成+表示をするだけなので<a href="#end">などでa nameにアクセスする動作がありません。
余談に関して。
適切なご指摘だと思います。
発言が読める時間はともかくインタフェースとしては
普段使っているようなほうがいいなと思ったので。
単なるわがままなんですが自作するのだからちょっと
変わったのがいいかな..と思いまして。
アドバイスよろしくお願いいたします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・「I love you」 をかっこよく翻訳してみてください
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・昔のあなたへのアドバイス
- ・かっこよく答えてください!!
- ・あなたが好きな本屋さんを教えてください
- ・スタッフと宿泊客が全員斜め上を行くホテルのレビュー
- ・【大喜利】【投稿~8/27】 こんなガソリンスタンド二度と来るか!なぜそう思った?
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・【お題】動物のキャッチフレーズ
- ・【お題】甲子園での思い出の残し方
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・「それ、メッセージ花火でわざわざ伝えること?」
- ・自分用のお土産
- ・人生で一番お金がなかったとき
- ・一番好きなみそ汁の具材は?
- ・泣きながら食べたご飯の思い出
- ・ちょっと先の未来クイズ第1問
- ・ゴリラ向け動画サイト「ウホウホ動画」にありがちなこと
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
リストビューをスクロールさせ...
-
PDFを(htmlのように)無限に縦...
-
エクセルVBAでフォームのListbo...
-
Visual Basicから Spreadのスク...
-
webページで横方向にアンカーを...
-
パソコンの画面よりも大きい画...
-
大きい表へのスクロールバーの...
-
スクロールバーの制御
-
マウスオーバー→ホイール回転で...
-
resizeするとスマホで何度もリ...
-
携帯ページで文章スクロール
-
スクロール位置 ページ切り替...
-
TreeViewのスクロール制御
-
マウスホイールでスクロールで...
-
IEにおけるプルダウン、テキ...
-
Excel VBAで、ユーザーフォーム...
-
文章の自動スクロール
-
新宿駅構内で証明写真
-
VBE画面の縦のスクロールバ...
-
javaのJTextPaneの横スクロール...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Excelでワードアートや図を常に...
-
エクセルVBAでフォームのListbo...
-
PDFを(htmlのように)無限に縦...
-
リストビューをスクロールさせ...
-
大きい表へのスクロールバーの...
-
Visual Basicから Spreadのスク...
-
Excelの質問で票の途中に...
-
MFCでのスクロールバーの扱い
-
vb,netでtextboxの文字を右から...
-
Excelで一部分だけを常に表示さ...
-
マウスオーバー→ホイール回転で...
-
Excelで1.2行目だけ固定して...
-
ページ訪問時にiframe内を自動...
-
VBE画面の縦のスクロールバ...
-
リストビューのスクロールバー...
-
上下キーを押すと、ページスク...
-
webページで横方向にアンカーを...
-
ポストバック時のスクロール位...
-
IFRAMEでscrolling="yes|no"の...
-
アコーディオンで開かれたパネ...
おすすめ情報