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

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

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

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

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

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

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

ポストインクルードの基本設定

ここでは、組み込みJavaScriptの「post include」機能の基本設定について説明します。post include機能は、フォームでpost(送信)した結果を、ページのリロードなしで表示する機能です。

config.js内の設定

/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'
}],

postIncludeOnsubmitMark ここで指定したセレクタのフォームは、送信ボタンを押した後に結果を表示します。「.js-post_include」の場合は、class="js-post_include" が付与されているform要素に適用されます。
postIncludeOnreadyMark ここで指定したセレクタのフォームは、送信ボタンを押さなくてもページを読み込んだら自働的に送信されて結果を表示します。「.js-post_include-ready」の場合は、class="js-post_include-ready" が付与されているform要素に適用されます。
postIncludeOnBottomMark ここで指定したセレクタのフォームは、送信ボタンを押さなくてもページの下部までスクロールしたら自働的に送信されて結果を表示します。「.js-post_include-bottom」の場合は、class="js-post_include-bottom" が付与されているform要素に適用されます。
postIncludeOnIntervalMark ここで指定したセレクタのフォームは、送信ボタンを押さなくても一定時間ごとに自働的に送信されて結果を表示します。「.js-post_include-interval」の場合は、class="js-post_include-interval" が付与されているform要素に適用されます。
postIncludeMethod swap:target属性で指定した場所の「中身」を置き換える / replace:target属性で指定した場所「自体」を置き換える
postIncludeEffect slide:スライド表示 / fade:フェード表示 / 指定なし:エフェクトなし
postIncludeEffectSpeed postIncludeEffectでエフェクトが指定されている時のみ有効になります。slow:ゆっくり表示 / fast:早く表示
postIncludeOffset postIncludeOnBottomMark で指定されたセレクタのフォームの下部からの読み込み開始位置になります。
postIncludeReadyDelay postIncludeOnreadyMark で指定されたセレクタのフォームの読み込み開始時間を遅くする設定になります。ミリ秒で設定します。
postIncludeIntervalTime postIncludeOnIntervalMark で指定されたセレクタのフォームの読み込み時の更新頻度をミリ秒で設定します。
postIncludeArray 配列として複数の設定を記述できます。同じページ内で複数の設定を併用したい場合などに利用します。

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で指定します。


データ属性名 詳細 デフォルト値
link 見出しへのリンクを生成するか設定 true
listType リストを ol か ul で作るか指定 'ol'
listClassName ol/ul の class名を指定 ''
itemClassName li の class名を指定 ''
linkClassName a の class名を指定 ''
anchorName アンカーリンクを指定 ($1 には数字が入ります) 'heading-$1'
levelLimit 見出しリストの階層を指定 99

<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 -->

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

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

ポイント2 目次自体の見出しは、目次リストに出したくないので見出しに 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-yielddata-target に指定して、 js-outline クラスを振って完成です。


完成例

完成例


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

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

チャレンジ

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

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


リストのスタイル例

リストのスタイル例

Ver. 2.1.1.4

a-blog cms(通常版 〜php5.4.x)ダウンロード



a-blog cms(通常版 php5.5.x〜)ダウンロード


a-blog cms利用約款

このa-blog cms利用約款(以下「本約款」といいます)は、使用者(個人または法人)と有限会社アップルップル (以下「アップルップル」といいます)の間における、a-blog cms、関連するソフトウェア部品群、並びにドキュメント(以下「本ソフトウェア」といいます)に関する約款です。

第1条【ライセンス】

使用者は、本約款の定めに従い、本ソフトウェアを利用できるライセンスを有するものとします。使用者は、本ソフトウェアを1台のサーバー上に存在する1つのウェブサイトにインストールすることができます。

第2条【禁止事項】

使用者は、次の各号に定める行為を行ってはなりません。

  1. 本ソフトウェアから派生するソフトウェアを制作すること
  2. 本ソフトウェア又はその複製を如何なる形態においても、第三者に販売、譲渡、ライセンス供与、開示、その他の方法による移転等第三者が使用できるようにすること
  3. 本ソフトウェアの改造、翻訳、逆コンパイル又は逆解析(リバース・エンジニアリング)を、法律上認めている範囲を超えて行うこと及びそれを試みること
  4. 本ソフトウェア上の権限の表示又は商標を変更すること
  5. 本ソフトウェアを公序良俗に反したコンテンツとして使用すること

アップルップルは、本ソフトウェアに関する全ての権利(全ての知的財産権を含む)を保有し、本約款において明示的には許諾していない本ソフトウェアに関する全ての権利をも保有します。

第3条【著作権表示】

アップルップルは、本ソフトウェアを使用するに使用者に対してバナー及びテキストでの著作権表示を強制することはしません。ただし、著作権がアップルップル以外にあると誤認させる行為一切を禁じます。 a-blog cmsが生成するHTMLドキュメントには、下記のコードがHEAD要素内に追加されます。

<meta name="generator" content="a-blog cms" />

第4条【技術サポート】

本ソフトウェアの利用に関して、電話でのサポートは提供されません。
質問、要望を含めた無償サポートは、ウェブサイト上のフォーラムでのみ行われますが、開発元によるサポートを保証するものではありません。 有償でのメールサポートとして、スタンダードライセンスに対して「年間メールサポート」が、プロフェッショナル、エンタープライズライセンスに対して「年間メンテナンス」が別途契約として提供されます。これらはサービスの契約期間中有に専用メールフォームから契約ドメインの「インストール及びアップデートについて」「テーマ、モジュールなどのカスタマイズについて」「エントリー投稿などの使用方法について」「その他、a-blog cmsの操作に関連するもの」についての質問を受け付けるものとなります。 なお、有償無償を問わず、サポート対象は現行バージョンから2メジャーバージョン前までのものとします。バージョンの定義は、製品バージョンナンバーの小数点第一位をメジャーバージョンとします。

第5条【無担保・無保証】

本ソフトウェアは、現状有姿の状態で提供され、明示的にも黙示的にも、何らの担保及び保証するものではありません。アップルップル及びその供給者は、その商品性、特定目的への適合性及び第三者の権利を侵害していないことを黙示的に担保・保証することを含み、明示的であると黙示的であるとを問わず、如何なる種類の担保・保証をも行うものではありません。 本ソフトウェアの品質、性能、インストール、使用に伴うプログラム・エラー、装置の損傷、データやソフトウェア・プログラムの消失、不稼動及び中断等一切のリスクは、使用者の負担とします。本ソフトウェアの使用に関する適切性の判断は、使用者自身の責任で行うものとし、その使用による一切のリスクは、使用者の負担とします。

第6条【責任制限と免責】

使用者は、アップルップルが損害発生の可能性を事前に通知した場合は勿論それ以外の場合であっても、利益の逸失、信用の失墜、不稼動、データ使用不能等に起因する損害並びにその他顕在化していない損害を含み直接的、間接的、偶発的、例外的、結果的若しくは懲罰的損害に関して、アップルップルは一切の責任を負わないことを明示的に理解し同意します。また、使用者はアップルップル及びその他のパートナーを 使用者による本ソフトウェアの使用から及びその他本ソフトウェアに関わり発生する如何なる直接的、間接的、偶発的、例外的、結果的、懲罰的損害についての責任から一切免責することに同意します。

第7条【プログラム・サービス・約款の改訂および提供の終了】

アップルップルは、アップルップルのウェブサイトにて公示することにより、本ソフトウェア並びに本約款を変更することができるものとします。また、アップルップルは本約款並びにアップルップルの提供するサービスを、書面による通知のあるなしにかかわらず、終了することができるものとします。 プログラムは基本的にバージョンナンバーの小数点第一位をメジャーバージョンとし、発表日から2年間または次メジャーバージョンの発表のいずれか先に訪れる日まで、小数点第三位をバージョンナンバーとしたバグフィックスおよびセキュリティフィックスリリースを行います。 発表日から2年間が経過または次メジャーバージョンが発表されたプログラムに対してはバグフィックスおよびセキュリティフィックスリリースを提供しません。

第8条【一般規定】

本規約は、日本国法に準拠するものとします。 本ソフトウェア利用に際して、訴訟の必要が生じた場合には、名古屋地方裁判所を第一審の専属管轄裁判所とします。

https関連のリンクを書き換える機能

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