CMSMix Sapporo vol.3 (Drupal の回)

Drupal SAPPORO
CMSMix Sapporo vol.3
(Drupal の回)
2017年10月21日(土)
＠札幌市産業振興センター
13:00～17:00

Drupal SAPPORO
本日の予定
• 13:00 開場
• 13:30 本日の予定
Drupal CMS の概要
実習環境について
• 14:00 Drupal もくもく会
Drupal 8 テーマ作成ハンズオン（同時開催）
• 16:00 フリーセッション
• CMS と相性バッチリ!? マーケティングオートメーションと Mautic の概要（仮）
• DrupalCon Vienna 2017 参加レポート (予定)
• 16:55 閉会、連絡事項

Drupal SAPPORO
自己紹介
• 白根健司（しらねけんじ）
• (株)シナジークエスト代表
• Drupal を使ったサイト構築
• 技術者向けの研修・教材開発等
• Drupal さっぽろ事務局
• http://drupalsapporo.net/
• ※ 「Drupal さっぽろ」で検索
• 札幌近郊の Drupal ユーザーによる
ローカルコミュニティ
• 月例の勉強会
• OSC Hokkaido 参加
• 温泉合宿（Drupal ONSEN）

Drupal SAPPORO
Drupal 8 CMS の概要
• 現在のメインリリース
• 2015年11月リリース
• https://www.drupal.org/8
• 特徴
• インプレース編集
• 構成情報をコンテンツデータベースと分離
• 多言語機能の強化
• Views モジュールがコアに
• Symfony2 ベースとなりオブジェクト指向型の API に
• コアの REST サポート
• 強化されたブロックシステム

Drupal SAPPORO
準備１：ローカル環境を構築済みの方
• テーマのサンプル
• https://github.com/bkenro/cmsmix_theme
• ZIP をダウンロード＆展開して themes フォルダにコピーしてください
• https://github.com/bkenro/cmsmix_theme/archive/master.zip
• ハンズオンで使用する追加モジュール：
• devel
• https://www.drupal.org/project/devel
• field_group
• https://www.drupal.org/project/field_group
• responsive_slideshow
• https://www.drupal.org/project/responsive_slideshow
その他、開発用の設定（後述）も必要に応じて行ってください。

Drupal SAPPORO
準備２：centos7dsm でローカル構築する方
• ローカルの Drupal 開発環境構築キット
• Drupal サイトが稼働する CentOS/7 仮想マシンの導入キット
• Vagrant と VirtualBox のインストールが前提になります
• 使い方はこちら：
• http://www.white-root.com/blog/1488827797（Windows）
• http://www.white-root.com/blog/1489309129（mac）
• http://www.white-root.com/blog/1489407262（D8 導入）
• サンプルと使用モジュールを組み込んだものを USB 配布できます
• ４つファイルが入っているので、まとめてデスクトップにコピーしてください
この方法では、Drupal 自体のインストールから行う形になります。

Drupal SAPPORO
準備３：実習用サーバーを利用する方
• ws.drupalsapporo.net
• Drupal インストール済み外部サーバー
• ハンズオンのサンプルと使用モジュールを導入済み
• テーマ開発/Twigデバッグ用の構成済み
• 10 人分のアカウントを用意
• Web の管理画面は普通にブラウザから操作
• サイトの構成ファイルは SSH 接続でターミナルからアクセス可
アカウントとサイト URL の情報をお知らせします。
使いたい方はお知らせください。

Drupal SAPPORO
予備知識：Drupal 8 コアの管理 UI
• 管理機能にアクセスするための水平バー
• 管理：各管理機能のメニューを表示
• ショートカット：よく使う機能のブックマーク
• 《ログイン中ユーザー》
• ユーザーのプロファイルページ
• ログアウトリンク
• 編集：インプレース編集用リンクの表示/非表示

Drupal SAPPORO
参考：Admin Toolbar モジュール
• 入れておくと便利な管理メニュー拡張機能
• https://www.drupal.org/project/admin_toolbar
• ドロップダウン対応
• よく使う機能の追加
• キャッシュクリア
• cron 実行
・・・
• 使うには下記モジュールを有効化：
• Admin Toolbar
• Admin Toolbar Extra Tools

Drupal SAPPORO
Drupal もくもく会
テーマ作成ハンズオン
and

Drupal SAPPORO
Drupal 8 テーマ作成ハンズオン
サイトテンプレートを Drupal 8 テーマ化する

Drupal SAPPORO
本日の目標
• Bootstrap ベースのサイトテンプレートを D8 テーマ化する
• 題材：
• https://github.com/BlackrockDigital/startbootstrap-modern-
business/releases/tag/v3.3.7
• 作るもの：
• http://ws.drupalsapporo.net/cmsmix/
静的な HTML で記述された
サイトテンプレートのコードを基に
Drupal 8 用のテーマを作ります

Drupal SAPPORO
Drupal のレイヤー構造とフロー
1. データ（ノードなど）
• コンテンツの基になるデータ
2. モジュール
• 追加機能を提供するプラグイン
3. ブロックとメニュー
• モジュールの出力コンテンツ
• ページ：独自のURLを伴うもの
• メニュー項目として設定できる
• ブロック：ページ内の区画に出力されるもの
• レイアウト上の区画をリージョンと呼ぶ
4. ユーザーのアクセス許可
• ユーザーにロールを割り当て
• 各ロールに種々の権限を与える
5. テンプレート
• 最終的な出力コンテンツを生成する
• HTML、CSS、Twig 変数出典（図）https://drupal.org/getting-started/before/overview

Drupal SAPPORO
テーマとテーマエンジン
• テーマとは？
• サイトの外観を定義する、テンプレート、スタイルシート、スクリプト等を
まとめたソフトウェアパッケージのこと
• Drupal サイトに導入できる種々のテーマが開発・公開されている
• テーマエンジンとは？
• テンプレートのコードを解釈して動的にコンテンツを生成する処理系
• Drupal 8 は Twig が標準エンジン
• PHP ベースのコンパイル方式のテンプレート言語
• Twig エンジンは Twig テンプレートを PHP にテンプレートに変換し、
これを実行してコンテンツを生成する

Drupal SAPPORO
テーマの例
• コアに付属するテーマ
• Bartik
• Drupal 8 インストール後の初期デフォルトテーマ
• Seven
• Drupal 8 のデフォルト管理用テーマ
• Stark
• Drupal のデフォルト HTML マークアップをデモする最小構成テーマ
• Classy
• Bartik や Severn の基になっているベーステーマ
• drupal.org の配布テーマ一覧（contributed themes）
• https://www.drupal.org/project/project_theme

Drupal SAPPORO
Drupal のテーマ管理ユーザーインターフェイス
1. デフォルトテーマの設定
2. 管理用テーマの設定
3. テーマのグローバル設定
• ロゴ
• サイト名とスローガン
• ショートカットアイコン（ファビコン）
• ユーザーのアイコン（アバター）
• コメントにおけるユーザー検証の設定
• メインメニュー、セカンダリメニュー
4. テーマの追加インストール
Drupal 8 サイトにおける
テーマ管理の操作内容と
設定項目を見ていきます。
下記ページからスタート：
admin/appearance

Drupal SAPPORO
1. デフォルトテーマの設定
• デフォルトテーマの設定
• 有効にするだけでなくデフォルトテーマにすることで通常表示されるテーマを指定する
• デフォルトテーマとは、一般のサイト訪問者に表示されるテーマ（フロントエンドテーマ）のこと
デフォルトテーマが先頭に
この例では Seven も有効になっている。
[デフォルトに設定] リンクをクリックすると
デフォルトテーマに設定される

Drupal SAPPORO
2. 管理用テーマの設定
• 管理用テーマ
• サイトの管理に関するパス（URL）に適用されるテーマ
• /admin 配下のパスを持つページ
• コンテンツ編集用のページに適用することもできる
• デフォルトテーマの設定ページの一番下にある UI で指定する
デフォルトテーマまたは
インストール済みテーマの
中から選択・指定する
コンテンツ編集ページに
適用することもできる

Drupal SAPPORO
3. テーマのグローバル設定 (1)
• 全テーマ共通の環境設定
• インストール済みの全テーマに適用
されるデフォルト設定を指定できる
• パス：
admin/appearance/settings
• 個別のテーマの設定で再定義可

Drupal SAPPORO
4. 追加テーマのインストール
• テーマフォルダのコピー
• 入手したテーマのフォルダを themes フォルダにコピーする
• 手作業による方法
• drush による方法
• インストールする
• UI による方法
• drush による方法

Drupal SAPPORO
テーマフォルダの配置場所
• core/themes
• コアのテーマ（Bartic、Seven など）の格納場所
• themes
• コア以外の追加テーマの格納場所。
次の使い分けが推奨されている：
• themes/contrib
• contributed テーマ（drupal.org で公開されているテーマ）の格納場所
• themes/custom
• 独自開発のテーマの格納場所

Drupal SAPPORO
テーマを構成する主なファイル
• *.info.yml
• テーマを定義する（唯一の）必須ファイル。
• テーマのメタ情報、ライブラリ、ブロックのリージョンを定義する。
• screenshot.png
• テーマの管理 UI に表示されるスクリーンショット画像 (588x438px) のファイル。
• *.libraries.yml
• JavaScript と CSS のファイルをテーマに組み込むためのライブラリを定義する。
• [css] フォルダと [js] フォルダ
• CSS ファイルと JavaScript ファイルを格納するためのサブフォルダ。
• 各ファイルをテーマに組み込むためのライブラリを *.libraries.yml で定義する。
• *.theme
• 出力を制御するすべての PHP コードを記述するためのファイル。
このファイルがあれば
テーマとして認識される

Drupal SAPPORO
作業ステップ
• step0：空テーマを作る
• step1：テンプレートを使ってみる
• step2： Twig の機能を確認する
• step3： CSS/JS を組み込む（ライブラリ）
• step4：ページテンプレートを導入する
• step5：メニューのテンプレートをオーバーライドする
• step6：リージョンを組み込む
• step7：テーマの前処理関数をオーバーライドする
• step8： Views でグリッドを実現する
• step9：フィールドのマークアップをオーバーライドする

Drupal SAPPORO
step0
空テーマを作る

Drupal SAPPORO
step0：Drupal 8 の空テーマを作る
• 手順
• themes フォルダに「cmsmix0」という名前のフォルダを作る。
• 中に cmsmix0.info.yml という名前のファイルを作る。
• 次のコードを記述して保存する。
• 作ったフォルダに screenshot.png ファイルをコピーする。
• 以上でテーマの管理 UI にテーマが表示されます。
• テーマを有効＆デフォルトに設定し、サイトを表示してみましょう。
name: CMSMix0
type: theme
description: 'step0 theme for CMSMix 2017-10-21'
core: 8.x
base theme: false

Drupal SAPPORO
作ったテーマをインストールする
• パス：admin/appearance

Drupal SAPPORO
*.info.yml ファイルの設定項目
• name
• テーマ管理 UI に表示されるテーマの表示名。
• type
• Drupal の拡張要素の種類 (module | theme | profile)
• テーマの場合は theme とする。
• description
• テーマ管理 UI に表示されるテーマの説明文。
• core
• テーマがサポートする Drupal コアのバージョン
• base theme
• 別のテーマを継承する場合にそのテーマの内部名 (.info.yml ファイル名) を指定
• 継承しない場合は false と指定する。

Drupal SAPPORO
step1
テンプレートを使ってみる

Drupal SAPPORO
step0 で表示されたページのソースを見ると…
<!DOCTYPE html>
<html lang="ja" dir="ltr" prefix="content:
http://purl.org/rss/1.0/modules/content/ dc: http://purl.org/dc/terms/ foaf:
http://xmlns.com/foaf/0.1/ og: http://ogp.me/ns# rdfs:
http://www.w3.org/2000/01/rdf-schema# schema: http://schema.org/ sioc:
http://rdfs.org/sioc/ns# sioct: http://rdfs.org/sioc/types# skos:
http://www.w3.org/2004/02/skos/core# xsd: http://www.w3.org/2001/XMLSchema# ">
<head>
<meta charset="utf-8" />
<meta name="Generator" content="Drupal 8 (https://www.drupal.org)" />
<meta name="MobileOptimized" content="width" />
<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="shortcut icon" href="/core/misc/favicon.ico"
type="image/vnd.microsoft.icon" />
<link rel="canonical" href="/index.php/node/1" />
<link rel="shortlink" href="/index.php/node/1" />
<link rel="delete-form" href="/index.php/node/1/delete" />
<link rel="edit-form" href="/index.php/node/1/edit" />
<link rel="version-history" href="/index.php/node/1/revisions" />
・・・
出力されるページのタグ構造は
どこで定義されているのか？

Drupal SAPPORO
テンプレートとテンプレートエンジン
• テンプレート
• テーマから出力されるコンテンツのひな形を定義するファイル
• HTML のタグでタグ構造を記述する
• エンジン固有のタグで動的コンテンツを埋め込む
• テンプレートエンジン
• テンプレートを処理して最終的な HTML 出力を生成する処理系
• Drupal の標準テンプレートエンジンは Twig
Drupal 8 テーマからの出力のタグ構造は
Twig で記述したテンプレートによって定義される

Drupal SAPPORO
コアのテンプレートとオーバーライド
• コアのテンプレート
• 各モジュールの出力の構造を定義するテンプレートが用意されている
• 例）system モジュール
• html.html.twig HTML 全体の基本構造（html 要素）
• page.html.twig ページ本体（body 内要素）の構造
• region.html.twig リージョンの構造
• block.html.twig ブロックの構造
• テンプレートのオーバーライド
• コアのテンプレートと同じ名前のテンプレートファイルを
テーマフォルダに配置すると、優先してそのファイルが使用される

Drupal SAPPORO
テンプレートの場所
• コアに含まれているデフォルトのテンプレート
• core/modules/system/templates フォルダ配下
• html.html.twig
• page.html.twig
• region.html.twig
・・・
• core/module/node/templates
• ・・・
• code/modules/comment/templates
• ・・・
• core/modules/block/templates
• ・・・
※ 拡張子は .twig である点に注意

Drupal SAPPORO
html.html.twig
ページ : page.html.twig
リージョン : region.html.twig
リージョン：region.html.twig リージョン：
region.html.twig
ノード
node.html.twig
コメント
comment.html.twig
ブロック
block.html.twig
ブロック
block.html.twig
リージョン：region.html.twig
• Drupal 8 の
主なコアテンプレート

Drupal SAPPORO
step1：HTML テンプレートのオーバーライド
• デフォルトの HTML テンプレートをオーバーライドしてみる
• 手順：
1. テーマフォルダ (cmsmix1) に html.html.twig ファイルを作成する
2. 下記コードを保存する：
3. キャッシュをクリアしてトップページを再表示する
<html>
<head>
<title>step1</title>
</head>
<body>Hello, theming!</body>
</html>
html.html.twig
コアのテンプレートをオーバーライドしているので
どのページもすべて同じ出力になる

Drupal SAPPORO
step2
Twig の機能を確認する

Drupal SAPPORO
Twig について
• Symfony2、 Drupal 8 のデフォルトテンプレートエンジン
• https://twig.symfony.com/
• PHP ベースのコンパイルによる処理系
• テンプレートは Twig 固有のタグ（後述）を用いて記述する
• D7 までの PHPTemplate のように任意のコードが記述できなくなった
• ページ出力時の動作：
• Twig テンプレートを PHP テンプレートにコンパイル（変換）する
• 生成された PHP テンプレートはキャッシュされ次回以降再利用される
• キャッシュをクリアすると再度コンパイルが実行される
• 変換した PHP テンプレートを実行して出力を生成する
•Twig
テンプレート
コンパイル
•PHP
テンプレート
実行
•HTML
コンテンツ
出力

Drupal SAPPORO
Twig タグ
• {# ... #} コメント
• コメントタグの間に記述したものは無視され、出力にも反映されない。
• {{ ... }} 出力
• 出力タグの間に変数を記述すると、その値が出力される。
• {% ... %} 実行
• Twig の構文要素を用いて実行文を記述できる。
• 変数への値の代入
• 条件分岐
• 反復処理

Drupal SAPPORO
Twig 変数
• 一般の変数
• {% set <変数> = 値 %} で変数を定義して値をセットできる。
• Drupal テンプレート変数
• コアのテンプレートファイルの冒頭部分に、
そのテンプレートで使用できる変数の説明コメントが記述されている。
{#
/**
* @file
* Default theme implementation for the basic structure of a single Drupal page.
*
* Variables:
* - logged_in: A flag indicating if user is logged in.
* - root_path: The root path of the current page (e.g., node, admin, user).
* - node_type: The content type for the current node, if the page is a node.
* - head_title: List of text elements that make up the head_title variable.
・・・
#}
・・・
html.html.twig

Drupal SAPPORO
コード例１：出力タグ
• テンプレート変数の値出力
• html.html.twig のテンプレート変数 logged_in を出力する例
• logged_in はログイン中なら true となるテンプレート変数
{# 変数値の出力 #}
<p>logged_in 変数の出力例： {{ logged_in }}</p>
<hr>
html.html.twig（抜粋）
{#
/**
* @file
* Default theme implementation for the basic structure of a single Drupal page.
*
* Variables:
* - logged_in: A flag indicating if user is logged in.
・・・

Drupal SAPPORO
コード例２：if 文
• 条件分岐
• {% if 条件式 %} ① {% else %} ② {% endif %}
• 条件式が true と評価されれば ①、それ以外は ② が有効となる
{# 条件分岐 #}
<p>条件分岐の例：logged_in が true ならログイン中と表示する。</p>
{% if logged_in %}
<p>ログイン中です。</p>
{% else %}
<p>ログインしていません。</p>
{% endif %}
<hr>

Drupal SAPPORO
コード例３：for 文
• 反復構造
• {% for 変数 in 初期値..終了値 %} … {% endfor %}
• … の部分では変数を利用して処理を記述できる（出力等）
{# 反復構造 #}
<p>反復処理の例：変数 i を 0 から 3 まで変化させて値を表示する。</p>
{% for i in 0..3 %}
i = {{ i }}<br>
{% endfor %}
<hr>

Drupal SAPPORO
コード例４：マップ構造
• マップ構造と変数への代入
• {% set 変数 = {キー:値, キー:値, ・・・} %}
• 「キー:値」の形式をカンマ区切りで並べて {} で囲むとマップ構造になる
• set 変数 = に続けることで変数に代入できる
{# 変数への代入とマップ構造 #}
{%
set tokens =
{0:'hello',1:'my',2:'name',3:'is',4:'drupal.'}
%}

Drupal SAPPORO
コード例５：for in 構文
• 配列（マップの値）の全件表示
• {% for 変数 in 配列 %} … {% endfor %}
• 全要素（の値）を「変数」で参照しながら全件処理する
• … の部分では変数を利用して処理を記述できる（出力等）
{# 先に定義したマップの値を全件表示する #}
<p>マップの値を全件表示する：</p>
{% for token in tokens %}
{{ token }}
{% endfor %}
<hr>

Drupal SAPPORO
コード例６：for key,value in 構文
• マップのキーと値の全件表示
• {% for キー変数,値変数 in マップ %} … {% endfor %}
• マップ内の各要素のキーと値を参照しながら全件処理する。
• 各要素のキーは「キー変数」、値は「値変数」にそれぞれセットされる
• … の部分で各変数を参照して処理を記述できる（出力等）
{# 先に定義したマップのキーと値の全件表示 #}
<p>マップのキーと値を全件表示する：</p>
{% for key,value in tokens %}
token[{{ key }}] = {{ value }}<br>
{% endfor %}
<hr>

Drupal SAPPORO
コード例７：フィルタ (1)
• 出力時に定義済みのフィルタ処理を適用する例１
• パイプ記号（|）でつなげて適用できる
• Twig 標準の upper フィルタを使用すると大文字に変換できる
{# フィルタの使用例(1) #}
<p>フィルタの使用例：upper フィルタを使用して大文字に変換する：</p>
{% for token in tokens %}
{{ token|upper }}
{% endfor %}

Drupal SAPPORO
コード例８：フィルタ (2)
• 出力時に定義済みのフィルタ処理を適用する例２
• パイプ記号（|）でつなげて適用できる
• Drupal の t フィルタを使用すると文字列を翻訳できる
• "Content type" はその対訳「コンテンツタイプ」に変換されて出力される
{# フィルタの使用例(2) #}
<p>フィルタの使用例：t フィルタを使用して文字列を翻訳する：</p>
{{ 'Content type'|t }}
<hr>

Drupal SAPPORO
コード例９：変数のダンプ
• dump() 関数の利用
• {{ dump(変数) }}
• 特定の変数をダンプする。
• {{ dump() }}
• テンプレート内で使用できる変数をすべてダンプする。
{# ダンプの例 #}
{{ dump(tokens) }}
html.html.twig（抜粋） Twig の dump() 関数を使用するには、
デバッグモードで動作させる必要があります。

Drupal SAPPORO
変数をダンプするには
• Twig のデバッグモードを有効にする必要あり
1. sites/development.services.yml ファイルを開く
• このファイルは settings.local.php 内で読み込まれるため、
後述の設定も必要となる
2. このファイル内で設定される下記オプションを true にする
• デバッグモードが有効になると…
• テンプレートファイル名の提案などテーマの関連情報のコメントによって
各テンプレートの出力部分が囲まれるようになる。
• dump() を使用して変数の内容をダンプ出力できる
parameters:
http.response.debug_cacheability_headers: true
twig.config:
debug: true
・・・

Drupal SAPPORO
開発環境としての設定 (1)
• sites/default フォルダ
• 書き込み権限を与えておく
• $ chmod 755 sites/default
• settings.local.php の有効化
• サンプルファイルをコピーする
• $ cp sites/example.settings.local.php sites/default/settings.local.php
• settings.php 内のコード（コメント解除）
• render/page キャッシュの無効化
• settings.local.php 内のコード（コメント解除）
if (file_exists($app_root . '/' . $site_path . '/settings.local.php')) {
include $app_root . '/' . $site_path . '/settings.local.php';
}
$settings['cache']['bins']['render'] = 'cache.backend.null';
$settings['cache']['bins']['dynamic_page_cache'] = 'cache.backend.null';

Drupal SAPPORO
開発環境としての準備 (2)
• CSS と JS の圧縮を解除する
• 管理画面のパフォーマンス設定を開く
• パス： admin/config/development/performance
• 帯域幅最適化で次の２つのチェックをオフにする
• CSS ファイルを結合する
• JavaScript ファイルを集約

Drupal SAPPORO
step2：CMSMix2 テーマ
• html.html.twig で Twig コード例を実行する
• 手順：
1. html.html.twig に先述の各コード例を反映する
2. ファイルを保存してトップページを表示してみる
<!DOCTYPE html>
<html>
<head>
<title>demo3</title>
</head>
<body>
{# 変数値の出力 #}
<p>logged_in 変数の出力例：{{ logged_in }}</p>
<hr>
・・・
最後のダンプ出力を表示するには
デバッグモードで実行する必要あり

Drupal SAPPORO
デバッグモードでの出力
• dump() 関数の動作
• Twig をデバッグモードで動作させることで dump() 関数が動作する
{# ダンプの例 #}
{{ dump(tokens) }}
当該コードを {{dump()}} に書き換えると
すべてのテンプレート変数がダンプされます。

Drupal SAPPORO
テンプレートの提案（suggestion）
• suggestion とは？
• コアをオーバーライドできるテンプレートファイル名の候補のこと
• 適用範囲などが異なる複数のテンプレート名の候補が存在する場合がある
• 優先順位が決まっている
• 優先順位の高い順に探索し、テーマ内で最初に見つかったものが適用される
• 具体的なファイル名の候補は下記を参照
• https://www.drupal.org/docs/8/theming/twig/twig-template-
naming-conventions
種々の条件に対応して
適用されるテンプレートの候補を
ファイル名パターンとして提示します
たとえば、ブロックのテンプレートなら・・・

Drupal SAPPORO
Twig テンプレートの命名規則
• テンプレートファイルの選択ルール
• 出力を構成する各パートごとに決められた命名規則に基づいて
該当するファイルが読み込まれ、実行される
• 命名規則の例
• HTML テンプレート
• HTML ページの基本構造を定義するテンプレート
• デフォルト： core/modules/system/templates/html.html.twig
• オーバーライド：
1. html-internalviewpath.html.twig
2. html--node--id.html.twig
3. html.html.twig
その他の例は下記資料を参照：
https://www.drupal.org/docs/8/theming/twig/twig-template-naming-conventions

Drupal SAPPORO
テンプレート名の候補の確認
• 各設定を有効にした環境でサンプルを表示してみる：
• 表示されたページのソースを確認してみよう




<!DOCTYPE html>
<html>
・・・
</html>

テンプレートファイル名の提案の一覧と
現在使用されているテンプレートファイルが
コメントとして出力されるようになる。
このページ生成で使用された
候補ファイル名には x が表示される

Drupal SAPPORO
step3
CSS/JavaScript を組み込む（ライブラリ）

Drupal SAPPORO
テーマ作成題材
• 使用素材：Start Bootstrap の「Modern Business」
• https://startbootstrap.com/template-overviews/modern-business/

Drupal SAPPORO
題材トップページ (index.html) の HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Modern Business - Start Bootstrap Template</title>

<link href="css/bootstrap.min.css" rel="stylesheet">

<link href="css/modern-business.css" rel="stylesheet">

<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">



</head>
<body>
・・・

Drupal SAPPORO
題材で使用している CSS/JS は…？
• css/bootstrap.min.css（Bootstrap のコア CSS）
• css/modern-business.css（題材のカスタム CSS）
• font-awesome/css/font-awecome.min.css（カスタムフォント）
<!DOCTYPE html>
<html lang="en">
<head>
<title>Modern Business - Start Bootstrap Template</title>

<link href="css/bootstrap.min.css" rel="stylesheet">

<link href="css/modern-business.css" rel="stylesheet">

<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
・・・
題材の index.html（冒頭部分）
これらのファイルをアセットとしてライブラリを定義し、
.info.yml から参照することにしましょう

Drupal SAPPORO
ライブラリ (asset library) とは？
• Drupal 8 で導入された資源管理のための仕組み
• CSS/JS ファイル群を目的別にグループ化する
• 定義したライブラリは選択的に読み込むこともできる（後述）
• ライブラリを定義して利用するには：
1. SMACSS に基づいて CSS/JS ファイルを分類・格納する
• Base、Layout、Component、State、Theme
2. *.libraries.yml ファイルでファイル群に名前を付けてライブラリとして定義する
3. *.info.yml ファイルの libraries エントリで参照する
特定用途のファイル群が
ライブラリとして抽象化される。
このライブラリを単位として、
テンプレートごとに選択的に
読み込ませることもできる。
アセット
（CSS/JS）
.libraries.yml.info.yml
libraries:
lib1:
hoge.css
fuga.js
lib2: bar.css

Drupal SAPPORO
Bootstrap コア CSS をライブラリ化
• cmsmix3.libraries.yml ファイル
• テーマの内部名 (=フォルダ名) で、libraries.yml ファイルを作成する
• 次の記述を追加する：
bootstrap:
version: 3.3.7
css:
theme:
css/bootstrap.min.css: {}
js:
js/bootstrap.min.js: {}
dependencies:
- core/jquery
・・・
cmsmix3.libraries.yml（抜粋） bootstrap
最上位の階層でライブラリ名を定義する
css: および js:
第2階層でアセットの種類を指定する。
theme:
CSS では SMACSS の分類を指定。
分類によって適用の重みが変わる。
{}
波カッコでは media を指定できる。
例： { media: print }
dependencies:
jQuery など別のライブラリへの依存が
ある場合はここに指定する。

Drupal SAPPORO
カスタム CSS/フォントをライブラリ化
• 同様に、他の CSS やフォントも組み込む
・・・
modern-business:
css:
theme:
css/modern-business.css: {}
font-awesome:
css:
theme:
font-awesome/css/font-awesome.min.css: {}
misc:
css:
theme:
css/cmsmix.css: {}
oscdemo.libraries.yml（抜粋）
modern-business:
題材テンプレートのカスタム CSS
font-awesome:
カスタムフォントの組み込み
misc:
各種調整用の独自スタイルシート

Drupal SAPPORO
テーマに組み込む
• ライブラリの参照先
• 題材テンプレートに付属する下記フォルダをテーマフォルダにコピーする
• [css]、[font-awesome]、[js] の各フォルダ
• ライブラリへの参照設定
• cmsmix3.info.yml ファイルに次の記述を追加する
• この場合はサイト内のすべてのファイルに適用される
・・・
libraries:
- cmsmix3/bootstrap
- cmsmix3/modern-business
- cmsmix3/font-awesome
- cmsmix3/misc
cmsmix3.info.yml（追加部分）
libraries:
先に定義した各ライブラリへの参照を登録する。
これにより、各ライブラリを読み込むコードが、
すべてのページで出力される。

Drupal SAPPORO
step4
ページテンプレートを導入する

Drupal SAPPORO
やりたいこと
• 題材の index.html を Twig テンプレート化する
• html.html.twig 出力全体の基本構造（html 要素）
• 題材 HTML ページの基本構造を反映する
• html 要素
• head 要素と下位要素
• meta 要素
• link 要素
• page.html.twig ページ本体の構造（body 内要素）
• 題材の静的グローバルナビを Drupal のプライマリメニューに置き換える
• 必要なクラス属性を Twig テンプレートに反映
• その他の本文はとりあえず静的 HTML のままで
• トップページ固有のレイアウトなので、トップページだけに適用されるようにする
• テンプレートを page--front.html に置き換える
CSS や JavaScript など、
外部ファイルへの参照は step3 で
「ライブラリ」として定義済み

Drupal SAPPORO
ページテンプレート
• 題材の index.html の該当部分をコピーする
1. page.html.twig ファイルを作成する
2. index.html の body 要素の中身をそのままコピーする
3. 末尾の script 要素は、ライブラリで代替されるので削除する

<nav class="navbar navbar-inverse navbar-fixed-top"
role="navigation">
<div class="container">
・・・
</div>
</footer>
</div>

page.html.twig（冒頭と末尾の部分のみ）
これで題材テンプレートのトップページのマークアップと、
そこで必要な CSS/JS をアセットとしてテーマに組み込みました。
キャッシュをクリアすると、題材と同じトップページが表示されます。

Drupal SAPPORO
オーバライドをトップページに限定する
• トップ（フロント）ページだけに適用するには
• 出力されたページのソースで Twig デバッグのコメントから
テンプレート名の候補を調べると・・・
・・・

* page--front.html.twig
* page--node--1.html.twig
* page--node--%.html.twig
* page--node.html.twig
x page.html.twig
-->


・・・
page--front.html.twig
トップページ専用の置換候補
page.html.twig
現在使用されているテンプレートファイル名
page.html.twig の名前を page--front.html.twig に変更することで
テーマによるオーバーライドをトップページに限定できる。

Drupal SAPPORO
index.html の body のマークアップと CSS/JS をトップページに組み込んだ状態

Drupal SAPPORO
step5
グローバルナビにメインメニューを組み込む

Drupal SAPPORO
メニューの組み込み
• コアのメインメニューをグローバルナビとして組み込む
• コアのメインメニュー：
• ページのテンプレートで変数 page.primary_menu として取得可
• マークアップはリスト形式（<ul><li>..</li></ul>)
• 題材のグローバルナビ：
• index.html 内で、やはりリスト形式で記述されている
そのまま
置換できそう・・・
・・・
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
{{ page.primary_menu }}
</div>
page--front.html.twig（メインメニューの埋め込み部分）
グローバルナビの静的 ul 要素を、
page.primvary_menu 変数の
出力コードで置換してしまおう

Drupal SAPPORO
メニュー項目を用意する
• メインメニューに表示するメニュー項目を用意する
• パス： admin/structure/menu/manage/main
• 題材と同じメニューの項目を作成しておく
各項目のリンク先はとりあえず
トップページにしておきます。
キャッシュをクリアすると、
グローバルナビに反映されるはず。

Drupal SAPPORO
コアのメインメニューをグローバルナビに組み込んだところ
クラス属性の設定が不十分で
レイアウトが崩れている

Drupal SAPPORO
生成ページのソースを題材と比較すると…

<ul class="nav navbar-nav navbar-right">
<li>
<a href="about.html">About</a>
</li>
題材の index.html（抜粋）
・・・
<ul>
<li>
<a href="/" data-drupal-link-system-path="<front>">About</a>
</li>
Drupal の生成ページ（抜粋）
ul 要素のクラス属性が不足している。
この部分を出力しているテンプレートは？

Drupal SAPPORO
Twig デバッグのコメントを確認すると…
・・・

* menu--main.html.twig
x menu.html.twig
-->

<ul>
<li>
<a href="/" data-drupal-link-system-path="<front>">About</a>
</li>
Drupal の生成ページ（抜粋）
現在使用されているメニューのテンプレートが
menu.html.twig であること、および
メインメニュー専用のテンプレートファイルの
menu--main.html.twig で
オーバーライドできることがわかる。

Drupal SAPPORO
step5x：メニューテンプレートのオーバーライド
• menu.html.twig をオーバーライドする
• core/system/templates/menu.html.twig をテーマフォルダにコピーする。
• ファイル名を menu--main.html.twig に変更する。
• このファイルを開いて、ul タグに必要な属性を追加する：
・・・
{% import _self as menus %}
・・・
{{ menus.menu_links(items, attributes, 0) }}
{% macro menu_links(items, attributes, menu_level) %}
{% import _self as menus %}
{% if items %}
{% if menu_level == 0 %}
<ul{{ attributes.addClass('nav','navbar-nav','navbar-right') }}>
・・・
menu--main.html.twig（抜粋）
変数 attributes はメニュー項目の属性の集合
addClass() メソッドで属性を追加できる。

Drupal SAPPORO
メニューのレイアウト修正後
メニューブロックとして出力されるため
コンテキストリンクから編集できる

Drupal SAPPORO
step6
リージョンの定義とブロックの割り当て

Drupal SAPPORO
各部の実装方法の検討
今回使用するリージョン
① Carousel（カスタム）
② コンテンツ（標準）
③ Marketing icons（カスタム）
④ Portfolio（カスタム）
⑤ Features（カスタム）
⑥ Call to Action（カスタム）
①
②
③
④
⑤
⑥

Drupal SAPPORO
リージョンについて
• デフォルトリージョン
• リージョンを特に定義しない場合は
デフォルトリージョンが用意される。
• リージョンを定義するには
• *.info.yml ファイルの
regions: エントリで定義する。
• 下位に各リージョンのキーと表示名を
コロン (:) で区切ったペアを列挙する
• キーは半角英数字およびアンダースコアが使用できる
• キーはテンプレート内の変数名 (page のプロパティ名) に対応づけられる
• 表示名は (空白を含む場合は) 単引用符 (') で囲む
page.header
page.primary_menu
page.secondary_menu
page.highlighted
page.help
page.content
page.sidebar_first
page.sidebar_second
page.footer
page.breadcrumb
デフォルトリージョンのテンプレート変数
※page.html.twig で使用できる

Drupal SAPPORO
リージョンを定義する
• *.info.twig ファイルにリージョン定義を追加するには：
• cmsmix6.info.twig に
右のコードを追加する。
・・・
regions:
header: 'Header'
primary_menu: 'Primary menu'
secondary_menu: 'Secondary menu'
page_top: 'Page top'
page_bottom: 'Page bottom'
highlighted: 'Highlighted'
carousel: 'Carousel'
breadcrumb: 'Breadcrumb'
content: 'Content'
marketing_icons: 'Marketing Icons'
portfolio: 'Portfolio'
features: 'Features'
call_to_action: 'Call to Action'
sidebar_frist: 'Left sidebar'
sidebar_second: 'Right second'
footer: 'Footer'
デフォルトのリージョンも使用する場合は
それも含めて定義する。
各リージョンのキー(左側）が
page のプロパティ名にマッピングされる。
右側は、管理画面で各リージョンを
識別するための表示名となる。
cmsmix6.info.twig

Drupal SAPPORO
ブロックレイアウトの管理画面で確認する
• *.info.yml で定義したリージョンが管理画面に表示される

Drupal SAPPORO
テンプレートにリージョンを定義する
• リージョンをトップページのテンプレートに定義するには
• ページのテンプレート (page--front.html.twig) を開いて、
リージョンに対応する部分に {{ page.<キー>}} を配置していく
• <キー> の部分は *.info.yml で定義したリージョンのキー
• リージョンに配置したブロックのコンテンツは、この部分に出力される
・・・
{{ page.highlighted }}
<div class="carousel">
{{ page.carousel }}
</div>
・・・
page--front.html.twig（抜粋）
スライダ配置用のリージョン

Drupal SAPPORO
・・・

<div class="container">

<div class="row">
{{ page.content }}
{{ page.marketing_icons }}
</div>

<div class="row">
{{ page.portfolio }}
</div>

<div class="row">
{{ page.features }}
</div>
<hr>

<div class="well">
<div class="row">
{{ page.call_to_action }}
</div>
</div>
・・・
page--front.html.twig（つづき）
トップページ用のノード配置用 (見出しのみ)
横三段ボックス配置用
画像のグリッド表示用
文章＋画像のブロック配置用
Call to Action ブロック配置用
これで、元の静的なコンテンツの代わりに、
各リージョンに配置したブロックが出力されます。

Drupal SAPPORO
トップページ用のコンテンツを用意する
• フロント用の基本ページを作成する
• コンテンツタイプ「基本ページ」でコンテンツを新規作成し、
タイトルを "Welcome to Modern Business" とする。
• 本文は空白にしておく
• このコンテンツをフロントページに設定する。
• パス： admin/config/system/site-information
作成したコンテンツのIDが１の場合
これで、フロントページ用のコンテンツが用意できました。

Drupal SAPPORO
表示してみる
• Content リージョンに先に作成したコンテンツが表示される
Content リージョンに配置されたコンテンツが
ページに出力されていることがわかります。

Drupal SAPPORO
三段ボックス用のブロックを用意する
• Marketing icons リージョンに配置する３つのブロック
• 題材にあった３つのボックスを Drupal の基本ブロックとして作成する
• 手順：
• カスタムブロックライブラリの管理画面で [カスタムブロックを追加] する。
• 基本ブロックを選択する。
• ブロックの説明に、三段ボックスを識別する名前を入力し、
本文には、ブロックとして表示するコンテンツを入力する。
作成するコンテンツは
sample_contents.txt からコピーするとよい

Drupal SAPPORO
Marketing icons リージョンに配置する
• ブロックレイアウトの管理画面から
• Marketing icons リージョンに３つのブロックを配置する
• 各ブロックの「閲覧の制限」で [ページ] に <front> と入力する
• これによりトップページでのみ表示されるブロックになる。
３つのブロックを追加したところ

Drupal SAPPORO
表示してみる
３つのブロックが表示されることがわかります。
ただし、まだ横3段ボックスにはなりません。

Drupal SAPPORO
step7
テーマ API を利用して class 属性を追加する

Drupal SAPPORO
横３段ボックスにするには
• 題材の HTML ではどうなっているか？
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h4><i class="fa fa-fw fa-check"></i> Bootstrap v3.3.7</h4>
</div>
<div class="panel-body">
<p>Lorem ipsum dolor ・・・ dicta nostrum quod?</p>
<a href="#" class="btn btn-default">Learn More</a>
</div>
</div>
</div>
Bootstrap のグリッドシステムを利用して
Medium device (横幅 ≥ 992px) で
全体の 4/12 = 1/3 にする指定
Marketing icons リージョンに配置する
ブロックの div に同じクラスを追加すればよい

Drupal SAPPORO
API で属性に変更を加える方法
• *.theme ファイル
• 出力の前処理などを実装するための PHP ファイル
• テーマフォルダに <テーマ名>.theme という名前で作成する
• 出力の前処理（プリプロセス）
• THEME_preprocess_HOOK(&$variables) 関数
• プリプロセスを行うための関数
• THEME の部分はテーマ名で置き換える
• HOOK の部分は対象要素に応じた名前で置き換える
• 例1）cmsmix7_preprocess_block(&$variables)
• oscdemo テーマでブロックの出力に変更を加えることができる
• 例2）cmsmix7_preprocess_field(&$variables)
• oscedemo テーマでフィールドの出力に変更を加えることができる

Drupal SAPPORO
ブロック出力の前処理を実装する
• cmsmix7_preprocess_block(&$variables) の実装
• テーマフォルダに cmsmix7.theme ファイルを作成する
• 次のコードを記述して保存する
• キャッシュをクリアすると関数が有効になる
• $variables を変更することでブロックの出力を操作できる
• $variables 配列の構造を調べるにはどうするか？
<?php
function cmsmix7_preprocess_block(&$variables) {
}
cmsmix7.theme
PHP の var_dump() でも可能ですが、
Drupal の場合はもっと良い方法が用意されています。

Drupal SAPPORO
Devel モジュールの利用
• 開発支援用のモジュール
• https://www.drupal.org/project/devel
• 開発作業を支援する種々の機能を提供する
• 次の2つのモジュールを有効にする
• Devel
• Devel Kint
• dpm() 関数
• Devel モジュールを有効にすると使用できるダンプ関数
• 引数で指定した変数を「ステータスメッセージ」ブロックに出力する
• Devel の管理画面から出力方法を指定できる
• admin/config/development/devel

Drupal SAPPORO
Devel: ダンプ方法の選択
• Devel 管理画面でダンプ方法を指定する
• admin/config/development/devel
ここでは Kint を使用してみましょう。
https://github.com/kint-php/kint

Drupal SAPPORO
ダンプしてみる
• dpm() 関数を利用して引数をダンプする
• cmsmix7.theme を次のように変更し、キャッシュをクリアする
function cmsmix7_preprocess_block(&$variables) {
dpm($variables);
}
cmsmix7.theme
各ブロックごとに $variables が
Kint ダンプされます。

Drupal SAPPORO
横３段ボックスにしたいブロックを調べる
• 一番最後のダンプを展開して調べていくと…
３つのボックスに対応するブロックについて、
['attributes']['class'] 要素の値として
'col-md-4' を追加すればよさそうだ・・・

Drupal SAPPORO
configuration の下を見ていくと・・・
・・・
ブロックのタイトルがココに・・・
→ この値でブロックを識別できる

Drupal SAPPORO
クラス属性を追加するコード
$variables 配列にクラス属性を追加するコード
• cmsmix7x.theme を次のように変更し、キャッシュをクリアする
function cmsmix7x_preprocess_block(&$variables) {
//dpm($variables['attributes']);
$featured = array('Easy to Use',
'Bootstrap v3.3.7', 'Free & Open Source');
$label = $variables['configuration']['label'];
if (in_array($label, $featured)) {
$variables['attributes']['class'][] = 'col-md-4';
}
}
cmsmix7x.theme
３段ボックスのブロックの id 属性に一致するブロックに
クラス属性の値として col-md-4 を追加する。

Drupal SAPPORO
結果を確認
• Medium device の幅を超えると横3段表示になる
• ３つのブロックの div のクラス属性に col-md-4 が追加される

Drupal SAPPORO
step8
Views で Bootstrap のグリッドシステムを利用する

Drupal SAPPORO
「ポートフォリオ」コンテンツタイプ
1. [サイト構築] - [コンテンツタイプ] - [コンテンツタイプの追加] をクリック
2. 表示されるフォームに次のように入力：
• 名前ポートフォリオ
• description (空欄でもOK)
3. 保存する。
4. [フィールドの管理] タブで [フィールドの追加] をクリック。
5. 「フィールドの追加」ページの [既存のフィールドを再利用] の一覧から
画像: field_image を選択し、ラベルに「画像」と入力して保存。
6. 次の画面でそのまま [設定の保存] をクリック。

Drupal SAPPORO
ここで、…サンプル用データを自動生成しておく
• Devel generate モジュールを有効にする
• admin/modules （機能拡張）
• Generate content 機能を利用する
• admin/config/development/generate/content
• コンテンツタイプに「ポートフォリオ」を選択
• "How many nodes would you like to generate?" に６を指定する
• 実行すると、6件のポートフォリオのコンテンツが生成される

Drupal SAPPORO
コンテンツの作成
• 「ポートフォリオ」型のコンテンツを６件作成

Drupal SAPPORO
View と Views モジュール
• データベース用語の "View"
• ビュー（View）表
• ひとつ以上のテーブルから任意のデータを選択＆カスタマイズして表したもの
• 一度定義すれば、同じ条件に基づく結果を簡単に取得できる
• 何に使う？
• Drupal のエンティティに対する "ビュー" を作るための仕組み
• 管理 UI を使用して特定のクエリを定義し、保存できる
• 一度定義した Views はサイトの各部で再利用できる
• 出力先（display）の指定：
• ページ（URLが与えられて独立したコンテンツとして表示できる）
• ブロック（テンプレート内のリージョンに埋め込まれるコンテンツ）
• フィード（URLを与えられ、種々の形式で取り出される）

Drupal SAPPORO
クエリ（問合せ）の構成要素
SQL 疑似コード例）
SELECT TITLE // 列 → フィールド
FROM BLOG // 表 → エンティティ
WHERE PUBLISH=TRUE // 抽出条件
ORDER BY POSTDATE; // 整列条件

Drupal SAPPORO
Views モジュールの UI
取得するフィールド（SELECT）
選択条件（WHERE）
並べ替え条件（ORDER BY）

Drupal SAPPORO
題材の Portfolio 部分
• 各画像が対応するページへのリンクになっている
• 横幅に応じて横3段、2段、1段とレイアウトが変わる
• 各画像のコンテナ要素のクラス属性：col-md-4 col-sm-6 col-12
• 各画像のクラス属性：img-responsive img-portfolio img-hover

Drupal SAPPORO
Views で画像のグリッド表示を実装する
• Views を使って同じ表示を実現する
• 手順：
1. 画像をフィールドに持つコンテンツタイプ「ポートフォリオ」を定義
2. 作成したタイプで６件分のコンテンツ（ノード）を作成
3. ポートフォリオ型コンテンツ一覧を出力するブロック Views を定義
• 「フォーマットなしの一覧」として出力
• 「行のクラス」として次のクラス属性を付加する（コンテナ div のクラス）
• col-md-4 col-sm-6 col-12
• 画像フィールドを出力する
• 「結果の書き換え」を利用して次のクラス属性を付加する
• img-responsive img-portfolio img-hover
4. Views のブロックを Portfolio リージョンに配置する

Drupal SAPPORO
「ポートフォリオ」 Views の作成 (1)
• [サイト構築] - [ビューズ] をクリックして、
[ビューを追加] をクリックする。
• 次のように入力する：
• ビューの名前：ポートフォリオ一覧
• ビューの設定
• 表示：コンテンツ
• タイプ指定：ポートフォリオ
• 並び順：新しい順（任意）
• ブロックの設定で [ブロックを作成] をオン
• ブロックのタイトルを「Portfolio Heading」
• ブロックの表示設定：
• 「フォーマットなしの一覧」の「フィールド」
• ブロックごとの項目に「6」
• [保存して編集] をクリックする。

Drupal SAPPORO
「ポートフォリオ」 Views の作成 (2)
• さらに、次のように設定を調整する：
• [フィールド] の [追加] をクリックし、検索ボックスに「画像」と入力、
絞り込まれた [画像] フィールドのチェックをオンにして [フィールドを追
加して設定] をクリック。
• 次の画面のフォーマッターを「画像のURL」、
画像のスタイルを「なし」にして、いったん [適用] をクリックする。
• プレビューで、タイトルとパスが表示されていることを確認したら、
[フィールド] の [▼] をクリックして、[並べ替え] をクリック、
[コンテンツタイトル] の [削除] をクリックして削除してから
[適用] をクリックする。
• 再度プレビューで、今度は画像のパスだけの一覧になることを確認。
• [フォーマット] の [設定] をクリックする。

Drupal SAPPORO
クラス属性の設定
• 行のクラスに col-md-4 col-sm-6 col-12 を追加して [適用]

Drupal SAPPORO
画像フィールドの設定
• 画像フィールドの設定
• フォーマッターを [画像のURL] とし、[結果の書き換え]で img タグを出力

Drupal SAPPORO
画像スタイルの追加
• オリジナル画像のままではサイズがバラバラ…
• 表示用にリサイズしてから Views で使いたいので、
固定サイズにリサイズする「画像」スタイルを定義する。
• [環境設定] - [メディア] - [画像スタイル] をクリックして、
[画像スタイルを追加] をクリックする。
• [画像スタイル名称] に「ポートフォリオ」と入力して [新しいスタイルを
作成] する。
• [効果] の一覧から [リサイズ] を選択して [追加] する。
• 幅を 750、高さを 500 に設定して [エフェクトの追加] をクリック。
• 先の「ポートフォリオ」 Views の編集に戻り、
• [フィールド] の [コンテンツ画像] をクリックし、画像のスタイルとして
[ポートフォリオ] を選択し、[適用] をクリックし、Views を保存する。

Drupal SAPPORO
Views ブロックを Portfolio リージョンに配置
• [サイト構築] - [ブロックレイアウト] をクリックし、[Carousel] リージョンで
[ブロックを追加] して、「ポートフォリオ一覧：Block」ブロックを追加する。

Drupal SAPPORO
結果を確認

Drupal SAPPORO
ステップ9
独自のブロックタイプを定義して利用する

Drupal SAPPORO
題材の ”Modern Business Features” 部
• 説明文と画像がセットになって1つの区画を形成している
• 説明文と画像をフィールドとするタイプを定義できそう…
• 画面幅に応じてレイアウトが左右、上下に切り替わる
• 説明文のコンテナ div のクラス属性：col-md-6
• 画像のコンテナ div のクラス属性：col-md-6
• 画像のクラス属性：img-responsive

Drupal SAPPORO
ブロックタイプの定義
• カスタムブロックライブラリのブロックタイプから
• パス： admin/structure/block/block-content/types
• [カスタムブロックタイプを追加] をクリックして「画像付き紹介文」を定義する。
説明文と説明画像のフィールドを
持つ独自のブロックタイプを定義
説明画像の内部名称を
field_descimg にしてください

Drupal SAPPORO
フィールドのコンテナを定義するには
• Field Group モジュール
• 複数のフィールドの表示出力をグループ化できるようにする
• https://www.drupal.org/project/field_group
• フィールドの「表示管理」の設定でグループを追加できるようになる
• この機能を利用して左右の HTML 要素として div コンテナを定義する
• 「説明文」フィールドを「左側」グループの配下に
• 「説明画像」のフィールドを「右側」グループの配下に

Drupal SAPPORO
定義したコンテナにクラス属性を指定するには
• Field Formatter Class モジュール
• フィールドのコンテナにクラス属性を指定できるようにする
• https://www.drupal.org/project/field_formatter_class
• フィールドの「表示管理」の設定でグループにクラス属性を設定できるようになる
• これを利用して col-md-6 を設定

Drupal SAPPORO
ブロックのインスタンスを作成
• 作成したブロックタイプで
カスタムブロックを作成する
• タイトル：
Modern Business Beatures
• 説明文：
題材の紹介文コンテンツ
• 説明画像：
題材の画像
(デフォルト画像を利用)

Drupal SAPPORO
表示確認
• 画像が親 div のサイズに収まらない
• max-width:100% が未設定
• img-responsive クラスが
設定されていないため

Drupal SAPPORO
フィールド出力の前処理を実装する
• cmsmix9_preprocess_field(&$vars) の実装
• cmsmix9.theme ファイルに次のコードを追加して保存する
• キャッシュをクリアすると有効になる。
function cmsmix9_preprocess_field(&$vars) {
if ($vars['element']['#field_name'] == 'field_descimg') {
foreach ($vars['items'] as $key => $item) {
$vars['items'][$key]['content']['#item_attributes']['class'][]
= 'img-responsive';
}
}
}
cmsmix9.theme（抜粋）
ブロックタイプに追加した画像フィールド field_descimg について
クラス属性 img-responsive を追加する。

Drupal SAPPORO
その他の調整
• Call to Action リージョンへのブロック配置
• 基本ブロックとして作成
• 管理者ログイン中の管理メニューとナビの競合
• テーマの css/cmsmix.css で調整
• position を調整して重ならないようにする
• z-index を調整してスクロール時に管理メニューが隠れないようにする
• トップスライダについて
• スライダはモジュールとして提供されているものが多数あるので、
今回は theming で実装せず、モジュールを利用する。
• 例：Responsive Slideshow モジュール
• https://www.drupal.org/project/responsive_slideshow

Drupal SAPPORO
最終形
• コンテキストリンクが使用できる
• 各ブロックの編集と設定変更ができる
• 各ブロックのクイック編集ができる
• Views の編集ができる
• カスタムブロックタイプのクイック編集では
紹介文の編集のほか、
画像のアップロードもできる

Drupal SAPPORO
まとめ
• Drupal 8 のブロックシステムとコンテンツの配置
• Drupal 8 テーマについて
• Twig の基本
• Drupal 8 テーマ開発入門
• 開発環境の設定
• アセットライブラリ（CSS/JS ファイルの組み込み）
• リージョンの定義とブロックの割り当て
• プリプロセス API
• Views の利用とカスタムブロックの定義

CMSMix Sapporo vol.3 (Drupal の回)

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a CMSMix Sapporo vol.3 (Drupal の回)

Semelhante a CMSMix Sapporo vol.3 (Drupal の回) (20)

CMSMix Sapporo vol.3 (Drupal の回)