ウェブデバッグツールバーをカスタマイズする方法

symfonyのウェブデバッグツールバーは開発者のベストフレンドの1つです。開発環境で使うとき常にブラウザで手軽にアクセスできます。これは現在のページに関して知る必要があるすべての情報をあなたに伝えアプリケーションのデバッギングを楽にします。そして最高のニュースウェブデバッグツールバーは完全に思い通りに設定できることです。

ウェブデバッグツールバー

設定無しでは、デフォルトのツールバーの外見は次の通りです:

ツールバーはパネルで構成されます。それぞれのパネルはタイトルとオプションのパネルの内容で構成され、パネルはPHPのオブジェクトで表現されます。デフォルトでは、7つのパネルが存在します:

ツールバーをカスタマイズする

アプリケーションもしくはプロジェクトの設定ファイルの中でdebug.web.load_panelsイベントをリスニングすることでウェブデバッグツールバーをカスタマイズできます。次のコードはフロントエンドの設定クラスの中でこのイベントをリスニングする方法を示しています:

<?php

class frontendConfiguration extends sfApplicationConfiguration
{
  public function configure()
  {
    // ...

    $this->dispatcher->connect('debug.web.load_panels', array($this, 'configureWebDebugToolbar'));
  }
}

この設定を適切に行うことで、symfonyはウェブデバッグツールバーを初期化するときに自動的にconfigureWebDebugToolbar()メソッドを呼び出します。このメソッドはパネルを削除、置き換えもしくは追加できます。

すべてのリスナーに関しては、symfonyはイベントを引数としてconfigureWebDebugToolbar()メソッドを呼び出します。イベントの題目は操作したいウェブデバッグツールバーのオブジェクトです:

<?php

class frontendConfiguration extends sfApplicationConfiguration
{
  public function configure()
  {
    $this->dispatcher->connect('debug.web.load_panels', array($this, 'configureWebDebugToolbar'));
  }

  public function configureWebDebugToolbar(sfEvent $event)
  {
    $webDebugToolbar = $event->getSubject();
  }
}

パネルを削除する

パネルを削除するためには、次のようにパネルの名前でremovePanel()メソッドを呼び出します:

<?php

class frontendConfiguration extends sfApplicationConfiguration
{
  // ...

  public function configureWebDebugToolbar(sfEvent $event)
  {
    $webDebugToolbar = $event->getSubject();

    $webDebugToolbar->removePanel('memory');
  }
}

パネルを置き換えるもしくは追加する

パネルを置き換えるためには、既存の名前でsetPanel()メソッドを呼び出します。

パネルを作るためには、同じsetPanel()メソッドを呼び出しますがユニークな新しい名前を渡します。

もちろん、同じ情報を追加もしくは削除するために既存のパネルを拡張することができます。説明のために、リスポンスオブジェクトの範囲内に登録されたJavaScriptとスタイルシートのファイルを表示する真新しいパネルを作ってみましょう:

<?php

class frontendConfiguration extends sfApplicationConfiguration
{
  // ...

  public function configureWebDebugToolbar(sfEvent $event)
  {
    $webDebugToolbar = $event->getSubject();

    $webDebugToolbar->setPanel('assets', new sfWebDebugPanelAssets($webDebugToolbar));
  }
}

sfWebDebugPanelAssetsクラスを作る必要があります。すべてのパネルクラスはsfWebDebugPanelを拡張しなければならず少なくとも3つの抽象メソッドを実装する必要があります:

• getTitle(): ウェブデバッグツールバーに表示されるHTMLを返します。これがnullを返すとき、パネルは表示されません。
• getPanelContent(): パネルのHTML表現を返します。これがnullを返すとき、タイトルはクリックできません。
• getPanelTitle(): 表示されるときにパネルのタイトルを返します。

この情報を頭の中に入れた上で、下記のコードによって最少のパネルがおそらく動作するはずです:

<?php

class sfWebDebugPanelAssets extends sfWebDebugPanel
{
  public function getTitle()
  {
    return 'assets';
  }

  public function getPanelTitle()
  {
    return 'Stylesheet and JavaScript files from sfWebResponse';
  }

  public function getPanelContent()
  {
    return null;
  }
}

これはウェブデバッグツールバーの中で新しい'assets'のエントリを表示しますが、パネルの内容は空なのでテキストをクリックすることはできません。

内容をパネルに追加して少し面白いものにしてみましょう。レスポンスオブジェクトは2つのメソッド、getJavascripts()とgetStylesheets()を持ち、3つのメソッドはレスポンスオブジェクトによって含まれるJavaScriptとスタイルシートのファイルの配列を返します。

getPanelContent()メソッドはパネルの内容をコンストラクトするためにこれらの2つの配列をイテレートしてこれをHTMLの文字列として返します:

<?php

class sfWebDebugPanelAssets extends sfWebDebugPanel
{
  // ...

  public function getPanelContent()
  {
    $response = sfContext::getInstance()->getResponse();
    $html = '';

    if ($stylesheets = $response->getStylesheets())
    {
      $html .= '<h2>Stylesheets</h2><ul>';
      foreach ($stylesheets as $file => $options)
      {
        $html .= sprintf('<li><strong>%s</strong> %s</li>', stylesheet_path($file), count($options) ? '('.var_export($options, true).')' : '');;
      }
      $html .= '</ul>';
    }

    if ($javascripts = $response->getJavascripts())
    {
      $html .= '<h2>Javascripts</h2><ul>';
      foreach ($javascripts as $file => $options)
      {
        $html .= sprintf('<li><strong>%s</strong> %s</li>', javascript_path($file), count($options) ? '('.var_export($options, true).')' : '');;
      }
      $html .= '</ul>';
    }

    return $html;
  }
}

symfonyのページの結果は次の通りです:

独自のパネルをプラグインとしてパッケージにする

新しいパネルをパッケージしてsymfonyのプラグインとして配布することもできます。

ユーザーがプラグインをインストールするとき、以前我々が行ったようにイベントリスナーを追加するために設定クラスを変更してよいか問い合わせることができますが、次のようにプラグインのconfig.phoファイルの中でweb.debug.load_panelsイベントに接続することもできます:

<?php

// ...

require_once '/path/to/sfWebDebugPanelAssets';

$this->dispatcher->connect('debug.web.load_panels', array('sfWebDebugPanelAssets', 'listenToAddPanelEvent'));

それから、listenToAddPanelEvent()メソッドをsfWebDebugPanelAssetsクラスに追加します:

class sfWebDebugPanelAssets extends sfWebDebugPanel
{
  static public function listenToAddPanelEvent(sfEvent $event)
  {
    $event->getSubject()->setPanel('assets', new sfWebDebugPanelAssets($event->getSubject()));
  }
}

この方法によって、開発者からの変更を行わずにパネルがウェブデバッグツールバーに追加されます。

作業はこれでお終いです。新しいweb.debug.load_panelsイベントのおかげで、望む方法でウェブデバッグツールバーを自由にカスタマイズできます。詳しい情報を知りたいもしくは詳しい仕組みを学びたいのであれば、組み込みのパネルに関するコードを閲覧できます。