コメントにちょっと便利な2つの機能を導入。

またまたコメントにちょっと便利な機能を導入してみました。
今回もQuicktags Plusと同様にjavascriptを使ってます。

一つ目の機能はコメントの文字制限数(800バイト)より多く入力された状態で送信ボタンを押すと、アラートウィンドウが表示され送信されなくする機能です。
アラートウィンドウには入力した文字(バイト)数も表示させて書き直す際に少々便利な機能となってます。

通常でも制限数チェックがなされていますが、ページを読み直してエラーを確認して・・・という作業に若干のストレスを感じていたので導入してみました。

もう一つの機能は某所で言うところのアンカー機能ですね。
コメント欄に>>半角数字もしくは＞＞半角数字という風に入力して投稿すれば、その文字に反応してその入力数字番目のコメントへのリンクに変換されます。（クリックすると飛びます）
投稿者情報の右端にある[RES]というリンクをクリックすれば、自動的にコメントフォームへ飛びコメント欄に>>＋コメント番号が入力されるような機能も付けました。

また、アンカーリンクをポイントするとコメントの内容と投稿者情報がポップアップ表示されるのでコメント内容確認が容易になっています。

どちらの機能もFirefox1.5.0.2, Opera8.53, WinXPのIE6, Netscape8.1で動作確認しました。
コメントの少ないうちのブログには必要ないかもしれないけれど自己満足自己満足。

Technorati Tags: blog, javascript, livedoor, customize, ライブドア, カスタマイズ, コメント欄

参考記事リンク
コメント欄の文字数制限について - livedoor knowledge
livedoor Blogのコメント欄にURL自動リンク機能をつける - 地獄変00
lixlpixel javascript tooltips | tooltips which stick to the cursor

AQ Says...

#1 at April 24, 2006 15:26

まだスクリプト覗かせていただいていないのでコメントもあやふやなんですが・・・地獄変00 さんのスクリプト改って事になるんですね？

どうしても私の所では、地獄変00 さんのスクリプトと、その他のスクリプトの相性が良くなくて、現在 [url=http://toricoco.livedoor.biz/archives/50037552.html]『とりココブログ』[/url] さんのスクリプトを導入して、少し書き換えてアンカー機能なども使用できるようにしているのですが、やはりこれも色々と問題があって・・・。

スクリプトの呼び出しを <head> ～ </head> の間に書き入れると動作しなくなります。それだけなら良いのですが、コメントを書き入れて送信すると、ブログ全体の文字が化けちゃいます。(-_-;) 他のスクリプトとの兼ね合いなんでしょうが、仕方無しに <body> ～ </body> の中へ。

そうすると動作がものすごく遅いんですよね。^^; 続く↓

#2 at April 24, 2006 15:48

それに設置していた [url=http://amix.dk/greybox/demo.html]『 Grey Box 』[/url] との相性が合わず、これまた仕方無しに Grey Box を外しました。(T_T)

地獄変00 さんのスクリプトを元に改造したのであれば、それについていたコメントに書かれた URL を直接飛ばす機能も同じく使用できるのでしょうか？直接書かれた URL は _blank し、quicktagas で貼られたリンクは _self でと、わけて利用したかったんです。

それと今気づきました。プレビューにでている文字にタグが表示されずに文字そのものがでていますよね？あれ？コメントプレビューのバージョンあがりました？現在、プレビューの画面にはタグがそのまま出ちゃって、プレビューの役を果たさなくなっているんですよね。(T_T) なんか支離滅裂の長文コメントお許しください。

cie Says...

#3 at April 24, 2006 20:57

AQさんこんばんは。

>>1
[strong]> 地獄変00 さんのスクリプト改って事になるんですね？[/strong]
アンカーを変換する部分に限って言えばそうです。
正規表現の部分と変換後の文字列をアンカー変換用に改造しました。

正確にはchangeURLIntoLink関数の
[blockquote]var regURL = new RegExp("(s?https?://[-_.!~*'()a-zA-Z0-9;/?:@&=+$,%#]+)","g");[/blockquote]ここを[blockquote]var regAnchor = /s?(>>|＞＞)([1-9])(\d*)/g;[/blockquote]に[blockquote]aryDiv[i].innerHTML = sHTML.replace(regURL,'<a href="$1">$1</a>');[/blockquote]ここを
[blockquote]aryDiv[i].innerHTML = sHTML.replace(regAnchor,'<a href=\"#com$2$3\">$1$2$3<\/a>');[/blockquote]のように変えています。

[strong]> 『とりココブログ』さんのスクリプト[/strong]
似たようなスクリプトをすでに組まれている人がいらしたんですね。[へぇ]
ちょっとスクリプトの中を覗かせて頂きましたが、うちとも地獄変00さんのところともやっていることはそれほど変わらない気もします。
重くなる原因はちょっとよくわかりません。[しゅん]

続きます。

#4 at April 24, 2006 21:01

続きです。

>>2
[strong]> Grey Box[/strong]
たしかlightbox JSの画像ではなくWebを開くバージョンですよね。
これは使った事がないのでよくわかりません。すみません。[しゅん]

[strong]> URLを直接飛ばす機能も同じく使用できるのでしょうか？ [/strong]
キチンと実験してないのでなんとも言えないのですけど、たぶんできないこともないかと思いますよ。
[url=http://blog.livedoor.jp/cie/archives/50422947.html#comments]こちらのコメント[/url]でも書かせてもらってますが、Quicktags Plusと自動URLは同居させても問題ありませんでしたし。

[strong]> コメントプレビューのバージョンあがりました？[/strong]
あ、気付かれましたか。[きゃー]
Quicktags Plusにプレビュー機能つけようかなと試行錯誤してた時に
[u]そういえばもうプレビュー機能あるやん！[/u]て思い出してちょっと改造しました。

といっても関数を呼び出しているだけでして、コメントプレビュースクリプト doCommentPreview関数の
[blockquote]var s = getStringCommentPreview(textAreaId);[/blockquote]の下に[blockquote]// Quicktags Plus用
var tags = getCommentTags(edButtons);
s = getStringCommentTags(tags, s);
// 絵文字用
var list = getCommentEmojiList();
var att = 'style=\"border: 0; vertical-align: middle; margin: 0px 1px 1px 0px;\"';
s = getStringCustmizeEmojiTag(list, s, att);[/blockquote]このように入れてみたです。

ちょっと重くなるやも知れませんが、どうぞ試してみてください。[さむあっぷ]

#5 at April 25, 2006 06:01

お世話になってます。(^^)

cie さんのソースを参考に、スクリプトタグの記述位置やコメントプレビューのバージョンアップなどをしてみた結果、ようやく落ち着いたみたいです。A^^;

アンカータグ機能は、結局とりココさんのスクリプトを改造したのをそのまま使用し、しばらくいこうと思っています。多分他に仕掛けているスクリプトが何かしらと邪魔しているんでしょうね (>_<)

Light Box は、[url=http://serennz.cool.ne.jp/sb/sp/lightbox/index_ja.html]Light Box Plus[/url] に変更しました。V2.02 に一度してみたのですが、Firefox や Netscape に若干の不安動作が見られた為、取り外し、Light Box Plus で落ち着いたという感じでしょうか。

もうしばらくは、カスタマイズはお休みして、記事の更新にチカラ入れときます。ちょっと疲れました。(T_T)

#6 at April 25, 2006 21:40

AQさんお疲れ様でした。[びあ] >>5
落ち着かれたようで安心です。また何かありましたら質問どうぞですよ。[さむあっぷ]

[strong]> カスタマイズはお休みして、記事の更新にチカラ入れときます。[/strong]
うちはほぼカスタムオンリーなブログなのでもっと頑張らないとです。
とは言っても先に新作テンプレの調節しないといけないんですけどね。[べー]

buena suerte!