テンプレート書き出し機能(静的ファイルとして出力)

ここでは、a-blog cmsの動的ページを静的ファイルとして出力する設定内容について説明します。

たくさんモジュールが記述してあるテンプレートのページやヘッダー、フッターなどあまり更新しないパーツに対してテンプレート書き出しを行うとページを表示するときにモジュールの実行回数を減らすことができ、パフォーマンス向上につながりますので、重いページなどあった場合は検討してみましょう。

テンプレート書き出しするページと出力先を設定する

管理画面 > テンプレート書き出し に移動。テンプレート書き出し設定は、ルートブログのみで設定できます。


[キャプチャ] 管理画面内テンプレート書き出し設定画面

テンプレート書き出し設定画面


生成元URI、出力先パスの3つの項目を入力します。

生成元URI
静的ページとして書き出しをしたいページのURIを、http:// または acms:// から入力します。
出力先パス
生成元URIの内容を、ここで指定した themes内に、指定したファイル名で出力します。
生成範囲
静的ファイルとして出力する場合は「全て」を選択します。レイアウトモジュールがあるテンプレートを書き出しする場合に「レイアウトのみ」を選択するとレイアウトモジュールだけ解決された動的テンプレートを書き出しするようになります。

テーマ設定で使用しているテーマと、出力先パスで選択するテーマは同じものとしてください。静的ファイルは選択したthemes内に、指定したファイル名で出力されます。
また、出力先のthemesには、書き込み権限を設定してください。

出力先に同名ファイルがあった場合は、新しい内容が上書きされます。ファイルの管理に、十分に気をつけて実行してください。

子ブログでのテンプレート書き出し

ルートブログより下の子ブログでは、親ブログで[直接の子ブログでのテンプレート書き出しを許可する]にチェックをすることで、テンプレート書き出しが可能になります。デフォルトでは、子ブログでのテンプレート書き出し実行は禁止されています。

これは直接の親子関係をもったブログ間でのみ有効な設定です。ブログの階層が深くなる場合はそのたびに同様の設定が必要です。

書き出しする

同ページにある、「テンプレート書き出しを実行する」ボタンを押す事で、設定されているファイルをすべて作り直します。ファイルやデータに更新があった場合に実行しましょう。

a-blog cmsインストール時の初期状態について

目次

  1. ようこそa-blog cmsへ
  2. ログインするには
  3. インストール時のサイトマップについて
  4. テーマについて
  5. ディレクトリー構造について

ようこそa-blog cmsへ


数あるCMSの中からa-blog cmsをインストールしていただきありがとうございます。「インストールしたはいいけど何から始めたらいいかわからない」「短期間でもちゃんと理解できるか不安」そのような方に向けて、ここではインストール直後のa-blog cmsの仕様についてご紹介します。


ログインするには


まずはサブカラム右下にある [login] ボタンをクリックしてください。 もしくは、表示されているURLの語尾に /login を追記しても同じページが表示されます。

例)https://example.com/login


[login]ボタン

次に「ユーザーID/メールアドレス」「パスワード」の各欄に管理者が発行した情報を入力し、[ログイン] ボタンをクリックします。


ログイン画面

「ユーザーIDまたはパスワードが違います。」と表示されたら?


[ログイン] ボタンをクリックした時に「ユーザーIDまたはパスワードが違います。」と表示された場合は、以下のような原因が考えられます。


  • メールアドレス、パスワードが半角英数字で入力されていない
  • 意図しないスペースが入っている

パスワードを忘れてしまったら?


パスワードを忘れてしまった場合は、パスワードを再発行しましょう。

[パスワードをお忘れですか?] をクリックして登録してあるメールアドレスを入力すると、パスワードを変更するためのリンクと新しいパスワードがメールで送られてきます。メールの内容に従って新しいパスワードでログインしてください。


これでログインは完了です。

ログイン中は、ヘッダーの直後とフッターの直前に灰色の管理ボックスが表示されます。サイトの運営は主にこの管理ボックスを使って行っていきます。


管理ボックス

またヘッダー直後の管理ボックスにある [ログアウト] というボタンをクリックすることで、ログイン前の状態に戻ることもできます。


インストール時のサイトマップについて


a-blog cmsはインストール時より、実際に企業のサイトを制作した場合の仕上がりの例として、あらかじめ複数のサンプル記事が入力されています。このサイトは下図のような構造になっています。



a-blog cmsでは、これらの階層に関わる情報を3種類に区別しています。それが「ブログ」「カテゴリー」「エントリー」です。


ブログ
全てのエントリーとカテゴリーを含むサイトの最大単位をブログといいます。サンプルサイトでは全てのエントリーとカテゴリーを「a-blog cms サンプルサイト」というブログで総括しています。

カテゴリー
複数のエントリーをジャンル別に分類する単位をカテゴリーといいます。サンプルサイトでは「お知らせ」「会社概要」「製品情報」などが当てはまります。
また、製品情報カテゴリーのように、カテゴリー中でさらに「家庭用製品」「業務用製品」とカテゴリーを分けることもできます。これらは「親カテゴリー」「子カテゴリー」と区別されます。

エントリー
ページの最小単位をエントリーといいます。サイトを更新する際には、主にこのエントリーを新規作成してページを追加します。

子カテゴリーを作成して階層を分けることもできますが、ブログの下の階層にさらに子ブログを設置することもできます。規模の大きさや用途によってカテゴリーで分けるのかブログで分けるのかを判断していきましょう。
またサイトの構成次第では、カテゴリーを持たないエントリーを用意することもあります。この際でも、カテゴリーがエントリーを内包し、ブログがカテゴリーを内包するような主従関係が逆転することはありません。


テーマについて


テーマ
テンプレート(HTMLファイル)やイメージファイル(画像ファイル)、CSSファイル、JavaScriptファイル等、サイトを構成するファイルを1つのフォルダにまとめたものをテーマと呼びます。a-blog cmsでは、テーマごとにサイトの見た目や機能を設定することができます。

2018年10月現在では、デフォルトのテーマとして「site2018」「beginner2018」「bootstrap2018」「blog2018」などを用意しています。また、各場合の初期テーマは以下のように設定されています。


  • a-blog cmsをインストールしている場合:セットアップ時に選択したテーマ
  • a-blog cms.ioで体験している場合:site2018

テーマを変更するには?


テーマはブログごとに設定します。
テーマを変更、もしくは現在適応されているテーマの確認は、以下の手順で行います。


  1. 管理ボックスの [管理ページ] をクリック
  2. サイドメニューの [コンフィグ] > セット名"デフォルト"の[コンフィグ] をクリック
  3. コンフィグ一覧内 [テーマ設定] をクリック



テーマ設定画面で「テーマ ディレクトリ名」という項目に表示されているテーマが現在適応されているテーマです。こちらで任意のテーマを選択し、保存ボタンをクリックすることでテーマの変更ができます。



チュートリアルでは、主にテーマ「beginner2018」を使います。「テーマ ディレクトリ名」を「beginner2018」に設定し、保存をしておきましょう。


ディレクトリー構造について


a-blog cmsサイトの各ページは、複数のテンプレートファイルによって構成されています。


テンプレートファイル
ページを構成するHTMLファイルのことです。しばしば「テンプレート」と省略します。基本的なテンプレートとして、トップページに設定する _top.html 、一覧ページに設定する index.html 、詳細ページに設定する _entry.html があります。

ファイル名先頭のアンダーバーの有無について


a-blog cmsでは _top.html や _entry.html など、テンプレートファイル名の先頭にアンダーバーがつく場合があります。これはファイル名を含んだURLである「https://example.com/top.html」や「https://example.com/index/entry.html」へのアクセスを無効にするためのものです。詳しくは「直接表示させないテンプレートを指定する | a-blog cms developers」をご覧ください。


各テーマにおいて設定されているテンプレートは、テーマ設定画面で確認することができます。「テンプレート選択ファイル(template.yaml)の値を優先する」にチェックがある場合はテンプレート選択ファイル template.yaml 内に書かれた指示通りにテンプレートが適応され、チェックがない場合は管理画面上の入力欄から直接テンプレートを指定することができます。


チェックがある場合に適応されるテンプレート

チェックがある場合に適応されるテンプレート


チェックがない場合に適応されるテンプレート

チェックがない場合に適応されるテンプレート


インストール時には、先ほどのサイトマップに掲載した項目がそれぞれ以下のテンプレートで表示されています。



また各ページにおいて表示されているページのテンプレートは、管理ボックスから確認することができます。例えばトップページの管理ボックスには、「現在表示中のテンプレート:/themes/site2018/_top.html」と表記されています。


現在表示中のテンプレート:/themes/site2018/_top.html

a-blog cmsの内部構造について

目次

  1. テンプレートを使ったカスタマイズの前に
  2. ファイルの種類について
  3. テンプレートの内部構造について①
  4. テンプレートの内部構造について②

テンプレートを使ったカスタマイズの前に


ここからは、実際にテンプレートを開いてa-blog cmsの内部構造について見ていきます。まずは事前準備として、このハンズオンの解説使用テーマ「beginner2018」のディレクトリに移動しましょう。


a-blog cmsをインストールしている場合


a-blog cmsをインストールしたディレクトリから、themes/beginner2018 まで移動してください。


a-blog cms.ioで体験している場合


a-blog cms.ioから送られたメールアドレスにSFTP情報が記載されています。


SFTP情報

FPTソフトを使ってSFTP接続し、themes/beginner2018 まで移動してください。


ファイルの種類について


a-blog cmsのテーマファイルの構成として、_top.html などの基本のテンプレートファイルはテーマディレクトリ内直下に置かれています。その他CSS・JS・imagesなどのデータはフォルダで管理されています。


a-blog cmsのテーマファイルの構成

それでは主要なフォルダについて確認していきましょう。


admin
管理ページのテンプレートが入っているフォルダです。エントリーの編集ページやカテゴリーの編集ページにオリジナルの入力項目を設置する際に作業する場所です。

include
a-blog cms デフォルトテーマは、機能/パーツごとにHTMLファイルを分割し、top.html や index.html、entry.html に必要なパーツをインクルード(読み込んで)することでテンプレート管理をしています。includeフォルダはそのパーツを管理するフォルダです。詳しくは後述「インクルード」にて解説しています。

contact
お問い合わせフォームを管理するフォルダです。このようなフォームを管理するフォルダは、フォームを設置した分だけ準備する必要があります。beginner2018では、お問い合わせフォームのページをカテゴリーとしているため、カテゴリーコードである「contact」をフォルダ名としています。

テーマ「beginner2018」では、「お知らせ」や「物件情報」のカテゴリーコード名と一致する「news」「realestate」といったフォルダが用意されています。a-blog cmsは、基本的にテーマ直下にある top.html や index.html 、entry.html を共通のテンプレートとして表示しますが、このようにカテゴリーコード名のフォルダを作成しその中に index.html や entry.html を設置することで、カテゴリーごとにデザインをかえることができます。


newsファイル内

共通して使われているindex.html

共通して使われているindex.html


newsカテゴリーで使われているindex.html

newsカテゴリーで使われているindex.html


テンプレートの内部構造について①


ここからは、テンプレート _top.html を開いてa-blog cmsの記述のルールを見ていきます。


解説使用テンプレート_top.html

インクルード


_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")

この記載されているパスにしたがって /beginner2018/include/head/meta.html のファイルを開くと、ここで読み込まれているHTMLコードを確認することができます。


テーマ「beginner2018」ではheadタグ内で主にリンク情報などをインクルードし、body タグ内でヘッダーなどのパーツやモジュールをインクルードしています。このようにインクルード部分が多岐にわたる場合は、人の目で見ても分かりやすく管理するために、それぞれの役割についてコメント表記をしています。


<!-- エントリーヘッドライン(トップ用) -->
@include("/include/entry/topHeadline.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 の26〜35行目を見ていきましょう。


<main class="acms-col-lg-9 main">
<!-- エントリーヘッドライン(トップ用) -->
@include("/include/entry/topHeadline.html")

<!-- エントリーサマリー -->
@include("/include/entry/topSummary.html")

<!-- 確認用テンプレート -->
@include("/include/check-seo.html")
</main>

mainタグ内のacms-col-lg-9は、デスクトップ画面で12カラム中9カラムの幅を使ってコンテンツを表示させるフレームワークです。a-blog cmsでは一般的に、サイトの表側のスタイルに関わるテンプレートでスタイルガイドを利用するときはacms-の接頭辞で記述します。このようにすることで、管理画面以外で acms-admin.css を読み込む必要がなくなり、サイトを軽量化することができます。


これらのCSSフレームワークの種類については、管理画面コンフィグ内の「スタイルガイド(CSSフレームワーク)」内、もしくはリファレンス | ドキュメント | a-blog cms developerにて確認できます。レスポンシブデザインにも対応し、種類も豊富に取り揃えているので、サイトを制作する際には是非ご活用ください。



組み込みJS


_top.html の39〜62行目を見ると、接頭辞がjs-から始まるクラスが確認できます。ここでは、a-blog cmsが用意する組み込みJSという機能を使用しています。


組み込みJS
HTMLにクラス属性を設定するだけで作動するJavaScriptライブラリを「組み込みJS」といいます。一般的に、スライダーやオフキャンバスを実装する際はJavaScriptの知識が必要ですが、a-blog cmsでは、組み込みJSを活用することでJavaScriptの知識がなくともサイト内に様々な効果を加えることができます。

<div id="offcanvas" class="js-offcanvas offcanvas-bar">
  <div class="acms-hide-pc">
  <!-- グローバルナビ -->
  @include("/include/header/spGlobalNavi.html")
  </div>

  <!-- 検索フォーム -->
  @include("/include/parts/search.html")

  <!-- ピックアップリスト -->
  @include("/include/entry/pickupList.html")
 
  <!-- バナー -->
  @include("/include/siteparts/banner.html")

  <!-- リンクリスト -->
  @include("/include/siteparts/linkList.html")

  <div class="acms-hide-pc">
 	  <!-- SNSアカウントへのリンク -->
 	  @include("/include/footer/snsLink.html")
  </div>
  <a class="js-offcanvas-close close-btn" id="nav-close-btn" href="#top">コンテンツに戻る</a>
</div>

上記のソースでは、組み込みJSを使ってオフキャンバスを実装しています。オフャンバスとは、スマートフォンなどで画面全体を右もしくは左にスクロールさせ、画面外に隠れていたメニューを表示させる機能です。


オフキャンバス

オフキャンバスが適応されるエリアにjs-offcanvasのクラスを、オフキャンバスを閉じるボタンにjs-offcanvas-closeのクラスを振ることで、JavaScriptを書かずとも該当エリアをオフキャンバスメニューに収めています。


またテーマ「beginner2018」ではナビゲーション部分にも、「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の効果を取り入れることができるので、是非色々なものを試してみてください。


テンプレートの内部構造について②


ここからは、テンプレート topSummary.html を元にa-blog cmsの記述のルールを見ていきます。まずは _top.html でインクルードされているエントリーサマリーのパスに従って、topSummary.html を開いてください。


<!-- エントリーサマリー -->
@include("/include/entry/topSummary.html")

a-blog cmsのシステムと変数


topSummary.html の1行目と最終行には、下のようなコメントがあります。


<!-- BEGIN_MODULE Entry_Summary id="top_summary" -->

<!-- END_MODULE Entry_Summary -->

これらはモジュールの範囲を定める記述です。このようにa-blog cmsは、ブロックで <!-- BEGIN(システム名) --> から <!-- END(システム名) --> と定められた範囲ごとにシステムが作動する仕組みになっています。


さらにテンプレートの23行目にはエントリーのタイトルを表す下の記述があります。


<p class="summary-title"><a href="{url}">{title}</a></p>

ここではブラウザ上で登録されたデータを示す部分として、{url} と {title} の2つの変数が使われています。システムはこれらの変数を認識して、表示するエントリーごとに {url} でURLを、{title} でエントリータイトルを自動で読み込み、画面に出力しています。


<!-- 出力ソース -->
<p class="summary-title">
  <a href="(URL)/products/domestic/products_a.html">家庭用製品A</a>
</p>

a-blog cmsが用意している変数は膨大な数があります。これらを確認・利用するにあたっては、「変数表」を活用しましょう。変数表を確認するにはクイックサーチでの閲覧が便利です。チュートリアルで使用しているページにログインしている状態で、Macなら ⌘ + K 、Windoesなら control + K でクイックサーチを開きます。「:」と入力し、エントリーサマリーを選択すると、ここで使われているエントリーサマリーの変数表が確認できます。または、a-blog cms のデベロッパーサイトにある「ビルトインモジュール」のページでも確認できます。


クイックサーチ

エントリーサマリーの変数表

変数表では、それぞれのシステムの中で利用できる変数が一覧でまとめられています。特にモジュールの構造は様々なシステムが入れ子で組み込まれ、少々複雑なため、不慣れなうちはテンプレートと変数表を照らし合わせて全体像を確認することもできます。


校正オプション


topSummary.html テンプレートの24行目には、エントリー本文の要約を表す下のような変数が記述されています。


<p class="summary-detail">{summary}[trim(500, '...')]</p>

<!-- 出力ソース -->
<p class="summary-detail">
 この製品についての説明文です。この製品についての説明文です。この製品についての説明文です。この製...
</p>

この変数 {summary} に付随している [trim(500, '...')] が校正オプションです。


校正オプション
変数によって読み込まれた情報を適切な形に処理して出力する機能を校正オプションといいます。変数に付随した[ ]内に表記され、これを利用することで、誕生日のデータを元に年齢を算出したり、登録された画像をリサイズして表示することができます。

この例では、{summary}[trim(500, '...')]と表記することによって文字幅を500で足切りし、さらに足切りした後の表記として、'...' を指定しています。


また校正オプションが何も指定されない場合には、「<」「>」「 "」といった文字を実体参照に変換する [escape] がデフォルトで指定されます。この [escape] は、その他に何か一つでもオプションを指定すると適応から外れるため、その場合には指定したいオプションと合わせて表記しなければなりません。オプションを複数指定する際は、下の例のようにパイプ ( | ) を使用します。


<p class="var">{var}[escape|nl2br]</p>

特にフォームで入力されたデータを取り扱う際には、校正オプション [escape|nl2br] を利用することでクロスサイトスクリプティングを防止することができ、安全性の向上につながります。


その他の校正オプションの種類について、詳しくは校正オプション | リファレンス | ドキュメント | a-blog cms developerをご覧ください。