• tweet 時に、日本語が URL が含まれてもリンクが切れないようエンコードして出力するよう修正

ダウンロードはこちらからお願いします。
WordPress Plugins/JSeries » wp-hatena 拡張版

@show_web さんの上記ツイートを受けて修正してみました :)

テストはしていますが、なんかうまく動かないよーという場合はコメントいただけると嬉しいです。

ダウンロードとインストール

• NetBeans NetBeans 日本語サイト

上記サイトから、自分の OS にあった NetBeans をダウンロード。どれでもいいのですが、私は PHP バンドルのものにしました。
インストールは何も難しくないので割愛します。

どうやって使うの？

以下、Windows 版のスクリーンショットですが、Mac 版でもほぼ同じです。

Subversion の設定

チーム -> Subversion -> チェックアウト を選択。

リポジトリの URL やユーザー名などを記入。都度入力することが面倒であれば、「ユーザー名とパスワードを保存」にチェックをつけて、「次へ」。

「リポジトリフォルダ」は指定がなければそのまま空で OK。
「ローカルフォルダ」でファイルを置きたいディレクトリを選択して「完了」。

最初はリポジトリの大きさによってファイルの取得に時間がかかるかもしれません。
右下部分、「チェックアウト…」と出ている間は「まだ落としてるんだなー」と放置しておけばいいかと思います。

完了するとこんなダイアログが出ます。「プロジェクトを作成」を選択。

「カテゴリ」を「PHP」、「プロジェクト」を「既存のソースを使用する PHP アプリケーション」にして、「次へ」。

「ソースフォルダ」で、先ほど“ファイルを置きたいディレクトリ”として選んだディレクトリを選択して、「完了」。

左のプロジェクト表示エリア、「ソースファイル」の中にチェックアウトしたファイル（落としたファイル）が入っています。

これで Subversion の設定と、プロジェクト作成が完了。ここまでは最初の 1 回だけやれば OK です。

普段の作業

よし、作業修正するぞー、という時の手順。

1. 編集するファイル、もしくはそれより上のディレクトリで右クリック -> Subversion -> 更新。
   これでサーバー上の最新ファイルを取ってくる。
2. 編集が終わったら、そのファイル上で右クリック -> Subversion -> コミット。
   これでサーバー上に編集したファイルが最新のものとしてアップされる。

基本的に、毎回作業前には、更新して、終わったらコミット。これだけです。
修正したけどコミットしていないファイルは青文字で表示されるので分かりやすいはず。

NetBeans 以外で Subversion を使いたい

使ったことがあるものだけ。

• Dreamweaver CS4/CS5（Windows/Mac）：有料、NetBeans と同系の操作が可能
• Coda（Mac）：有料、NetBeans と同系の操作が可能
• Eclipce（Windows/Mac）：無料、NetBeans と同系の操作が可能
• TortoiseSVN（Windows）：無料、NetBeans と違い IDE ではなく Subversion 専用クライアント
• Versions（Mac）：有料、NetBeans と違い IDE ではなく Subversion 専用クライアント

慣れたものがあればそちらでいいと思います（私はよく Dreamweaver でコミットしてますが、ハングアップ結構して哀しみを背負います…）。

• Pinterest に対応
• プラグイン無効時にはオプションを削除せず、アンインストール時に削除するよう変更

Pinterest に対応したことに伴い、img_sample 内に pinterest.gif を追加しています。
ご利用の際は、pinterest.gif をサーバーの /wp-content/plugins/wp-hatena/img/ 内に入れてください。

ダウンロードはこちらからお願いします :)
WordPress Plugins/JSeries » wp-hatena 拡張版

あちこちで Sass のエントリーが増えてるので、私の環境も書いてみます。
Sass 使う時、より便利になる Compass というフレームワークを一緒に使っています。

• Compass Home | Compass Documentation

Compass って？

便利だなと思う機能満載なフレームワークで、これも一緒に使うことで Sass がさらに簡単になったり使い勝手がパワーアップしたりします。具体的に例をあげたほうが分かりやすいと思うので、いくつか書いてみます。

Compass はいろいろな Mixin が含まれている

@import “compass”; で呼び出して使えます。自分で書かなくていいから楽ちん。

@import "compass";
.ex1 {
  @include clearfix;
}
.ex2 {
  @include border-radius(5px);
}
.ex3 {
  @include opacity(0.5);
}

↓

.ex1 {
  overflow: hidden;
  *zoom: 1;
}
.ex2 {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;
}
.ex3 {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
  opacity: 0.5;
}

他にどんなものがあるかは、「Compass Core Framework | Compass Documentation」を見ると分かります。

監視も簡単、流用も簡単

Sass では、.scss を監視して .css を書き出す場合以下のような感じですが、

sass --watch test.scss:test.css

Compass だと、config.rb という設定ファイルをルートに置いておけば

watch compass

これだけで OK。
config.rb の内容は以下のようにしてます。ここで書き出す css や scss のディレクトリや、書き出し方法など指定しています。

http_path = "/"
css_dir = "css"
sass_dir = "_scss"
images_dir = "/"
javascripts_dir = "js"
output_style = :expanded
line_comments = false

watch compass すら打つのが面倒なので（というか忘れちゃうので…）、バッチファイルを作ってます。

compass_start.bat とかそんな感じの名前で、以下の内容を保存。

watch compass

bat ファイルをダブルクリックすることでコマンドプロンプトが立ち上がり、watch が始まります。Ctrl＋C で watch は止められます。

このあたりは、「Compassを使ってSassのCSS出力を手軽にしよう｜Blog｜Skyward Design」を参考にさせていただいてます。

htdocs 内に config.rb と start.bat を置いてみた図。
一度、下図のようにサイトスケルトン（テンプレート）を作成してしまえばあとは使い回せるので便利です。

画像の縦横 px を取得でき、計算に使える

Compass は 画像のサイズも取得できます。ちょっと凄い。

img ディレクトリに 150*150 の 150.jpg がある場合、

  width: image-width("img/150.jpg") - 0px;
  min-width: image-width("img/150.jpg") - 20px;
  height: image-width("img/150.jpg") - 50px;

↓

  width: 150px;
  min-width: 130px;
  height: 100px;

これは素敵だなーと思ってます。詳しくは「Compass Image Dimension Helpers | Compass Documentation」。

その他の機能

他にも CSS スプライト用の画像を書き出せたりまでするようです。凄い。
参考：簡単に使える Compass のオススメ機能 – log

インストール

紹介はこれくらいにして、じゃあどうやって使うの？ということで。

まず、Ruby のインストールをする必要があります。以前書いたエントリー「Windows に Ruby と RubyGems を入れる | Numb.」を見て Ruby と RubyGems を入れてください。

Ruby を入れたら、以下のように打っていきます。

gem のアップデート

gem update --system

Sass のインストール

gem install sass

Compass のインストール

gem install compass

これだけです。

注意点

htdocs は、日本語の入るパスに置くとうまく動きません。そこだけ注意が必要。

Compass 便利ですので、ちょっとでも気になったようでしたら是非 :)

特に Windows のクライアントは重く、作業中に閲覧しているサイトの URL をライフログとしてメモる際にネックでした。「ささっと書いてすぐ作業に戻りたい！」と思っているのに、クライアントを開くのが大変というのはストレス。

そこで、特定のノートに「ぱっと追記してすぐ終わって戻れる」という環境を作りました。試行錯誤して、Mac と Windows でそれぞれ環境を作ったので書いておきます。

長くなりそうなので、Windows 編、Mac 編に分けてみます。

目次

• Evernote クライアントを一発で開けるようにしよう
  その1. デスクトップにショートカットを作成して行う方法
  その2. AHK を使って指定する方法
• Evernote の Window をよしなに閉じる
• Fastnote を使ってみる
  コンフリクト対策 – 起動時
  コンフリクト対策 – 終了時（＋α）
  記入エリアで「すべて選択」を使いたい
  Firefox + KeySnail で \n として入れた改行がペーストすると消える
• 終わり

Evernote クライアントを一発で開けるようにしよう

使用頻度がかなり高いので、どのソフトを使っているときでも一発で Evernote クライアントを開けるようにしました。

• その1. デスクトップにショートカットを作成して行う方法（簡単）
• その2. AHK を使って指定する方法（AHK 好きならば）

この 2 つの方法を試したので両方書いておきます。

その1. デスクトップにショートカットを作成して行う方法

デスクトップに Evernote のショートカットを作成して、

Evernote のショートカットのプロパティを開き、ショートカットキーを設定。この場合だと、Ctrl+Shift+E で Evernote クライアントが起動します。

その2. AHK を使って指定する方法

しばらく使っているうちに、デスクトップに Evernote のショートカットアイコンを置いたままにしなくてはいけないのは嫌だなーと思ってきたので、AHK でショートカットを設定することに。

AHK = AutoHotkey です。AHK の詳細は長くなるので書きませんが、ショートカットキー（ホットキー）の設定などが簡単にできるスクリプトエンジンです。窓使いの憂鬱などと似た類いのものです。私は AutoHotkey_L を使ってます。簡単にコンパイルできるので、exe 化も楽々です。興味がありましたらこちらもどうぞ->ahk | 検索結果: | Numb.。

• AutoHotkey_L – AutoHotkeyJp

;=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
; Evernote [Ctrl]+[Shift]+[e]
;=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
^+e::Run, C:\Program Files (x86)\Evernote\Evernote\Evernote.exe

こんなかんじに記述すると、Ctrl+Shift+e で Evernote クライアントを起動できるようになります。ベンリ。

Evernote の Window をよしなに閉じる

都度起動では重く不便なので、終了はしないで欲しいところ。

しかし Evernote の終了ショートカット Ctrl+Q ではクライアントがきっちり終了してしまいます。試してみたところ、何パターンかウィンドウを閉じた場合の動作があることが分かりました。

• Ctrl+q ：クライアントが終了する。
• Alt+F4 ：ウィンドウが閉じてタスクバーからも消えるが、通知領域（タスクトレイ）には残る。
• Alt+Space -> n ：ウィンドウが最小化するだけ。タスクバーと通知領域に残る。

参考：タスクバー

参考：通知領域（タスクトレイ）

Alt+F4 での動作が好きだなーと思ったので、それを AHK でショートカット設定。ついでに Ctrl+r で同期もできるようにしました。

; Evernote
;=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
#IfWinActive ahk_class ENMainFrame

; [Ctrl]+[w]でウィンドウを閉じる(ALT+F4)
^w::Send,!{F4}

; [Ctrl]+[r]で同期
^r::Send,{F9}

#IfWinActive                    ;ウィンドウの限定を解除

全ての場所でこのショートカットが効いてしまっては困るので、Evernote クライアントだったらこうするよ、という形で指定。具体的には、Evernote ウィンドウの ahk_class を調べて、#IfWinActive のところで「もし Evernote のウィンドウだったらこの内容で動作させる」としています。

ただショートカットを AHK で置き換えてるだけですが、これで、Ctrl+w でウィンドウを閉じ、Ctrl+r で同期をすることができるようになりました。手慣れたショートカットで使えるようになって満足です！

Fastnote を使ってみる

「やっぱり Evernote のクライアントは重いことが多いなーライフログにはもう少し軽い方が…」などと思っていたところ、Fastnote.exe を知りました。

“Evernoteへ超絶簡単にメモできる”Windows用ソフト「Fastnote」バージョンアップしました。 – valinstの日記

指定したノートブックにさくさく追記するのに向いており、使ってみたところ便利だったの使い続けることに。
ただいくつか使い勝手で気になる点も。

• Fastnote はオンライン上にデータを送るので、ローカルの Evernote クライアントで変更した内容が同期前だとコンフリクトを起こす。
• 記入エリアに「すべて選択」のショートカット Ctrl+a がない。結構使うショートカットなので使えた方がいい。
• Firefox + KeySnail で「ページタイトル “改行” URL」を取得・整形してペーストすることが多いのだが、メモ帳や Evernote クライアントに貼り付けた場合きちんと改行されるのに、Fastnote だと改行が消えてしまう。

コンフリクト対策 – 起動時

まず、コンフリクトに関しては Fastnote を起動した時点で Evernote を同期させて、Fastnote から Send した後にまた Evernote を同期させることで防ぐことに。

;=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
; Fastnote [Ctrl]+[Shift]+[f]
;=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
^+f::
Run, D:\tool\Fastnote\Fastnote.exe
Run, C:\Program Files (x86)\Evernote\Evernote\ENScriptSyncDatabase.lnk
Return

起動のほうから。Ctrl+Shift+f を押したら、1 つめの Run で Fastnote を起動して、2 つめの Run で Evernote を同期させるように指定。Fastnote.exe などのパスは適宜自分の環境に変更してください。

同期の部分は Evernote のインストールディレクトリにある ENScript.exe を利用しています。そのまま使うとコマンドプロンプトが表示されて邪魔だったので、ENScript.exe のショートカットを作成して適当に ENScriptSyncDatabase と名付け、これを呼び出すようにしています。

せっかくショートカットを作ったので、同期用専用のショートカットにしてしまえということで引数もここに指定。ショートカットのプロパティを開いて「リンク先」の最後に「 syncDatabase」を追加し、「実行時の大きさ」を「最小化」にしておきます。

残りは全て「Fastnote のウィンドウだったら…」という処理なので、ソースはまとめて書きます。

; Fastnote
;=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
#IfWinActive ahk_class WindowsForms10.Window.8.app.0.2bf8098_r15_ad1

; [Ctrl]+[w]でウィンドウを閉じる(ALT+F4)
^w::Send,!{F4}

; [Ctrl]+[a]ですべてを選択
^a::
Send,+{F10}^{a}
Return

; [Ctrl]+[r]と[Ctrl]+[Enter]で同期
^r::Run,C:\Program Files (x86)\Evernote\Evernote\ENScriptSyncDatabase.lnk
^Enter::
Sleep, 200
Send, ^{Enter}
Sleep, 2000
Run,C:\Program Files (x86)\Evernote\Evernote\ENScriptSyncDatabase.lnk
Return

; [Ctrl]+[v]で\nの改行をちゃんと
^v::
comment=%Clipboard%

IfInString,clipboard,%Clipboard%,{
	StringReplace, clipboard, clipboard, http://, `r`nhttp://, All
}
IfInString,clipboard,%Clipboard%,{
	StringReplace, clipboard, clipboard, https://, `r`nhttps://, All
}
ClipWait
Send,+{Insert}
Clipboard=%comment%
Return

#IfWinActive                    ;ウィンドウの限定を解除

ついでに Fastnote も Ctrl+W で閉じることができるよう指定してあります。

コンフリクト対策 – 終了時（＋α）

Fastnote で Send したら、Send の処理が終わった頃に Evernote の同期処理をします。
Fastnote の Send のショートカット Ctrl+Enter でこれらの処理を行うように指定。

Ctrl+Enter が押されてすぐに処理をしてしまうと Fastnote 起動時の同期がまだ終わっていない可能性もあるので、Ctrl+Enter が押されても 200 くらいは止めておいて、その後 Ctrl+Enter を Fastnote 側に送って、Fastnote の処理を待つ意味で 2000 くらい止めておいて、最後に同期するために ENScriptSyncDatabase.lnk を呼ぶことに。

記入エリアで「すべて選択」を使いたい

記入エリアで Ctrl+a を使うのは、ちょっと強引にコンテキストメニュー -> 全て選択を押した、という形をショートカットにすることに。

Firefox + KeySnail で \n として入れた改行がペーストすると消える

改行が消えてしまうのは、おそらく「\n」がちゃんと改行に認識されてないんだろうなーと予想。他のメモ帳などから改行ありでコピーしたものを貼り付けた場合には改行が生きるので、改行自体ができないわけではない。どう処理して良いか迷ったので、とりあえず http:// か https:// があったら直前に強制で改行コードを入れるようにすることに。力業ですが一応事足りるのでヨシとします。

スマートではないなーと思うので、もうちょっと良い方法があれば是非教えてください！

終わり

Evernote も Fastnote もショートカットで一発起動でき、さくさく閉じることもできるようになり大分楽に。Fastnote 起動時と送信時に必ず同期処理が入るので、コンフリクトも起きなくなりました:) 同期処理がちょっと多いかなとも思うのですが、連投するわけではないならコンフリクトすることを気にして使うより強制で同期を入れちゃうほうがいいかなーと思っています。

色々設定しておくと、やっぱり便利ですね。Mac でも同様にごにょごにょやったので（とは言っても Mac はそんなにたいしたことしてないんですが）、それは次回。

追記—スクリーンキャストを撮ってみました。こんな感じでぱぱっとメモ追記できるよ！的な…音声なしです。

選択したノートが更新されていても、一度違うノートを選択しないと表示が変わらないので動画内では違うノートをいったん選択したりしています。

ページのタイトルと URL を送っている部分は、Firefox を選択した状態で yy をしてタイトルと URL をコピーし、Ctrl+Shift+f でFastnote を出して Ctrl+v で貼り付け、Ctrl+Enter で送信、としてます。

WordPress

今まであまりオフラインではイベントに参加していなかった私ですが、今年は勇気を振り絞って参加したのが大きかったです。オフラインでコミュニティに参加することの楽しさを感じました。

お会いできた方の中には、ネットでは 6 年ぐらいやりとりのあった方も。オフラインでお会いするのがはじめてでも、不思議と「ずっと前から知っていた」という感じで、お会いできたこと自体とても嬉しかったです :)

勉強会・懇親会に参加することは、人脈や知識を得ることができるのもメリットですが、そんなこと抜きに参加することそのものが楽しい！これにつきます。
来年も積極的に参加していきたいなあと思います！

このブログは仕事とは別に捉えて気まぐれに書いているのですが、WordPress コミュニティで出会った人が仕事に関する人とかぶっていたり、つながりがおもしろかったです。世の中は狭いものだなぁと思ったり。

カメラ

デジタル一眼の E-P2 を購入して、下手ながらに写真をたくさん撮るようになりました。これも大きかった！最近は単焦点レンズがお気に入りです :)

購入する際はかなり迷ったのですが、イベントに行く際 PC と一緒に持っていくことが多かったので、比較的軽いマイクロフォーサーズにして良かったなと思っています。

仕事

仕事は難しいことも色々ありましたが、やりがいのあることばかりで経験値をあげれる年だったと思います。好きな言葉を 2 つ。

職業というのは本来愛のある行為であるべきなんだ。便宜的な結婚みたいなものじゃなくて。
（村上春樹）

私のクライアントはいつも自分自身だった。私はずっと自分を喜ばせるために働いてきたんだ。
（ウィレム・サンドベルフ Willem Sandberg）

人それぞれ違うとは思うのですが、私はこういうタイプで。やっぱり私はこの仕事が好きだし、この仕事ができていて、趣味でやっていたブログも仕事につながって、本当に幸せだなと思います。

ではでは、来年ものんびり続けていこうと思いますので、どうぞよろしくお願いいたします！

例1. 三行選択して、li*>a[href="$#.jpg"]{ファイル名：$#}

<li><a href="aaaaaa.jpg">ファイル名：aaaaaa</a></li>
<li><a href="bbbbbbbbb.jpg">ファイル名：bbbbbbbbb</a></li>
<li><a href="ccccccccc.jpg">ファイル名：ccccccccc</a></li>

例2. 三行選択して、html:5>ul.hoge>li#0$*>a[href="#$#"]{$#}

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	<ul class="hoge">
		<li id="01"><a href="#aaaaaa">aaaaaa</a></li>
		<li id="02"><a href="#bbbbbbbbb">bbbbbbbbb</a></li>
		<li id="03"><a href="#ccccccccc">ccccccccc</a></li>
	</ul>
</body>
</html>

vim でも dreamweaver でも。「$#」が選択部分、「$」は連番なので、#$# としてたら #選択部分 に。

参考：Big Sky :: zencoding-vimを少しだけversion0.7対応した

2011/11/26（土）に WordBench TOKYO、11/27（日）に WordCamp TOKYO に参加してきました。WordCamp はスタッフをしていたのもあり写真があまりないのですが、WordBench のほうではパシャパシャしてきたので何枚か載せます :)

WordBench TOKYO

朝 WordCamp TOKYO のお手伝いに楽天タワーへ。その後 WordBench TOKYO 会場へ行く組に同行しました。KDDI さんのビル綺麗でした！

WordBench TOKYO の前日にお子さんが産まれた、おでさんのセッション。

会場入り口（受付前）、まがりんがポーズとってくれましたｗ

うえぶるじょんさんセッション中の会場の様子。満員です。

みんな真剣に聞いていました。

この日、6 年越しで WordPress ユーザーとして交流のあったひろまささんといさきさんとお会いすることができました。念願の初対面で、とても嬉しかったです！

懇親会もたくさんの方が参加しており和気藹々とても楽しかったです。WordCamp KOBE でお会いした方もいらっしゃっていたり。二次会では鹿児島からいらっしゃっていた @marushu さんや @d_dp_p さんとたくさん話すことができました。鹿児島での開催、期待してます！

WordCamp TOKYO 2011

実はスタッフ申し込みに間に合わなかったのですが、直前にスタッフが足りないと聞き急遽スタッフ参加しました。

朝イチ受付だったのですが、開場の 9:15～最初のセッションあたりでもう 300 人くらいの入場と伺いました。楽天タワーに入る際にはゲストカードの着用が必須だったので、朝はそれを渡していく係をしていました。その際、WordCamp KOBE で友達になった方とも会えました :)

セッションはあまり聞くことができなかったのですが、裏方も楽しかったです。ランチ配布中にスピーカーの方を間近で見てドキドキしたりしましたｗ セッションのほうは Ust も公開されるようなので、スライドとあわせて見ようと思います。

スタッフの中でもリーダークラスの方は一日中受け付けにいたり、本当に大変だったのではと思います。スタッフのみなさんお疲れ様でした＆ありがとうございました！

懇親会に登場した、わぷーケーキ！

かなり再現度高いわぷーが描かれていました。見た目だけじゃなく味も美味しかったです。

6 年越し

この日は、@aka_aus_pd さんともお会いできました。昨日に引き続き aka さんも 6 年越しでやっと初対面で、お会いできて本当に嬉しかった！みんな偶然 WordPress に手を伸ばして、初期からユーザーでお互いを知っていて、こうして実際会えたのは感慨深かったです。お会いしたときは感動しました。

まさに、こんな感じでした。

二次会

撤収作業後スタッフ打ち上げがあったようなのですが、私は 6 年越し組＋初対面のお二人に合流しました。カメラを出したところ向かいに座っていた方が焼きそばの皿を片手にポーズをとってくださったんですが、解散した後にそれが PukiWiki の yu-ji さんだったと知りました。あんなポーズ取らせてすみません…！

その席で撮ったわぷー。しっぽがなんと可動式！

@wctokyo わぷー

今回は Twitter で @wctokyo のわぷーが大活躍でした。いいキャラなのでいくつかツイートを紹介して終わります。

参加した方々、スタッフの方々、お疲れ様でした！
全ては書ききれないのですが、たくさんの出会いがありました。今回も楽しかったー :)

具体的には、単体ページ以外でも mixi チェックのボタンがきちんと動作するように修正しました（thanks @takenao さん！）。

DL：WordPress Plugins/JSeries » wp-hatena 拡張版

単体ページ以外での使用方法

とりあえず、詳しいことはいいから表示させたいよ！という方は以下のようにしてみてください。
※wp-hatena は表示させたい場所にコードを書いておくことで使うタイプのプラグインです。

新しいコード

単体ページ以外にも表示させたい場合はこちらを。面倒だったら単体ページもこちらで大丈夫です。

<?php global $wph; if(isset($wph)) {
    $wph->addhatena();  //表示させたいものを記述
}?>

よく分からなければ、こちらのほうで書いておけば間違いないです。

今までのコード

今後も単体ページではこのままのコードで表示できますので、今まで表示できてたページは変更不要です。

<?php if(isset($wph)) {
    $wph->addhatena();  //表示させたいものを記述
}?>

経緯

事の発端

むむむ、動かないらしい。なんでだろう。loop 内だとダメなのかな？エントリ個別ページで表示することしか想定していなかったけれど、それ以外でも使えるならそれにこしたことはないな～、ということで調べてみると、以下のようなことが分かりました。

• wp-hatena.css は読み込まれている。→コンストラクタは動いてる（＝プラグインはちゃんと読み込まれて動いてる）
• if(isset… のところは、「$wph という変数があったら、この中身実行してね」という意味なのですが、そこから先が読み込めてない。変数 $wph が見当たらない状態になってる様子。

wp-hatena の仕組み

WordPress のプラグインは、プラグインを WordPress 本体に引っ張る hook を使っているものがほとんどです。（参考：プラグイン API – WordPress Codex 日本語版）
ですが、wp-hatena はメイン機能（ブックマークボタン等を表示する機能）で hook を使っていません。※拡張版では css, js の読み込みにちらっと使っています。

理由をwp-hatena 本家作者ひろまささんの記事から引用すると…

自動でソーシャルブックマークのボタンを挿入してしまうより、自分が好みの場所にコードを書いて使う方が便利じゃないかなーという、ことですね。

つまり、function.php などにソーシャルブックマークボタンを呼び出すためのオレオレ関数を作っておくぜ！ということの延長にあるタイプのプラグインということです。

function.php に書くことに比べると wp-hatena を使うほうが手軽に色々できますが、基本は同じ「変数を用意しておく」「それをテンプレート内で呼び出す」という二段階。

$wph を参照できるように

話は戻って…。変数 $wph が見つからない状態になっているようだったので、これをなんとかすればいけるはず、と考えました。

wp-hatena プラグインの一番最後で、$wph = & new WpHatena(); として、クラス WpHatena のオブジェクトを生成して変数 $wph に入れているので、それをもう一度書いてあげれば動くんじゃないかなーと思い、以下のようにして試してみました。

<?php $wph = & new WpHatena();
if(isset($wph)) {
    $wph->addhatena();  //表示させたいものを記述
}?>

動いたー！とりあえず、こうすれば動きますーとツイッターでお返事をしていたところ、まがりんから以下のようなツイートが。

global 宣言でいけるかもとのことなので、引き続き調べてみました。

根本的な原因と、WordPress テンプレートの流れ

まずは、PHP の変数について。

• 変数は「その変数を参照することができる範囲」が決まっている。この範囲＝スコープ。関数内＝1 スコープ。
• 普通は、関数の外からは関数の中の変数は参照できない（見つけられない）、関数の中からは関数の外の変数は参照できない。
• 関数外の変数（グローバル変数）を参照したい場合は宣言が必要（グローバル宣言）

動かなかった原因は WordPress のテンプレートを読み込む仕組みに沿った呼び出し方をしてなかったからでした。
WordPress のテンプレートは大きく分けて 2 つ。

1. 一番外側、外枠の指定のあるテンプレート、index.php や page.php など。これらは一番上のスコープ（グローバルスコープ）で処理され、プラグインで指定した変数や function.php で指定した変数をそのまま呼び出すことが出来る。
2. 他のテンプレートから呼び出されるパーツ的なテンプレート、loop.php など。これはそれぞれ呼び出される時に使った関数内で実行されるので、1 とは違うスコープになる。違うスコープの場合、そのままではプラグインで指定した変数などの変数を呼び出すことができない。

テンプレートは全部同じスコープにあるー、と、深く考えずぼんやり思っていました…。

違うスコープにあるから変数を見つけられない、ということなので「違うスコープの変数を参照したいよ！」とグローバル宣言をすることで解決できるということに。表示させたいテンプレート内で 1 度、global $wph; としてグローバル宣言してあげれば OK。

<?php global $wph;  //グローバル宣言で $wph を参照できるように
if(isset($wph)) {
    $wph->addhatena();  //表示させたいものを記述
}?>

これで表示できるように（この記事の最初のほうで書いたコードと同じです）。そのスコープで 1 回グローバル宣言してあれば良いので、例えば、記事の最初と終わりの二カ所に表示させたい場合、二番目のほうは global $wph; を書かなくても大丈夫です。

とはいえ、記述するコードが変わると使い勝手が落ちますし、2 回グローバル宣言を書いても問題はないかなと思うので、いつも書いてもらう形にしておけば間違いなくて良いかなー。

〆

こうやってちょっとずつプラグインが育っていくのだなぁ、と思いました。「よく分からないけれど、こうすれば解決する」という段階から、「原因が分かったうえで、解決方法を出せる」という段階にいけると、「そうだったのかー！」とちらばっていた事柄がつながって楽しいですね。

実は途中、global $wph; を <?php の外に書いていることに気がつかず、しばらく遠い目になったのですが…

このツイートを見て、やり遂げなくてはー、と思いましたｗ かなり悩んだのに、しょぼしょぼなケアレスミスでした…T T

アドバイスくださったまがりん、記事にもまとめてくださっていたうえつん、応援してくださったおでさん、キッカケをくださったtakenaoさん、どうもありがとうございました！

長くなってしまいましたが、挿入したい場所に wp-hatena のコードを書いても表示できない状態だった方、よろしければお試しください :)

新たに入れたり設定した物

これはおもしろいなーとか、便利そうだなーと思って今回追加したもの。それぞれの細かい説明などは書籍を是非ってことで割愛。書籍内ではたくさんのプラグインが紹介されてます。

vimfiler

そこそこ長く vim 使っているのに、知りませんでした。これ凄く便利！netrw には戻れない。

ShowMarks

マークした場所を表示して視覚で分かるように。

number marks

mm で連番のマークを。mb と mv でこのマークの前へ、このマークの後へ、ができる。お試し。

EasyMotion

HaH とか、KeySnail の HoK とかのように、w でキーを表示させて、飛びたい場所のキーを押して移動する。お試し。

matchit.vim

% による対応タグへのジャンプを強化。XML の対応タグへ飛べたりとか。

repeat.vim

surround.vim で行った操作の繰り返しなどが . で出来る。楽ちん。
参考：Sugamo.css Vim分科会まとめ – Archiva

toggle.vim

true と false、on と off などを C-T でサクサク切り替え。monday.vim から変えてみました。私は monday.vim にあわせてキーバインドを C-A に変更。

感想

読み終えてボリューム感にとても満足。知っている内容もありましたが、「へー知らなかった」という内容も多々ありました。今は使わなくても、そのうち「こんなのあったはず…」となった際に読み返せば分かる、となるような内容も。

Vim を実際に使っているときに感じる不便なところを埋めていくような一歩踏み込んだ内容で、実用的な書籍だと思います。

Vim ユーザーの方、これから Vim 使ってみようという方は是非 :)

Vimテクニックバイブル　～作業効率をカイゼンする150の技