複雑なカスタムフィールドグループのサンプル

サンプルを使うと、画像のようなレイアウトにできます


入力フォーム、テキストエリア、画像の項目を含んだカスタムフィールドグループのサンプルです。
カスタムフィールドグループを利用したい方はぜひ参考にしてください。

<table class="js-fieldgroup-sortable">
  <!-- BEGIN bfd_field_unit_group:loop -->
  <tr class="sortable-item">
    <td class="item-handle">
      <img width="17" height="17" class="arrowHandle" src="/images/admin_arrow_vertical.gif" />
        <br />
      (&nbsp;<a class="item-delete" href="#" onclick="return false;">×</a>&nbsp;)
    </td>
    <td>
      <table class="nestTable">
        <tr>
          <th>小画像</th>
          <th>小見出しとURL</th>
          <th>小概要</th>
        </tr>
        <tr>
          <td>
            <!-- BEGIN bfd_field_unit_image:veil -->
            <img src="%{ARCHIVES_DIR}{bfd_field_unit_image@path}" /><!-- END bfd_field_unit_image:veil --><br />
            <label><input type="checkbox" name="bfd_field_unit_image@edit[{i}]" value="delete" /> 削除</label>
            <input type="hidden" name="bfd_field_unit_image@old[{i}]" value="{bfd_field_unit_image@path}" />
            <input type="file" name="bfd_field_unit_image[{i}]" />
            <input type="hidden" name="bfd_field_unit_image@width[{i}]" value="200" />
          </td>
          <td>
            <input type="text" name="bfd_field_unit_lead[{i}]" value="{bfd_field_unit_lead}" size="30" />
            <br /><br />
            %{HTTP_ROOT}
            <br /><input type="text" name="bfd_field_unit_url[{i}]" value="{bfd_field_unit_url}" size="15" />
          </td>

          <td>
            <textarea name="bfd_field_unit_summary[{i}]" cols="40" rows="5" class="formSizeL">{bfd_field_unit_summary}</textarea>
          </td>
        </tr>
      </table>
    </td>
  </tr>
  <!-- END bfd_field_unit_group:loop -->
  <tr class="sortable-item item-template">
    <td class="item-handle"><img width="17" height="17" class="arrowHandle" src="/images/admin_arrow_vertical.gif" /></td>
    <td>
      <table class="nestTable">
        <tr>
          <th>小画像</th>
          <th>小見出しとURL</th>
          <th>小概要</th>
        </tr>
        <tr>
          <td>
            <input type="file" name="bfd_field_unit_image[]" />
            <input type="hidden" name="bfd_field_unit_image@width[]" value="200" />
          </td>
          <td>
            <input type="text" name="bfd_field_unit_lead[]" value="" size="30" />
            <br /><br />
            %{HTTP_ROOT}
            <br /><input type="text" name="bfd_field_unit_url[]" value="" size="15" />
          </td>
          <td>
            <textarea name="bfd_field_unit_summary[]" cols="40" rows="5" class="formSizeL"></textarea>
          </td>
        </tr>
      </table>
    </td>
  </tr>
  <tfoot>
    <tr>
      <td colspan="3"><input type="button" class="item-insert btnAddition" value="+ 項目を追加する" /></td>
    </tr>
  </tfoot>
</table>

<input type="hidden" name="@bfd_field_unit_group[]" value="bfd_field_unit_lead" />
<input type="hidden" name="field[]" value="bfd_field_unit_lead" />
<input type="hidden" name="@bfd_field_unit_group[]" value="bfd_field_unit_url" />
<input type="hidden" name="field[]" value="bfd_field_unit_url" />
<input type="hidden" name="@bfd_field_unit_group[]" value="bfd_field_unit_summary" />
<input type="hidden" name="field[]" value="bfd_field_unit_summary" />

<input type="hidden" name="bfd_field_unit_image:extension" value="image" />
<input type="hidden" name="@bfd_field_unit_group[]" value="bfd_field_unit_image@path" />
<input type="hidden" name="@bfd_field_unit_group[]" value="bfd_field_unit_image@x" />
<input type="hidden" name="@bfd_field_unit_group[]" value="bfd_field_unit_image@y" />
<input type="hidden" name="@bfd_field_unit_group[]" value="bfd_field_unit_image@edit" />
<input type="hidden" name="@bfd_field_unit_group[]" value="bfd_field_unit_image@old" />
<input type="hidden" name="field[]" value="bfd_field_unit_image" />
<input type="hidden" name="field[]" value="@bfd_field_unit_group" />

管理画面での表示



出力側のHTMLのサンプル

出力するHTMLのサンプルです。

<h2>複雑なカスタムフィールドのサンプル</h2>
<!-- BEGIN_MODULE Blog_Field -->
<!-- BEGIN bfd_field_unit_group:loop -->
<div style="width:200px; float:left; margin-right:20px;">
  <!-- BEGIN bfd_field_unit_image:veil -->
  <img src="%{ARCHIVES_DIR}{bfd_field_unit_image@path}" alt="" width="200">
  <!-- END bfd_field_unit_image:veil -->
  <h3><a href="%{HTTP_ROOT}{bfd_field_unit_url}">{bfd_field_unit_lead}</a></h3>
  <p>{bfd_field_unit_summary}</p>
</div>
<!-- END bfd_field_unit_group:loop -->
<!-- END_MODULE Blog_Field -->

デバッグモードとベンチマークモード

デバッグモード

デバッグモードを有効にすることにより各種エラーメッサージや、インクルード先のパスがコメントで表示されるようになります。

Ver. 3.0.x 以下の場合

新規インストール時は有効になっています。開発中は有効にしておくことをオススメします。

有効化 / 無効化

a-blog cms を設置したディレクトリの config.server.php を編集します。

// 本番運用時にDEBUG_MODEを 0 に設定して下さい
define('DEBUG_MODE', 1);

"1" を設定すると有効。 "0" を設定すると無効になります。

注意事項

デバッグモードを有効にするとキャッシュが効かなくなります。また、エラーメッセージも表示されるため本番環境では、無効にするようにしてください。

Ver. 3.1.x 以上の場合

新規インストール時は config.server.php でのデバッグモードの設定は 0 になっています。Ver. 3.1.x 以上では管理ユーザーの場合のみ、ユーザー編集画面で、そのユーザー限定でデバッグモードとベンチマークモードになることができるオプションが用意されているのでこちらを使用することを推奨します。開発環境でも本番環境でも、気軽にデバッグモードとベンチマークモードを試すことができます。


ユーザー編集画面でモード設定

ベンチマークモード

ベンチマークモードを使用すると以下のような事がわかります。ページ下部に出力されるようになります。

  • そのページでの全グローバル変数の出力内容
  • モジュールの処理時間
  • 各処理時間
  • 読み込まれているテンプレート
  • メモリ使用量

[キャプチャ] ベンチマークモードの表

ベンチマークモードの有効時にページ下部に出力される表


開発中ページの表示速度が遅い時にどのモジュールが原因なのか特定したり、グローバル変数の出力を確認したりすると事などができるようになります。

各処理時間

項目説明
MODULE TOTAL TIMEそのページで使われているモジュールの総合処理時間
BOOT TOTAL TIMEMODULE TOTAL TIMEにモジュール起動時間を含めた処理時間
BUILD TOTAL TIMEテンプレート解決の処理時間
REWRITE PATH TOTAL TIMEテンプレートのパス書き換え時間
PROCCESS TIMEa-blog cms全体の処理時間

Ver. 3.0.x 以下の場合

有効化 / 無効化

a-blog cms を設置したディレクトリの config.server.php を編集します。


// 本番運用時にDEBUG_MODEを 0 に設定して下さい
define('DEBUG_MODE', 1);
define('BENCHMARK_MODE', 1);

ベンチマークモードは、デバッグモードも有効になっている必要があります。

"1" を設定すると有効。 "0" を設定すると無効になります。

Ver. 3.1.x 以上の場合

ベンチマークモードを試したい管理者のユーザー編集画面で デバッグモード & ベンチマークモード を選択してください。

環境によってデバックモードの ON/OFFを切り替える

開発中はデバックモードをONにすることによって開発がしやすくなりますが、 どうしても運用中のサイトを触らないといけない場合など、一般からのアクセスはデバッグモードを無効にして、指定した環境からのアクセスはデバッグモードを有効にしたい場合があると思います。

ここでは、グローバルIPアドレスによって切り替える例をご紹介します。

設定方法

config.server.php のDEBUG_MODEを以下のように書き換えます。

if ( $_SERVER['REMOTE_ADDR'] === 'xxx.xxx.xxx.xxx' ) {
  define('DEBUG_MODE', 1);
  define('BENCHMARK_MODE', 0); // 1 または 0
} else {
  define('DEBUG_MODE', 0);
  define('BENCHMARK_MODE', 0);
}

xxx.xxx.xxx.xxx にはグローバルIPアドレスが入ります。 これにより、あるIPからアクセスがあった場合のみデバックモードをONにすることができ、運用中のサイトでも安全にサイトの確認ができるようになります。

運用中のサイトを触る場合はお試し下さい。