目次
- テンプレートを使ったカスタマイズの前に
- ファイルの種類について
- テンプレートの内部構造について①
- テンプレートの内部構造について②
テンプレートを使ったカスタマイズの前に
ここからは、実際にテンプレートを開いてa-blog cmsの内部構造について見ていきます。まずは事前準備として、このハンズオンの解説使用テーマ「beginner」のディレクトリに移動しましょう。
a-blog cmsをインストールしている場合
a-blog cmsをインストールしたディレクトリから、themes/beginner まで移動してください。
a-blog cms.ioで体験している場合
a-blog cms.ioから送られたメールアドレスにSFTP情報が記載されています。
FPTソフトを使ってSFTP接続し、themes/beginner まで移動してください。
ファイルの種類について
a-blog cmsのテーマファイルの構成として、_top.html などの基本のテンプレートファイルはテーマディレクトリ内直下に置かれています。その他CSS・JS・imagesなどのデータはフォルダで管理されています。
それでは主要なフォルダについて確認していきましょう。
- admin
- 管理ページのテンプレートが入っているフォルダです。エントリーの編集ページやカテゴリーの編集ページにオリジナルの入力項目を設置する際に作業する場所です。
- include
- a-blog cms デフォルトテーマは、機能/パーツごとにHTMLファイルを分割し、_top.html や index.html、_entry.html に必要なパーツをインクルード（読み込んで）することでテンプレート管理をしています。includeフォルダはそのパーツを管理するフォルダです。詳しくは後述「インクルード」にて解説しています。
- contact
- お問い合わせフォームを管理するフォルダです。このようなフォームを管理するフォルダは、フォームを設置した分だけ準備する必要があります。beginnerでは、お問い合わせフォームのページをカテゴリーとしているため、カテゴリーコードである「contact」をフォルダ名としています。
テーマ「beginner」では、「お知らせ」や「物件情報」のカテゴリーコード名と一致する「news」「realestate」といったフォルダが用意されています。a-blog cmsは、基本的にテーマ直下にある _top.html や index.html 、_entry.html を共通のテンプレートとして表示しますが、このようにカテゴリーコード名のフォルダを作成しその中に index.html や _entry.html を設置することで、カテゴリーごとにデザインをかえることができます。
共通して使われているindex.html
newsカテゴリーで使われているindex.html
テンプレートの内部構造について①
ここからは、テンプレート _top.html を開いてa-blog cmsの記述のルールを見ていきます。
インクルード
_top.html のheadタグは以下のように書かれています。ここで使われているのが「インクルード機能」です。
<head>
<meta charset="UTF-8">
@include("/include/head/meta.html")
@include("/include/head/link.html")
<link href="/js/slick/slick.css" rel="stylesheet">
@include("/include/head/js.html")
<script src="/js/slick/slick.js" charset="UTF-8"></script>
<script src="/js/top.js" charset="UTF-8"></script>
</head>
- インクルード
- テンプレート内に外部ファイルを読み込む機能を「インクルード」といいます。複数のテンプレートに共通するパーツを1つのファイルから呼び出すことで、内容を編集した際に関係している全てのテンプレートへ一括して反映できるため、メンテナンス性を向上させることができます。
例えばheadの例では、meta情報について以下のようにインクルードされています。
@include("/include/head/meta.html")
この記載されているパスにしたがって /beginner/include/head/meta.html のファイルを開くと、ここで読み込まれているHTMLコードを確認することができます。
テーマ「beginner」ではheadタグ内で主にリンク情報などをインクルードし、body タグ内でヘッダーなどのパーツやモジュールをインクルードしています。このようにインクルード部分が多岐にわたる場合は、人の目で見ても分かりやすく管理するために、それぞれの役割についてコメント表記をしています。
<!-- エントリーヘッドライン（トップ用） -->
@include("/include/entry/headline-top.html")
スタイルガイド（CSSフレームワーク）
a-blog cmsでは、専用のスタイルガイド（CSSフレームワーク）を用意しています。このフレームワークを活用することで、クラス名の表記のみでデザインやレイアウトを素早く整え、サイト制作を効率化することができます。ここで使用するクラス名は、接頭辞にacms-がつく場合とacms-admin-がつく場合の2種類があります。
| クラスの接頭辞 | 読み込むCSSファイル | 主な使用場所 |
|---|
| acms- | acms.css | 公式テーマ |
| acms-admin- | acms-admin.css | 公式テーマ・管理画面 |
a-blog cmsはVer.2.5より、管理画面で使うCSSファイル「acms-admin.css」と、CSSフレームワークとして使うCSSファイル「acms.css」を分けて管理し始めました。これによりCMSのアップデートと同時にバージョンが上がるファイルが acms-admin.css のみになるため、アップデートによるスタイル崩れの心配がなくなります。
スタイルガイドの使用例として _top.html の22〜33行目を見ていきましょう。
<main class="acms-col-lg-9 main">
<div class="main-inner is-space-right">
<!-- エントリーヘッドライン（トップ用） -->
@include("/include/entry/headline-top.html")
<!-- エントリーサマリー -->
@include("/include/entry/summary-top.html")
<!-- 確認用テンプレート -->
@include("/include/check-seo.html")
</div>
</main>
mainタグ内のacms-col-lg-9は、デスクトップ画面で12カラム中9カラムの幅を使ってコンテンツを表示させるフレームワークです。a-blog cmsでは一般的に、サイトの表側のスタイルに関わるテンプレートでスタイルガイドを利用するときはacms-の接頭辞で記述します。このようにすることで、管理画面以外で acms-admin.css を読み込む必要がなくなり、サイトを軽量化することができます。
これらのCSSフレームワークの種類については、管理画面コンフィグ内の「スタイルガイド（CSSフレームワーク）」内、もしくはリファレンス | ドキュメント | a-blog cms developerにて確認できます。レスポンシブデザインにも対応し、種類も豊富に取り揃えているので、サイトを制作する際には是非ご活用ください。
組み込みJS
_top.html の36〜54行目を見ると、接頭辞がjs-から始まるクラスが確認できます。ここでは、a-blog cmsが用意する組み込みJSという機能を使用しています。
- 組み込みJS
- HTMLにクラス属性を設定するだけで作動するJavaScriptライブラリを「組み込みJS」といいます。一般的に、スライダーやオフキャンバスを実装する際はJavaScriptの知識が必要ですが、a-blog cmsでは、組み込みJSを活用することでJavaScriptの知識がなくともサイト内に様々な効果を加えることができます。
<div class="js-pretty-scroll">
<!-- 検索フォーム -->
@include("/include/parts/search.html")
<!-- ピックアップリスト -->
@include("/include/entry/summary-pickup.html")
<!-- バナー -->
@include("/include/siteparts/banner.html")
<!-- リンクリスト -->
@include("/include/siteparts/link-list.html")
<!-- モバイル：ナビゲーションメニュー -->
@include("/include/parts/mobile-nav.html")
<!-- ログインボタン -->
@include("/include/parts/login-button.html")
</div>
上記のソースでは、組み込みJSを使ってオフキャンバスを実装しています。オフャンバスとは、スマートフォンなどで画面全体を右もしくは左にスクロールさせ、画面外に隠れていたメニューを表示させる機能です。
オフキャンバスが適応されるエリアにjs-offcanvasのクラスを、オフキャンバスを閉じるボタンにjs-offcanvas-closeのクラスを振ることで、JavaScriptを書かずとも該当エリアをオフキャンバスメニューに収めています。
またテーマ「beginner2020」ではナビゲーション部分にも、「link match location」という組み込みJSを使用しています。モジュールの表示設定内にある「属性」の項目を見てみましょう。
ここでは、ホームのラベルに js-link_match_location-full というクラスが、その他のラベルに js-link_match_location というクラスが振られています。これらは、表示しているページのURLごとにナビゲーションのスタイルを区別する組み込みJSです。試しに「ホーム」にアクセスすると、ナビゲーションの項目に赤いボーダーがつくようになっています。
js-link_match_location-full は現在表示しているページのURLとリンク先が“完全に”同じ場合に、js-link_match_location は現在表示しているページのURLがアンカーリンクのリンク先URL中に含まれている場合に作動するようになっています。組み込みJS「link match location」のその他の種類については、リファレンス | ドキュメント | a-blog cms developerをご覧ください。
ここでご紹介した組み込みJSはほんの一例ですが、この他にもページ内の任意の場所へスクロールさせるものや、リンクのクリックエリアを拡大させるものなど様々なライブラリを取り揃えています。HTMLの作業だけで手軽にJavaScriptの効果を取り入れることができるので、是非色々なものを試してみてください。
テンプレートの内部構造について②
ここからは、テンプレート summary-top.html を元にa-blog cmsの記述のルールを見ていきます。まずは _top.html でインクルードされているエントリーサマリーのパスに従って、summary-top.html を開いてください。
<!-- エントリーサマリー -->
@include("/include/entry/summary-top.html")
a-blog cmsのシステムと変数
summary-top.html の１行目と最終行には、下のようなコメントがあります。
<!-- BEGIN_MODULE Entry_Summary id="top_summary" -->
<!-- END_MODULE Entry_Summary -->
これらはモジュールの範囲を定める記述です。このようにa-blog cmsは、ブロックで <!-- BEGIN(システム名) --> から <!-- END(システム名) --> と定められた範囲ごとにシステムが作動する仕組みになっています。
さらにテンプレートの14〜29行目には下の記述があります。
<li class="summary-default-item js-autoheight-r {entry:loop.class}">
<a href="{url}" class="summary-default-link">
<div class="acms-summary">
（中略）
<div class="acms-summary-body">
<p class="summary-title">{title}</p>
<p class="summary-detail">{summary}[trim(500, '...')]</p>
</div>
</div>
</a>
</li>
ここではブラウザ上で登録されたデータを示す部分として、15行目の {url} や 24行目の {title} などの変数が使われています。システムはこれらの変数を認識して、表示するエントリーごとに {url} でURLを、{title} でエントリータイトルを自動で読み込み、画面に出力しています。
<!-- 出力ソース -->
<li class="summary-default-item js-autoheight-r ">
<a href="http://********.ablogcms.io/realestate/entry-7.html" class="summary-default-link">
<div class="acms-summary">
<div class="summary-default-image-wrap acms-summary-image">
（中略）
</div>
<div class="acms-summary-body">
<p class="summary-title">物件情報1</p>
<p class="summary-detail"></p>
</div>
</div>
</a>
</li>
a-blog cmsが用意している変数は膨大な数があります。これらを確認・利用するにあたっては、「変数表」を活用しましょう。変数表を確認するにはクイックサーチでの閲覧が便利です。チュートリアルで使用しているページにログインしている状態で、Macなら ⌘ + K 、Windowsなら control + K でクイックサーチを開きます。「:」と入力し、エントリーサマリーを選択すると、ここで使われているエントリーサマリーの変数表が確認できます。または、a-blog cms のデベロッパーサイトにある「ビルトインモジュール」のページでも確認できます。
変数表では、それぞれのシステムの中で利用できる変数が一覧でまとめられています。特にモジュールの構造は様々なシステムが入れ子で組み込まれ、少々複雑なため、不慣れなうちはテンプレートと変数表を照らし合わせて全体像を確認することもできます。
校正オプション
summary-top.html テンプレートの25行目には、エントリー本文の要約を表す下のような変数が記述されています。
<p class="summary-detail">{summary}[trim(500, '...')]</p>
<!-- 出力ソース -->
<p class="summary-detail">
この製品についての説明文です。この製品についての説明文です。この製品についての説明文です。この製...
</p>
この変数 {summary} に付随している [trim(500, '...')] が校正オプションです。
- 校正オプション
- 変数によって読み込まれた情報を適切な形に処理して出力する機能を校正オプションといいます。変数に付随した[ ]内に表記され、これを利用することで、誕生日のデータを元に年齢を算出したり、登録された画像をリサイズして表示することができます。
この例では、{summary}[trim(500, '...')]と表記することによって文字幅を500で足切りし、さらに足切りした後の表記として、'...' を指定しています。
基本的に {変数} は自動でエスケープ処理が行われるようになっております。もし、HTMLのタグを有効にしたい時には [raw] を利用してください。
また校正オプションが何も指定されない場合には、「<」「>」「 "」といった文字を実体参照に変換する [escape] がデフォルトで指定されます。この [escape] は、その他に何か一つでもオプションを指定すると適応から外れるため、その場合には指定したいオプションと合わせて表記しなければなりません。オプションを複数指定する際は、下の例のようにパイプ ( | ) を使用します。
<p class="var">{var}[raw|nl2br]</p>
特にフォームで入力されたデータを取り扱う際には、校正オプション [escape|nl2br] を利用することでクロスサイトスクリプティングを防止することができ、安全性の向上につながります。
その他の校正オプションの種類について、詳しくは校正オプション | リファレンス | ドキュメント | a-blog cms developerをご覧ください。
