[僕] 2006年03月04日 アーカイブ

僕ト云フ事

たろマークはてなブックマーク

2006年03月04日

[javascript][perl] Web 拍手みたいな奴作って付けた。

いや、Web 拍手もちょっと良く分かって無いんだけどもね。要するに一言書いてどっかに送信できるものがあるといいなぁと思って。うちの blog は RSS で読んでくださっている方が意外と居らっしゃる(興味もってくれてありがとうございます)んですが、特にコメントとかはつかない。もう少し気楽にフィードバックもらえるものがあればいいかなぁと。(ちなみにサイドバーの検索フォームからコメントを入れてくれる人も居るんですが、検索ログなんてそうそう見ないのでw)

「そこではてブですよ」とか言われても、ブクマされるほどのエントリも無かったりするので。はっはっは。んで、サイドバーにメールフォームくっつけてる blog とか見ていいなぁと思ったけど、メールで飛んでくるよりは bloglines で読みたいなぁと言う事で XML::FeedPP 使って作りました。各エントリの下に一言送るフォームがあります。特に掲載はされないし、そのエントリに関係ない事でも気軽にバンバン送ってください。

で、ソースとか。

エントリーアーカイブ


    <script src="<$MTBlogURL$>js/prototype.js" type="text/javascript"></script>
    <script src="<$MTBlogURL$>js/scriptaculous.js?load=effects" type="text/javascript"></script>
    <script src="<$MTBlogURL$>js/myscripts.js" type="text/javascript"></script>

MT の検索結果をその場に出す。」と同じく、prototype.jsscript.aculo.us を使ってますので、script タグでの読み込みが必要です。js ファイルへのパスは適当に変更してください。


<div id="bullet" class="bullet">
    <form action="JavaScript:void(0);" onSubmit="new Bullet(this);return false;">
        <input type="text" name="comment" id="comment" class="comment" />
        <input type="hidden" name="title" id="title" value="<$MTEntryTitle$>" />
        <input type="hidden" name="url" id="url" value="<$MTEntryPermalink$>" />
        <input type="submit" value="一言" />
    </form>
</div>

エントリーアーカイブにはこんな感じでフォームを表示したいところに上のコードを入れときます。

myscripts.js


var Bullet = Class.create();
Bullet.prototype = {
    initialize: function(form) {
        this.entry = $('bullet');
        
        var params = Form.serialize(form);
        this.entry.innerHTML='<img src="/js/progress_bar.gif" width="200" height="20">';
        Element.show(this.entry);
        new Ajax.Request("/path/to/bullet.cgi/shot", {
            method: 'post',
            parameters: params,
            onComplete: this.showresult.bind(this)
        });
        
    },    
    showresult: function(res){
        Element.hide(this.entry);
        this.entry.innerHTML=res.responseText;
        Effect.SlideDown(this.entry);
    }
};

CGI 側のソース

bullet.tar.gz

lib/Bullet.pm の17~28行目付近は設定です。適当に変えてください。

ネーミングセンスの無さからついに目に入った単語をそのまま使ってしまった。いや、弾幕のようなフィードバックがありますようにとかそういう意味合いで(後付け

追記

  • 2006/03/17 21:31 ie で内容を送信出来てない不具合がありました。myscripts.js を修正しています。form の内容取得する前に innerHTML で書き換えちゃダメです orz