カテゴリーアーカイブ: WordPress

Jul 25 2010

最近の WordPress 的な写真

By ひろまさ | 公開日:2010 年 7 月 25 日投稿時の月齢：13.9 月名：待宵月潮汐：大潮

先月の OSC 北海道からの WordPress 的な写真達です。ここ1年、2年、WordPress のオフライン活動も活発になってきていてみなさん楽しそうです。

というわけで、OSC 北海道にからめて北海道にきてくれた、てぃあーこさん、おでこさんとジンギスカン写真からいってみよう!。

2010/6/23。

wordpress00-01

2次会でジンギスカンに（笑）てぃあこさん、食べれないかと心配でしたが、大丈夫だったようで良かったです。

次は OSC 北海道、前夜祭。

（ここからおでこさんの、フリッカー写真をお借りしています）

活ほっけって、ぼくもはじめて。

おいしかったす。

OSC 北海道、当日。

ブースにて。

セミナ中。姿勢悪いな、おれ。（笑）

（ここまでおでさんのフリッカーより。さんきゅ～！）

後日。

前夜祭、OSC に来てくださいました、りぃさんとそのお仲間に混ぜていただいて、すすきの的な何か。

wordpress02-01

wordpress02-02

飲むときに薄暗いのは好きですなぁ。（←どういうオチだ!

Jun 27 2010

オープンソースカンファレンス 2010 北海道 + WordPress セミナ & ブース

By ひろまさ | 公開日:2010 年 6 月 27 日投稿時の月齢：15.2 月名：満月潮汐：大潮

昨日 6/26 に札幌市産業振興センターで行われました、オープンソースカンファレンス 2010 北海道にて、WordPress ブース展示とセミナの開催をWordBench 札幌として実施させていただきました。

セミナで「世界標準ブログツール WordPress の最新版 3.0 と豊富なプラグイン」ということでお話しさせていただきましたので、資料のほうをこちらで公開したいと思います!。

東京からはるばる札幌まで支援に来ていただきました、yuriko さん、てぃあこさん、おでこさん、札幌よりさっちん、どうもありがとうございましたっ。

オープンソースカンファレンス2010 Hokkaido – オープンソースの文化祭！

内容：オープンソースに関する最新情報の提供
・展示 – オープンソースコミュニティ、企業・団体による展示
・セミナー – オープンソースの最新情報を提供

自分は普段ソフトウェア会社所属なもので、WordPress のブース・セミナに興味を持って多く足を運んでくださるであろう、札幌の Web 製作会社の方との交流が実はなく、実際どの程度着ていただけるのかが未知数でしたが、ふたを開けてみればセミナの方は立ち見までということで、札幌で活動をされている方と交流を持たせていただけたことを嬉しく思いました。

というわけで、セミナ資料を公開いたします。

世界標準ブログツール WordPress の最新版 3.0 と豊富なプラグイン

本日お話しする内容

日本時間 6/18 にリリースされた WordPress 3.0 について、WordPress の CMS としての紹介とともに新機能を解説します。（6/23 に日本語版がリリースされました）

その中で WordPress の動作を追いながらプラグインの仕組みと、その仕組みを使った具体的な例を紹介します。

最後に、WordPress コミニュティサイト WordBench をご案内します。

ご存じの通り人前でしゃべるのが苦手なもので分かりづらくてホントすいません。。当日の資料で口頭にしてしまっているところには、若干ですが補足いれましたので、来られていない方も見ていただければと思います。

セミナ終わった後にご挨拶させていただけた方、ありがとうございました。今後ともヨロシクお願いいたします。

WordPress ブースの方もみなさん足を運んでくださってありがとうございました!

yuriko さんが、WordPress グッズを東京から輸入してくださいました。

前日のお食事会の様子や、OSC 中の楽しげな写真などは次のエントリでいきます!（おでこさんの写真待ちともいう（笑））

Jun 20 2010

WordPress 3.0 とプラグインアクション・フィルターフックへのクロージャ渡し

By ひろまさ | 公開日:2010 年 6 月 20 日投稿時の月齢：8.4 月名：九日月潮汐：小潮

3.0 開発中は全然気がつかなかったのですが、WordPress 3.0 からプラグインのアクション・フィルターフックにクロージャが渡せるようになりました。

クロージャが使えるのは PHP 5.3 からなのでみんなに使ってもらうプラグインなどではあまり使えませんが、5.3 と決まった環境でのテーマつくりなどの作業の場合は楽できるかもです

特に、Thematic などテーマフレームワークの functions.php で小さなフックをつくらなければいけない場合に威力を発揮しそうです。ついでに 5.3 じゃなくても楽する方法も紹介します。

修正元の trac はこちらです。

#10493 (Allow closures as callbacks) – WordPress Trac

PHP 5.3 allows closures, which means we can replace this:
add_action('init', create_function('', '//do something'));
with this:
add_action('init', function() { // do something });
and it only requires two lines of extra code.

実はサンプル上の create_function を使うパターンは少し前からマイブームだったのでタイムリー。こちらは PHP 5.3 じゃなくてもいけます。

でもって、これって何の話かというと…。

いつもの、the_content のフィルターをつかった、記事の頭に☆をつけるサンプルでご説明。

まず、以下のソースが一般的にかいたフィルタープラグインフックです。

// 普通のパターン

function add_star($content) {

    return "☆" . $content;

add_filter('the_content', 'add_star');

別にこれでいいわけなんですが、問題は add_star っていう関数。こんな小さい関数に名前をいちいち考えるのも大変ですし、他とかぶってはいけないという制約もあります。要は面倒であります。

ってことで、PHP では create_function というのを使うと匿名関数というのがつくれますので（名無しさんですね）これを利用すると…。

// 匿名関数(create_function)

add_filter('the_content'

    , create_function('$content', 'return "▲" . $content;'));

add_star をなくせました。 create_function でつくりだした匿名の関数をフックに渡してしまいます。ちょいフックならこれで十分。これは PHP 5.3 じゃなくても動きます。

でもちょっと問題がありまして、見ての通り関数の内容がただの文字列。 IDE サポートもうけられませんし、何より分かりづらい。 SQL をソースコードに直接書いているようながっかり感があります（笑）

というわけで PHP 5.3 から登場した、無名関数。 PHP マニュアル見ると匿名と無名で分けてみるみたいですね。

php 無名関数 – Manual

無名関数はクロージャとも呼ばれ、関数名を指定せずに関数を作成できるようにするものです。コールバックパラメータとして使う際に便利ですが、用途はそれにとどまりません。

どうなるかというと、

// 無名関数(PHP 5.3)

add_filter('the_content'

    , function($content) { return '△' . $content;});

やぁすっきりしました。 function() {} ということで名前なしで関数を定義して、直で add_filter に渡してしまいます。（これが WordPress 3.0 からサポートされました）

ここまでで十分便利ですが、調子に乗って「振る舞いを変えた」無名関数を the_content に登録してみます。

// 無名関数(エンクロージャ参照)

function enclosure($value) {

    $add = $value;

    return function($content) use($add) {

        return $add . $content;

};

add_filter('the_content', enclosure('□'));

add_filter('the_content', enclosure('■'));

これは今までは class でやっていたことを、関数で実装する感じです。 PHP のクロージャは外側の変数を参照するのに use を使うようです。

さてさて、これらを全部テーマの functios.php いれるとこんな感じになります。

closure01

予定通り全部動いていますね。

最後に thematic テーマフレームワークで head 部に generator meta タグを復帰させるコードをサンプルに。

// 匿名関数版(create_function)

add_action('init', create_function('',

    "remove_filter(

        'the_generator'

        , 'thematic_remove_generators');"), 999);

// 無名関数版(PHP 5.3)

add_action('init', function() {

    remove_filter(

        'the_generator'

        , 'thematic_remove_generators');},999);

というわけで、小さいフックをかかねばならない場合は、是非是非（←3回目…

Jun 20 2010

WordPress 3.0 Thelonious リリースとカスタムメニュー

By ひろまさ | 公開日:2010 年 6 月 20 日投稿時の月齢：8.2 月名：九日月潮汐：小潮

幾度かの RC を経まして WordPress 3.0 Thelonious がリリースされました!

ja（日本語）版リリースに先駆けまして、ここ hiromasa.another も 3.0 にアップグレード。実は少し前から RC 版で動かしておりましたので、トラブルなく動作しました。

3.0 はマルチブログ、カスタム投稿、カスタムメニューの機能追加、カスタム分類強化などなどデータ構造の変更を含む大きなリリースとなっています。

その他の大量の変更内容も含めまして、codex をみると非常によく分かります。

Version 3.0 – WordPress Codex 日本語版

2010年6月17日（木）（米国時間）、WordPress バージョン 3.0 がリリースされました（原文）。このバージョンのバグフィクスについての情報は、Trac のクローズチケット一覧をご覧ください。

カスタム投稿 + カスタム分類は強力な変更ですが、ここのような既に動作しているブログでは品行方正(?!)が必要な部分もありいきなりの導入はちょっと難しい（笑）ですので、まずはカスタムメニューを導入してみました。

WordPress を CMS 的に使う場合、コンテンツがスタックする部分にカテゴリやタグを、変更が累積しない場合にはページを使うというのがあちこちでみる常套手段となっていますが、その統一ナビゲーションメニューをつくるのって結構大変です。

wp_page_manu だと基本ページの一覧しかだせないので、カテゴリリンクとまぜて ol li を構築するのがやっかいです。あとページだけでも順番そろえたりとか結構面倒、てなわけで登場したのが wp_nav_menu。

管理画面の UI 操作で、カテゴリ、タグ、カスタム投稿、その他手動設定のリンクや個別の投稿を選択してメニュー化できます。

nav02

階層構造ももつことができて、対応する CSS を書いてあげればドロップダウンメニューとかもできるようになっています。

使い方は簡単で、今テーマで wp_page_menu とかしているところを、wp_nav_manu テンプレートタグに置き換えればとりあえず、それとなく動くようになっているようです。本来的にはテーマの functions.php で register_nav_menu してあげてからにすると、複数のメニューを任意の位置にだすことができます。

nav01

たとえば、ここのサイトで使っているテーマフレームワーク Thematic の場合は、functions.php に以下を追加すると既存のヘッダページメニューをカスタムメニューに置き換えられます。（そのうち Thematic 本家も対応すると思いますのでこれはサンプルってことで

/******************************************************************************

 * メニュー変更

 *****************************************************************************/

function refrect_setup() {

    // thematic 標準ナビゲーション(wp_page_nav)削除

    remove_filter('thematic_header','thematic_access', 9);

    // テーマにナビゲーション登録

    register_nav_menu('primary', 'ヘッダのところのナビゲーション');

    // thematic ナビゲーション変更

    add_action('thematic_header','add_custom_menu', 9);

function add_custom_menu() {

?>

    <div id="access">

    <div class="skip-link"><a href="#content" title="<?php _e('Skip navigation to the content', 'thematic'); ?>"><?php _e('Skip to content', 'thematic'); ?></a></div>

        <?php wp_nav_menu(array(

            'theme_location' => 'primary'

            , 'container_class' => 'menu'

            ,'menu_class' => 'sf-menu sf-js-enabled')); ?>

    </div><!-- #access -->

<?php

add_action('after_setup_theme', 'refrect_setup');

このソースは Thematic 特有のコードが入っていますが、基本はそれぞれのテーマの functions.php に

register_nav_menu('primary', 'ヘッダのところのナビゲーション');

この1行を追加しまして、テーマでカスタムメニューをだしたい部分に、

<?php wp_nav_menu(array('theme_location' => 'primary')); ?>

とかけば OK のハズです。 primary っていうのが id で任意の名前をつけて複数メニューがある場合はこれで識別します。簡単あるね。

wp_nav_manu には引数で html の id や class を指定できますので、CSS にいい感じに合わせれば良いと思います。

テーマファイルもいじりたくないって場合は、3.0 からこのカスタムメニューを表示するウィジェットが用意されていますので、これをぺたっと張ればサイドバーとかにはすぐだせますね。

nav03

ちなみに、このサイトの上のナビゲーションはカスタムメニュー化しています。ページしか使っていなかったので、見た目「ホーム」が「Home」になっただけですが、順番を UI で変えられるのは便利です。

まずは、是非是非。

Jun 5 2010

WordCamp Yokohama 2010 に行ってきました!

By ひろまさ | 公開日:2010 年 6 月 5 日投稿時の月齢：22.5 月名：弓張月（下弦）潮汐：小潮

5/28 ～ 5/30 にかけまして、WordCamp Yokohama 2010 に参加するために、横浜に行って参りました。ブログ書くのも困るくらい、楽しいことがたくさんありました。みなさま、どうもありがとうございました!

相変わらず、カメラを持って行ったのに１枚も撮っていなかったという事態のため、以下写真はおでこさんのフリッカーより拝借です!

5/28（金）。

夕方に札幌を出発で、20:30 くらいに羽田到着しました。おでこさん達がレセプション後、遊んでくれると言ってくれる勇んで渋谷に。向かおうとしたら、羽田空港で自分の母親と出会う。東京で会うとか意味が分からない。

21:30 渋谷到着。

おでこさんはレセプション中でお忙しそうでしたので、渋谷駅のハチ公さんのところで試験的に若者に混ざってしゃがんでいてみたりする。途中、をかもとにーさんののびた写真が送られてきてわくわくする。

おでこさんと連絡がつき「どーげんざか」と教えてもらうもどこかよく分からない。教えてもらったとおりにウォーク。

ぼーいみーつがーる。広瀬香美がかかった気がする。しかし、ガールではない。

そこには、をかもとにーさんがそびえ立っていた。何を隠そう初対面であります。

いつも通り、ぼくは訳が分からなくなってかんだのは言うまでもない。にいさんは想像通り、いや想像を超えたにいさんであり、お会いできてうれしかった。

おでこさん、てぃあこさん、じゅんさん、をかもとにいさんに歓迎会を開いていただきました。ありがとうございます!!。

5/29(土)。 WordCamp Yokohama 2010 当日。

この日は、おでこさんのプレゼンにちょっとおじゃまするのであった。

WordCamp Yokohama 2010 で「すばらしき WordPress コミュニティーの世界」についてたっぷり語りました！ Odysseygate.com

最初は一人で全部やろうと思っていましたが、どんどん広がるコミュニティの世界を一人ではつたえきれない！と思い、急遽ひろまささん、じゅんさんにもプレゼンをお願いし、リレーセッションに挑戦してみました。いかがだったでしょうか。

どうやらカンペの iPod touch をもつ手が震えていたらしい（気がつかなかった）。でも、３人でできて面白かったです!!

まさにコミニュティーって感じで良かったデス。おでこさんは相変わらずエロく、じゅんさんはいちいち爽やかでした。そりゃもてるっつーの（笑）

その他、会場をちょろちょろしてお手伝いなど。じゃまだったらすいません。。

柏岡さんとは相変わらずエロい感じでした。確実にオーラが。。。

そうこうしているうちに、あっという間に懇親会。

WordPress オフ会 2006年組のみなさん、WordCamp Tokyo 2009年組のみなさん、micc さん、再会できてうれしかったです。お初の皆様もありがとうございました!!

最後ににいさんとぱちり。

いつも同じソースコードみているというのに、初対面という不思議さ。ギャグあとに、ニヤリとするそのお姿はこれからもなにとぞヨロシクお願いしますという気持ちに。

オープンソースとインターネット、そしてみんなが顔を合わせるオフラインミーティングがそろうと、ものすごいパワーを生み出すなぁと思った WordCamp Yokohama 2010 でした。

あ、Nao さんと写真撮ってないじゃないかっ! 不覚（笑）

Apr 29 2010

Apache JMeter で Web サーバのチューニング

By ひろまさ | 公開日:2010 年 4 月 29 日投稿時の月齢：15.4 月名：満月潮汐：大潮

最近、VPS が現実的な値段になってきまして root ありのサーバで LAMP 構築して WordPress なんてこともちょっとがんばればできるようになってきました。

そこで、はてさて安価な VPS どれくらいの性能が出るのかってことでまずはローカルの仮想環境で同じスペックのサーバをたてて試験して、、、みたいなんてときに使えるかなと思い、Web の負荷やシナリオ試験アプリケーション Apache JMeter の使い方とか書いてみたいと思います。

ここでかかれていることはローカル環境向けです。他の方も使っているインターネットサーバに向けては決して負荷試験は行わないでください。

というわけで、とりあえず Apache JMeter。 pure Java のアプリです。 swing ベースなのでちょっと使いづらいですが、Java が動く環境なら動作すると思います。ぼくは Linux と Windows で試しています。

JMeter – Wikipedia

Apache JMeter（アパッチジェイメーター）は、Jakarta Projectにおいて開発されたソフトウェアで、クライアント・サーバシステムのパフォーマンス測定および負荷テストを行うJavaアプリケーションである。

オープンソースかつ多数の機能を備えていることなどから、WebアプリケーションおよびWebサーバの性能測定に広く利用されている。

JMeter – Apache JMeter

Apache JMeter is open source software, a 100% pure Java desktop application designed to load test functional behavior and measure performance. It was originally designed for testing Web Applications but has since expanded to other test functions.

JMeter を起動したらシナリオを作成していきます。

ここでは、WordPress サイトに対して秒間 50 人くらいのアクセス集中を想定してみます。とりあえず右ペインを以下のように。

jmeter01

名称はデフォルトのままにしていますので、「テスト計画」の右クリックからアイテムを探して追加していきます。上からいきます。

CSV Data Set Config。

jmeter02

これは任意の csv ファイルから動的な項目を読み取る場合に使います。子要素にループがあると上から値が読み込まれていきます。なくなると上に戻るようです。ここでは wp.csv としていますがこれは以下のようにアクセスするパスを指定しています。 path という名前をつけているのに注目しておきます。

wp.csv

gallery

about

archives/1134

archives/1124

次は、 HTTP ヘッダマネージャ。

jmeter03

ブラウザを疑似るために、それっぽいヘッダをつけておきます。まぁ全部なくてもいいと思いますが、Web サーバがブラウザだと思ってくれるようにしておきます。

HTTP リクエスト初期値。

jmeter04

この後にでてくる HTTP リクエストの初期値を設定しておきます。これを設定した後はリクエストの設定済みの欄を空で、この値が使われます。ぼくらはローカルと結合環境、統合環境などと工程によって試験環境を分けることが多いのですが、そういうときに振り先をすぐ変更できるので便利です。

ここからが本題、スレッドグループ。

jmeter05

スレッドグループに所属する子要素が同時に実行されます。スレッド数が同時に上がる数で Ramp-Up 期間がそれをどれくらいの時間で実現するかとなります。この場合は、１秒に 50 アクセスを擬似的に再現です。そしてループ回数で何回やるかを決定します。

ちなみに、これよりかなり複雑なシナリオで 200 スレッドあげたら、クライアントのほうがへばりました。ほどほどに（笑）

スレッドグループの子要素１。クッキーマネージャ。

jmeter06

これをいれておくと cookie を食べてくれます。まぁここではなくても動くですが、帯域なども測定したいときは入れておいた方がいいかもしれません。また、認証があるときはこれをいれておくだけで、cookie 食べて次の HTTP リクエストで発行してくれます。

スレッドグループの子要素２。実際にブラウザの代わりにアクセスしてくれるのが、HTTP アクセスです。

jmeter07

パスのところに注目で ${path} が入っています。これが上ででてきた csv 項目を差し込んでいるところです。

あと、スクリーンショットきれてしまったのですが下にある「すべてのイメージとアプレットを繰り返しダウンロードする」にチェックをいれると、通常のブラウザと同様にイメタグとかのアクセスもしてくれます。

結果を表で、ツリーで表示は、いれておくと実行後の結果を格納してくれます。

では、

ここでは、仮想環境使わずにローカル->ローカルで自爆するようにしています。なので、実行中に GUI のシステムモニタをみてみます。

jmeter10

うひょ～。 4コアの CPU 使っていますがいっぱいまであがっています。メモリは平気そうですね。普通は vmstat 1 とかのコマンドでみるといいかもです。

ちなみに、サーバサイドが Java/Tomcat の場合は JMeter からマネージャアプリの manager/status/xml にアクセスすることで Java のヒープとかグラフ化できる機能があります。（トム5 とドキュメントにありましたが 6 でもいけました）

スレッドがすべて完了したら結果系をみてみます。

jmeter09

ツリーの方で、取得した HTML などがみれます。シナリオがうまく動いていないときはこれをみるといいかもです。

表で表示では、http ステータスやアクセス時間や転送量などがみれます。

jmeter08

オールグリーンであることを見ながら、あや、10秒かかっちゃった人いるね、、みたいな。 HTTP のステータスコードがエラー系だと赤になりますので確認します。

一度シナリオができれば、Apache や MySQL のチューニングをしてアクセススピードの平均値をみたりできると思います。ローカル、ローカルでやる場合はクライアント側でも負荷がかかりますのでできれば別マシンでやるほうがいいでしょう、

さて、こんなのつくっていくとコメントポストしてみたいなぁとか、管理画面を複数人で使ったらなどなどでてくるかと思います。（ないか（笑））

ここでは GET ばかりでしたが、JMeter は POST したり GET でもらってきた HTML を後処理、正規表現で hidden 値を変数にもらって次のリクエストで POST したりもできます。

ちょっと正規表現かくの大変ですが、wp_nonce とかもらってみたいな感じですね。また、結果の HTML が正しい出力かどうかなどのアサートもすることができます。

というわけで、ぼくも 512M の VPS ぽい仮想環境をローカルにつくってやってみましょうか。ちなみに、250M 付近の VPS で Apache + PHP はきついですねぇ。動きますがちょっと負荷かけるとメモリ不足で Apache が飛んだ経験があります。メモリ重要。:)

Mar 13 2010

Ecipse PDT 3.5 + xampp + xdebug を使った PHP デバッグ

By ひろまさ | 公開日:2010 年 3 月 13 日投稿時の月齢：27.4 月名：二十八日月潮汐：中潮

たまに WordPress の不具合などでご質問をうけるも、初見のプラグインとかもすぐ直しちゃって「なんでそんなにすぐ分かるの？」と聞かれることありますが、タネを明かせばプログラムのおかしそうなところにデバッグブレイクひっかけて動作を見ているからです。え？この軟弱もの？いいのいいの（笑）

プログラミングの難しい部分の一つは動作が一瞬で終わることにあると思います。普通は机上というか頭の中で考えて、ここの if はこーだから、ここに入って、値はこーなるはず、、なんてやるわけですが、面倒なときはコンピュータに評価させた様子を１行ずつみていく。これがデバッガの役目です。

てなわけで、現在の xampp 最新版 1.7.3 と Eclipse PDT を使ったデバッガの設定方法の紹介です。前書いたのは設定方法が古くなってしまっていますが、とりあえず操作方法などもあるので併せてどうぞ。

hiromasa.docs o) – Eclipse PDT + XAMPP で WordPress の開発環境をつくる (3)

Eclipse PDT と XAMPP に入っている xdebug モジュールを利用すると、実行中のプログラムを任意の位置で停止させ、ソースコードとあわせて１行ずつ動作させるステップ実行や、変数の値の監視や書き換えが行えるウォッチなどのいわゆるデバッグ機能を使うことができるようになります。

まず、xampp の PHP に xdebug というモジュールを読ませる必要があります。現在の xampp-1.7.3 のベーシックパッケージ（lite版には入ってないようです）には xdebug が同梱されているようです。キウイ！

昔、Vista で xdebug 動作させると Apache ごとおちるという問題がありました。今回は Windows 7 と xdebug-2.0.6 でやっていますが大丈夫そうです。

というわけで、php.ini にそれを読ませる設定をしてあげます。

C:\Develop\xampp-win32-1.7.3\php\php.ini

xampp インストールディレクトリの php\php.ini を開きまして、

zend_extension = "C:\Develop\xampp-win32-1.7.3\php\ext\php_xdebug.dll"

xdebug.remote_enable = 1

zend_extention の php_xdebug.dll のコメントを解除。 xdebug.remote_enable = 0 の行があるので、コメントを解除した上で 0 を 1 にします。

これで、準備完了。 Apache を xampp コントロールパネルから再起動して phpinfo をみて xdebug があればOKです。

xdebug01

次は Eclipse PDT の設定。

WordPress などの PHP プロジェクトを開いた上で、実行 –> デバッグの構成。

xdebug05

左ペイン、PHP Web ページを選択し、ペイン上アイコンで新規作成。で、ここがポイント。

xdebug04

ファイルと書いてあるところに、WP の index.php を指定。そして、URL の部分をそのファイルをブラウザでみたときの URL と完全一致させます。デフォルト localhost になっていますが、もしブラウザ http://127.0.0.1/ でアクセスしているときは、PHP Server 欄の構成で localhost を 127.0.0.1 に変更してください。

実ファイルの場所と、ブラウザでの URL の対応を完全に設定するところがキモです。あっていないとブレイクしてくれません。

でもってできたら、ウインドウ->ビュー->その他あたりから「デバッグ」というビューを表示しておきます。デバッグ中であるとここにデバッグスレッドの様子がでますので、開始、停止ができます。

xdebug03

準備ができたら、ソースコードのブレイクしたい位置にブレイクポイントをはります。詳しくは前述の昔の記事をみてみてください。で、実行構成からデバッグボタンをおせばブレイクするハズです。

xdebug02

あとは、F5、F6、F8 での行すすめや、ウォッチでの変数閲覧などをたのしんでいただければ。

管理画面などのプログラムなどログインを伴うときは、セッションの関係でうまくブレイクできないときがあります。このときは以下の記事を参考に URL をいじってデバッグセッションつけてあげてください。

hiromasa.another o)» Blog Archive » wp-jrelated 1.52 リリース (関連取得不具合修正)

動きしか見てないですが、たぶん WP の認証によりデバッグセッションの cookie がきえてしまうのがとまらない原因です。なので GET でつけてあげて再設定すればこの後は何もしなくてもとまるようになります。

この辺 Java のリモートデバッガに比べればおもちゃっぽい部分もありますが、それでも十分実用になっていると思います。

というわけで、

power source » WP ローカル環境の構築 – XAMPP＋Eclipse PDT

今回インストールした XAMPP Windows版 1.7.3 には Xdebug 2.0.6-dev が入ってるので、このまま使えそう。。？

たぶん、いけそう！

Mar 6 2010

WordPress と Eclipse と

By ひろまさ | 公開日:2010 年 3 月 6 日投稿時の月齢：20.0 月名：二十日余の月潮汐：中潮

ぼくは WordPress をごにょごにょさわるときの環境に Eclipse を使っています。主に PHP の解析が楽なので使っているのですが、この記事では言語サポート以外の周辺を紹介してみます。

具体的には Subversion とか DB 操作の部分も統合環境のサポートがうけることができます。まぁまぁ、この手のは慣れの問題も多分に含まれていますのでとりあえずスクリーンショットを楽しんでもらえれば!

Eclipse ベースの Aptana を使われている方も、プラグイン導入で同じように動くかもしれません。（ちなみに依存関係があるので Eclipse に Aptana プラグインをいれたほうが各種 Eclipse プラグインを使うならば楽かもです

WordPress + XAMPP + Eclipse の最新導入方法はぼのをさんがまとめてくださっております!

power source* » WP: ローカル環境の構築 – XAMPP＋Eclipse PDT

WordPressの作業用に、ローカルPCに開発環境を構築。

初めてのことなので、ひろまさ著『Eclipse PDT + XAMPP で WordPress の開発環境をつくる』を読みながら作業し、本日はテキスト第3章「Eclipse PDT プロジェクトへの既存ファイルの取り込み」までで力尽きる。

ありがとうございます、ありがとうございます。キウイを進呈します。

まずはソースコード管理システムの Subversion。

WordPress の本家リポジトリにつないで開発状況をみたり、タグから過去バージョンの取得を行うことができます。

Eclipse にはいくつか Subversion プラグインがあるのですが、ぼくは、Subclipse を使っています。（こちらに同梱の Pure Java Subversion ライブラリが Linux でよく動く印象があるためです）

subclipse.tigris.org

Subclipse is an Eclipse Team Provider plug-in providing support for Subversion within the Eclipse IDE. The software is released under the Eclipse Public License (EPL) 1.0 open source license.

インストールは Eclipse 上から update URL をいれるだけのタイプです。入れると･･･

eclipse03

こんな感じで新規プロジェクトを SVN のリポジトリからつくれるようになりますので、たとえば WordPress のリポジトリを指定してあげるとファイルが取得できます。取得場所を Apache の htdocs の下にしてあげれば WordPress のインストール完了です。

でもって、プロジェクト右クリックのチーム、ヒストリーあたりから改版履歴がみれるようになります。

eclipse06

で、気になった修正があったら diff してみたり。

eclipse07

なるほど、みたいな。

さらに Eclipse には Mylyn という仕組みが備わっていて、ソースコード管理とタスクを結びつけることができます。タスク、、というのはそう、WordPress Trac。

Eclipse Mylyn Open Source Project

Mylyn is a task-focused interface for Eclipse that reduces information overload and makes multi-tasking easy. It does this by making tasks a first class part of Eclipse, and integrating rich and offline editing for repositories such as Bugzilla, Trac, and JIRA.

インストールなど詳細ははぶきますが、MyLyn から接続するリポジトリ種別を Trac として、WordPress Trac の URL を設定。ちなみに他にもいろいろなシステムに接続できます。

eclipse04

WordPress の Trac は API をあけてくれていないので細かいことはできませんが、以下のようになります。

eclipse02

Subversion の修正履歴コメントの # の番号をクリックすると、インターナルで WordPress Trac の該当タスクを開いてくれます。ソース修正とタスクの結びつけができます。

API あけてないのでいつもの画面がでてくるだけではありますが、ワンクリックで修正経緯がみれるので割と便利です。

次は DB 操作系。

こちらもいくつかプラグインがありますが、ぼくは DB Viewer を使っています。

DBViewer Plugin for Eclipse

DBViewer Plugin for Eclipse(以下DBViewer)は、Eclipse(統合開発環境)を拡張するためプラグインです。Eclipseに「データベース・フロントエンド」機能を提供します。（JDBCドライバーを使用しています）

スクリーンショット小さくて見づらいですが、こんな感じで MySQL に接続できて、中を閲覧したり画面からパッチしたり SQL を発行したりできます。

eclipse05

phpMyAdmin と同じような感じですが、たとえば SQL 作成時のオートコンプリートや SQL 履歴保存、SQL 整形とか便利機能がいろいろあります。

eclipse01

というわけで、こんなことをしていると、、、

そう、、事務所でも家でも Eclipse な時期も多いわけです。。

いろいろな現場で使えるようになっているシステム群ですので、若干複雑な部分もありますが、取り入れて便利そうなところがあったら使ってみてください。

Feb 22 2010

WordPress Thematic フレームワークで hiromasa.another をつくる

By ひろまさ | 公開日:2010 年 2 月 22 日投稿時の月齢：8.0 月名：九日月潮汐：小潮

最近、ウィジェットは入れるは JavaScript でひゅんひゅん動くはで、WordPress 近代化が図られている(!?)このサイトですが、何を隠そう IE8 でみるとおかしかったのです。しょうがないので、IE7 エミュレーションしていたのですが、気にくわなかったのでついにテーマを書き直すことに!

テーマといえばおでこさんでおなじみ、Thematic テーマフレームワーク。目標は、旧 hiromasa.another を style.css と functios.php だけで再現すること、、、、なのでご覧のサイトは既に Thematic 版になっていますが見た目はほとんど変わっていません。

Thematic とはなんじゃという方や、初めて使う方はおでさんのスライドが良いっす!

Thematic : A WordPress Theme Framework のススメ

View more presentations from Odyssey Hanover.

テーマフレームワークは、WordPress のお約束的な部分が既にできていて、それに対して追加設定をするような形でテーマを構築していくものです。ループなど基本的なことはもちろん、コアやプラグインが要求するようなテーマの仕様がきちんと設定されています。

まっさらからフルスクラッチすると忘れがちな部分や大変な部分が既に構築済みなので、PHP コードに関して楽ができます。また、ぼくのような CSS がよく分からないものにも、リセットや段組などのノウハウ的な部分が盛り込まれていますので便利に感じました。

新しいテーマの構築は、style.css への CSS の追加適応とたくさんの位置に配置できるウィジェットでほぼ望みのサイトはできると思いますが、「ウィジェットが配置できないところに何かを出したい」とか、「表示文言を変えたい」とかいったときに、さらに追加で２つの方法をとることができます。

ひとつは Thematic 本体から修正したいテンプレートファイルをコピーしてきて書き換えること。もうひとつは、WordPress のフックの仕組みをつかって functions.php でプログラム的に書き換えることです。

どちらの方法をとっても良いと思いますが、ここでは後者を紹介してみます。

style.css と functions.php だけでサイトを構築するのは極端ですが、functions.php 作戦はファイルを修正するより楽にできる部分もありますので、いくつかのコードが参考になれば。

まず基本的なところですが、Thematic の本体にはあちこちで do_action もしくは apply_filter をしているところがります。これを自分の functions.php に追加したプログラムでフックして動作を書き換えるイメージです。どんなフックがあるかは、修正対象部分の Thematic 本体のプログラムを追っていけば大抵は見つけることができます。

以下、そんなコードの例です。（自分のテーマ内の functions.php にかきます）

パターン1。どっかに何かを追加。

hiromasa.another のヘッダには kougabu さんのサムネイルが４つでていますが、このようなことをするには Thematic 本体で do_action をしているところをみつけて、そこに echo で HTML を差し込みます。（ここでは thematic_header というフックを使いました）

/*************************************************************

 * ブログヘッダー部分に kougabu のサムネイルいれる

 *************************************************************/

function head_kougabu() {

    echo '<div id="header-kougabu">' . "\n";

    echo '<ul style="display: inline;">' . "\n";

    kougabu_get_images('before=<li style="display: inline;">

        &post_id=662&count=4&max_width=70&max_height=70');

    echo '</ul>' . "\n";

    echo '</div>' . "\n";

add_action('thematic_header', 'head_kougabu', 6);

パターン2。不要な文字列を削除。

たとえば、記事の下に出ている記事情報メタ文字列を消すコードです。ここではついでに消したトラックバック URL を別な場所（コメントフォームの下に動かしています）

/*************************************************************

 * トラックバックの URL をコメントフォームの下に移動

 *************************************************************/

function trackback_add_url() {

    echo '<div id="trackbacks">' . "\n";

    echo '<h3>Trackback</h3>' . "\n";

    echo '<p>' . trackback_url() . '</p>' . "\n";

    echo '</div>' . "\n";

function trackback_delete_default($content) {

    return '';

add_action('thematic_belowcomments', 'trackback_add_url');

add_filter('thematic_postfooter', 'trackback_delete_default');

パターン３。不要なフックの削除。

ある状態の時に、Thematic にデフォルトで登録してあるフックを呼ばなく(delete)する場合です。たとえば、シングルページの時はナビゲーションを出さない、など。ポイントはいきなり remove_action するのではなく、template_redirect くらいまで実行を遅延させることです。

自分の functions.php は Thematic の functions.php より先に呼ばれます。なので、いきなり remove は無理、なのです。で、 init くらいでもいいかなって感じなのですが、ここだとまだ is_single が確定できてないので、適当に template_redirect でやってみました。

/*************************************************************

 * 不要なナビゲーション削除

 *************************************************************/

function navigation_delete_post() {

    remove_action('thematic_navigation_above', 'thematic_nav_above', 2);

    if(!is_single()) return;

    remove_action('thematic_navigation_below', 'thematic_nav_below', 2);

add_action('template_redirect', 'navigation_delete_post');

パターン４。ある特定ページだけサイドバーを消す。

ここのサイトの Gallery ページでやっている部分です。 Thematic のコードを追っていくと制御できるコードがありました。 thematic_sidebar に false を返すとサイドバーが非表示になるようです。

/*************************************************************

 * ギャラリーページだったらサイドバーをなし

 *************************************************************/

function kougabu_delete_sidebar() {

    $show = true;

    // kougabu page : 182

    if(is_page('182')) {

        $show = false;

    return $show;

add_filter('thematic_sidebar', 'kougabu_delete_sidebar');

パターン５。パターン２といっしょですが、ある文字列を修正加工。

フッター文字列にクエリー数をだしています。

/*************************************************************

 * フッターにクエリー数

 *************************************************************/

function fotter_add_query($content) {

    global $wpdb;

    $timer = "({$wpdb->num_queries} queries.";

    $timer .= timer_stop(false) . "seconds.)";

    return $content . ' ' . $timer;

add_filter('thematic_footertext', 'fotter_add_query');

などなど。

ここのサイトでは他にも、記事タイトルにカレンダーだしてり、いろいろしていますがパターンはほぼ全ていっしょです。

ひとつだけ違うのが、コメント、トラックバック・ピンバックの表示で、Thematic 標準ではそれぞれ分けた形で表示となるのですが、hiromasa.another はずらっと並べる形にしていたので、それは comment.php をコピーして修正しています。

functions.php でも無理矢理やればできたのですが、おそらくは Thematic 作者さんの意図外でしたのでやめました。こういうときは素直にいったほうが良さそうです。

てなわけで、

何を隠そう、ぼくは CSS がなんちゃってしか分からないのでそちらに時間がかかりました。。まだおかしいところありますが、とりあえず。。

thematic01

制作は Linux 上の Firefox で確認。一応、IE6 もそれなりにでるようにしています。ぼくは VMWare 上の XP をわざと IE6 のままにしていてそれを、Unity で Linux のデスクトップにだして確認する方法をとっています。

テーマフレームワークは CSS さくさくできる方なら、WordPress がそれほど分からなくてもテーマつくれちゃいますね。あとは、PHP をつかって細かい差し込みをしていくイメージでしょうか。

ためしてがってん。

がってん、がってん、がってん。

Feb 14 2010

使っている WordPress プラグイン 2010年版

By ひろまさ | 公開日:2010 年 2 月 14 日投稿時の月齢：0.7 月名：新月潮汐：大潮

たまに古い企画を持ち出してくる .another です。みなさまいかがお過ごしでしょうか(?)。ということで、過去 2006 年に一度やったらしい「使っている WordPress プラグイン」再び。

hiromasa.zone ) » WordPress プラグイン

hiromasa.zone で使っている WordPress のプラグイン。画面に見えるものを紹介します。

とりあえずぱっとブラウザから見えるものからいきます!

ちっちゃくてすいません。。しかも画像あれた、、しょんぼり。。

plugins02

まずはサイドバー。

全てウィジェットです。吹き出しがないのは WordPress 標準のものを使っています。テキストウィジェットはなんでもはれるので便利ですね。

WordPress Plugins/JSeries » wp-kotodama (投稿コメント表示ウイジェット)

サイドバーなどに、最近投稿されたコメント者名とその親記事へのリンクを出力するウィジェットです。 MySQL 5 系で動作します。

WordPress Plugins/JSeries » wp-kyodeki (本日人気の記事表示ウィジェット）

サイドバーなどに、本日人気の記事表示の一覧とそのアクセス回数を表示するウィジェットです。

WordPress Plugins/JSeries » Kougaburari (ランダムポスト・スライドショー)

画像付きアーカイブ表示プラグイン「wp-kougabu」のランダムポスト機能を使用して、スライドショーを表示するプラグインです。

記事のタイトルに入れている系。

WordPress Plugins/JSeries » wp-hatena

WordPress の各エントリを「はてなブックマーク」するクイックリンクを自動的に挿入するプラグインです。また、del.icio.us のクイックリンクも追加できます。

WordPress Plugins/JSeries » wp-otenki

WordPress のエントリにLWWSから取得したお天気情報を付加します。

Chameleon Cyber » MoonPhase

デフォルトでは月相イメージと月齢が投稿日時の後に表示されます。

Date Stamp « stevelam.org

This is a plugin for WordPress that displays the date/time in a stamp fashion. It has been tested with and configured for K2. It might work with other themes with few modifications.

記事の中。

WordPress Plugins/JSeries » wp-tegaki

投稿エントリ内のタグで指定した文字列を指定の TrueType フォントで出力する WordPress 用プラグインです。

記事の外。

WordPress Plugins/JSeries » wp-kougabu （画像付きアーカイブ）

WordPress の投稿やページにアップロードされた画像ファイルを抽出し、サムネイルでページに一覧表示するショートコードを提供します。過去に投稿した画像をサイトに一覧表示しそこから本文にリンクされる、画像付きアーカイブのようなプラグインです。

WordPress Plugins/JSeries » WordPress Related Post for Japanese (関連投稿表示プラグイン)

Yahoo! Japan が提供する日本語形態素解析APIを利用して、WordPress の投稿をアナライズし、自動的に投稿の下部に「関連する記事」へのリンクを付与するプラグインです。

コメント。