プラクティス

目次

インクルード先のパスを簡単に調べて開発しやすくする

テンプレートの修正箇所を探す

デバッグモードをオンに設定していれば、現在表示しているルートのテンプレートパスが、管理ボックスに記述してありますが、途中インクルード機能を使って挿入しているテンプレートのパスは一見わからないように見えます。インクルードしているテンプレートのパスを探し出す方法を説明しています。


現在表示中のテンプレートの表示

現在表示中のテンプレートの表示


インクルード先テンプレートを見つける

インクルード先のテンプレートのパスは、お使いのブラウザの開発者ツールから要素の検証を行う、またはブラウザを通してソースコードをご覧いただくことで確認できます。

下記のソースのようにHTMLコメントでインクルードされたものが囲まれます。インクルードされているテンプレートのパスは、Start of includeEnd of includeと描かれているコメントタグと一緒に記述されています。

テンプレートを使用している範囲としては、Start of includeEnd of includeと書かれた部分までになります。

<header id="headWrapper" class="clearfix">
  <!-- Start of include : source=/themes/site2013/include/header.html -->
  <div id="header">
    <div id="siteTitle">
      <h1 id="siteName"><a href="http://localhost/"><img src="/archives/001/201302/511361da784e4.png" alt="a-blog cms"> a-blog cms サンプルサイト</a>
      </h1>
      <p id="siteCaption">このコンテンツは a-blog cms のテスト用に作られたコンテンツで、実在のものではありません。</p>
    </div>
    <nav>
      <ul id="headNavi" class="clearfix">
        <li><a href="http://localhost/contact/" target="_self">お問い合わせ</a></li>
        <li><a href="http://localhost/company/access.html" target="_self">交通アクセス</a></li>
      </ul>
    </nav>
    <address id="headTelNo"><a href="tel:123-456-789">TEL<span>123-456-789</span></a></address>
  </div>
  <!-- End of include : source=/themes/site2013/include/header.html -->
</header>

機能のON/OFF

この機能を使用するには、DEBUG_MODEをON(1)にする必要があります。

逆に、この機能をOFFにする方法は2通りあります。

  1. DEBUG_MODEをOFF(0)にする
  2. 管理 > コンフィグ > 出力設定 の HTMLコメントの削除にチェックをつける

HTMLコメントを取り除くように設定

HTMLコメントを取り除くように設定


また、DEBUG_MODEをON(1)にしていても、「HTMLコメントの削除」にチェックをつけていれば、機能が使えませんので、ご注意ください。

環境によってデバックモードの 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にすることができ、運用中のサイトでも安全にサイトの確認ができるようになります。

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

【SSL設定】サイト全体のリンクをSSLのリンクにする

a-blog cms で構築されたWebサイトを常時SSL/TLS化する方法をご紹介します。

config.server.php

define('SSL_ENABLE', 1);
define('FULLTIME_SSL_ENABLE', 1);

上記のように2つのオプションを"1"に設定する事により、サイト全体をSSL/TLS化できます。

また、同時に COOKIE_SECURE オプションを有効にすることで、a-blog cms が発行する Cookie で Secure 属性が有効になります。

Secure 属性が有効になることで、 HTTPS 接続の場合にのみクッキーが送信されるようになり、盗聴や中間者攻撃から保護されます。セキュアな接続が必要な場合、必ず COOKIE_SECURE オプションを有効にしてください。

define('COOKIE_SECURE', 1);

httpsのリンクを書き換える

a-blog cmsでは、httpとhttpsのリンクを自動で書き換える機能が標準で実装されています。

この機能は、相対パスでリンクしているナビゲーションのリンク先を、通常のhttpのページでは設定しているリンクのみhttpsとし、お問い合わせフォーム等のhttpsで運用したいページでは、設定していないリンク先を任意にhttpsではなくhttpとすることができます。

テンプレートの記述方法

以下のようにリンク先のURLをhttpsとしたいリンクに関してはrel属性に"https"と記述してください。

<a href="/contact/" rel="https">お問い合わせ</a>

config.js内での該当部分

//------------------------------
// link https disabler, enabler
linkHttpsDisablerMark   : 'a:not([rel*="https"])', // 暗号化を利用したhttps通信時に通常のリンクがhttps://になってしまうものをhttp://に書き換えます。
// a:not([rel*="https"]) というセレクタが設定されている場合はrel属性に"https"と指定されているリンクは書き換えを行わずにhttps://のままになります。
linkHttpsEnablerMark    : 'a[rel*="https"]', // 通常のhttp通信時にセレクタに該当するアンカーをhttps://から始まるURLに書き換えます。
linkHttpsNoRewriteMark  : '.js-link_no_rewrite',

該当部分の解説

linkHttpsDisablerMark : 'a:not([rel*="https"])

https で表示されているページ内でのリンクのrel属性にhttpsという文字列が含まれていない場合、そのリンクはhttpから始まるリンクとなります。

linkHttpsEnablerMark : 'a[rel*="https"]'

httpで表示されているページ内でのリンクのrel属性にhttpsという文字列が含まれている場合、そのリンクはhttpsから始まるリンクとなります。

linkHttpsNoRewriteMark : '.js-link_no_rewrite'

このクラスを振る事により、この書き換え機能を無効にできます。

今のサイトを公開しながら、同じサーバーで制作したい

課題

別の制作環境が確保できない場合や、すでに既存サイトの公開用に前から借りているサーバーでそのまま制作を行いたい場合です。

回答

公開ディレクトリ内に、サブディレクトリを作成してその中にa-blog cmsをインストールします。そこで、開発を行い公開時には、一つ上の実際の公開ディレクトリにすべて移します。



注意事項


ディレクトリごとにドメインが設定されている場合などで、ドメインに変更がある場合はシステム側に設定されているドメインを変更する必要があります。

コンテンツ専用の「エントリー作成」ボタンで、よりわかりやすく。

a-blog cmsの標準の状態では、管理ボックスの中に「エントリー作成」ボタンがあります。 このボタンをクリックしてエントリー作成画面へ移動し、必要に応じてカテゴリーを選択してエントリーを作成しますが、サイトの構成自体を理解しきれていないと思わぬ場所にエントリーを作成してしまうというケースもあります。

この記事では、実際の運営担当者が迷わないように各コンテンツ専用の「エントリー作成ボタン」を作成する方法を紹介しています。

例として、「お知らせ」カテゴリーにエントリーを作成するボタンを作る方法をご紹介します。

確認しておく情報

まず、対象となるコンテンツのブログIDとカテゴリーIDを確認します。


この例では「お知らせ」カテゴリーはブログID1、カテゴリーID2に設定されています。


ブログのIDを確認

ブログのIDを確認

カテゴリーのIDを確認

カテゴリーのIDを確認


ボタンの作成


※ 管理ボックスでは、テンプレートの継承機能が使われています。テンプレートの継承機能を知らなくても実装できるように本記事では解説しておりますが、詳しい機能の説明について知りたい場合は「テンプレートの継承機能」をご覧ください。

まず、ログイン時に表示される「エントリー作成」「管理ページ」「ログアウト」などのボタン類をインクルードしているファイルは「/themes/system/admin/action.html」なので、/themes/お使いのテーマ/admin/action.html を新しく作成します。

ファイル内に以下の記述をしてください。

@extends("/admin/_layouts/action.html")

@section("entry-insert")
<!-- BEGIN insert -->
<form action="" method="post" class="acms-admin-inline-btn">
  <input type="submit" name="ACMS_POST_2GET" value="<!--T-->エントリー作成<!--/T-->"  class="acms-admin-btn acms-admin-btn-success"/>
 <input type="hidden" name="admin" value="entry-edit" />
 <input type="hidden" name="bid" value="%{BID}" />
 <input type="hidden" name="cid" value="%{CID}" />
</form>
<!-- END insert -->
@endsection

ファイル内に記述されている以下のソースコードはデフォルトの「エントリー作成」ボタンです。

<form action="" method="post" class="acms-admin-inline-btn">
  <input type="submit" name="ACMS_POST_2GET" value="<!--T-->エントリー作成<!--/T-->"  class="acms-admin-btn acms-admin-btn-success"/>
  <input type="hidden" name="admin" value="entry-edit" />
  <input type="hidden" name="bid" value="%{BID}" />
  <input type="hidden" name="cid" value="%{CID}" />
</form>

ブログIDとカテゴリーIDの指定はグローバル変数が使われています。つまり、通常は「表示しているブログ(カテゴリー)にエントリーを追加するボタン」として機能しているということです。

このソースコードをコピーして、任意の場所にペーストし、内容を「お知らせ」カテゴリー専用のエントリー作成ボタンに書き換えます。

<form action="" method="post" class="acms-admin-inline-btn">
  <input type="submit" name="ACMS_POST_2GET" value="<!--T-->お知らせの追加<!--/T-->"  class="acms-admin-btn acms-admin-btn-success"/>
  <input type="hidden" name="admin" value="entry-edit" />
  <input type="hidden" name="bid" value="1" />
  <input type="hidden" name="cid" value="2" />
</form>

今回の「お知らせ」はブログIDが1、カテゴリーIDが2となりますので、グローバル変数の部分をそれぞれ「1」と「2」に直接書き換えます。

これで、お知らせカテゴリー専用のエントリー作成ボタンが追加できました。より更新しやすいサイトを提供するためのひと工夫としてご活用ください。


専用ボタンが増えたaction.html

専用ボタンが増えました

画像をロスレス圧縮する

画像のロスレス圧縮に対応できるようになりました。画像サイズが小さくなり、Google の PageSpeed Insights などの点数も上がりパフォーマンスがよくなります。

必要なソフト

サーバーに下記の画像圧縮ライブラリが必要になります。入っているソフトによって対応できるフォーマットが増減します。

  • pngquant
  • optipng
  • pngcrush
  • pngout
  • advpng,
  • pegtran
  • jpegoptim
  • gifsicle

確認方法

CMSでロスレス圧縮が可能かどうかは、管理画面 > チェックリスト の 「ロスレス圧縮対応フォーマット 」で確認することができます。チェックリストで有効になっていれば自動的に、画像をロスレス圧縮して保存するようになります。

設定をオフにする

private/config.system.yaml に

img_optimizer: off 

を追加することで、ロスレス圧縮しない様になります。

パスワードポリシーの設定

パスワードポリシー設定を設ける事で、パスワードポリシー条件に満たないパスワードは設定できないように出来、セキュリティを高めることが出来ます。

設定方法

*設定はブログ毎になります。

管理画面 > コンフィグ > 機能設定に移動し、パスワードポリシーの項目を設定します。

設定できる条件

  • 最小文字数
  • 最大文字数
  • 大文字を1つ以上含める
  • 小文字を1つ以上含める
  • 数値を1つ以上含める
  • 記号を1つ以上含める
  • 大文字、小文字、数値、記号のうち、3種類を含む
  • 禁止ワード

パスワードポリシー設定

パスワードポリシー設定

キーワード検索で、全角・半角・ひらがな・カタカナなどを区別せず曖昧に検索させる

a-blog cms は、標準でキーワード検索機能がついており、全エントリーからキーワードで検索することができます。

しかし標準状態では、全角・半角・大文字・小文字などは別の文字と認識され検索に引っかかりにくい場合があります。 ここでは曖昧な検索でヒット率をあげるカスタマイズをご紹介します。

曖昧な検索

下記の違いは、同じワードとして検索できるようになります。

  • 全角 / 半角
  • 大文字 / 小文字
  • ひらがな / カタカナ

カスタマイズ方法

MySQLの照合順序の設定を変更します。 標準では utf8_general_ci が使われていると思いますが、この utf8_general_ci では 大文字 / 小文字 は同じワードとして認識しますが、 全角・半角・ひらがな・カタカナは曖昧な検索をしてくれません。そこで、この照合順序を utf8_unicode_ci に変更します。

対象テーブル・カラム

acms_fulltextfulltext_valuefulltext_ngram が対象になります。

変更方法

下記はSQL文による変更方法ですが、SQLに詳しくない場合は、phpMyAdminなどのGUIで変更することをおすすめします。

ALTER TABLE acms_fulltext MODIFY COLUMN fulltext_value TEXT COLLATE 'utf8_unicode_ci';

ALTER TABLE acms_fulltext MODIFY COLUMN fulltext_ngram TEXT COLLATE 'utf8_unicode_ci';

直接表示させないテンプレートを指定する

a-blog cmsは静的なHTMLと同じようにテーマを作成できる特徴を持っているため、とくに考えずに実装すると「同じ表示のページが複数存在してしまう」という問題が出てきます。

例えばa-blog cmsでサイト構築した場合、サイトトップのテンプレートを「top.html」にすることは多いかと思います(※テーマ設定で指定できるテンプレートファイルのこと)。

もちろん、「https://example.com/」のURLでページを開いたときに「top.html」がトップページとして動的に表示されるのですが、静的なHTMLと同じようにテーマを作成できる特徴を持っているため「https://example.com/」と「https://example.com/top.html」のURLでページを開いたときにはどちらも同じコンテンツが表示されます。



上記の例のように同じコンテンツが複数のURLで表示されることが問題になる場合があります。対応策としては、top.html にアクセスがあった場合、301リダイレクトをして正規化する事が考えられますが、a-blog cmsの機能で404を表示させることが可能です。この記事では直接表示させないテンプレートを指定する方法をご紹介します。

直接表示させないテンプレートのファイルの命名規則を作る

テンプレートのファイル名やディレクトリ名の命名規則により、URLにアクセスしたときにテンプレートを直接表示させないことができます。

例: top.html を直接表示させない

1.まずは命名規則の設定を行います。「private/config.system.yaml」に次の記述を追加します。

forbid_direct_access_tpl  : /^_/

「forbid_direct_access_tpl」という項目では、ファイル名を正規表現で指定できます。今回の例では、先頭にアンダーバーがつく、ファイル・ディレクトリ以下が直接表示させないファイルまたはディレクトリの対象になります。

2.命名規則を設定したら、対応したいファイルまたはディレクトリを命名規則に合わせてリネームします。例えば、ここでは「top.html」を「_top.html」にリネームします。このとき、「管理ページ > コンフィグ > テーマ設定」でトップページのテンプレートに「top.html」を指定していた場合はこのままでは404になってしまいますので、「top.html」から「_top.html」に変更するのを忘れないでください。

これで完了です。「https://example.com/top.html」「https://example.com/_top.html」とも 404 になることが確認できます。



インクルードファイルの対応

インクルード専用のファイルも直接表示させたくないファイルのため、以下のHTMLタグがないファイルはデフォルトで404になるような仕組みになっています。

  • htmlタグ
  • bodyタグ

そのため、インクルード専用ファイルのファイル名には特別な命名規則は特に対応は必要ありません。

例: https://example.com/include/header.html

たとえば上記のようなURLにアクセスしても、header.htmlはヘッダーパーツのファイルでありhtmlタグやbodyタグはありませんので、ページが404になることが確認できます。

エントリー編集ページにカスタムJavaScriptやスタイルを適用する

エントリー編集ページは、管理ページ側と表ページ側(ダイレクト編集含む)があり、カスタムJSやCSSを適用するにはその両ページに反映する必要があります。



管理画面に設置


管理画面にJSやCSSを読み込むには、使用しているテーマフォルダ直下に admin.html を設置します。
themes/使用しているテーマ/admin.html

admin.html には下記のような記述をします。エントリー編集ページのみにカスタムJSとCSSを反映させたい場合は下記のように追記したlinkタグやscriptタグを Touch_Edit モジュールで囲います。

@extends("/_layouts/admin.html")

@section("admin-css")
@parent
<!-- BEGIN_MODULE Touch_Edit -->
<link rel="stylesheet" href="カスタムCSSのファイルパス">
<!-- END_MODULE Touch_Edit -->
@endsection

@section("admin-js")
@parent
<!-- BEGIN_MODULE Touch_Edit -->
<script src="カスタムJSのファイルパス"></script>
<!-- END_MODULE Touch_Edit -->
@endsection

@extends@section は a-blog cms の「テンプレートの継承」機能です。テンプレートの継承機能を使えるのは Ver. 2.8.0 以降になります。

表側ページに設置

表画面にJSやCSSを読み込むには、他のJSファイルやCSSファイルを読み込んでいる箇所にscriptタグやlinkタグを追加してください。

a-blog cms 標準テーマ使用の場合は下記ファイルが該当します。
themes/標準テーマ/include/head/js.html
themes/標準テーマ/include/head/link.html

js.html や link.html には下記のような追記をします。CMSに投稿者以上でログインしている時しかエントリー編集画面を表示することはないので、下記のように Touch_SessionWithContribution モジュールで囲い、投稿者以上がログインしている時しかファイル読み込みされないようにます。

例:js.html

サイト表側全体のスタイルファイル読み込みの下あたりに記述します。 <!-- BEGIN_MODULE Touch_SessionWithContribution --> <script src="カスタムJSのファイルパス"></script> <!-- END_MODULE Touch_SessionWithContribution -->

例:link.html

サイト表側全体のJSファイル読み込みの下あたりに記述します。 <!-- BEGIN_MODULE Touch_SessionWithContribution --> <link rel="stylesheet" href="カスタムCSSのファイルパス"> <!-- END_MODULE Touch_SessionWithContribution -->

エントリー編集時にしか読み込みたくない場合は、エントリー編集時とダイレクト編集ONの時に読み込む必要があるため、Touch_Edit と Touch_EditInplace で囲います。

例:link.html 記述例

<!-- BEGIN_MODULE Touch_EditInplace -->
<link rel="stylesheet" href="カスタムCSSのファイルパス">
<!-- END_MODULE Touch_EditInplace -->
<!-- BEGIN_MODULE Touch_Edit -->
<link rel="stylesheet" href="カスタムCSSのファイルパス">
<!-- END_MODULE Touch_Edit -->