- 2009-03-06 (金) 0:54
Web拍手ツール【ＧＪ！】とは
一言で言えばＷｅｂ拍手です。（ソース等は一から書いてますが）
ＧＪ！には
１ ブログに特化したＷｅｂ拍手なので、どのエントリーに対する拍手なのかが判る
２ 拍手数を拍手ボタン上に合成することで、拍手数がわかりやすい
３ 拍手数をＸＭＬで出力（ブログパーツなどに使えます）
４ ボタングラフィック差し替え可能
５ コメント閲覧画面（パスワード設定可能）完備
６ 拍手数の表示スタイルを2種類から選択可能
といった特色があります。
こちらが【GJ!】の設置サンプルです。URLなどは全てダミーです。
ＧＪ！の説明
—————————————————————————
＊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ボタンを押すとメッセージが送信されます。
また、拍手数をアイコン表示して表示することも可能です。
ＧＪ！設置に必要な環境
下記の環境がＧＪ！には必要です。
- テンプレート変更可能なBlog（現状MovableType4とWordPressでの確認をしています）
- 設置するサーバーにPHP4またはPHP5がインストール済み、かつGDライブラリが組み込まれていること
また、閲覧者側がJavascriptをONにしている必要があります。
設置前準備
１ ダウンロード
スクリプトダウンロード(gj.zip)
上のリンク先から「gj.zip」をダウンロード後、解凍してください。
ファイル構成は
gj┐
├gj.php(GJ!本体）
├gj.js(javascript)
├prototype.js(javascriptライブラリ)
├gdtest.php(GDライブラリテスト用ファイル)
├readme.txt(説明テキストファイル)
├loc （空ディレクトリ）
├img（ボタン画像）
└log（空ディレクトリ）
２ 記述変更
解凍したファイルのうち、gj.phpとgj.jsの記述を変更します。
・gj.php
$PASSを任意の文字列に変更してください。コメント閲覧画面のパスワードとなります。
・gj.js
URL=の記述をあなたの環境に合わせて変更してください。
例：GJ!の設置先が”http://hogehoge.com/gj/“だった場合
URL=”http://hogehoge.com/gj/gj.php”
となります。
それ以外のところは、各スクリプトのファイル名を変更したり、ディレクトリ構成を変更しなければそのままで構いません。
変更した場合は、それぞれの環境に合わせて変更してください。
３ アップロード
２で記述したURLへアップロードします。基本的にはgjディレクトリごとアップロードすればいいでしょう。
４ パーミッションの変更
パーミションは以下のように設定してください。
┌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での設置方法
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行が１拍手分のデータを、簡易ログは拍手をもらったURLごとのデータを1行で記録しています。
基本的にカンマ区切りのテキストファイル(csv)です。
簡易ログの修正
拍手数を変更したい場合、左から３カラム目が拍手数です。この数を変更したい数に変えてください。
項目そのものを消したければ、1行まるごと削除でOKです。
詳細ログの修正
メッセージの内容を変更したければ左から5カラム目を変更、URLを変更したければ４カラム目、ページ名を変更したければ３カラム目を変更してください。
拍手そのものを削除する場合は行ごと削除してください。
＊ログの変更前にはファイル名を変えるなどしてバックアップをとることをお勧めします。
ボタン画像の変更
imgディレクトリの下にある画像のうちgjbutton1.gifが通常時、gjbutton2.gifが押された後に変化するボタンの画像です。
また、オリジナル画像への差し替えは可能です。
画像を同じファイル名で上書きするか、別ファイル名でgj.phpの画像ファイル名を書き換えても変更ができます。
拍手数のテキストカラーもそちらで変更できます。
また、拍手数の表示位置もX,Y方向それぞれ３段階で変更可能です。変更方法はgj.phpに記載しています（X,Y位置を０～２で指定します）。
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 ６
- 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対応完了
関連する投稿
Comments:9
- ech 08-09-16 (火) 13:03
-
こんにちは。fc2のような拍手ボタンを設置できないかと探していたところ、ビッタリの機能が付いたGJ!を知り、サイトに設置しようとしているものです。
ええと、最近サイトをWPに移行されたということでしたが、「GJのサイトへの設置方法」のリンクが外れてしまっているようです。
また、貴サイトと同じ「wp.vicuna.ext」を使用しているのですが、貴サイト、また他サイト様を参考に設置を試みたのですが、コメント欄のようなオブジェクトが二段になって表示されてしまい、うまく設置する事ができませんでした。
位置は、「」
の下に記入しています。
その他、何か気をつけることがありますでしょうか。
ご教示いただければ幸いです。
どうぞよろしくお願いいたします。 - HEX68 08-09-16 (火) 23:21
-
>ech様
はじめまして。HEX６８です。
リンク切れのご指摘、ありがとうございます。早速修正しました。
僕も先週末からの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回かかれていたりしませんか。そのあたりを確認してみてください。
これからもよろしくお願いします。
- ech 08-09-18 (木) 10:05
-
HEX６８様
こんにちは。丁寧なご返信、ありがとうございました。
HEX６８様のコメントにならって、もう一度記入したタグを見直してみたところ、スクリプトが重複しておりました。
それに加えて、他サイト様の解説のタグをコピーした際、文字コードの関係か、化けてしまった部分があったようです。一からやりなおして、今回HEX６８様に解答していただいた内容を記入しましたら、無事表示、動作いたしました！
なぜかログページで文字化けがしてしまっているようなので、確認しながら調整したいと思います。このたびはありがとうございました！
これからも素敵なスクリプト作り、頑張ってください！ - kuma25n 08-10-21 (火) 2:32
-
HEX６８様
はじめまして。
とてもすばらしいスクリプトなので、MT4.2にぜひ導入したく努力してみたのですが、どうにもうまく設置できません。「テンプレート」－「HTMLヘッダー」にJavascriptファイル読み込みの記載をして、
「テンプレート」－「ブログ記事の概要」にボタン配置のスクリプトを記述して保存、再構築しましたが、ボタンが表示されずに入力ボックスが2個表示されてしまいます。（トップページに設置を試みてます。）gj.js gj.phpの設定変更、所定位置へのアップロード、パーミッションの設定も確認しているのですが、なにか根本が違っておりますでしょうか？
（gdtest.phpでは正常に赤いOKボタンが表示されております。）
お忙しいところ申し訳ございませんが、ご教授お願い出来ませんでしょうか？ どうぞよろしくお願いします。 - kuma25n 08-10-23 (木) 0:33
-
HEX６８様
上で質問しましたkuma25nです。
どうにか自己解決いたしました。文字コードの問題だったようです。お騒がせしまして申し訳ありませんでした。
ブログに使用させて頂きます。
素晴らしいスクリプトをありがとうございました。 - HEX68 08-10-24 (金) 0:49
-
>kuma25n様
こんにちは、亀レスすいません。
問題解決できたようでよかったです。これからもよろしくです。 - ムカイ 09-01-17 (土) 15:23
-
初めまして、ｆｃ2のような拍手を探していたところ、こちらで理想のスクリプトを公開されていたので使わせていただこうと思っております。
試しに設置してみたのですが、当方jugemを使用しておりwordpressでの設置方法を見ながらjugem用のタグに変更するなどしてみたのですが、どうにも上手くいかなかったのでお手数をお掛けするのを承知の上でご連絡させていただきました。
対処法などあれば、教えていただけると大変助かります。どうぞ、ご教授の程宜しくお願いいたします。 - HEX68 09-01-28 (水) 22:01
-
>ムカイ様
はじめまして。
えと、ちょっとJUGEMは触ったことが無いのでちょっと判りかねます。JUGEM公式の独自タグ一覧を見ると{permalink} とか{entry_title} あたりを使えばいいのかな？という感じに見えました。
ちなみに、GJ!のPHPスクリプトを置いてあるドメインと、JUGEMのブログのドメインは同じものですよね？（つまりブログは独自ドメインを取得して運営していますよね、という確認です。）
javascriptのセキュリティの関係上、同じドメイン間でないとHTTP通信ができないので、ボタンの表示はできても拍手処理はできませんのでお気をつけください。
ではでは
- ムカイ 09-01-30 (金) 16:03
-
HEX６８様
こんにちは、上記で質問させていただいたムカイです。
独自タグなどをスクリプトに合わせて変更していましたが、
原因の根本はCGIとブログが別ドメインだったことにあるようです。
知識が足りず、お手数をお掛けしました。
丁寧なご返信ありがとうございました！
