プラクティス

目次

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

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

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


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

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


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

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

下記のソースのように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のリンクにする

最近では、一部をhttpsに対応したページにするのではなく、サイト全体をhttps化するサイトも増えてきました。 そこでここでは、サイト全体を常時SSL/TLS化する方法をご紹介します。

config.server.php

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

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

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を確認

カテゴリーのIDを確認

カテゴリーのIDを確認

対象となるコンテンツのブログIDとカテゴリーIDを確認します。 例としてa-blog cms に同梱されているsite2016 の「お知らせ」専用のボタンを作りましょう。 この例では「お知らせ」はブログID1、カテゴリーID27に設定されています。

ボタンの作成

ログイン時の「エントリー作成」「管理ページ」「logout」といったボタンは、以下のファイルに記述されています。

/themes/system/admin/action.html

action.html は使用するテーマにコピーしてカスタマイズしていきます。

/themes/カスタムテーマ/admin/action.html
<form action="" method="post" class="acms-admin-inline-btn">
<input type="submit" name="ACMS_POST_2GET" value="エントリー作成"  class="acms-admin-btn-admin"/>
<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="「お知らせ」の追加"  class="acms-admin-btn-admin"/>
<input type="hidden" name="admin" value="entry-edit" />
<input type="hidden" name="bid" value="1" />
<input type="hidden" name="cid" value="27" />
</form>

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

これで、お知らせ専用のエントリー作成ボタンが追加できました。 より使う人にやさしいサイトを作るためのひと工夫として利用してみてください。


専用ボタンが増えた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になることが確認できます。