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

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

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

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 のコードを書いても表示できない状態だった方、よろしければお試しください :)

ダウンロード・説明はこちらを。
WordPress Plugins/JSeries » wp-hatena 拡張版

1.0 の変更点

• Google +1 に対応
• IE で Facebook いいね！ボタンの下が 1px 切れることがあったのを修正

Google +1 は、cagylogic さんが「wp-hatenaにgoogle +1をサポートさせる | cagylogic」で対応してくださっていたものを取り込ませていただきました。ありがとうございます！

よろしければ更新してお使いください :)

hiromasa さんの記事では、シェルによるバックアップ方法が紹介されていました。

シェルによるバックアップの特徴

• WP のデータベースのバックアップだけなら、簡単さは wp-dbmanager などの WP プラグインを利用する方法に負ける
• 記事数が多くデータベースが大きい場合にも、シェルによるバックアップなら問題なくバックアップ＆データベースを戻せる
• WP 以外の用途の MySQL でも OK
• タイムアウトしてしまって phpMyAdmin からでは上手くバックアップできない場合にも、シェルからなら大丈夫
• 自動化するには、シェルスクリプトを cron で動かす必要がある

融通のきく方法なので、知っておいて損はないかと思います。

メールで送れたら良いな

元々 hiromasa さんのところに載っていたシェルスクリプトでは、サーバ上に MySQL のバックアップファイルを作り、指定の日数分を超えると削除されるようになっています。これに少しだけ手を加えて、メールでバックアップファイルを送れるようにしてみました。メールで送る場合には perl とあわせて使っていく方法などもありますが、私はシェルだけで終わるようにしてます。

#!/bin/sh

# 設定(ここを自分に合わせる)
DATABASE=●●●
DBUSERNAME=●●●
PASSWORD=●●●
XREAUSERNAME=●●●
BACKUPDIR=backup-mysql
KEEPDAY=14
MAILADDRESS=●●●

# 初期化(XREA/CORESERVER用)
PREFIX=mysql
SERVER=localhost
NOWDATE=`date +%Y%m%d`
DESTDIR=/virtual/$XREAUSERNAME/$BACKUPDIR
DUMPFILE=$PREFIX.$NOWDATE.dump
TARFILE=$PREFIX.$NOWDATE.tar.gz
OLDDATE=`date "-d$KEEPDAY days ago" +%Y%m%d`

# MySQLダンプ/圧縮
cd $DESTDIR
/usr/local/mysql/bin/mysqldump $DATABASE --host=$SERVER -u $DBUSERNAME --password=$PASSWORD -e -O net_buffer_length=500 > $DUMPFILE
tar zcvf $TARFILE $DUMPFILE

#メール送信
/usr/bin/uuencode $TARFILE $TARFILE | /usr/bin/mail -s "mysql backup $NOWDATE" $MAILADDRESS

# 処理判定
if [ $? != 0 -o ! -e $TARFILE ]; then
    echo "backup faild -- ($DUMPFILE)"
    exit 1
fi

# 圧縮前ファイル削除
rm -f $DUMPFILE

# n日ローテートを削除
rmfile=$DESTDIR/$PREFIX.$OLDDATE.tar.gz
if [ -e $rmfile ]; then
    rm -f $rmfile
fi

「#メール送信」と書いてある部分とその下の一行が私のほうで追加した部分です。この部分の内容は、以下のようになっています。

$ uuencode 元のファイル 添付ファイル名 | mail -s "メール件名" メールアドレス

これでサーバに MySQL のバックアップファイルが作られ、指定したメールアドレスに「mysql backup 日付」という件名でそのバックアップファイルが添付されたメールがくるようになります。このメールは私は gmail に送って、ラベルを付けて受信トレイはスキップさせるようにしています。

※Thunderbird で見ると添付ファイル部分がうまくデコードされないようですが、gmail だと上手いことしてくれます。

もっときっちりと、MIME を使ったメールを…と思う場合は perl と組み合わせたりするのが良いかと思います。

使い方

まずはファイルを設置

1. 上記スクリプトの設定箇所を自分の環境にあわせて書き換え、backup.sh という名前で保存。ファイルの改行コードは LF（UNIX）。
2. FTP でサーバに接続して、public_html と同じ階層に「backup-mysql」というディレクトリを作成。このディレクトリに backup.sh を入れてパーミッションを 700 に設定。

動作をテスト

まずは、SSH クライアントからコマンドをうってテストしてみます。

1. XREA / CORESERVER の管理画面＞「ホスト情報登録」ページへ行き、「SSH 登録」ボタンを押してホストを登録しておく。
2. SSH クライアント（teraterm + SSH や、Poderosa や、putty など）で、自分のサーバ（s1.coreserver.jp 等）に接続。
3. 下記のように SSH クライアントに入力します。

   cd backup-mysql

   cd で backup-mysql ディレクトリに移動。

   ls -laF

   ls -laF でファイル一覧を表示。打ち込むと、backup-mysql ディレクトリ内のファイルがズラズラっと表示されます。その中に backup.sh があるか確認。

   ./backup.sh

   backup.sh を実行。

   ls -laF

   ls -laF でファイル一覧を表示。ズラズラっと表示されたファイルたちの中に、mysql.○○○.tar.gz とあれば OK です。

4. FTP で先ほど作られた mysql.○○○.tar.gz をダウンロードして、解凍ソフトで開いて中の .dump ファイルの内容を確認。

CRON を設定

自動で backup.sh を実行させるように、cron に設定します。

1. XREA / CORESERVER の管理画面＞「CRON ジョブ」ページへ行く。
2. 「/virtual/ユーザー名/」と書いてある部分の右側、細長い入力欄に「backup-mysql/backup.sh」と記入。時間は分、時、にそれぞれ任意のものを入れて、あとは * としておけば、1 日 1 回、その時間に backup.sh が実行される。

あとは、メールが指定した時間にくるか確認して完了です :)

復活の呪文は？

バックアップしてあった .dump ファイルからデータベースのリストアを行います。間違っても現在利用中のデータベースに対しては行わないでくださいね。

1. データを戻すためのデータベースを空の状態で作成しておく。

2. mysql -u [ユーザ名] -p --default-character-set=utf8 [データベース名] < [バックアップ.dumpファイル] 

   『hiromasa.another :o)» Blog Archive » WordPress の MySQL バックアップ』より引用

   上記のコマンドを SSH クライアントからサーバへ接続して入力。パスワードを聞かれるので MySQL のパスワードを入力。

おまけ：WP プラグイン wp-dbmanager で空ファイルが送られてくる場合

XREA / CORESERVER は php がセーフモードで動いているため、wp-dbmanager という WP プラグインを利用した場合に問題があります。メールでバックアップファイルが送られてくるように設定しても、バックアップファイルが空状態になるのです。

これを回避するには、wp-cron.php を cgi として動かしてあげる必要があります。

<files wp-cron.php>
AddHandler application/x-httpd-phpcgi .php
</files>

WP のインストールディレクトリ（wp-cron.php のある場所）にある .htaccess に上記の内容を追記すれば OK です。XREA / CORESERVER のセーフモードに関しては、以前書いた「XREA で WordPress ファイルアップロード機能を利用する | Numb.」をよろしければどうぞ。

ちなみに、この記事は WordPants に寄稿しようかと思っていた内容だったりします。短くまとめて書く能力が足りず断念！そのうち書けたらいいなぁ。

用事が長引いて遅れて参加したのですが、とても楽しかったです！色々な方にお会いできて光栄でした！ジンギスカンも臭みが少なくておいしくいただけました :)

WordPress を使い始めた初期からずっとブログを見ていて知っていた方にお会いできたり、地味にやっている私のことを知っていてくださる方も何人もいらっしゃって、とても嬉しかったです。全然違う方向から知って読んでいたブログの中の方もいらっしゃったり。テンションあがりっぱなしでした。

名刺をみなさんからいただいたのですが、すっかり用意を忘れていて私からは渡すことができず…、そこが心残り。

みなさん、Web 周りのことに詳しくて。雑談の中からも色々と勉強になることがありました。いい刺激になりました。また次の機会にはお邪魔したいなあと思います。 :)

カメラを持っていったのですが、後で撮ろうと思ったまま失念して撮らずじまいに。次回はそのあたりもリベンジをはかりたいなーと思います！参加したみなさん、お疲れ様でしたー。ありがとうございました！

HTML5 だと、ページ内に h1 要素が複数あっても OK だったりで、今までエントリー内の見出しは h3 からだったのですが、それが今回からあわなくなってしまいました…h1 の次が h3 とかイヤー、と思いつつ、過去エントリ全部直すのも大変なのでとりあえずこのまま。こだわらなければいいんですが、うーんどうしよう。db に対して置換するのがいいのかな…。

960 Grid System からグリッド引っ張ってきてメインカラムとサイドカラムのバランスはそれに沿ってみました。CSS3 も、角丸とかでは使ってます。IE6 でも崩れないようには確認しましたが、モダンブラウザで見る方が良い具合で表示されると思います。

コンテンツエリアの要素ごとの整形はまだ適当なのですが、チマチマ運営しながら完成させようと思います。ヘッダーにサーチボックス入れ込もうかどうしようか迷い中。

ついでに、Disqus をコメント部分に入れてみました。しばらくこれは試用。

ダウンロードはこちらから。
WordPress Plugins/JSeries » wp-hatena 拡張版

0.9 の変更点

0.9 は、をかもとさんが改良してくださったものを、丸ごとドン！なリリースです。遅延ローディングで javascript を読み込むようになっており、wp-hatena で読み込むデータが原因で表示に時間がかかる、というケースが劇的に改善すると思います :)

また、細かな改良もしていただいています。このステキな改良をしていただいた wp-hatena 拡張版、リリースして良いか伺ったところ快く OK をいただけました。そんなわけで 0.9 リリースです。をかもとさんに感謝！

0.8 の変更点

ブログを書いていなかったので一応。

• プラグインディレクトリの取得を行う形に修正
• アイコン画像の場所を任意にできるようにし、管理画面にオプションを追加

プラグインディレクトリの取得方法は、をかもとさんに教えていただいたソースを参考にしました。ありがとうございます！

アイコン画像の場所変更のほうは、画像を任意のものに差し替えたい場合などにご活用ください :)

• WordPress Plugins/JSeries » wp-hatena 拡張版

これは、以下のような流れで追加しました :)

をかもと兄さんがシェアボタンをご所望。これは追加しないわけにはいかない！

そんなわけで Facebook シェアボタンが追加された wp-hatena 0.7、もしよろしければお使いください :)

余談：Facebook シェアボタンを追加するにあたり Facebook の公式サイトを見ていたんですが、シェアボタンに関する情報があったページにいくと、「いいね！」ボタン情報のページにリダイレクトされちゃうんですよね。役目が違うから、シェアボタンと「いいね！」ボタンが統合されるとも考えにくいんですが、なんだろうなー

wp-hatena 0.6 から、管理画面がつき「はてブ」「Facebook いいね！」「Tweet ボタン」は表示タイプを選択できるようになりました。どれを選ぶとどういう見た目になるの？というのを書いておきます。

はてブ

• スタンダード (B!＋ブックマーク数を表示)
  
• バーティカル (大きめのサイズでB!＋ブックマーク数を表示)
  
• シンプル (B!のみでブックマーク数は表示されません）
  
  ※独自アイコンを利用したい場合、シンプルを選択してください

Facebook

• スタンダード (いいね！ボタン＋水平方向にテキストやアイコンを表示)
  
• バーティカル (いいね！ボタン＋素直方向にカウント数を表示)
  
• シンプル (いいね！ボタン＋水平方向にカウント数を表示)
  

Tweet ボタン

• スタンダード (つぶやきボタン＋水平方向にカウント数を表示)
  
• バーティカル (大きめのサイズでつぶやきボタン＋垂直方向にカウント数を表示)
  
• シンプル (つぶやきボタンのみでカウント数は表示されません）
  
  ※独自アイコンを利用したい場合、シンプルを選択してください

mixi チェックを使ってみたい場合

デベロッパー登録（個人の方） << mixi Developer Center (ミクシィ デベロッパーセンター)

上記ページを参考に、まずはデベロッパー登録します。その後、「mixi Developer Center (ミクシィ デベロッパーセンター)」から Developer Dashboard へログイン。

上記のようなページに行くので、「mixi Plugin」へ移動。そこから、「新規サービス追加」ページへ移動。

「新規サービス追加」では、上記のように適宜内容を埋めます。ここでは私のブログを例としています。実際には、ご自分のブログにあった内容で書いてください。

サイドナビゲーション「サービストップ」で移動し、「登録サービス詳細」から今登録したサービスの内容を確認します。登録したサービス内容に「識別キー」というものが表示されているはずなので、これを wp-hatena の管理画面の「mixi key」に入力してください。

あとは他のプラグインと同様の処理で OK です :)