WordPress に GJ! 導入

基本的にこのブログの目的は遠方の友人へ向けての消息情報を報せることと自分のための備忘録。だが、検索エンジンから情報を求めに訪れる方もいらっしゃるようなので、コメントに残さずとも気軽に感想や苦情を言えるようなものがあると便利かなと思いWeb拍手をつけてみたくなった。Minor Problem さんの GJ!(グッジョブ)がよさそうという噂を聞きつけたので導入。若干導入に戸惑うところがあったのでそのカスタマイズのメモ。

現在本サイトに設けているものは 本家Web拍手 の別ページがポップアップで開くものだが、GJ! は JavaScript(最近は Dynamic HTML とか言うのかな)を利用したページ遷移のないタイプのWeb拍手スクリプト。WordPress 専用プラグインではないのでいろいろとソースをいじる必要がある。

まずはモノをダウンロードして gj.js や gj.php の内容を自分用に書き換えてサーバにアップロード。この辺は本家や他のサイトでも解説してあるので割愛。しかしぷりどうぐさんの WordPressにWeb拍手”GJ!”を導入してみた。 にも書いてあるのだが、本家 GJ! サイトの見本スクリプトをコピペすると何故か " (ダブルクォーテーションマーク)などが全角になってしまって動作しない。上記のteraさんのところのスクリプトを利用させていただいたら無事動作。でも出来合いをまんま導入しても若干しっくりこないので以下をカスタマイズ。

まず WordPress 管理画面のテーマ編集で「ヘッダー(header.php)」を編集する際に、サーバー上にアップした gj ディレクトリ内の prototype.js のリンクを貼るようにあるが、これを省略。すべてのテンプレートにあるのかどうかは知らないが、私が利用している環境にはすでに prototype.js がインストールされている。調べてみたら prototype.js とは Sam Stephenson 氏が書かれた JavaScript でさまざまな機能を一から書かずに利用できるAJAXライブラリ。一つあれば動作するだろうと思ったら案の定動いた。なので header.php には、

<script type="text/javascript" src="<?php bloginfo('url'); ?>/gj/gj.js"></script>

 
のみを任意の場所にコピペ。<head>~</head> の間にあればどこでもいいはず(もちろんタグが閉じたところ)。既存の </script> とあるところの下にまるごと行を挿入するのが間違いない。赤文字のように入れれば WordPress が勝手にURLを入れてくれるので各々のURLに書き換える必要ない。ただし prototype.js がインストールされていない環境であれば JavaScript エラーを吐くと思うので、その際は追加しないとダメだろう。なお本家のサイトには何故か改行タグ <br /> が間に挿入されているが、ヘッダーの <head>~</head> に挿入するのであれば必要はないはず。

次に「単一記事の投稿(single.php)」を編集。表示させたい場所に挿入とあるが、ソースを見慣れない人にはイマイチ難しいと思うが、コメント欄の上辺りに置きたかったので <?php comments_template(); ?> を探して以下を挿入。

<br />
<input id="<?php the_permalink(); ?>" type="image" src="" width="81" height="19" alt="Good Job!" title="Good Job!" style="vertical-align:middle; cursor:pointer" onClick="goodjob('<?php the_permalink(); ?>','<?php the_title(); ?>')" />
<input type="text" size="30" id ="<?php the_permalink(); ?>_gj_message" style="background:#e4ddc6; border:1px solid #8d8c87" />
<script>showbutton('<?php the_permalink(); ?>','<?php the_title(); ?>');</script>
<span id="<?php the_permalink(); ?>_gj_mark"></span>
良かったら拍手をどうぞ。短いメッセージも送れます。

 
赤い文字がカスタマイズ、という程のものではないが自分で改造した場所。ボタン上にマウスカーソルが乗っかったときの見栄えを意識したところと、テンプレートに合わせたフォームの見栄えをCSS指定。画像サイズにいちいち指定を入れてしまうのは、少しでも表示の負荷を低減させようという私のこだわりだが、果たして今の高スペックのマシンに意味はあるのかないのか不明。

気軽にクリックさせたいのでどうせなら記事一覧にもボタンを表示させたい。だが一言送信の1行フォームがいちいち表示されるのはスマートではない。なので「メインインデックスのテンプレート(index.php)」と「アーカイブ(archive.php)」には以下のように記述。

<input id="<?php the_permalink(); ?>" type="image" src="" width="81" height="19" alt="GJ!" title="Good Job!" style="vertical-align:middle; cursor:pointer" onClick="goodjob('<?php the_permalink(); ?>','<?php the_title(); ?>')" />
<script>showbutton('<?php the_permalink(); ?>','<?php the_title(); ?>');</script>
<input type="hidden" value="from main index" id ="<?php the_permalink(); ?>_gj_message" />
<span id="<?php the_permalink(); ?>_gj_mark"></span>

 
テキストフォームを hidden にして隠し、「from main index」という値を送信してメインインデックスからボタンが押されたことがわかるように設定。昔からHTML手打ちでサイトを作ってきた人の小細工。ついでにサイトのテンプレの色調に合わせてボタンの色を Photoshop で若干調整。まあこれで出来合いの素材っぽくなくなったんじゃないかと自己満足。

そういえば昔、美大受験の予備校に通っていたとき講師に木炭デッサンを修正されたのだが、少し気に入らなくて直したら「俺が手を入れたところがまたお前の絵になっている」と言われたことを思い出した。何もかんも自分色に染めたい気質は変わらないのね。とはいえゼロからソースを書く技術も気力もないので、こうしたスクリプトや使い方を公開している方には心から敬意を示したいと思います。ありがとうございました。

追記:
GJ! のバグというか環境によって変わると思うけれど、ブログのエントリータイトルによってはボタンが表示されない状況を確認。シングルクォーテーション がタイトルに入っていると、JavaScript の変数送信の際に &#8217; に変換されるにも関わらず、なぜかそこを変数の区切りと誤認識してJSエラーになるという現象。応急的な回避方法としてはエントリータイトルの ‘ をキーワード &rsquo; に置き換えるか、全角 に置き換え。英語で「Dont」とか使う際は「Don&rsquo;t」と記述すればOK。バグ報告させてもらおうと思ったら、開発元のHEX68さんは多忙な様子なので修正は難しそうですね…

2012/06/30 追記
カーソルのCSSの cursor:hand ってのがIE独自仕様だったみたいなので cursor:pointer に修正。あとXHTMLの記述ルールに準じ input タグを閉じるため、半角スペース+/を追加。

楽器に触れない日

ヴァイオリンを習い始めてから、気づいたら楽器に触っていない日がほとんどなかった。厳密に言うと24時間拘束勤務などで触れない日もあるのだが、そんな時でもビブラ棒は握っていたりする。

一流のヴァイオリニストであっても毎日数時間練習して、1日でも楽器に触れないと腕がなまって調子を取り戻すのに1週間かかる、とどこかで聞いたことがある。それを信じる訳でも、ましてや三流ですらもないけれど何となく触っておかないと気が済まない。富山旅行の時すらヤマハのサイレントを持ち出して妹が呆れてたし。

今、実は夜勤からそのまま会社で夕方までデスクワークをしていたのでものすごく眠いのだけれど、布団に入ったら上につり下げてある楽器が見えてムラムラ。ちょっとだけ…ちょっとだけ弾いて寝よ…

HP HPE360jp レビュー

久々に購入した新品のPC、HPE360jp。買ってからようやく使い慣れてきたのでレビューをば。でも性能的なことはスペックを見ればわかると思うので、ごく私見的なことをだらだらと。いつもながら有益な情報は期待しないでね。

友人にも妹にも勧めてしまうほどmezzoはhpファン。昔から数台乗り継いでいるが、実は新品でhpのPCを買うのはこれが初めて。ちなみに私が乗り継いできたモデルは以下。

 Vectra VL 6/400 (Pentium II 400MHz)
 Vectra VL400 (Pentium III 800EBMHz)
 Visualize X550 (Pentium Xeon 550MHz×2)
 e-Vectra (Pentium III 600EBMHz)
 E-PC 42 (Pentium 4 1GB)

ワークステーションも混じっているが、これらはほとんどアキバで買ってきた業務用PCのリース払い下げ品。同スペックで同じ値段だと、なぜかhpばかり選んで買ってきた。私がhpにこだわるのはその堅牢さ。上記のマシンは私が使っている間に大きなトラブルを起こしたことがない。もちろん内蔵電池の消耗やHDDの故障がなかったわけではないが、本体自体は壊れたことがない。e-Vectraなどは自宅サーバとしてNetBSDなどを入れて5年以上稼動していたし、VL400に至ってはいまだ現役で動いていたりする。内部の設計もため息をつくぐらい合理的で美しいのだが…それはまたの機会にでも。

話を戻してHPE360jp。今回はメインマシンのHDDが吹っ飛び復旧できなかったために急きょ買うことになったのだが、以前から今年の冬モデルを買おうと思っていたからチェック済み。迷わず AMD Phenom II X6 の構成でポチッた。CPUがデュアルのマシンは2台乗り継いでいるが、いずれも安定性が抜群。複数の重いアプリを立ち上げても落ちなかった実績があったので最初からCPUはデュアル以上と決めていた。それに非インテルというところも好き。別にインテルに恨みはないけれど。

BTOとやらでカスタマイズし、選んだOSはWindows 7 64bit Pro。ダウングレードのオプションなどはつけなかった。せっかく新しいPCを買うんだから後ろ向きに歩いてはいけない。そう書きながらProを選んだのはXPモードが使えるから。だいたいXPにずっとしがみついていた私が言うセリフではない。

将来、糞重いソフトを動かすことを前提にメモリは8GB。ゲームはしないし2Dでしか使わないのでグラフィックボードはATI Radeon HD5770(1GB)をセレクト。というかこれはTong氏にメールして他力本願の選択。ただしTong氏に全部任せるとDellになるのでそこは譲らない。Dellは同じアメリカの会社なのになぜか嫌い。などと今、会社のDellでこれを打っているんだが。

届いたタイミングが富山旅行のときでしばらく放置していたが、帰ってきてからようやくセッティング。HDD換装のときの写真が上なのだが、見てわかるようにhpは昔からトルクス(TORX)という規格の星型ネジを使っている。フタを開けるのでさえトルクスのため、内部にアクセスさせたくないという意図があるのかと思えば、マイナスドライバーでも回せるようになっているところが親切設計。私は古参のhpファンなのでトルクスドライバーは数種類持っているけれどね。

HDDはS-ATA端子が上向くようにタテ置きにして、箱状のユニットに組み込まれている。交換の際は奥まで手を伸ばさなくともネジ2本抜けばごそっとユニットごと外せる。hpは昔からネジを多用しないよう工夫されていて、5インチベイの光学ドライブに関してはネジを外さずともバネ仕掛けのレバーで脱着できるようになっている。いつも買ってきたhpをバラすたびにため息をつくほど設計が美しい。誰か捕まえて一晩中その魅力について語り合いたいぐらいだ。

ただしhpの欠点は動作音。HDDの防振などは考えていない上、吸排気用のパンチ穴がいっぱい開いているので音が結構響く。また昔からファンの個数をケチりたい傾向があるらしく、他メーカーが低回転ファン2個にするところを高回転ファン1個で済ましてしまうことが多々ある。だから「ヴーカリカリカリ…」と気にし始めると結構うるさい。とはいえ昔使っていたワークステーションのVisualizeは掃除機並(誇張なし)にうるさかったから、それに比べりゃ静かなものだ。作業中はヘッドフォンでアイマス聴いているから問題ないし。

で、HDDの交換の際にサウンドボード E-MU 0404 PCI を取り付けようとしたら…あれ? 幅が違う? なにこれスロットの形が違うじゃない…

どうやら私がXPにしがみつき、いじったこともないVistaをけなしている間に時代が変わっていたようだ。PCI Express? なにそれ? ひー、これじゃDAW(音楽打ち込み)環境を構築できないじゃないの。ムキー。あとで調べたら変換用のスロットなどもあるようだけれど、もう結局古いマシンを再生してそちらをDAW用にしてしまった。新しい方は絵描き専用マシンとして使うことに。

だがその後64bit OSに翻弄されまくり。今まで使っていたシリアル接続の intuos2 に変換コネクタ挿したりしたが結局ダメ。仕方なく intuos4 を買ってつないだら、今度はOSが勝手にタブレットPC機能を起動させて変な動きになるし。なんかワコムのドライバは不安定だし。何かするとすぐ画面が暗くなってウザいし(UAC)。フォルダオプションすらどこに行ったかわからないし。ファイルの関連付け「Edit」ができないし。勝手にhpのよくわかんないソフト立ち上がるし。ぐわーっ。

他にも Photoshop 7 や Illustrator 9 など古いソフトが動かず何度もインストールし直したり、ファイルの関連付けを直したり、レジストリいじったりしてホトホト疲れた。何なんだ、一体? メモリがたくさん使えるからと聞いて64bitにしたのにぃ。私はただフツーに絵が描きたいだけなのにぃ。これは私が Vista をスキップしたのが悪いのか? いや、ゲ○ツが悪い。コンチクショー。

それでもずっといじり倒しているうちにAeroが軽快に動くのが心地よくなってきた。XPのサブマシン(Athlon 64 3000+)に戻って作業すると、Lunaを切っててもたつきを感じるぐらいだから、6コアとGPU支援の恩恵で相当快適なマシンになっているようだ。最近になってようやくお絵描きを再開したが、Photoshop 7でも以前より動作が軽く快適に動かせるようになったので気持ちいい(若干不具合もあるけど)。Adobe CS5 ならば64bitの恩恵をもっと受けられるだろうになぁ。ああ、早く移行したいが金がない…

そういえば注文の際に【人気爆発】と書かれていたキーボードカバーを同時購入した。昔、会社の OASYS をいじった以来カバーのついたキーボードを触っていなかったが、ひぃ、気色悪っ。ペタペタベタベタするよ。打鍵感サイアクだよ。うわぁっ金をドブに捨てたぁっ(あくまでも個人の感想です)。

hpでポチる予定のある方、HPガイドブック「速効!図解HPパソコン」(1,050円)とかHPキーボードカバー(1,890円)の項目は、不要ならオフにすることをお忘れなく…