雑念ベース

　さすがにそろそろ WordPress を 2.2 にアップグレードしたいと思い、ローカルサーバーに複製を作って挑んでみました。

　消えても平気ということで、いきなり 2.0.ｘ から 2.2.1 にアップグレード。見事にこけました。文字化け＋日本語リソースファイル読まない＋プラグイン動かない。わかりやすいことです。

　やっぱり間を飛ばしちゃだめだよねと、今度は 2.1.3 にアップグレード。WP Paginate .2.2 を有効にすると表示が真っ白になるのと WP-AddQuicktag 0.2 のバージョンアップが必要なの以外はとりあえずOK。WP-AddQuicktag は乙彼さんによる日本語版の WP-AddQuicktag (ja) 0.4 にしました。WP Paginate の代わりは検討中です。お勧めのがあったらぜひ教えてください。

　一番やばいのは、自作の AmazonLink（未公開バージョン）の Ajax 部分です。UTF-8 でデータを返すはずなのに、なぜか Shift_JIS で処理されてます。当然文字化けしてしまって、検索結果が表示できなくなってます。原因究明のためしばし研究します。リリースが伸びてしまいました。期待していただいている BoozerBlog の方（お名前が見つけられませんでした）申し訳ないです。

　プラグイン以外での悩みは、テンプレートタグ（正確には PHP のユーザー関数）の wp_list_categories()。
　2.1.x からは wp_list_cats() が非推奨となり、wp_list_categories() を使うようにとのお達しがありました。それじゃあと使ってみたのですが、children に相当するパラメーターがありません。第一階層のカテゴリだけをメニューのように表示させたいのですが、それにはこのパラメーターの機能が必須なのです。wp_list_cats() でしばらく済ませるということも考えましたが、普通に children が効きませんでした。これはどういうことだと調べてみると、wp-includes/deprecated.php で次のように定義されていました。パラーメーターが完全に無視されています。互換性をなくしておいて非推奨はひどい。

　どうしようもない状況です。仕方がないのでタグを無効にしました。

　2.2.1 への道は険しいです。果たしてたどり着けるのはいつのことでしょうか。

2007年7月25日 追記

　AmazonLink の原因が判明。JavaScript からの検索リクエストを中継するためのプログラムに書いてある PHP 関数 header() の使い方が間違っていました。

　正しいのがこれ。

　これを、このように間違えていました。引数の数とかはあっているので、これだと構文エラーにはならないのです。

　最近よく見かける ClickComments を導入してみました。よく見かける割には導入の仕方についての説明を見たことがないので、ついでに解説記事を書いてみることにします。解説不要なくらい簡単でしたが、せっかくスクリーンショットも用意しましたので。

ブログサイトの情報を送信

　初めに、導入したいブログサイトの情報を送信します。ClickComments のページにフォームがあります。メールアドレスの欄もありますが、これは必須でないので空のままでも大丈夫です。入れておくとユーザー登録されるのかもしれません。このサイトにはログインページがあります。
　Category は、サブのカテゴリでなくても大丈夫です。私は大まかに Technology にしました。サブカテゴリのほとんどが当てはまりますので。

　入力が終わったら、ボタンを押して送信します。

ブログシステムの選択

　このサービスは、現在8種類のブログシステムに対応しています。導入先のブログを選択するように促されますので、今回は WordPress を選択します。

プラグインのダウンロードと有効化

　ブログシステムを選択すると、使えるようにするための説明ページが表示されます。説明にはプラグインをダウンロードするためのリンクも含まれています。

　ここにある説明は、一般的なプラグインの導入方法となんら変わりありません。ファイルをダウンロードして、プラグインファイルをアップロードして、管理画面で有効化。それだけです。有効化すると、記事本文の下に表示されるようになります。

プラグイン Hack

　おまけ項目です。

　ついでにプラグインの中身を見てみました。ややこしいことをやっていると思いきや、メインのコードはわずか12行でした。ほとんどの処理を JavaScript で行っているのでしょうか。ブログサイトのアドレスや記事の情報を引数で渡しているので、ブログページのソースから JavaScript を見てみます。

　またもや単純なコードです。インラインフレームのタグを表示しているだけでした。アマゾンの個別商品リンクと同じ方式ですね。インラインフレームの中身のアドレスには、blog というパラメーター名で ID らしきものが渡されています。これが初めに送信した情報と結びついていて、言語にあわせた表示にしたりしているのでしょう。

　最終的な構造は次のようになります。div.postreachclickcomments にスタイル設定をすれば、多少のデザインは可能ですね。

　AmazonLink の Amazon.co.jp 検索に、検索結果のページ切り替え機能を実装しました。

　コードの整理などがある程度終わったところで実装方法を思いついたので、3時間ほどで一気に実装。今のところ気持ちよく動いてくれています。

　ページ切り替えで1ページ目の前や最後のページの次を表示しようとしたときの処理をどうしようかと考えていたのですが、ループして反対側を表示するようにしてみました。これだとボタンの表示非表示の処理もいらないので、作る側としても楽です。

　残りの TODO は、キーワードを入れるところでエンターキーを押されたときの処理だけです。通常だと submit されてしまいますが、代わりに検索ができることを目指します。keydown イベントでキーコードを拾って分岐処理という予定ですが、環境依存にならないか心配です。

　ソーシャルブックマーク（以降、SBMと表記）という言葉があります。いわゆるオンラインブックマークサービスですが、コミュニティー的（Web2.0的と言った方がいいでしょうか）機能も提供していることが多いです。
　すでに巷には多数の SBM サービスがあふれています。初めはベンチャー企業的なところが多かったのですが、今では Google や Yahoo! のような大手企業も手を出す分野となりました。

　市場が大きくなったこともあってか、ニュースサイトには SBM に登録するためのボタン（クイックリンク）が表示されることが普通になりました。ニュースサイトによって対応している SBM はさまざまですが、日本でははてなブックマークが多いでしょうか。Yahoo!ニュースでは、8つのボタンが表示されます。

　このブログでもしばらくはてなブックマークのボタンを表示していましたが、本当はほかのサービスにも対応させたいと思っていました。対応させる手段がないわけではありませんが、アイコン画像の利用がグレーだったのです。

　そんな時見つけたのが、AddClips というサービス。（やっと本題）

• AddClips ソーシャルブックマークボタン統合サービス

　ポップアップウィンドウを経由することで、多数の（現時点で18種類）SBM サービスへの対応を1つのボタンで可能にしてくれます。利用している SBM サービスが1つの場合は、2回目以降はポップアップなしで直接登録することもできます。

　WordPress へのボタンの導入方法ですが、ボタンを作ってコードを貼り付けるだけです。淺田さんによる記事で対応させる方法はわかっていましたが、ちょうど導入した日に取り込まれたようです。

• AddClipsの改良をちょびっと：個別ページ以外で使用する方法（創造マラソン）
• AddClipsにDiggを追加。ブログ対応も拡充しました。（Web2.0ナビ）

　ボタンを設置する側にうれしい機能としては、ユーザー登録することで登録数の統計表示があります。どの SBM サービスのユーザーが多いかとかは気になるところです。ユーザー登録にははてなのアカウントが必要ですが、Livedoor ID と OpenIDへの対応が予定に入っているようです。

　統計機能が不要であれば、個人情報はまったく渡す必要がありません。手軽に試してみてはいかがでしょうか。

　しばらく前に 0.5.0 をリリースした AmazonLink ですが、ASIN を調べるのにわざわざ Amazon.co.jp に行くのは面倒であることに気がつきました。アソシエイトセントラルで調べたりしたら意味がないですしね。

　というわけで、先週から記事作成画面で検索する機能を実装中です。アクションフックの dbx_post_advanced を使って、抜粋表示オプションなどのドッキングボックス部分に検索フィールドを追加しています。検索結果は Ajax を使っているのでリロードやポップアップウィンドウはありません。

　Ajax らしく、ローディング中は回転アニメーションを表示。Ajax といえばやはりこれです。

　ちなみに、このアニメーションファイルは Ajaxload で作成しました。ブラウザで手軽に作れるのでお勧めです。

　検索結果の表示はこんな感じ。タイトルの下にあるのが、AmazonLink 用のコードです。本当はクリックで挿入とかやりたいところですが、方法がまだわからないのでコピー＆ペーストで。

　今後の優先課題は、10件目以降の検索結果への対応ですね。Amazon Web Service では、10件ごとにしか検索結果を得ることができません。それ以上はページを指定する必要があり、そのページ切り替えの仕組みを考え中です。

　ちなみに、使用している JavaScript ライブラリは次のとおり。

• prototype.js 1.5
• XML.ObjTree
• JKL.Dumper

　XML.ObjTree は、XML データや DOM ツリーを JavaScript オブジェクトに変換してくれるライブラリです。JKL.ParseXML の後継で、prototype.js を使う場合はこちらのほうがお勧めだそうです。内部から prototype.js を呼び出して直接オブジェクトを得ることも可能ですが、XML データの取得と JavaScript オブジェクトへの変換は別にしたほうがデバッグしやすいと感じました。prototype.js で取得して、それを XML.ObjTree に渡して変換ですね。
　JKL.Dumper は XML.ObjTree と同じ作者によるライブラリで、JavaScript オブジェクトをJSON 形式テキストにダンプしてくれます。目で見るとわかりやすいので、デバッグ用に使用しています。これもお勧めです。

　このタイトルでわかった人は、長年パソコンを使っている人かもしれません。

　何のことかといいますと、コンピューター上で表示される数字のゼロのことです。先日、次のブログ記事を読みました。

• ゼロに斜線をつけますか？ – 一般システムエンジニアの刻苦勉励（ITmedia オルタナティブ・ブログ）

　この記事の序盤では、数字のゼロとアルファベットのオーを区別できるように、携帯電話で使われているフォントではゼロのほうに斜線がつけてあるということが書かれています。パソコン上でこの表現が使われていたのは知っていますが、携帯電話で生き残っていたとは知りませんでした。

　記事を読んでいて思い出したのが、初めてパソコンに触れたころは斜線ではなく中点だったという記憶。カタカナの「エ」を90度回転させたようなものもあった気がします。画像を探しましたが見つからなかったため、記憶を頼りに再現してみました。左が中点で、右が90度回転した「エ」です。

　記憶ありますか？

• IT業界人に10の質問？（ぉぃ）（Telmina）

　というわけで、企画に乗ってみることにします。一応は、業界の端っこにいるつもりでいます。

　次の10の語句について、それぞれどう発音しますか？　カタカナでお答えください。

1. AJAX
2. ASUS
3. AOpen
4. Windows Me
5. WordPress ME
6. C#
7. src（HTMLのimg要素等の属性）
8. href（HTMLのa要素等の属性）
9. .bmp（Windows形式の画像の拡張子）
10. .gif（汎用的な画像形式の拡張子）

AJAX

エイジャックス

ASUS

アサス

AOpen

エイオープン

Windows Me

ウィンドウズエムイー

WordPress ME

ワードプレスエムイー

C#

シーシャープ

src（HTMLのimg要素等の属性）

ソース

href（HTMLのa要素等の属性）

エイチアールイーエフ

.bmp（Windows形式の画像の拡張子）

ビーエムピー

.gif（汎用的な画像形式の拡張子）

ジフ

　読める場合はローマ字式で読んで、読めなかったり語呂が悪いと1文字ずつ読む傾向がある気がします。
　ASUS はアスースが本来の読み方のようですが、語呂がいまいちなのでアサスで。

　WordPress ME（以下、ME と表記）はバージョンが上がるごとに Ajax の導入が進んでいるようです。当然のようにいくつか Ajax ライブラリが標準で付属していて、その数も導入具合同様増えている模様。
　標準で付いているというのは一見便利なようですが、プラグインを開発する側から見るとなかなか悩ましいのです。自分が使いたいものが付属していればいいのですが、そうでない場合は相性の問題が出てきます。

　現在このブログで使用している WP のバージョンは 2.0.10 です。このバージョンには Simple AJAX Code-Kit（SACK） のバージョン不明のものが付属しています。ME 2.2 からは jQuery が中心になっていくようなので、Ajax を導入したプラグインの開発に jQuery を使用しようとしたのですが、どうやら SACK と相性が悪いようでエラーが出てしまいました。
　また、ME 2.1.3 と 2.2.1 に付属の SACK のバージョンは 1.6.1 となっており、2.0.10 付属のものとは使い方に違いがあります。SACK を開発に使用するとしても、2つのバージョンに対応させる必要があります。ME 本体で使っているのですから、自前で持っているものを使うというわけにも行きません。正直、うまく動くとは思えません。

　とりあえず、ME 2.0.10 には付属していなくて ME 2.1.3 と ME 2.2.1 に 1.5.0 が付属している Prototype.js が大丈夫そうなので、これを使って開発に挑んでみようと思います。

　WordPress の投稿画面にあるトラックバックとかカスタムフィールドといった、ドラッグして順番を入れ替えられる部分（ドッキングボックスというらしい）を追加できる dbx_post_advanced というフックを見つけていろいろやっていたら、いつの間にか順番の入れ替えができなくなってしまいました。

　Firefox2 だとドラッグのたびに sibling has no properties という JavaScript エラーが出てます。IE の場合は位置がおかしくなり、そのままフリーズしてしまいました。

　Firefox での該当箇所は見つけたけどよくわからない。仕方がないのでプラグインを無効にしたりファイルをオリジナルのものからアップロードし直したりしてみましたが変化なし。

　別に順番を変えられなくてもそんなに困ることじゃないのですが、プラグインの開発中に変なエラーが出ても嫌なので直したいところです。同じバージョンを別のところにインストールですかねぇ。原因を切り分けないと・・・。

2007年6月23日 午後12時28分 追記

　デバッグのため該当ファイルの wp-includes/js/dbx.js に改行を入れた（ファイルサイズを抑えるために全部1行になってます）ものをアップロードしたら直ってました。試しに me209-to-2010.zip からアップロードしてみるとこれもOK。
　よくわからないけど直ったようです。原因不明のままですが、まあよかった。

　全国のWordPress ファンの皆さん。買いましたか？

　予定通りなら、今日は『WordPress 2.2でつくる！最強のブログサイト』の発売日です。Amazon.co.jp の商品写真も表示されるようになりました。

　仕事帰りに本屋によってみましたが、1冊もありませんでした。売れきれたと思いたいところですが、小さなところだったので入荷しなかったのでしょう。

　しかし、実はすでに入手済みです。しかも献本で。

　i18n を勧めているサイトとして WordPress Plugins/JSeries が紹介され、メンバー全員に進呈してくださったというわけです。

　ソーテック社さんありがとう！
　そして、著者のOtsukareさんとひろまささん。お疲れ様でした。（もちろんほかの関係者の皆様も）

　2.2.1に備えて、少しずつ読み始めようと思います。