月: 2013年5月

前回までで WordPress プラグイン開発用の PhpStorm プロジェクトが作成されました。 今回はバージョン管理とデバッグ関連ですが、いろいろと開発環境の前提があるのでまだご覧になっていない方は初回よりご確認ください。

ちょっとその前に

前回説明していませんでしたが、Settings ダイアログはちょくちょく呼び出すことになると思いますが、メニューよりもアイコンから呼び出す方が簡単ですね。 下のアイコンが Settings なのですが、表示されていない場合は「View」-「Toolbar」で表示されます。

また、Settings ダイアログ左上の入力欄に文字列を入れると該当するメニューのみの表示となるので便利です。

Git リポジトリの追加

さて、本題です。

自作プラグインのコードを PhpStorm プロジェクトに追加します。 具体的には Git リポジトリを wordpress/wp-content/plugins の下に clone します。 Git for Windows を使っても良いですが、PhpStrom の中から「VCS」－「Checkout from Version Control」－「Git」で行うこともできます。 私の場合、対象は Thin Out Revisions と Standard Widget Extensions の 2つです。 このように、一つの PhpStorm プロジェクト内で複数の Git リポジトリを使っても問題ありません。

外部コマンドで clone したときはそのことを PhpStorm に認識させるため Settings ダイアログの「Version Control」の画面でディレクトリを追加します。

ここまでで Git のメニューが表示されるようになり、様々な操作が IDE 内から出来るようになります。

私は家では Git 主体で使っているのですが、WordPress.org で管理されているリポジトリを直接扱いたいのであれば「VCS」－「Checkout from Version Control」－「Subversion」で開発を始めることができます。 ただし、頻繁なコミットは嫌われるらしいので、個人的には git-svn とか git merge –squash を覚えて Git で管理するようにしたい今日この頃です (参考記事)。

PHP のデバッグ

PHP のデバッグをし始めるのは思ったより簡単でした。

まず、準備として JetBrains のブックマークレット作成用サイトにアクセスし、ブックマークレットを作成します。 IDE key は PHPSTORM のままでオッケーなので、Xdebug の方の「Generate」をクリックし、表示されたリンクをブラウザにブックマークします。 とりあえず、「Start debugger」と「Stop debugger」が最低限ですが、一通りブックマークしておきましょう。 以下のようにブックマークツールバーに入れておくといいのではないでしょうか。

後は PhpStorm がデバッガからの情報を待ち受ける状態としてからデバッガをスタートします。 具体的には電話アイコン (「Start Listen PHP Debug Connections」) をクリックしてから、先ほどの「Start debugger」ブックマークをクリックするだけです。

JavaScript のデバッグ

続いて JavaScript のデバッグです。 最初に言っておくと .php の Web ページでの JavaScript のデバッグはまだうまく出来ていません。 しかし、.html ページでの JavaScript 実行については次の手順で可能です。

まずは JavaScript のデバッグに必要な設定を行います。 JavaScript のデバッグは Firefox と Chrome に対応しています。 どのブラウザをデフォルトとするかは Settings の「IDE」－「Web Browsers」で設定できますが、初期値は OS デフォルトなので、OS デフォルトのブラウザを Firefox か Chrome にしていれば設定不要です。 ただし、次で説明するデバッグ用 Configuration の一部として個別に保存されるので、必要に応じてこれを複数作って使い分けます。

では Configuratin を作成してみましょう。 メニューの「Run」－「Edit Configurations」を選択し「Run/Debug Configurations」ダイアログを表示します。 そして、「＋」ボタンを押し「JavaScript Debug」－「Remote」を選択します。

Local を選択するとスタートポイントとなる HTML ファイルが必須となる (PHP ファイルは NG) ので、今回は Remote の方を選んで URL 指定を行っています。 Local と言ってもファイルシステムではなくローカルサーバーを通して .html ファイルにアクセスすることになるので (当たり前か…)、.html ファイルからスタートできるのであればこちらで Configuration を作成しましょう。

作成したら、ツールバーで使用する Configuration を選択しておきます。(Edit Configurations もここからできます）

次にブラウザ側の設定です。 ヘルプによると最初のデバッグを開始すると拡張機能がブラウザに自動的にインストールされるとのことで特に設定は不要なはずです。 Firefox は確かにその通りだったのですが、Chrome でやったときはうまくいかなかったので手動でウェブストアより JetBrains IDE Support をインストールしました。

さあ、あとは Debug を開始すればよい、…はずなのですが、先に書いた通り .js の呼び出し元が .php ファイルだともう一工夫必要な様でうまく行きません。 それでは .html + .js ならばすんなり行くと思いきや、debugger 文をブレークポイントの前に入れないと止まらなかったりもします。 JavaScript 関連はいろいろ試してからまた記事にしたいと思います。

LiveEdit

ついでと言っては何ですが、せっかく　JetBrains IDE Support を入れたのでもう一つ機能を紹介しておきましょう。 Settings ダイアログで「Plugins」を表示し、「Install JetBrains plugin…」より「LiveEdit」をインストールします。 するとブラウザでサーバー上のページ (http://localhost/…) を表示し、デザインをリアルタイムに確認しながら PhpStorm 上で .html ファイルを編集できるようになります。 やり方は「Open in Browser」などで PhpStorm からブラウザを呼び出して表示するだけです。

次はテストについて書く予定です。

PhpStorm 環境構築編の 2回目です。 前回で、PhpStorm と XAMPP、WordPress の基本インストールを終了しました。 今回は WordPress プラグイン開発用の PhpStorm プロジェクトを作成します。

プロジェクトの作成

External Libraries として WordPress のコアコードを参照させるやりかたもあるようですが、今回は WordPress 全体をプロジェクトとしてしまいます。 その場合もプラグインごとに Git (Subversion) リポジトリを管理することができるので問題ないでしょう。 では操作を進めて行きます。

PhpStorm を起動すると初回はプロジェクト作成画面が表示されます。 「Create New Project from Existing Files」を選択します。

続いてサーバーとソースファイルの構成を選択します。 今回は「Web server is installed locally, source files are located under its document root.」を選択し、直接 Web サーバーの参照するファイルを編集対象とします。 ここの選択を変えることでリモートサーバーにも対応できます。

WordPress インストールディレクトリを選択してから「Project Root」ボタンを押します。 「Next」を押すのはその後です。

サーバーを指定します。 今回は初回なので新規サーバーエントリとしてローカルサーバーに名前を付け、ルート URL (「http://localhost」)を指定します。 次回以降は新規追加だけでなく登録済みサーバーを選択することもできるようになります。

最後にプロジェクトルートに対応する Web URL のパスを入力します。今回は「/」です。

以上でプロジェクトが作成されます。

PhpStorm Settings

続いて PhpStorm での設定です。 「File」－「Settings」と選んでダイアログを表示し、もろもろを設定していきます。

「PHP」

「Interpreter」の右隣の「…」をクリックした後に表示される画面で「＋」ボタンを押し XAMPP 用のエントリを追加します。 PHP ホームディレクトリを指定し、Xdebug を「Debugger」として選んでおきます。

「Include path」も必要に応じて設定しておきます。 これで「PHP」のページは以下のようになったはずです。

「PHP」－「Debug」

「Xdebug」のところのポートの設定を前回編集した php.ini の設定と合わせます。

「Version Control」－「Git」

私は Git for Windows (msysgit) を使用しています。 この git.exe のパスを正しく設定します。 設定したら「Test」ボタンを押して正常性を確認しておきましょう。

ちなみに Subversion の方は外部コマンドを用意しなくても SVNKit を用いたクライアント機能が PhpStorm に実装されています。 WordPress.org のリポジトリは Subversion で管理されていますが、そちらにも対応できます。

私の場合、Git で仕上げたソースコードを Subversion で WordPress.org にチェックインするという何となくイケてない方法を採っているので、ソース管理をどうやって行くかは個人的な課題だったりします。(追記: その後、git-svn を使っています)

次回は Git (Version Control) 機能とデバッグ機能関連を設定します。

まじめに WordPress のプラグイン開発環境をつくろうと思い立ち、PhpStorm + XAMPP を導入しました。 PhpStorm はリモートのサーバーにも対応していますが、ヘルプファイルの記述はローカルサーバーでテストを行いリモートサーバーにデプロイする想定で書かれています。 ですので、XAMPP をインストールし、ローカルに PHP のデバッグが行える環境を構築することにしたのです。

この環境構築手順を数回にわたって紹介します。 WordPress のプラグインやテーマを開発されている方はもちろん PHP 開発者の方にも参考となるのではないかと思います。 ちなみに私の場合、これまでのプラグイン開発は Emacs + タグファイル (デバッガなし) で行っていました…。

さて、今回は初期インストールです。 一連の記事は PhpStorm 6.02、XAMPP Portable 1.8.1、Windows 7 をベースとして書いています。

PhpStorm のインストール

PhpStorm のインストーラーはPhpStorm のサイトで「Get PhpStorm 6」というボタンを押すことで入手できます。 インストール自体は特に難しいことはないので割愛します。 さて、PhpStorm を起動してみましょう。

初回起動時に既存設定をインポートするか聞かれますが、今回初導入なので「I do not have a previous version of Phpstorm or I do not want to import my settings」を選択します。

ライセンスは「User name」も正しく入力しましょう。 ユーザー名とライセンスキーが正しく入力されれば有効期限が表示されるはずです。 「Evaluate for free for 30 days」を選んで30日間評価用に使うこともできます。

ライセンス同意確認は「Accept all terms of the license」をチェックして「OK」を押します。

IDE 初期設定画面がでるので好きなものを選択します。 とりあえず私はキーマップとして Emacs を選択し他はデフォルト値のままにしました。

この後プロジェクト作成画面が表示されますが、続きは次回以降に説明します。 また、初回起動時に Windows ファイアウォールの警告が出るかも知れません。 「プライベートネットワーク」を選んでアクセス許可しておきましょう。

XAMPP のインストール

XAMPP については for Windows の XAMPP portable lite を導入しました。 このポータブル版ではメールサーバーなどいくつかのパッケージが省略されていますが、WordPress プラグイン開発を行うには十分です。

XAMPP のインストールも特に難しいことはなく、インストーラパッケージをダウンロードし実行するだけです (環境によっては Microsoft Visual C++ 2008 SP1 Redistributable Package (x86) をインストールする必要があるようです)。 最後に以下のようなメッセージが表示されます。 レジストリエントリを持っておらず、アンインストールは手作業でファイル削除するようにとのことです。

サーバーをスタート／ストップさせる操作にはインストール先ディレクトリ直下にある xampp-control.exe を起動して使用します。 こちらも Windows ファイアーウォールの警告がでるかも知れませんが、PhpStorm の場合と同様に許可しておきます。

Xdebug の有効化

PhpStorm は PHP 用デバッガとして Xdebug と Zend Debugger に対応しています。 XAMPP の PHP パッケージには Xdebug が含まれているのでこれをそのまま使用します。

ヘルプを参照しながら php.ini の Xdebug のセクションを編集します。 私の場合は以下のようになりました。 (追記: ちなみに XAMPP Portable 1.8.3 ではパスに「c:」をつけないと XDebug が動きませんでした。)

[XDebug]
zend_extension = "\xampp-portable\php\ext\php_xdebug.dll"
xdebug.remote_enable = 1
xdebug.remote_port = 9000
xdebug.profiler_enable = 1
xdebug.profiler_output_dir = "\xampp-portable\tmp"

WordPress のインストール

PhpStorm の IDE に統合された Subversion を使って最新ソースを追いかけることもできますが、とりあえず 3.6 ベータ3 を導入することにします。

1. phpMyadmin (http://localhost/phpmyadmin/) を使ってデータベースとユーザーを追加します。 データベースの Collation は utf8_general_ci を選択しました。
2. WordPress の ZIP ファイルをダウンロードして C:\xampp-portable\wordpress として展開します。
3. wp-config.php を編集して DB_* と WP_DEBUG あたりを設定します。
4. httpd.conf を編集して DocumentRoot を /xampp-portable/wordpress に変更し、Directory の設定を追加します (後述)。
5. http://localhost/wp-admin/install.php にアクセスしインストールを実行します。

httpd.conf は DocumentRoot を /xampp-portable/wordpress に変え以下を追加します。 XAMPP Control Panel からエディタ (デフォルトは Notepad) を起動して編集することもできます。

<Directory "/xampp-portable/wordpress">
    Options Indexes FollowSymLinks Includes ExecCGI
    AllowOverride All
    Require all granted
</Directory>

次回に続きます。

連休中に iPad に WordPress アプリを入れて、ついでにサイトに Jetpack プラグインを導入しました。 WordPress アプリに Jetpack プラグインを組み合わせることで統計情報が参照可能になります。 このとき、WordPress.com のアカウントが必要です。

さて、この Jetpack プラグインですが、他に OGP メタタグを出力するプラグインと組み合わせると二重に OGP メタタグを出力してしまうという記事をみかけました。 私も Facebook プラグインを使っているので慌てて調べると確かに二重出力しています。 そこで Jetpack の設定でこれを抑止できないかと管理画面を確認したのですが、特に設定はないようです。

よその記事をそのままうのみに出来ない (fb_xd_fragment の件もありました！) ので、コードを覗くと jetpack.php に以下のような関数がありました。 Jetpack のバージョンは 2.2.5 です。

    public function check_open_graph() {
        if ( in_array( 'publicize', Jetpack::get_active_modules() ) || in_array( 'sharedaddy', Jetpack::get_active_modules() ) )
            add_filter( 'jetpack_enable_open_graph', '__return_true', 0 );

        $active_plugins = get_option( 'active_plugins', array() );

        $conflicting_plugins = array(
            'facebook/facebook.php',                                                // Official Facebook plugin
            'wordpress-seo/wp-seo.php',                                             // WordPress SEO by Yoast
            'add-link-to-facebook/add-link-to-facebook.php',                        // Add Link to Facebook
            'facebook-awd/AWD_facebook.php',                                        // Facebook AWD All in one
            'header-footer/plugin.php',                                             // Header and Footer
            'nextgen-facebook/nextgen-facebook.php',                                // NextGEN Facebook OG
            'seo-facebook-comments/seofacebook.php',                                // SEO Facebook Comments
            'seo-ultimate/seo-ultimate.php',                                        // SEO Ultimate
            'sexybookmarks/sexy-bookmarks.php',                                     // Shareaholic
            'shareaholic/sexy-bookmarks.php',                                       // Shareaholic
            'social-discussions/social-discussions.php',                            // Social Discussions
            'social-networks-auto-poster-facebook-twitter-g/NextScripts_SNAP.php',  // NextScripts SNAP
            'wordbooker/wordbooker.php',                                            // Wordbooker
            'socialize/socialize.php',                                              // Socialize
            'simple-facebook-connect/sfc.php',                                      // Simple Facebook Connect
            'social-sharing-toolkit/social_sharing_toolkit.php',                    // Social Sharing Toolkit
            'wp-facebook-open-graph-protocol/wp-facebook-ogp.php',                  // WP Facebook Open Graph protocol
            'opengraph/opengraph.php',                                              // Open Graph
            'sharepress/sharepress.php',                                            // SharePress
        );

        foreach ( $conflicting_plugins as $plugin ) {
            if ( in_array( $plugin, $active_plugins ) ) {
                add_filter( 'jetpack_enable_open_graph', '__return_false', 99 );
                break;
            }
        }

        if ( apply_filters( 'jetpack_enable_open_graph', false ) )
            require_once dirname( __FILE__ ) . '/functions.opengraph.php';
    }

一瞬、「ここに挙げられているプラグインがアクティブならば、ちゃんと OGP タグ出力は抑止されるのでは？」と思ったのですが、よく見るとマルチサイトでネットワークレベルで他のプラグインをアクティベートしたときはこのチェックから漏れてしまいます。

従って (現行バージョンの Jetpack では) この二重出力問題はマルチサイト環境のみで生じます。 ワークアラウンドは、ネットワークレベルで他のプラグインをアクティブにするのはやめて個別のサイトでアクティブにすることです。 実際に私も Facebook プラグインをこの方法でアクティベートすると問題は解消されました。 ちなみに OGP 出力については fb_xd_fragment の件もあるので Facebook プラグインが私のお勧めです。

参考までに書くと、ネットワークレベルでアクティベートされたプラグインは以下のオプションの内容を参照することで確認できます。

get_site_option( 'active_sitewide_plugins') 

パッチをつくって送ってみようかな…。