G: @extendsを使ってテンプレートを最適化してみよう

Ver. 2.8.0 よりテンプレートを継承できる機能が追加されました。 このハンズオンでは、継承機能(@extends)を使ってテンプレートをわかりやすくて管理しやすい形にしていきます。

1. ハンズオン用にテスト環境を用意する

HTMLファイルを修正しながら実際に動作の確認をするため、Ver. 2.8.0 以上の a-blog cms がインストールされた環境を準備します。

1-1. ablogcms.io で a-blog cms のテスト環境を用意しよう

有限会社アップルップルではお試し用環境「ablogcms.io」を用意しておりますので、こちらからテスト環境の構築ができます。また、SFTPでアクセスできるツールなどのご用意をお願いします。



※ローカル環境で開発したい方はこちらを参考にしてください。


1-2. beginner2018 のテーマを選択

今回のハンズオンでは「beginner2018」のテーマを使用します。管理ページ > コンフィグ > テーマ設定 にて、テーマディレクトリ名を「beginner2018」に設定してください。


これでハンズオンの環境準備が整いました。

2. 継承機能(@extends)について理解を深めよう

ハンズオンに取りかかる前に、継承機能(@extends)についての理解を深めておきましょう。
継承機能について詳しく解説しているページがあるのでこちらを参照してください。

3. ハンズオン1(継承機能を体験してみよう)

それでは、簡単に継承機能を体験してみましょう。HTMLファイル(テンプレート)を編集するため、「1-1. ablogcms.io で a-blog cms のテスト環境を用意しよう」で構築したサーバーへSFTPツールなどを使用しアクセスしてください。

3−1. 継承元テンプレートを作成しよう

継承元となるテンプレートを作成します。/themes/beginner2018/_layoutsフォルダにHTMLファイルを新規作成し、ファイル名を "base_test.html" としてください。


作成した "base_test.html" をテキストエディタで開き、下記を貼り付けてください。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
  <p>テスト1:これは継承元テンプレートです。</p>

  <p>テスト2:これは継承元テンプレートです。</p>

  <p>テスト3:parent要素の確認。これは継承元テンプレートです。</p>
</body>
</html>

3-2. 継承先テンプレートを作成しよう

継承先となるテンプレートを作成します。/themes/beginner2018フォルダの直下にHTMLファイルを新規作成し、ファイル名を "top_test.html" としてください。


今の時点で「http://取得したドメイン名.ablogcms.io/top_test.html」にアクセスしてみてください。"top_test.html" には何も書かれていないので、「not found」になるはずです。

※ a-blog cms では、HTMLファイル内に htmlタグ やbodyタグが書かれていないと「not found」や「404エラー」になる設定になっています(Ver. 2.7.18 より)。設定を変えることも可能なので、くわしくは直接表示させないテンプレートを指定するの記事をご覧ください。


3-3. "base_test.html" を "top_test.html" に継承してみよう

継承先となる "top_test.html" をテキストエディタで開き、下記ソースを貼り付けてください。

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

これで "base_test.html" を "top_test.html" に継承できるようになりました。"top_test.html" をブラウザで確認してみましょう。
「テスト1:これは継承元テンプレートです。」「テスト2:これは継承元テンプレートです。」「テスト3:parent要素の確認。これは継承元テンプレートです。」の表示が確認できるはずです。


3-4. 継承元を @section() 〜 @endsection で囲み、継承先で @section 内を変更してみよう

継承元となる "base_test.html" をテキストエディタで開いてください。
「<p>テスト1:これは継承元テンプレートです。</p>」「<p>テスト2:これは継承元テンプレートです。</p>」「<p>テスト3:parent要素の確認。これは継承元テンプレートです。</p>」を下記のように @section(セクション名)@endsectionで囲みます。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
</head>
<body>

  @section(test1)
  <p>テスト1:これは継承元テンプレートです。</p>
  @endsection

  @section(test2)
  <p>テスト2:これは継承元テンプレートです。</p>
  @endsection

  @section(test3)
  <p>テスト3:parent要素の確認。これは継承元テンプレートです。</p>
  @endsection
	
</body>
</html>

継承先となる "top_test.html" をテキストエディタで開き、@extends の下に下記を追記してください。

@section(test2)
<p>テスト2:これは継承先テンプレートです。</p>
@endsection

これで、「テスト2:」の文が書きかわります。ブラウザで "top_test.html" を開き、書きかわっていることを確認してください。

  • @section 追記前「テスト2:これは継承テンプレートです。」
  • @section 追記後「テスト2:これは継承テンプレートです。」

3-5. @parent を使ってみよう

継承先となる "top_test.html" をテキストエディタで開き、下記ソースをテンプレートの一番下に貼り付けてください。

@section(test3)
@parent
<p>テスト3:parent要素の確認。これは継承先テンプレートです。</p>
@endsection

"top_test.html" では@section(test3)内で @parent が呼ばれると、継承元(親テンプレート)の @section 内のコードを保持しつつ、継承先(子テンプレート)の記述も表示してくれるようになります。

それでは、"top_test.html" をブラウザで確認してみましょう。「テスト3:」は「テスト3:parent要素の確認。これは継承元テンプレートです。」と「テスト3:parent要素の確認。これは継承先テンプレートです。」の2つが確認できるはずです。


これで、@extends 機能のハンズオンは終わりです。次に @include 機能について解説していきます。

4. @includeを使ってみよう

@include は Ver. 2.8.0 から追加された新しい記法です。以前のインクルードはただファイルを読み込んでくるだけでしたが、新しいインクルード文には、変数を読み込み先テンプレートに渡せる機能が追加されています( インクルード | a-blog cms developers )。

4-1. @include の記述方法

インクルードのは下記のように記述します。

@include("/path/to/file.html")

4-2. 引数

変数を読み込み先テンプレートに渡たす機能を紹介します。変数の引き渡しは下記のように行います。

読み込み元(インクルード)

変数の渡し方は、@include()の第2引数にJSON形式で渡します。
JSON形式とは、{"名前": "値"} のように変数名と値を " : " (コロン)で区切り、全体を中括弧で囲う記述形式のことです。変数を2つ以上並べる場合は下記のように ” , ”(カンマ)で区切ります。

@include("/path/to/file.html", {"key": "value", "key2": "value2"})

読み込み先(変数参照先)

変数の参照は、通常の変数と違い2重の中括弧で囲むことで参照できるようになります。

<p>{{key}}</p>
<p>{{key2}}</p>

デフォルト値

変数が空だったり引数として渡されなかった場合に、デフォルト値を設定できるようになっています。 " | "(パイプ)で区切り、default("デフォルト値") で定義できます。また、" | "(パイプ)で区切るものはデフォルト値だけでなく、別変数も記述できます。その場合は、左から順に見ていき、空でない値があったときにその変数が表示されます。

読み込み先(変数参照先)

{{key | key2 | default("デフォルト値")}}

5. ハンズオン(@includeを使ってモジュールIDを切り替えよう)

beginner2018テーマで一覧ページ表示用に使われるindex.htmlに@include("/include/siteparts/linkList.html")と記述されている箇所があります。この@include文に引数でmodule_idを渡してあげると、リンク集の内容を切り替えられるようにしてみましょう。下記の条件を満たしていればハンズオン、クリアです!

条件1. 下のソースコードの時は今まで通りのリンク集が出るように

インクルード先でdefaultを利用し、読み込みもとでmodule_idの引数がない場合でも、モジュールIDとして、link_listが設定されているようにしましょう。

@include("/include/siteparts/linkList.html")

条件2. 下のようにタイトルとモジュールIDを設定されていれば、その内容が出るように

@include("/include/siteparts/linkList.html", {
  "module_id": "link_list2", 
  "module_heading": "リンク集2"
})

ハンズオンは以上になります。お疲れ様でした。

カスタムフィールドを動的化してみよう

通常カスタムフィールドを変更しようと思った場合にはテンプレートを修正する必要が出てきます。 ですがカスタムフィールドをカスタムフィールドで作るといったカスタムフィールドの動的化をすることによってテンプレートを触ることなくカスタムフィールドが変更できるようになります。

カスタマイズ

今回はsimple2016の物件情報の最寄り駅選択肢を動的化していきます。

カスタムフィールドのメタ情報の準備

まずは、選択肢を追加するためのカスタムフィールドを作っていきます。今回はブログのカスタムフィールドを利用してみたいと思います。 /themes/simple2016/admin/blog/field.html に以下のコードを追加します。