デバックモードを環境ごとに切り替える

config.server.phpにDEBUG_MODEという設定があります。この値を1に設定すると デバックモードがONになり以下のような作用があります。

• キャッシュが効かなくなる
• phpのエラーが出力されるようになる

開発中はデバックモードをONにすることによって開発がしやすくなりますが、 上記の事がありますので、運用時には必ずデバックモードをOFFにしないといけません。

接続元のグロバールIPアドレスによって切り替える

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

/js/config.jsの以下の箇所に設定内容が記載されています。

//--------------
// post include
postIncludeOnsubmitMark     : '.js-post_include',
postIncludeOnreadyMark      : '.js-post_include-ready',
postIncludeOnBottomMark     : '.js-post_include-bottom',
postIncludeOnIntervalMark   : '.js-post_include-interval',
postIncludeMethod           : 'replace', // ( 'swap' | 'replace' )
postIncludeEffect           : 'slide', // ( 'slide' | 'fade' | '' )
postIncludeEffectSpeed      : 'slow', // ( 'slow' | 'fast' )
postIncludeOffset           : 60,
postIncludeReadyDelay       : 0,
postIncludeIntervalTime     : 20000,
postIncludeArray  : [{
//  'mark'       : '.js-post_include-original',
//  'type'       : 'submit',
//  'method'     : 'swap',
//  'effect'     : 'slide',
//  'effectSpeed': 'slow'
}],

Ver. 2.8.0よりpostIncludeEvalValueMarkの設定ではキャッシュさせないポストインクルードが動作しなくなりました。詳しい実装方法については「post includeの結果をキャッシュさせない方法」の代替案をご覧ください。（2020年11月19日）

Ver. 2.11.25よりデフォルトの設定だと tplコンテキストが無効になりました。ポストインクルードを利用する際には ポストインクルードの準備 をご覧ください。（2021年6月16日）

見出し生成機能を ブログコンテンツ や マニュアル系コンテンツ などで使用したいと多くの方のご要望もあり、目次を生成する組み込みJSが a-blog cms Ver. 2.10 で搭載されました。このハンズオンではこの組み込みJSを使って、目次ユニットを作ってみましょう。

ここでは、beginner2019テーマの初期インストール状態を例に解説していきます。環境が異なる場合はご自身の環境に合わせて読み替えてください。

完成イメージ

組み込みJS の仕様確認

ブログコンテンツ や マニュアル系コンテンツ などで便利な見出し一覧を出力するための組み込みJS。

特徴

以下のような特徴があります。

• 文章のアウトラインを ul/ol でマークアップしたものを出力
• アウトラインアルゴリズムは、HTML5（Living Standard）の仕様に従っている
• HTML全体ではなく、部分的にアウトライン化可能
• アンカーリンクを自動生成

組み込み方法

<div class="target-list"></div>

<div class="js-outline" data-target=".target-list">
<!-- コンテンツ内容 -->
</div>

コンテンツ内容を js-outline クラスを振った要素で囲み、data-target で出力先を指定します。

オプション

オプションは data属性で指定します。または、ACMS.Config.documentOutlinerConfigの値を変更することで調整可能です。 data属性はコンテンツを囲う、"js-outline"クラスがあるdivで指定します。

例

<div class="entry-body acms-entry js-outline"
     data-target=".js-outline-yield"
     data-link="true"
     data-listType="ol"
     data-listClassName="outline-list"
     data-itemClassName="outline-item"
     data-linkClassName="scrollTo"
     data-anchorName="heading-$1"
     data-levelLimit="1"
     data-exceptClass="js-except">
<!-- コンテンツ -->
</div>

カスタムユニットの作成

目次を出力するカスタムユニットを作っていきます。

編集側の設定（ボタンの追加）

まずは、カスタムユニットを追加するボタンを作成します。

管理ページ > コンフィグ > 編集設定 の 「ユニット追加ボタン」で以下の項目を追加します。

• モード: 拡張（custom_outline）
• ラベル: 目次

次にユニット設定で、先ほど追加したボタンの振る舞いを設定します。

管理ページ > コンフィグ > ユニット設定 に移動し、目次ユニットに「目次」を追加します。

ユニット編集側のカスタマイズ

これで、目次ユニットの追加ができるようになりましたが、このままだとユニットを追加しても、空のユニットが表示されるだけなので、わかりずらいです。編集時のユニットの設定をしましょう。

「themes/beginner2019/admin/entry/unit/extend.html」で拡張ユニットの編集画面時のテンプレートをカスタマイズできます。

<!-- BEGIN custom_outline -->
<p>ここに目次（アウトライン）が表示されます</p>
<!-- END custom_outline -->

編集側のテンプレートは、この程度で問題ないかと思います。

ユニット表示側のカスタマイズ

拡張ユニット（目次）が追加できるようになったので、肝心の 組み込みJS を使った、表示側を実装していきましょう。

テンプレート

表示側のテンプレートは、「themes/beginner2019/include/unit/extend.html」になります。ここに以下のようなコードを記述します。

<!-- BEGIN unit#custom_outline -->
<nav class="outline">
  <h2 class="outline-title js-except">目次</h2>
  <div class="js-outline-yield outline-list-wrap"></div>
</nav>
<!-- END unit#custom_outline -->

ポイントは２つあります。

ポイント１ このユニットが、目次表示されるところなので、あとで設定する組み込みJSからターゲット指定できるように クラス js-outline-yield をつけておく。

ポイント２ 目次自体の見出しは、目次リストに出したくないので見出しに js-except クラスを振っておく。

これで、カスタムユニットの設定は完了です。

組み込みJSの実装

最後に、目次が先ほど追加したカスタムユニットに表示されるように組み込みJSを実装していきます。

最初の例でいうと、

<div class="js-outline" data-target=".target-list">
<!-- コンテンツ内容 -->
</div>

の部分になります。目次化したい箇所をただ囲んであげればいいです。

beginner2019の場合は、以下のテンプレートがエントリ詳細のテンプレートになります。

• themes/beginner2019/include/entry/body.html: 36行目付近

<div class="acms-entry entry-column js-outline" data-target=".js-outline-yield">
    <div class="acms-grid">
    ...
    </div>
</div>

先ほど、カスタムユニットのテンプレートで指定した、.js-outline-yield を data-target に指定して、 js-outline クラスを振って完成です。

以上で完成になります。オプションも色々あるので、実際に設定してみて試してくみてください。今回は、エントリーのユニットで、目次を好きな位置に入れれるようにしましたが、組み込みJSなので、静的なHTMLなど他の場所でも利用できます。

コンテンツに合わせてぜひ活用してみてください。

チャレンジ

余力のある方は、以下のようなスタイルをCSSで実装してみましょう。ポイントは、リスト番号に親の番号も入っている点です。

ヒントは、「counter」「counter-increment」「counter-reset」です。

a-blog cmsでは、httpとhttpsのリンクを自動で書き換える機能が標準で実装されています。（v1.4.0より） この機能は、相対パスでリンクしているナビゲーションのリンク先を、通常のhttpのページでは設定しているリンクのみhttpsとし、お問い合わせフォーム等のhttpsで運用したいページでは、設定していないリンク先を任意にhttpsではなくhttpとすることができます。