MinorProbrem

グダグダ日記

Web拍手ツール【GJ!】(グッジョブ!)

with 22 comments

スクリプトダウンロード

Web拍手ツール【GJ!】とは

一言で言えばWeb拍手です。(ソース等は一から書いてますが)

GJ!には
1 ブログに特化したWeb拍手なので、どのエントリーに対する拍手なのかが判る

2 拍手数を拍手ボタン上に合成することで、拍手数がわかりやすい

3 拍手数をXMLで出力(ブログパーツなどに使えます)

4 ボタングラフィック差し替え可能

5 コメント閲覧画面(パスワード設定可能)完備

6 拍手数の表示スタイルを2種類から選択可能

といった特色があります。
こちらが【GJ!】の設置サンプルです。URLなどは全てダミーです。

GJ!の説明

—————————————————————————

*2008/03/16追記

ver0.99より以前のGJ!スクリプトを使用されている方が1.00に移行する場合ログファイルの変換が必要です。

*2008/05/24追記

公開後だいぶ経ちましたので、移行ツールの公開を停止しました。ver0.9以前のgj!をご使用の方で移行ツールがご入用な方はブログのコメントにご一報ください(メールアドレスを書いていただければそちらに添付してお送りします)

説明:readme.txt

ログデータバージョン移行ツール(convertgjlog.zip)

上記をreadme.txtに従って実行してください。

2008/03/16以降のGJ!を使用されている方(管理画面下のフッターにver1.00以降のナンバリングがされている方)はこのツールを実行する必要はありません。

—————————————————————————

通常時は拍手数が表示されたボタンのみが表示されています。

お客さんが記事に興味を持ってくれ、GoodJob!ボタンを押してくれると管理人に向けて拍手が送信されます。また右側にコメント欄が表示され、ボタンも感謝を表したものに変化します。

ッセージ欄にコメントを記述し、もう一度にGoodJobボタンを押すとメッセージが送信されます。

また、拍手数をアイコン表示して表示することも可能です。

GJ!設置に必要な環境

下記の環境がGJ!には必要です。

  1. テンプレート変更可能なBlog(現状MovableType4とWordPressでの確認をしています
  2. 設置するサーバーにPHP4またはPHP5がインストール済み、かつGDライブラリが組み込まれていること

また、閲覧者側がJavascriptをONにしている必要があります。

設置前準備

1 ダウンロード


スクリプトダウンロード
(gj.zip)
上のリンク先から「gj.zip」をダウンロード後、解凍してください。

ファイル構成は

gj┐

├gj.php(GJ!本体)

├gj.js(javascript)

├prototype.js(javascriptライブラリ)

├gdtest.php(GDライブラリテスト用ファイル)

├readme.txt(説明テキストファイル)

├loc (空ディレクトリ)

├img(ボタン画像)

└log(空ディレクトリ)

2 記述変更

解凍したファイルのうち、gj.phpgj.jsの記述を変更します。
・gj.php

$PASSを任意の文字列に変更してください。コメント閲覧画面のパスワードとなります。
・gj.js

URL=の記述をあなたの環境に合わせて変更してください。
例:GJ!の設置先が”http://hogehoge.com/gj/“だった場合
URL=”http://hogehoge.com/gj/gj.php”
となります。

それ以外のところは、各スクリプトのファイル名を変更したり、ディレクトリ構成を変更しなければそのままで構いません。

変更した場合は、それぞれの環境に合わせて変更してください。

3 アップロード

2で記述したURLへアップロードします。基本的にはgjディレクトリごとアップロードすればいいでしょう。

4 パーミッションの変更

パーミションは以下のように設定してください。

┌gj.php(644)

├gj.js(644)

├prototype.js(644)

├gdtest.php(644)

├loc(777) *空ディレクトリ

├img(755) *ボタン画像

└log(777) *空ディレクトリ

*readme.txtはアップロードする必要はありません

この段階で、ブラウザからあなたのサーバーのgdtest.phpにアクセスしてみてください。

サンプル

サンプルのように、ボタン画像上に「OK」と表示されたらあなたのサーバーでGJ!の設置が可能です。

OK!が表示されない場合、サーバーにPHP、またはGDライブラリが組み込まれていない為、このアプリは動きません。すいません。

なお、テスト後はこのgdtest.phpは削除してください。

MovableTypeでの設置方法

movabletypeでの設置方法

WordPressでの設置方法

wordpressでの設置方法

コメント管理画面

お客さんからもらった拍手、コメントを確認できます。
例:http://hogehoge.com/gj/gj.phpに設置している場合
http://hogehoge.com/gj/gj.php?mode=show&****
ブラウザから、上記アドレスを入力してgj.phpにアクセスします。

****の部分は、あなたがgj.phpに記述した$PASSになります。
こちらが管理画面のサンプルです。URLなどは全てダミーです。

ちなみに、コメント等の閲覧機能はありますが、削除機能はついていません。

消したいコメントがある場合、logディレクトリの下に生成されるファイルのうち

  • gjcount.dat - 簡易ログ
  • gjlog.dat -詳細ログ

をFTPでダウンロードして、テキストエディタ等で削除してください。

詳細ログは1行が1拍手分のデータを、簡易ログは拍手をもらったURLごとのデータを1行で記録しています。

基本的にカンマ区切りのテキストファイル(csv)です。
簡易ログの修正

拍手数を変更したい場合、左から3カラム目が拍手数です。この数を変更したい数に変えてください。

項目そのものを消したければ、1行まるごと削除でOKです。

詳細ログの修正

メッセージの内容を変更したければ左から5カラム目を変更、URLを変更したければ4カラム目、ページ名を変更したければ3カラム目を変更してください。

拍手そのものを削除する場合は行ごと削除してください。

*ログの変更前にはファイル名を変えるなどしてバックアップをとることをお勧めします

ボタン画像の変更

imgディレクトリの下にある画像のうちgjbutton1.gifが通常時、gjbutton2.gifが押された後に変化するボタンの画像です。

また、オリジナル画像への差し替えは可能です。

画像を同じファイル名で上書きするか、別ファイル名でgj.phpの画像ファイル名を書き換えても変更ができます。

拍手数のテキストカラーもそちらで変更できます。

また、拍手数の表示位置もX,Y方向それぞれ3段階で変更可能です。変更方法はgj.phpに記載しています(X,Y位置を0~2で指定します)。

2008/04/10追記

拍手数をアイコン表示している場合、gj.js内のbuttongがボタン画像になります。

2008/05/24追記

絵文字ネット様こちらGJ!用のボタン画像を公開してくださいました。

とても可愛いボタンですので、こちらを使わせていただくのもよろしいかと思います(ゆたか様ありがとうございます!)

人気記事ランキング

GoodJobボタンが押され、ログに出力されると同時に、簡易ログの内容をXML化したものをlogディレクトリに自動で出力しています。 これを利用して、人気記事ランキングを表示することができますので、ブログパーツのようにすれば、どのエントリーが人気なのか、お客さんが一目で判るようになります。 単純なXMLですので、ご自分で作成してしまうのもいいと思います。当サイトでも取り急ぎサイドバーに人気記事ランキングとして自作ブログパーツを設置してみました。 こちらも近日公開できると思いますので、公開後はこちらでJavascriptのソースを公開しました。ご自由にお使いください

20080612追記:Flex版のGJ!人気記事表示パーツを公開しました。

詳しくはこちらのエントリーをご覧ください

Flex(Flash)版GJ!人気記事ランク表示パーツ公開です(2008/06/12)

20080907追記:Flex版のGJ!人気記事表示パーツを変更しました。

詳しくはこちらのエントリーをご覧ください

FlexでのGJ!ランキング表示をちょっと変更してみました(2008/09/07)
20080903追記:UbiquityでのGJ!人気記事表示スクリプトを公開しました。

UbiquityでGJ!の拍手数を表示するなどしたよ! (2008/09/04)

*Ubiquityについては各自で確認をお願いします。

動作確認

現在、

  • InternetExplorer 6
  • Firefox 2.0
  • Opera 9.25
  • Safari 3.0.4

での動作を確認しています。

サポート

設置方法やトラブルシュートなどわかる範囲でお答えしますが、基本的に自己責任でお願いします。

また、機能改善のアイディアやバグ報告などありましたら、こちらコメントいただければと思います。 可能な範囲で対応します。

著作権

著作権は放棄しませんが、ソースの改変等はご自由に行ってください。

その際は

・管理ページにある著作権表示は削除しないこと

をお願いします。

また、当サイト(http://hmlab.info/minor)へのリンクをあなたのページのどこかから貼ってくださると嬉しいです。

更新履歴

2008/02/13:GJ!スクリプト公開開始(ver0.98)

2008/03/02:拍手のマックス値、概略表示時の件数制限機能、IPによるマスキング、新着順表示実装

2008/03/14:記事ごとの上限設定、拍手数表示の位置指定、桁数変更対応

2008/04/10:はてなスター風表示実装

2008/04/11:PHP5対応完了

Written by Hex68

9月 13th, 2008 at 10:28 pm

Posted in

Tagged with ,

22 Responses to 'Web拍手ツール【GJ!】(グッジョブ!)'

Subscribe to comments with RSS

  1. こんにちは。fc2のような拍手ボタンを設置できないかと探していたところ、ビッタリの機能が付いたGJ!を知り、サイトに設置しようとしているものです。

    ええと、最近サイトをWPに移行されたということでしたが、「GJのサイトへの設置方法」のリンクが外れてしまっているようです。

    また、貴サイトと同じ「wp.vicuna.ext」を使用しているのですが、貴サイト、また他サイト様を参考に設置を試みたのですが、コメント欄のようなオブジェクトが二段になって表示されてしまい、うまく設置する事ができませんでした。
    位置は、「」
    の下に記入しています。
    その他、何か気をつけることがありますでしょうか。
    ご教示いただければ幸いです。
    どうぞよろしくお願いいたします。

    ech

    16 9月 08 at 1:03 PM

  2. >ech様

    はじめまして。HEX68です。

    リンク切れのご指摘、ありがとうございます。早速修正しました。

    僕も先週末からのWordpressユーザーなのでうまく伝えられないかもしれないのですが、僕の場合、single.phpの中に

    <p id=”_gj_mark”>
    <input id = “” type = “image” src = “” alt=”拍手” style=”vertical-align:middle;border:none;” onClick=”goodjob(”,”) “>
    showbutton(”,”);
    <input type = “text” id =”_gj_message” style=”visibility:hidden;vertical-align:middle;”>

    と書いたところ、今のように表示されています。
    (header.php内でjavascriptは読み込み済み)

    コメント欄が2段ということなので、<input type = “text” ~のあたりが2回かかれていたりしませんか。そのあたりを確認してみてください。

    これからもよろしくお願いします。

    HEX68

    16 9月 08 at 11:21 PM

  3. HEX68様

    こんにちは。丁寧なご返信、ありがとうございました。
    HEX68様のコメントにならって、もう一度記入したタグを見直してみたところ、スクリプトが重複しておりました。
    それに加えて、他サイト様の解説のタグをコピーした際、文字コードの関係か、化けてしまった部分があったようです。

    一からやりなおして、今回HEX68様に解答していただいた内容を記入しましたら、無事表示、動作いたしました!
    なぜかログページで文字化けがしてしまっているようなので、確認しながら調整したいと思います。

    このたびはありがとうございました!
    これからも素敵なスクリプト作り、頑張ってください!

    ech

    18 9月 08 at 10:05 AM

  4. HEX68様

    はじめまして。
    とてもすばらしいスクリプトなので、MT4.2にぜひ導入したく努力してみたのですが、どうにもうまく設置できません。

    「テンプレート」-「HTMLヘッダー」にJavascriptファイル読み込みの記載をして、
    「テンプレート」-「ブログ記事の概要」にボタン配置のスクリプトを記述して保存、再構築しましたが、ボタンが表示されずに入力ボックスが2個表示されてしまいます。(トップページに設置を試みてます。)

    gj.js gj.phpの設定変更、所定位置へのアップロード、パーミッションの設定も確認しているのですが、なにか根本が違っておりますでしょうか?
    (gdtest.phpでは正常に赤いOKボタンが表示されております。)
    お忙しいところ申し訳ございませんが、ご教授お願い出来ませんでしょうか? どうぞよろしくお願いします。

    kuma25n

    21 10月 08 at 2:32 AM

  5. HEX68様

    上で質問しましたkuma25nです。
    どうにか自己解決いたしました。文字コードの問題だったようです。お騒がせしまして申し訳ありませんでした。
    ブログに使用させて頂きます。
    素晴らしいスクリプトをありがとうございました。

    kuma25n

    23 10月 08 at 12:33 AM

  6. >kuma25n様

    こんにちは、亀レスすいません。
    問題解決できたようでよかったです。これからもよろしくです。

    HEX68

    24 10月 08 at 12:49 AM

  7. 初めまして、fc2のような拍手を探していたところ、こちらで理想のスクリプトを公開されていたので使わせていただこうと思っております。
    試しに設置してみたのですが、当方jugemを使用しておりwordpressでの設置方法を見ながらjugem用のタグに変更するなどしてみたのですが、どうにも上手くいかなかったのでお手数をお掛けするのを承知の上でご連絡させていただきました。
    対処法などあれば、教えていただけると大変助かります。どうぞ、ご教授の程宜しくお願いいたします。

    ムカイ

    17 1月 09 at 3:23 PM

  8. >ムカイ様

    はじめまして。
    えと、ちょっとJUGEMは触ったことが無いのでちょっと判りかねます。

    JUGEM公式の独自タグ一覧を見ると{permalink} とか{entry_title} あたりを使えばいいのかな?という感じに見えました。

    ちなみに、GJ!のPHPスクリプトを置いてあるドメインと、JUGEMのブログのドメインは同じものですよね?(つまりブログは独自ドメインを取得して運営していますよね、という確認です。)

    javascriptのセキュリティの関係上、同じドメイン間でないとHTTP通信ができないので、ボタンの表示はできても拍手処理はできませんのでお気をつけください。

    ではでは

    HEX68

    28 1月 09 at 10:01 PM

  9. HEX68様

    こんにちは、上記で質問させていただいたムカイです。
    独自タグなどをスクリプトに合わせて変更していましたが、
    原因の根本はCGIとブログが別ドメインだったことにあるようです。
    知識が足りず、お手数をお掛けしました。
    丁寧なご返信ありがとうございました!

    ムカイ

    30 1月 09 at 4:03 PM

  10. 素晴らしいCGIのご提供、まことにありがとうございます。
    さっそくMT4に拍手ボタンを設置させていただきました♪
    1点、教えていただければ嬉しいのですが、現在の使用だと拍手ボタン投下後にコメントの画面に遷移し、そこでコメントを入れていただく仕様となっているのですが、それだと1人で2回の拍手となる可能性があるため、できれば最初からコメントを入力いただくような形にして、一人の人が1拍手という使用にしたいと思っているのですが、ぜひともその改造方法をご教授いただければ嬉しいです。
    よろしくお願いいたします。

    千葉ひで

    30 6月 09 at 10:42 PM

  11. こんばんは。GJを使わせていただきました。
    entryではなく、写真ページの各写真(1entryで複数のGJを表示)への投票を行う形です。大変気に入っております。
    勝手なお願いになるのですが、現状ですとinputタグのIDにURLが入ることになり、
    W3C等での規格に抵触してしまいます。IDをasset#等でユニークとし、scriptでURLを処理するようなことはできますでしょうか?
    プログラムは全くの素人で勝手なお願いとは思いますが、切なる希望として解決を望んでおります。よろしくお願いいたします。

    オーク

    4 7月 09 at 10:04 PM

  12. HEX68さん、こんにちは。
    上のコメントについては、自己解決できました。お騒がせいたしました。
    gj.phpをそのままに、gj.jsをmodifyするだけでした。
    プログラムは構造がうまく出来ていますね。流石です。
    このツールは大変気に入っています。ありがとうございました。

    オーク

    6 7月 09 at 3:06 PM

  13. HEX68様
    「GJ!」を設置させていただいたところ、毎記事1000を超える拍手があり、
    肉球が増える様が評判がよいです
    本当にありがとうございます

    質問ですが、
    コメント表示画面において
    ・記事一覧のとき、記事のランキング順ではなく、投稿順にする(最新の投稿が一番上にくるように)
    ・全ログ表示のとき、コメントされているものだけを抽出して表示させる

    以上のことは可能なのでしょうか。
    可能であれば、方法を教えてもらえたら助かります

    boro

    25 7月 09 at 9:20 PM

  14. >boroさま

    返信が「1ヶ月も」おおくれましてスイマセン。
    ご質問の件ですが、

    ・記事一覧のとき、記事のランキング順ではなく、投稿順にする(最新の投稿が一番上にくるように)
    ・全ログ表示のとき、コメントされているものだけを抽出して表示させる

    どちらも実装はしていないです。

    最新の記事を先頭にする、を実現しようとするとどこかにある記事の投稿順の情報と紐付けなければなりません。
    また、コメントのあるもののみを表示、とするほうはもう少し簡単なのですが、現状そういう絞込みは実装していません。

    なんで実装していないのか、と言えば僕が楽をしているからです(いいきった!)

    投稿順はブログ自身から取得すれば記事のPermLinkからGJ!側に紐付けられるんですが、どのブログでも汎用的に使えるシステムを目指していたので、ある程度特化したオペレーションが発生する実装は行わないようにしています。
    上記の点から実装はしない方針です。すいません。

    HEX68

    28 8月 09 at 3:32 AM

  15. 詳しい説明、お手数かけました。了解ですっ
    現状のままでも十分便利なツールなので楽しく使わせて頂きます
    ありがとうございました!

    boro

    30 8月 09 at 1:04 AM

  16. ブログの拍手を探しに探してGJ!に辿り着きました。
    FC2ブログのような拍手がいいなぁと思っていたら、まさにこれ!と思い、早速導入手順を拝見して頑張っていたのですが、どうしても自力で解決できず、教えていただきたいと思いお邪魔しました。

    さくらインターネットのさくらのブログを使用しているのですが、
    JavaScriptの読み込みはできました。
    「movabletypeに設置する場合」の「2 ブログテンプレートへの記述」で、一度つまづき、記述されている「」および「」を「」、「」に変更することで、なんとか画像の表示まではできました。
    が、次はクリックしたときにgoodjob関数の「new Ajax.Request」の処理で「onException」に流れてしまい、これがどうしてなのかまったくわかりません。
    ディレクトリ権限は「777」に設定してあるのですが……

    また、管理画面を表示しようとしたとき、画面が
    「<p id="list"」
    を表示しただけの画面となります。
    これはlogの中にdatファイルがないからでしょうか?

    うまく伝えられていないかもしれませんが、もし解決のヒントや原因がわかるようでしたら教えていただきたいと思います。
    よろしくお願いいたします。

    翠華

    30 8月 09 at 4:21 PM

  17. こんにちは。
    09-08-30 (日)に質問させていただいていた件ですが、どうもクロスドメイン制御(?)なるものではないかと思われたので、いろいろ苦心してなんとか拍手のカウントアップができるようになりました。

    ここで、また問題がでてきたので教えてください。
    ・管理ページが文字化けしている
    ・テキストボックスに入力したものが表示されない
    (拍手をしたのに詳細ページの一覧が表示されません)
    ・連投制限が効かない
    です。
    拍手数自体はインクリメントされていくのですが、連投制限がききません。
    管理ページの文字化けは、とりあえず応急処置でmb_convert_encoding関数を使ったのですが、詳細ページには情報が表示されずと、よくわからない状態です。

    もし注意点等ありましたら、教えていただけないでしょうか。
    よろしくお願いいたします。

    翠華

    1 9月 09 at 2:43 PM

  18. >翠華様
    返答遅れましてすいません。

    ちょっと状況をつかみかねているのですが、翠華様のブログの文字コードとgi.phpの文字コードは何になっていますか?
    どうも文字コードの問題のような気がします。

    私は両方ともUTF-8なのですが、そのあたりちょっと確認していただけますか。

    HEX68

    12 9月 09 at 1:49 AM

  19. wordpressにて、GJ!を設置させていただきました。素晴らしいです。
    ただ、少々コメント入力フォーム部分がわかりづらいかな?と思います。
    解決策として、inputタグ内のvalueにメッセージを設定したのですが反映されません。
    上記の質問でもありました入力フォームを最初から出現させておく、および初期値が表示されるようにするにはどのようにすればいいでしょうか?
    ご教授お願いします。

    AD

    6 10月 09 at 6:17 PM

  20. 初めまして。
    シンプルでわかりやすくて素晴らしいプログラムですね。
    早速使わせていただこうと設置したところ、私が借りているサーバー(ロリポップです)では
    ディレクトリのパーミッション777が禁止されているそうで、残念ながら稼動しませんでした・・・

    おそらく諦めるしかないとは思っているのですが、
    他にこれほど理想的なweb拍手はみつからないので諦めきれません・・・
    もしも777以外でも動きそうな方法がありましたら、アドバイスを頂ければ幸いです。
    どうぞよろしくお願いいたします。

    ヘイヘイ

    18 10月 09 at 7:16 PM

  21. こんばんは、gjをmt4.21jaにて使用させていただいております。
    翠華様と似た症状なのですが、管理ページでのページ名、拍手コメントや
    logフォルダ内のgj.xmlのページ名、コメント、gjcount.datのページ名
    これらのページ名、コメントの1文字目~2文字目だけが文字化けしてしまう症状が出てしまいます。
    logフォルダ内の各ページ毎のlogファイルや、new.datには
    ページ名もコメントも正常に記録されております。

    mt.cgiがUTF-8での設計なので、gj.phpもUTF-8にしておりますが
    mt-configにて出力ファイルをShift_JISにしておりますので
    試しにgj.phpをShift_JISに変えても症状は変わりませんでした。

    1文字目~2文字目のみ文字化けするので何か簡単な方法で
    解決しそうな気もしますが、どうにも自分にはお手上げでしたので
    何か解決策をご存知でしたら、アドバイスお願いいたします。

    芽衣

    21 11月 09 at 1:37 AM

  22. すいません、ここのところ自分のブログを読むこともできませんでした><
    いくつかご質問をいただいているんですが、しばらく回答を返すのも難しい状況です。

    手が空き次第対応しますのでその点ご容赦を。

    HEX68

    1 12月 09 at 2:26 AM

Leave a Reply