2010年06月19日

ひとまず,「Web拍手ツール【GJ!】(グッジョブ!)」を導入してみました.

Web拍手:


ウェブリブログにはあった「気持玉」の代わりに,ひとまず,「Web拍手ツール【GJ!】(グッジョブ!)」を導入してみました.


「Web拍手ツール【GJ!】(グッジョブ!)」
http://hmlab.info/minor/products/gj


0.
SeeSaaブログ自身にはスクリプトを置くことができないので,適当にサーバを確保する必要があります.
私の場合は,自分で管理している noike.info を使いましたが,XREA などの PHP と GD が動きそうなレンタルサーバでも動かせるかもしれません.


1.
確保したサーバに GJ を設置します.
基本的に,
http://hmlab.info/minor/products/gj
に書いてあるとおりですが,gj.php のパーミッションは,Apache の設定によっては,644 ではなく,666 や 646 である必要があります.
ウチの設定では,gj.php が Other User の権限で動作するので,Other User に書き込み権限を与えるために,646 でないと動きませんでした.


2.
SeeSaa ブログの各記事に GJ が表示されるように,次のように設定します.
まず,GJ スクリプトが読み込まれるように,

[デザイン] → [コンテンツ] (「編集モード: ノーマル」)
[記事] → [コンテンツHTML編集]

<% content.header -%>
<!-- Content -->

の下あたりに,

<script type="text/javascript" src="http://(グッジョブ)/gj.js"></script><br />
<script type="text/javascript" src="http://(グッジョブ)/prototype.js"></script>

を追加します.

http://(グッジョブ)/
の文字列は,設置した GJ の URL に合わせて,適宜,書き換えてください.


次に,各記事で GJ が表示されるように設定します.
http://hmlab.info/minor/products/gj/gj-movable
に書かれている基本的なテンプレートは,SeeSaa ブログの場合は,次のとおりです.

<input id = "<% article.page_url %>" type = "image" src = "" alt="拍手" style="vertical-align:middle;" onClick="goodjob('<% article.page_url %>','<% article.subject | jsescape | tag_strip %>') "><script>showbutton('<% article.page_url %>','<% article.subject | jsescape | tag_strip %>');</script><input type = "text" id ="<% article.page_url %>_gj_message" style="border-color:orange;vertical-align:middle;"> <span id="<% article.page_url %>_gj_mark"></span><br />
↑ボタンを押すと拍手を送ることができます。メッセージも送れます。<br />


要点は,

o <$MTEntryPermalink$> → <% article.page_url %>
o <$MTEntryTitle$> → <% article.subject | jsescape | tag_strip %>

です.
これを,[記事] の [コンテンツHTML編集]の中に追記すれば,追記した位置に GJ がメッセージ送信用テキストボックスとともに表示されるようになります.
たとえば,

<% if:blog.bookmark_service %>

の上あたりに追記すれば,「ブックマーク用ボタンが並ぶ行」の上あたりに GJ が表示されます.
(「記事のタグが並ぶ行」と「ブックマーク用ボタンが並ぶ行」の間あたりに GJ が表示されます.)



私は,

o メッセージ送信用テキストボックスは必要ない
o 「記事本文」と「タグ」の間に GJ を表示したい

ということを実現するために,

<% if:with_date %><h2 class="date"><% article.createstamp | date_format("%Y年%m月%d日") %></h2><% /if %>
<div class="blogbody" style="word-break: break-all;">
<h3 class="title"><a href="<% article.page_url %>" class="title"><% article.subject %></a></h3>
<% if:page_name eq 'article' -%>
<div class="text"><% if:diet_log %><% include:article_diet_file %><% /if %><% article.entire_body | bodyfilter(article_info,blog) %>
<% if:list_tag %><div class="tag-word">タグ:<% loop:list_tag %><a href="<% blog.tag_url(tag) %>"><% tag.word %></a> <% /loop %></div><% /if %>
<% else -%>
<div class="text"><% if:diet_log %><% include:article_diet_file %><% /if %><% article.first_body | bodyfilter(article_info,blog) %>
<% if:list_tag %><div class="tag-word">タグ:<% loop:list_tag %><a href="<% blog.tag_url(tag) %>"><% tag.word %></a> <% /loop %></div><% /if %>
<% /if -%>
<% if:blog.bookmark_service %>



を次のように書き換えました.

<% if:with_date %><h2 class="date"><% article.createstamp | date_format("%Y年%m月%d日") %></h2><% /if %>
<div class="blogbody" style="word-break: break-all;">
<h3 class="title"><a href="<% article.page_url %>" class="title"><% article.subject %></a></h3>
<% if:page_name eq 'article' -%>
<div class="text"><% if:diet_log %><% include:article_diet_file %><% /if %><% article.entire_body | bodyfilter(article_info,blog) %>


<!-- Web 拍手 GJ -->
<br />
<br />
Web拍手:
<input id = "<% article.page_url %>" type = "image" src = "" alt="拍手" style="vertical-align:middle;" onClick="goodjob('<% article.page_url %>','<% article.subject | jsescape | tag_strip %>') "><script>showbutton('<% article.page_url %>','<% article.subject | jsescape | tag_strip %>');</script><input type = "hidden" id ="<% article.page_url %>_gj_message"<span id="<% article.page_url %>_gj_mark"></span><br />
<br />
<br />
<!-- Web 拍手 GJ ここまで -->

<% if:list_tag %><div class="tag-word">タグ:<% loop:list_tag %><a href="<% blog.tag_url(tag) %>"><% tag.word %></a> <% /loop %></div><% /if %>
<% else -%>
<div class="text"><% if:diet_log %><% include:article_diet_file %><% /if %><% article.first_body | bodyfilter(article_info,blog) %>


<!-- Web 拍手 GJ -->
<br />
<br />
Web拍手:
<input id = "<% article.page_url %>" type = "image" src = "" alt="拍手" style="vertical-align:middle;" onClick="goodjob('<% article.page_url %>','<% article.subject | jsescape | tag_strip %>') "><script>showbutton('<% article.page_url %>','<% article.subject | jsescape | tag_strip %>');</script><input type = "hidden" id ="<% article.page_url %>_gj_message"<span id="<% article.page_url %>_gj_mark"></span><br />
<br />
<br />
<!-- Web 拍手 GJ ここまで -->

<% if:list_tag %><div class="tag-word">タグ:<% loop:list_tag %><a href="<% blog.tag_url(tag) %>"><% tag.word %></a> <% /loop %></div><% /if %>
<% /if -%>




やっていることは,
<% if:page_name eq 'article' -%> と
<% else -%> のそれぞれの中で,
「記事本分」と「タグ」の間への GJ表示テンプレートの追記,です.



これで,「Web拍手ツール【GJ!】(グッジョブ!)」が導入できました.
「いい記事だ!」と思ったときには,「Web拍手:」の右にあるアイコンをクリックしてみてください.

連打してくださっても構いませんが(^^;),連打は 10回までに制限してあります.


ウェブリブログにはあった「気持玉」のように何通りかの投票ボタンを用意するには,GJ 複数設置するだけでは上手く動かないので,GJ を改良する必要があることがわかりました.
そのうち,手をつけるかもしれませんが,いまのところは,こんな感じで.


==

GD を使う PHP プログラムで「Call to undefined function imagecreatefromgif()」という Fatal Error が出るときは,
http://knoike.seesaa.net/article/153680875.html




【コンピュータの最新記事】
posted by NOIKE at 15:30 | Comment(0) | TrackBack(11) | コンピュータ | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

GJ 用の画像ファイルとして,「ポケットサイズ」さんのところにある素材をお借りし,サイズなどを少し変更して使用しています.
Excerpt: GJ 用の画像ファイルとして,「ポケットサイズ」さんのところにある素材をお借りし,サイズなどを少し変更して使用しています. 「ポケットサイズ」 http://www.h7.dion.ne.jp/~p..
Weblog: とりコー
Tracked: 2010-06-19 17:30

想像ですが,パーミッション 777 を禁止しているサーバでは,757 で動くような気がします.
Excerpt: 想像ですが,パーミッション 777 を禁止しているサーバでは,757 や 707 で動くような気がします. ウチでは,次のパーミッションにすることで GJ が動いています. 646 gj.php ..
Weblog: とりコー
Tracked: 2010-06-19 17:54

SeeSaa ブログの「Twitterまとめ投稿」機能のカテゴリは,[カテゴリ表示順] の [1] が採用されるらしい.
Excerpt: SeeSaa ブログの「Twitterまとめ投稿」機能のカテゴリは,[カテゴリ表示順] の [1] が採用されるらしい. 誤解 1: [設定] → [ブログ設定] → [Twitterまとめ投稿..
Weblog: とりコー
Tracked: 2010-07-18 07:48

あれー,今度は [デフォルトカテゴリ] が採用された.なんだかよくわからーん.
Excerpt: SeeSaa ブログの「Twitterまとめ投稿」機能のカテゴリは,[カテゴリ表示順] の [1] が採用されるのだと思っていたら,今度は [デフォルトカテゴリ] が採用された.なんだかよくわからーん..
Weblog: とりコー
Tracked: 2010-07-20 04:37

なるほど,Seesaa 側の機能拡張で仕様が変わったから振る舞いが変わったのか.
Excerpt: 「【Seesaaブログ】Twitter自動おまとめ機能を拡張しました」 http://info.seesaa.net/article/157022006.html なるほど,Seesaa 側の機能拡..
Weblog: とりコー
Tracked: 2010-07-28 14:20

とりいそぎの実装ですが,新着Web拍手(新着GJ)を表示する CGI を作ってみました.
Excerpt: とりいそぎの実装ですが,新着Web拍手(新着GJ)を表示する CGI を作ってみました. 表示したいところに, &amp;lt;iframe&amp;nbsp;src="gjlist.cgi?u..
Weblog: とりコー
Tracked: 2010-08-04 18:17

「だじゃれランダム表示」の各だじゃれを,五つ星形式で評価できるようにしてみました.
Excerpt: 「Outbrain's Thumbnail Widget」 http://www.outbrain.com/getwidget Outbrain のウィジェットを利用して,このブログの右列に設置し..
Weblog: とりコー
Tracked: 2010-08-06 04:36

「だじゃれランダム表示」の五つ星形式の評価入力のバグを取りました.
Excerpt: 「だじゃれランダム表示」の五つ星形式の評価入力のバグを取りました. 今度は,評価が保存されていると思いますので,どうぞはりきって評価を入力してくださるようお願いします(笑). Outbrain の..
Weblog: とりコー
Tracked: 2010-08-07 07:44

ブログの横幅を少し拡げて,各所のフォントサイズを少しだけ大きくした.文字が大きいほうがうれしいお年頃... .
Excerpt: ブログの横幅を少し拡げて,各所のフォントサイズを少しだけ大きくした. 文字が大きいほうがうれしいお年頃... . 今度は,ブログの横幅を 1020px (+60px増) 記事の横幅 580px (+..
Weblog: とりコー
Tracked: 2010-09-08 18:27

Web拍手が押されているのがわかると,割と嬉しい.
Excerpt: Web拍手が押されているのがわかると,割と嬉しい. == 2010年08月04日 とりいそぎの実装ですが,新着Web拍手(新着GJ)を表示する CGI を作ってみました. http://knoi..
Weblog: とりコー
Tracked: 2010-09-30 07:42

ありゃ,ポケットサイズさん,撤収してしまっていたのかぁ.
Excerpt: http://www.h7.dion.ne.jp/~pockets/index.html ありゃ,ポケットサイズさん,撤収してしまっていたのかぁ. かわいい画像が多く置いてあったので,残念. We..
Weblog: とりコー
Tracked: 2010-10-19 17:01