Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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:...
Drupal SAPPORO
自己紹介
• 白根健司(しらねけんじ)
• (株)シナジークエスト 代表
• Drupal を使ったサイト構築
• 技術者向けの研修・教材開発等
• Drupal さっぽろ 事務局
• http://drupals...
Drupal SAPPORO
Drupal 8 CMS の概要
• 現在のメイン リリース
• 2015年11月 リリース
• https://www.drupal.org/8
• 特徴
• インプレース編集
• 構成情報をコンテンツデータベー...
Drupal SAPPORO
準備1:ローカル環境を構築済みの方
• テーマのサンプル
• https://github.com/bkenro/cmsmix_theme
• ZIP をダウンロード&展開して themes フォルダにコピーしてく...
Drupal SAPPORO
準備2:centos7dsm でローカル構築する方
• ローカルの Drupal 開発環境構築キット
• Drupal サイトが稼働する CentOS/7 仮想マシンの導入キット
• Vagrant と Virtu...
Drupal SAPPORO
準備3:実習用サーバーを利用する方
• ws.drupalsapporo.net
• Drupal インストール済み外部サーバー
• ハンズオンのサンプルと使用モジュールを導入済み
• テーマ開発/Twigデバッグ...
Drupal SAPPORO
予備知識:Drupal 8 コアの管理 UI
• 管理機能にアクセスするための水平バー
• 管理: 各管理機能のメニューを表示
• ショートカット: よく使う機能のブックマーク
• 《ログイン中ユーザー》
• ユー...
Drupal SAPPORO
参考:Admin Toolbar モジュール
• 入れておくと便利な管理メニュー拡張機能
• https://www.drupal.org/project/admin_toolbar
• ドロップダウン対応
• よ...
Drupal SAPPORO
Drupal もくもく会
テーマ作成ハンズオン
and
Drupal SAPPORO
Drupal 8 テーマ作成ハンズオン
サイトテンプレートを Drupal 8 テーマ化する
Drupal SAPPORO
本日の目標
• Bootstrap ベースのサイトテンプレートを D8 テーマ化する
• 題材:
• https://github.com/BlackrockDigital/startbootstrap-moder...
Drupal SAPPORO
Drupal のレイヤー構造とフロー
1. データ(ノードなど)
• コンテンツの基になるデータ
2. モジュール
• 追加機能を提供するプラグイン
3. ブロックとメニュー
• モジュールの出力コンテンツ
• ペ...
Drupal SAPPORO
テーマとテーマ エンジン
• テーマとは?
• サイトの外観を定義する、テンプレート、スタイルシート、スクリプト等を
まとめたソフトウェアパッケージのこと
• Drupal サイトに導入できる種々のテーマが開発・公...
Drupal SAPPORO
テーマの例
• コアに付属するテーマ
• Bartik
• Drupal 8 インストール後の初期デフォルト テーマ
• Seven
• Drupal 8 のデフォルト管理用テーマ
• Stark
• Drupal...
Drupal SAPPORO
Drupal のテーマ管理ユーザーインターフェイス
1. デフォルトテーマの設定
2. 管理用テーマの設定
3. テーマのグローバル設定
• ロゴ
• サイト名とスローガン
• ショートカットアイコン(ファビコン)...
Drupal SAPPORO
1. デフォルト テーマの設定
• デフォルトテーマの設定
• 有効にするだけでなくデフォルト テーマにすることで通常表示されるテーマを指定する
• デフォルトテーマとは、一般のサイト訪問者に表示されるテーマ(フロ...
Drupal SAPPORO
2. 管理用テーマの設定
• 管理用テーマ
• サイトの管理に関するパス(URL)に適用されるテーマ
• /admin 配下のパスを持つページ
• コンテンツ編集用のページに適用することもできる
• デフォルトテー...
Drupal SAPPORO
3. テーマのグローバル設定 (1)
• 全テーマ共通の環境設定
• インストール済みの全テーマに適用
されるデフォルト設定を指定できる
• パス:
admin/appearance/settings
• 個別のテ...
Drupal SAPPORO
4. 追加テーマのインストール
• テーマフォルダのコピー
• 入手したテーマのフォルダを themes フォルダにコピーする
• 手作業による方法
• drush による方法
• インストールする
• UI によ...
Drupal SAPPORO
テーマ フォルダの配置場所
• core/themes
• コアのテーマ(Bartic、Seven など)の格納場所
• themes
• コア以外の追加テーマの格納場所。
次の使い分けが推奨されている:
• th...
Drupal SAPPORO
テーマを構成する主なファイル
• *.info.yml
• テーマを定義する(唯一の)必須ファイル。
• テーマのメタ情報、ライブラリ、ブロックのリージョンを定義する。
• screenshot.png
• テーマ...
Drupal SAPPORO
作業ステップ
• step0: 空テーマを作る
• step1: テンプレートを使ってみる
• step2: Twig の機能を確認する
• step3: CSS/JS を組み込む(ライブラリ)
• step4: ...
Drupal SAPPORO
step0
空テーマを作る
Drupal SAPPORO
step0:Drupal 8 の空テーマを作る
• 手順
• themes フォルダに 「cmsmix0」 という名前のフォルダを作る。
• 中に cmsmix0.info.yml という名前のファイルを作る。
•...
Drupal SAPPORO
作ったテーマをインストールする
• パス:admin/appearance
Drupal SAPPORO
*.info.yml ファイルの設定項目
• name
• テーマ管理 UI に表示されるテーマの表示名。
• type
• Drupal の拡張要素の種類 (module | theme | profile)
•...
Drupal SAPPORO
step1
テンプレートを使ってみる
Drupal SAPPORO
step0 で表示されたページのソースを見ると…
<!DOCTYPE html>
<html lang="ja" dir="ltr" prefix="content:
http://purl.org/rss/1.0...
Drupal SAPPORO
テンプレートとテンプレートエンジン
• テンプレート
• テーマから出力されるコンテンツのひな形を定義するファイル
• HTML のタグでタグ構造を記述する
• エンジン固有のタグで動的コンテンツを埋め込む
• テ...
Drupal SAPPORO
コアのテンプレートとオーバーライド
• コアのテンプレート
• 各モジュールの出力の構造を定義するテンプレートが用意されている
• 例)system モジュール
• html.html.twig HTML 全体の基...
Drupal SAPPORO
テンプレートの場所
• コアに含まれているデフォルトのテンプレート
• core/modules/system/templates フォルダ配下
• html.html.twig
• page.html.twig
...
Drupal SAPPORO
html.html.twig
ページ : page.html.twig
リージョン : region.html.twig
リージョン:region.html.twig リージョン:
region.html.twig...
Drupal SAPPORO
step1:HTML テンプレートのオーバーライド
• デフォルトの HTML テンプレートをオーバーライドしてみる
• 手順:
1. テーマフォルダ (cmsmix1) に html.html.twig ファイル...
Drupal SAPPORO
step2
Twig の機能を確認する
Drupal SAPPORO
Twig について
• Symfony2、 Drupal 8 のデフォルト テンプレートエンジン
• https://twig.symfony.com/
• PHP ベースのコンパイルによる処理系
• テンプレート...
Drupal SAPPORO
Twig タグ
• {# ... #} コメント
• コメントタグの間に記述したものは無視され、出力にも反映されない。
• {{ ... }} 出力
• 出力タグの間に変数を記述すると、その値が出力される。
• {...
Drupal SAPPORO
Twig 変数
• 一般の変数
• {% set <変数> = 値 %} で変数を定義して値をセットできる。
• Drupal テンプレート変数
• コアのテンプレートファイルの冒頭部分に、
そのテンプレートで使用...
Drupal SAPPORO
コード例1:出力タグ
• テンプレート変数の値出力
• html.html.twig のテンプレート変数 logged_in を出力する例
• logged_in はログイン中なら true となるテンプレート変数...
Drupal SAPPORO
コード例2:if 文
• 条件分岐
• {% if 条件式 %} ① {% else %} ② {% endif %}
• 条件式が true と評価されれば ①、それ以外は ② が有効となる
{# 条件分岐 #}...
Drupal SAPPORO
コード例3:for 文
• 反復構造
• {% for 変数 in 初期値..終了値 %} … {% endfor %}
• … の部分では変数を利用して処理を記述できる(出力等)
{# 反復構造 #}
<p>反復...
Drupal SAPPORO
コード例4:マップ構造
• マップ構造と変数への代入
• {% set 変数 = {キー:値, キー:値, ・・・} %}
• 「キー:値」 の形式をカンマ区切りで並べて {} で囲むとマップ構造になる
• set...
Drupal SAPPORO
コード例5:for in 構文
• 配列(マップの値)の全件表示
• {% for 変数 in 配列 %} … {% endfor %}
• 全要素(の値)を「変数」で参照しながら全件処理する
• … の部分では変...
Drupal SAPPORO
コード例6:for key,value in 構文
• マップのキーと値の全件表示
• {% for キー変数,値変数 in マップ %} … {% endfor %}
• マップ内の各要素のキーと値を参照しながら...
Drupal SAPPORO
コード例7:フィルタ (1)
• 出力時に定義済みのフィルタ処理を適用する例1
• パイプ記号(|)でつなげて適用できる
• Twig 標準の upper フィルタを使用すると大文字に変換できる
{# フィルタの使...
Drupal SAPPORO
コード例8:フィルタ (2)
• 出力時に定義済みのフィルタ処理を適用する例2
• パイプ記号(|)でつなげて適用できる
• Drupal の t フィルタを使用すると文字列を翻訳できる
• "Content ty...
Drupal SAPPORO
コード例9:変数のダンプ
• dump() 関数の利用
• {{ dump(変数) }}
• 特定の変数をダンプする。
• {{ dump() }}
• テンプレート内で使用できる変数をすべてダンプする。
{# ダ...
Drupal SAPPORO
変数をダンプするには
• Twig のデバッグモードを有効にする必要あり
1. sites/development.services.yml ファイルを開く
• このファイルは settings.local.php...
Drupal SAPPORO
開発環境としての設定 (1)
• sites/default フォルダ
• 書き込み権限を与えておく
• $ chmod 755 sites/default
• settings.local.php の有効化
• ...
Drupal SAPPORO
開発環境としての準備 (2)
• CSS と JS の圧縮を解除する
• 管理画面のパフォーマンス設定を開く
• パス: admin/config/development/performance
• 帯域幅最適化で...
Drupal SAPPORO
step2:CMSMix2 テーマ
• html.html.twig で Twig コード例を実行する
• 手順:
1. html.html.twig に先述の各コード例を反映する
2. ファイルを保存してトップペ...
Drupal SAPPORO
デバッグモードでの出力
• dump() 関数の動作
• Twig をデバッグモードで動作させることで dump() 関数が動作する
{# ダンプの例 #}
{{ dump(tokens) }}
html.html...
Drupal SAPPORO
テンプレートの提案(suggestion)
• suggestion とは?
• コアをオーバーライドできるテンプレートファイル名の候補のこと
• 適用範囲などが異なる複数のテンプレート名の候補が存在する場合がある...
Drupal SAPPORO
Twig テンプレートの命名規則
• テンプレートファイルの選択ルール
• 出力を構成する各パートごとに決められた命名規則に基づいて
該当するファイルが読み込まれ、実行される
• 命名規則の例
• HTML テンプ...
Drupal SAPPORO
テンプレート名の候補の確認
• 各設定を有効にした環境でサンプルを表示してみる:
• 表示されたページのソースを確認してみよう
<!-- THEME DEBUG -->
<!-- THEME HOOK: 'html...
Drupal SAPPORO
step3
CSS/JavaScript を組み込む(ライブラリ)
Drupal SAPPORO
テーマ作成題材
• 使用素材:Start Bootstrap の 「Modern Business」
• https://startbootstrap.com/template-overviews/modern-b...
Drupal SAPPORO
題材トップページ (index.html) の HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equi...
Drupal SAPPORO
題材で使用している CSS/JS は…?
• css/bootstrap.min.css(Bootstrap のコア CSS)
• css/modern-business.css(題材のカスタム CSS)
• fo...
Drupal SAPPORO
ライブラリ (asset library) とは?
• Drupal 8 で導入された資源管理のための仕組み
• CSS/JS ファイル群を目的別にグループ化する
• 定義したライブラリは選択的に読み込むこともでき...
Drupal SAPPORO
Bootstrap コア CSS をライブラリ化
• cmsmix3.libraries.yml ファイル
• テーマの内部名 (=フォルダ名) で、libraries.yml ファイルを作成する
• 次の記述を追...
Drupal SAPPORO
カスタム CSS/フォントをライブラリ化
• 同様に、他の CSS やフォントも組み込む
・・・
modern-business:
css:
theme:
css/modern-business.css: {}
f...
Drupal SAPPORO
テーマに組み込む
• ライブラリの参照先
• 題材テンプレートに付属する下記フォルダをテーマフォルダにコピーする
• [css]、[font-awesome]、[js] の各フォルダ
• ライブラリへの参照設定
•...
Drupal SAPPORO
step4
ページテンプレートを導入する
Drupal SAPPORO
やりたいこと
• 題材の index.html を Twig テンプレート化する
• html.html.twig 出力全体の基本構造(html 要素)
• 題材 HTML ページの基本構造を反映する
• html...
Drupal SAPPORO
ページテンプレート
• 題材の index.html の該当部分をコピーする
1. page.html.twig ファイルを作成する
2. index.html の body 要素の中身をそのままコピーする
3. ...
Drupal SAPPORO
オーバライドをトップページに限定する
• トップ(フロント)ページだけに適用するには
• 出力されたページのソースで Twig デバッグのコメントから
テンプレート名の候補を調べると・・・
・・・
<!-- THE...
Drupal SAPPORO
index.html の body のマークアップと CSS/JS をトップページに組み込んだ状態
Drupal SAPPORO
step5
グローバルナビにメインメニューを組み込む
Drupal SAPPORO
メニューの組み込み
• コアのメインメニューをグローバルナビとして組み込む
• コアのメインメニュー:
• ページのテンプレートで変数 page.primary_menu として取得可
• マークアップはリスト形式...
Drupal SAPPORO
メニュー項目を用意する
• メインメニューに表示するメニュー項目を用意する
• パス: admin/structure/menu/manage/main
• 題材と同じメニューの項目を作成しておく
各項目のリンク先...
Drupal SAPPORO
コアのメインメニューをグローバルナビに組み込んだところ
クラス属性の設定が不十分で
レイアウトが崩れている
Drupal SAPPORO
生成ページのソースを題材と比較すると…
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="colla...
Drupal SAPPORO
Twig デバッグのコメントを確認すると…
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="col...
Drupal SAPPORO
step5x:メニューテンプレートのオーバーライド
• menu.html.twig をオーバーライドする
• core/system/templates/menu.html.twig をテーマフォルダにコピーする...
Drupal SAPPORO
メニューのレイアウト修正後
メニューブロックとして出力されるため
コンテキストリンクから編集できる
Drupal SAPPORO
step6
リージョンの定義とブロックの割り当て
Drupal SAPPORO
各部の実装方法の検討
今回使用するリージョン
① Carousel(カスタム)
② コンテンツ(標準)
③ Marketing icons(カスタム)
④ Portfolio(カスタム)
⑤ Features(カス...
Drupal SAPPORO
リージョンについて
• デフォルト リージョン
• リージョンを特に定義しない場合は
デフォルトリージョンが用意される。
• リージョンを定義するには
• *.info.yml ファイルの
regions: エント...
Drupal SAPPORO
リージョンを定義する
• *.info.twig ファイルにリージョン定義を追加するには:
• cmsmix6.info.twig に
右のコードを追加する。
・・・
regions:
header: 'Heade...
Drupal SAPPORO
ブロックレイアウトの管理画面で確認する
• *.info.yml で定義したリージョンが管理画面に表示される
Drupal SAPPORO
テンプレートにリージョンを定義する
• リージョンをトップページのテンプレートに定義するには
• ページのテンプレート (page--front.html.twig) を開いて、
リージョンに対応する部分に {{ ...
Drupal SAPPORO
・・・
<!-- Page Content -->
<div class="container">
<!-- Marketing Icons Section -->
<div class="row">
{{ pag...
Drupal SAPPORO
トップページ用のコンテンツを用意する
• フロント用の基本ページを作成する
• コンテンツタイプ 「基本ページ」 でコンテンツを新規作成し、
タイトルを "Welcome to Modern Business" と...
Drupal SAPPORO
表示してみる
• Content リージョンに先に作成したコンテンツが表示される
Content リージョンに配置されたコンテンツが
ページに出力されていることがわかります。
Drupal SAPPORO
三段ボックス用のブロックを用意する
• Marketing icons リージョンに配置する3つのブロック
• 題材にあった3つのボックスを Drupal の基本ブロックとして作成する
• 手順:
• カスタムブロ...
Drupal SAPPORO
Marketing icons リージョンに配置する
• ブロックレイアウトの管理画面から
• Marketing icons リージョンに3つのブロックを配置する
• 各ブロックの 「閲覧の制限」 で [ページ]...
Drupal SAPPORO
表示してみる
3つのブロックが表示されることがわかります。
ただし、まだ横3段ボックスにはなりません。
Drupal SAPPORO
step7
テーマ API を利用して class 属性を追加する
Drupal SAPPORO
横3段ボックスにするには
• 題材の HTML ではどうなっているか?
<div class="col-md-4">
<div class="panel panel-default">
<div class="pa...
Drupal SAPPORO
API で属性に変更を加える方法
• *.theme ファイル
• 出力の前処理などを実装するための PHP ファイル
• テーマフォルダに <テーマ名>.theme という名前で作成する
• 出力の前処理(プリプ...
Drupal SAPPORO
ブロック出力の前処理を実装する
• cmsmix7_preprocess_block(&$variables) の実装
• テーマフォルダに cmsmix7.theme ファイルを作成する
• 次のコードを記述して...
Drupal SAPPORO
Devel モジュールの利用
• 開発支援用のモジュール
• https://www.drupal.org/project/devel
• 開発作業を支援する種々の機能を提供する
• 次の2つのモジュールを有効にす...
Drupal SAPPORO
Devel: ダンプ方法の選択
• Devel 管理画面でダンプ方法を指定する
• admin/config/development/devel
ここでは Kint を使用してみましょう。
https://gith...
Drupal SAPPORO
ダンプしてみる
• dpm() 関数を利用して引数をダンプする
• cmsmix7.theme を次のように変更し、キャッシュをクリアする
function cmsmix7_preprocess_block(&$v...
Drupal SAPPORO
横3段ボックスにしたいブロックを調べる
• 一番最後のダンプを展開して調べていくと…
3つのボックスに対応するブロックについて、
['attributes']['class'] 要素の値として
'col-md-4'...
Drupal SAPPORO
configuration の下を見ていくと・・・
・・・
ブロックのタイトルがココに・・・
→ この値でブロックを識別できる
Drupal SAPPORO
クラス属性を追加するコード
$variables 配列にクラス属性を追加するコード
• cmsmix7x.theme を次のように変更し、キャッシュをクリアする
function cmsmix7x_preproce...
Drupal SAPPORO
結果を確認
• Medium device の幅を超えると横3段表示になる
• 3つのブロックの div のクラス属性に col-md-4 が追加される
Drupal SAPPORO
step8
Views で Bootstrap のグリッドシステムを利用する
Drupal SAPPORO
「ポートフォリオ」 コンテンツタイプ
1. [サイト構築] - [コンテンツタイプ] - [コンテンツタイプの追加] をクリック
2. 表示されるフォームに次のように入力:
• 名前 ポートフォリオ
• descr...
Drupal SAPPORO
Drupal SAPPORO
ここで、…サンプル用データを自動生成しておく
• Devel generate モジュールを有効にする
• admin/modules (機能拡張)
• Generate content 機能を利用する
• adm...
Drupal SAPPORO
コンテンツの作成
• 「ポートフォリオ」 型のコンテンツを6件作成
Drupal SAPPORO
View と Views モジュール
• データベース用語の "View"
• ビュー(View)表
• ひとつ以上のテーブルから任意のデータを選択&カスタマイズして表したもの
• 一度定義すれば、同じ条件に基づく...
Drupal SAPPORO
クエリ(問合せ)の構成要素
SQL 疑似コード例)
SELECT TITLE // 列 → フィールド
FROM BLOG // 表 → エンティティ
WHERE PUBLISH=TRUE // 抽出条件
ORDE...
Drupal SAPPORO
Views モジュールの UI
取得するフィールド(SELECT)
選択条件(WHERE)
並べ替え条件(ORDER BY)
Drupal SAPPORO
題材の Portfolio 部分
• 各画像が対応するページへのリンクになっている
• 横幅に応じて横3段、2段、1段とレイアウトが変わる
• 各画像のコンテナ要素のクラス属性:col-md-4 col-sm-6 ...
Drupal SAPPORO
Views で画像のグリッド表示を実装する
• Views を使って同じ表示を実現する
• 手順:
1. 画像をフィールドに持つコンテンツタイプ 「ポートフォリオ」 を定義
2. 作成したタイプで6件分のコンテンツ...
Drupal SAPPORO
「ポートフォリオ」 Views の作成 (1)
• [サイト構築] - [ビューズ] をクリックして、
[ビューを追加] をクリックする。
• 次のように入力する:
• ビューの名前: ポートフォリオ一覧
• ビュ...
Drupal SAPPORO
「ポートフォリオ」 Views の作成 (2)
• さらに、次のように設定を調整する:
• [フィールド] の [追加] をクリックし、検索ボックスに 「画像」 と入力、
絞り込まれた [画像] フィールドのチェッ...
Drupal SAPPORO
クラス属性の設定
• 行のクラスに col-md-4 col-sm-6 col-12 を追加して [適用]
Drupal SAPPORO
画像フィールドの設定
• 画像フィールドの設定
• フォーマッターを [画像のURL] とし、[結果の書き換え]で img タグを出力
Drupal SAPPORO
画像スタイルの追加
• オリジナル画像のままではサイズがバラバラ…
• 表示用にリサイズしてから Views で使いたいので、
固定サイズにリサイズする 「画像」 スタイルを定義する。
• [環境設定] - [メデ...
Drupal SAPPORO
Views ブロックを Portfolio リージョンに配置
• [サイト構築] - [ブロックレイアウト] をクリックし、[Carousel] リージョンで
[ブロックを追加] して、「ポートフォリオ一覧:Blo...
Drupal SAPPORO
結果を確認
Drupal SAPPORO
ステップ9
独自のブロックタイプを定義して利用する
Drupal SAPPORO
題材の ”Modern Business Features” 部
• 説明文と画像がセットになって1つの区画を形成している
• 説明文と画像をフィールドとするタイプを定義できそう…
• 画面幅に応じてレイアウトが左...
Drupal SAPPORO
ブロックタイプの定義
• カスタムブロックライブラリのブロックタイプから
• パス: admin/structure/block/block-content/types
• [カスタムブロックタイプを追加] をクリ...
Drupal SAPPORO
フィールドのコンテナを定義するには
• Field Group モジュール
• 複数のフィールドの表示出力をグループ化できるようにする
• https://www.drupal.org/project/field_...
Drupal SAPPORO
定義したコンテナにクラス属性を指定するには
• Field Formatter Class モジュール
• フィールドのコンテナにクラス属性を指定できるようにする
• https://www.drupal.org/...
Drupal SAPPORO
ブロックのインスタンスを作成
• 作成したブロックタイプで
カスタムブロックを作成する
• タイトル:
Modern Business Beatures
• 説明文:
題材の紹介文コンテンツ
• 説明画像:
題材の...
Drupal SAPPORO
表示確認
• 画像が親 div のサイズに収まらない
• max-width:100% が未設定
• img-responsive クラスが
設定されていないため
Drupal SAPPORO
フィールド出力の前処理を実装する
• cmsmix9_preprocess_field(&$vars) の実装
• cmsmix9.theme ファイルに次のコードを追加して保存する
• キャッシュをクリアすると有...
Drupal SAPPORO
表示確認
Drupal SAPPORO
その他の調整
• Call to Action リージョンへのブロック配置
• 基本ブロックとして作成
• 管理者ログイン中の管理メニューとナビの競合
• テーマの css/cmsmix.css で調整
• pos...
Drupal SAPPORO
最終形
• コンテキストリンクが使用できる
• 各ブロックの編集と設定変更ができる
• 各ブロックのクイック編集ができる
• Views の編集ができる
• カスタム ブロックタイプのクイック編集では
紹介文の編集...
Drupal SAPPORO
まとめ
• Drupal 8 の ブロックシステムとコンテンツの配置
• Drupal 8 テーマについて
• Twig の基本
• Drupal 8 テーマ開発入門
• 開発環境の設定
• アセット ライブラリ(...
Upcoming SlideShare
Loading in …5
×

CMSMix Sapporo vol.3 (Drupal の回)

408 views

Published on

2017年10月21日に開催された CMSMix Sapporo vol.3 の Drupal 8
テーマ作成ハンズオンで使用したスライドです。

Published in: Internet
  • Be the first to comment

CMSMix Sapporo vol.3 (Drupal の回)

  1. 1. Drupal SAPPORO CMSMix Sapporo vol.3 (Drupal の回) 2017年10月21日(土) @札幌市産業振興センター 13:00~17:00
  2. 2. Drupal SAPPORO 本日の予定 • 13:00 開場 • 13:30 本日の予定 Drupal CMS の概要 実習環境について • 14:00 Drupal もくもく会 Drupal 8 テーマ作成ハンズオン(同時開催) • 16:00 フリーセッション • CMS と相性バッチリ!? マーケティングオートメーション と Mautic の概要(仮) • DrupalCon Vienna 2017 参加レポート (予定) • 16:55 閉会、連絡事項
  3. 3. Drupal SAPPORO 自己紹介 • 白根健司(しらねけんじ) • (株)シナジークエスト 代表 • Drupal を使ったサイト構築 • 技術者向けの研修・教材開発等 • Drupal さっぽろ 事務局 • http://drupalsapporo.net/ • ※ 「Drupal さっぽろ」 で検索 • 札幌近郊の Drupal ユーザーによる ローカルコミュニティ • 月例の勉強会 • OSC Hokkaido 参加 • 温泉合宿(Drupal ONSEN)
  4. 4. Drupal SAPPORO Drupal 8 CMS の概要 • 現在のメイン リリース • 2015年11月 リリース • https://www.drupal.org/8 • 特徴 • インプレース編集 • 構成情報をコンテンツデータベースと分離 • 多言語機能の強化 • Views モジュールがコアに • Symfony2 ベースとなりオブジェクト指向型の API に • コアの REST サポート • 強化されたブロックシステム
  5. 5. Drupal SAPPORO 準備1:ローカル環境を構築済みの方 • テーマのサンプル • 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 その他、開発用の設定(後述)も必要に応じて行ってください。
  6. 6. Drupal SAPPORO 準備2: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 配布できます • 4つファイルが入っているので、まとめてデスクトップにコピーしてください この方法では、Drupal 自体のインストールから行う形になります。
  7. 7. Drupal SAPPORO 準備3:実習用サーバーを利用する方 • ws.drupalsapporo.net • Drupal インストール済み外部サーバー • ハンズオンのサンプルと使用モジュールを導入済み • テーマ開発/Twigデバッグ用の構成済み • 10 人分のアカウントを用意 • Web の管理画面は普通にブラウザから操作 • サイトの構成ファイルは SSH 接続でターミナルからアクセス可 アカウントとサイト URL の情報をお知らせします。 使いたい方はお知らせください。
  8. 8. Drupal SAPPORO 予備知識:Drupal 8 コアの管理 UI • 管理機能にアクセスするための水平バー • 管理: 各管理機能のメニューを表示 • ショートカット: よく使う機能のブックマーク • 《ログイン中ユーザー》 • ユーザーのプロファイルページ • ログアウトリンク • 編集: インプレース編集用リンクの表示/非表示
  9. 9. Drupal SAPPORO 参考:Admin Toolbar モジュール • 入れておくと便利な管理メニュー拡張機能 • https://www.drupal.org/project/admin_toolbar • ドロップダウン対応 • よく使う機能の追加 • キャッシュクリア • cron 実行 ・・・ • 使うには下記モジュールを有効化: • Admin Toolbar • Admin Toolbar Extra Tools
  10. 10. Drupal SAPPORO Drupal もくもく会 テーマ作成ハンズオン and
  11. 11. Drupal SAPPORO Drupal 8 テーマ作成ハンズオン サイトテンプレートを Drupal 8 テーマ化する
  12. 12. Drupal SAPPORO 本日の目標 • Bootstrap ベースのサイトテンプレートを D8 テーマ化する • 題材: • https://github.com/BlackrockDigital/startbootstrap-modern- business/releases/tag/v3.3.7 • 作るもの: • http://ws.drupalsapporo.net/cmsmix/ 静的な HTML で記述された サイトテンプレートのコードを基に Drupal 8 用のテーマを作ります
  13. 13. Drupal SAPPORO Drupal のレイヤー構造とフロー 1. データ(ノードなど) • コンテンツの基になるデータ 2. モジュール • 追加機能を提供するプラグイン 3. ブロックとメニュー • モジュールの出力コンテンツ • ページ:独自のURLを伴うもの • メニュー項目として設定できる • ブロック:ページ内の区画に出力されるもの • レイアウト上の区画をリージョンと呼ぶ 4. ユーザーのアクセス許可 • ユーザーにロールを割り当て • 各ロールに種々の権限を与える 5. テンプレート • 最終的な出力コンテンツを生成する • HTML、CSS、Twig 変数 出典(図)https://drupal.org/getting-started/before/overview
  14. 14. Drupal SAPPORO テーマとテーマ エンジン • テーマとは? • サイトの外観を定義する、テンプレート、スタイルシート、スクリプト等を まとめたソフトウェアパッケージのこと • Drupal サイトに導入できる種々のテーマが開発・公開されている • テーマ エンジンとは? • テンプレートのコードを解釈して動的にコンテンツを生成する処理系 • Drupal 8 は Twig が標準エンジン • PHP ベースのコンパイル方式のテンプレート言語 • Twig エンジンは Twig テンプレートを PHP にテンプレートに変換し、 これを実行してコンテンツを生成する
  15. 15. 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
  16. 16. Drupal SAPPORO Drupal のテーマ管理ユーザーインターフェイス 1. デフォルトテーマの設定 2. 管理用テーマの設定 3. テーマのグローバル設定 • ロゴ • サイト名とスローガン • ショートカットアイコン(ファビコン) • ユーザーのアイコン(アバター) • コメントにおけるユーザー検証の設定 • メインメニュー、セカンダリメニュー 4. テーマの追加インストール Drupal 8 サイトにおける テーマ管理の操作内容と 設定項目を見ていきます。 下記ページからスタート: admin/appearance
  17. 17. Drupal SAPPORO 1. デフォルト テーマの設定 • デフォルトテーマの設定 • 有効にするだけでなくデフォルト テーマにすることで通常表示されるテーマを指定する • デフォルトテーマとは、一般のサイト訪問者に表示されるテーマ(フロントエンドテーマ)のこと デフォルトテーマが先頭に この例では Seven も有効になっている。 [デフォルトに設定] リンクをクリックすると デフォルトテーマに設定される
  18. 18. Drupal SAPPORO 2. 管理用テーマの設定 • 管理用テーマ • サイトの管理に関するパス(URL)に適用されるテーマ • /admin 配下のパスを持つページ • コンテンツ編集用のページに適用することもできる • デフォルトテーマの設定ページの一番下にある UI で指定する デフォルトテーマまたは インストール済みテーマの 中から選択・指定する コンテンツ編集ページに 適用することもできる
  19. 19. Drupal SAPPORO 3. テーマのグローバル設定 (1) • 全テーマ共通の環境設定 • インストール済みの全テーマに適用 されるデフォルト設定を指定できる • パス: admin/appearance/settings • 個別のテーマの設定で再定義可
  20. 20. Drupal SAPPORO 4. 追加テーマのインストール • テーマフォルダのコピー • 入手したテーマのフォルダを themes フォルダにコピーする • 手作業による方法 • drush による方法 • インストールする • UI による方法 • drush による方法
  21. 21. Drupal SAPPORO テーマ フォルダの配置場所 • core/themes • コアのテーマ(Bartic、Seven など)の格納場所 • themes • コア以外の追加テーマの格納場所。 次の使い分けが推奨されている: • themes/contrib • contributed テーマ(drupal.org で公開されているテーマ)の格納場所 • themes/custom • 独自開発のテーマの格納場所
  22. 22. Drupal SAPPORO テーマを構成する主なファイル • *.info.yml • テーマを定義する(唯一の)必須ファイル。 • テーマのメタ情報、ライブラリ、ブロックのリージョンを定義する。 • screenshot.png • テーマの管理 UI に表示されるスクリーンショット画像 (588x438px) のファイル。 • *.libraries.yml • JavaScript と CSS のファイルをテーマに組み込むためのライブラリを定義する。 • [css] フォルダと [js] フォルダ • CSS ファイルと JavaScript ファイルを格納するためのサブフォルダ。 • 各ファイルをテーマに組み込むためのライブラリを *.libraries.yml で定義する。 • *.theme • 出力を制御するすべての PHP コードを記述するためのファイル。 このファイルがあれば テーマとして認識される
  23. 23. Drupal SAPPORO 作業ステップ • step0: 空テーマを作る • step1: テンプレートを使ってみる • step2: Twig の機能を確認する • step3: CSS/JS を組み込む(ライブラリ) • step4: ページテンプレートを導入する • step5: メニューのテンプレートをオーバーライドする • step6: リージョンを組み込む • step7: テーマの前処理関数をオーバーライドする • step8: Views でグリッドを実現する • step9: フィールドのマークアップをオーバーライドする
  24. 24. Drupal SAPPORO step0 空テーマを作る
  25. 25. 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
  26. 26. Drupal SAPPORO 作ったテーマをインストールする • パス:admin/appearance
  27. 27. Drupal SAPPORO *.info.yml ファイルの設定項目 • name • テーマ管理 UI に表示されるテーマの表示名。 • type • Drupal の拡張要素の種類 (module | theme | profile) • テーマの場合は theme とする。 • description • テーマ管理 UI に表示されるテーマの説明文。 • core • テーマがサポートする Drupal コアのバージョン • base theme • 別のテーマを継承する場合にそのテーマの内部名 (.info.yml ファイル名) を指定 • 継承しない場合は false と指定する。
  28. 28. Drupal SAPPORO step1 テンプレートを使ってみる
  29. 29. 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" /> ・・・ 出力されるページのタグ構造は どこで定義されているのか?
  30. 30. Drupal SAPPORO テンプレートとテンプレートエンジン • テンプレート • テーマから出力されるコンテンツのひな形を定義するファイル • HTML のタグでタグ構造を記述する • エンジン固有のタグで動的コンテンツを埋め込む • テンプレート エンジン • テンプレートを処理して最終的な HTML 出力を生成する処理系 • Drupal の標準テンプレートエンジンは Twig Drupal 8 テーマからの出力のタグ構造は Twig で記述したテンプレートによって定義される
  31. 31. Drupal SAPPORO コアのテンプレートとオーバーライド • コアのテンプレート • 各モジュールの出力の構造を定義するテンプレートが用意されている • 例)system モジュール • html.html.twig HTML 全体の基本構造(html 要素) • page.html.twig ページ本体(body 内要素)の構造 • region.html.twig リージョンの構造 • block.html.twig ブロックの構造 • テンプレートのオーバーライド • コアのテンプレートと同じ名前のテンプレートファイルを テーマ フォルダに配置すると、優先してそのファイルが使用される
  32. 32. 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 である点に注意
  33. 33. 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 の 主なコアテンプレート
  34. 34. 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 コアのテンプレートをオーバーライドしているので どのページもすべて同じ出力になる
  35. 35. Drupal SAPPORO step2 Twig の機能を確認する
  36. 36. Drupal SAPPORO Twig について • Symfony2、 Drupal 8 のデフォルト テンプレートエンジン • https://twig.symfony.com/ • PHP ベースのコンパイルによる処理系 • テンプレートは Twig 固有のタグ(後述)を用いて記述する • D7 までの PHPTemplate のように任意のコードが記述できなくなった • ページ出力時の動作: • Twig テンプレートを PHP テンプレートにコンパイル(変換)する • 生成された PHP テンプレートはキャッシュされ次回以降再利用される • キャッシュをクリアすると再度コンパイルが実行される • 変換した PHP テンプレートを実行して出力を生成する •Twig テンプレート コンパイル •PHP テンプレート 実行 •HTML コンテンツ 出力
  37. 37. Drupal SAPPORO Twig タグ • {# ... #} コメント • コメントタグの間に記述したものは無視され、出力にも反映されない。 • {{ ... }} 出力 • 出力タグの間に変数を記述すると、その値が出力される。 • {% ... %} 実行 • Twig の構文要素を用いて実行文を記述できる。 • 変数への値の代入 • 条件分岐 • 反復処理
  38. 38. 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
  39. 39. Drupal SAPPORO コード例1:出力タグ • テンプレート変数の値出力 • 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. ・・・
  40. 40. Drupal SAPPORO コード例2:if 文 • 条件分岐 • {% if 条件式 %} ① {% else %} ② {% endif %} • 条件式が true と評価されれば ①、それ以外は ② が有効となる {# 条件分岐 #} <p>条件分岐の例:logged_in が true ならログイン中と表示する。</p> {% if logged_in %} <p>ログイン中です。</p> {% else %} <p>ログインしていません。</p> {% endif %} <hr> html.html.twig(抜粋)
  41. 41. Drupal SAPPORO コード例3:for 文 • 反復構造 • {% for 変数 in 初期値..終了値 %} … {% endfor %} • … の部分では変数を利用して処理を記述できる(出力等) {# 反復構造 #} <p>反復処理の例:変数 i を 0 から 3 まで変化させて値を表示する。</p> {% for i in 0..3 %} i = {{ i }}<br> {% endfor %} <hr> html.html.twig(抜粋)
  42. 42. Drupal SAPPORO コード例4:マップ構造 • マップ構造と変数への代入 • {% set 変数 = {キー:値, キー:値, ・・・} %} • 「キー:値」 の形式をカンマ区切りで並べて {} で囲むとマップ構造になる • set 変数 = に続けることで変数に代入できる {# 変数への代入とマップ構造 #} {% set tokens = {0:'hello',1:'my',2:'name',3:'is',4:'drupal.'} %} html.html.twig(抜粋)
  43. 43. Drupal SAPPORO コード例5:for in 構文 • 配列(マップの値)の全件表示 • {% for 変数 in 配列 %} … {% endfor %} • 全要素(の値)を「変数」で参照しながら全件処理する • … の部分では変数を利用して処理を記述できる(出力等) {# 先に定義したマップの値を全件表示する #} <p>マップの値を全件表示する:</p> {% for token in tokens %} {{ token }} {% endfor %} <hr> html.html.twig(抜粋)
  44. 44. Drupal SAPPORO コード例6:for key,value in 構文 • マップのキーと値の全件表示 • {% for キー変数,値変数 in マップ %} … {% endfor %} • マップ内の各要素のキーと値を参照しながら全件処理する。 • 各要素のキーは 「キー変数」、値は 「値変数」 にそれぞれセットされる • … の部分で各変数を参照して処理を記述できる(出力等) {# 先に定義したマップのキーと値の全件表示 #} <p>マップのキーと値を全件表示する:</p> {% for key,value in tokens %} token[{{ key }}] = {{ value }}<br> {% endfor %} <hr> html.html.twig(抜粋)
  45. 45. Drupal SAPPORO コード例7:フィルタ (1) • 出力時に定義済みのフィルタ処理を適用する例1 • パイプ記号(|)でつなげて適用できる • Twig 標準の upper フィルタを使用すると大文字に変換できる {# フィルタの使用例(1) #} <p>フィルタの使用例:upper フィルタを使用して大文字に変換する:</p> {% for token in tokens %} {{ token|upper }} {% endfor %} html.html.twig(抜粋)
  46. 46. Drupal SAPPORO コード例8:フィルタ (2) • 出力時に定義済みのフィルタ処理を適用する例2 • パイプ記号(|)でつなげて適用できる • Drupal の t フィルタを使用すると文字列を翻訳できる • "Content type" はその対訳 「コンテンツタイプ」 に変換されて出力される {# フィルタの使用例(2) #} <p>フィルタの使用例:t フィルタを使用して文字列を翻訳する:</p> {{ 'Content type'|t }} <hr> html.html.twig(抜粋)
  47. 47. Drupal SAPPORO コード例9:変数のダンプ • dump() 関数の利用 • {{ dump(変数) }} • 特定の変数をダンプする。 • {{ dump() }} • テンプレート内で使用できる変数をすべてダンプする。 {# ダンプの例 #} {{ dump(tokens) }} html.html.twig(抜粋) Twig の dump() 関数を使用するには、 デバッグモードで動作させる必要があります。
  48. 48. 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 ・・・
  49. 49. 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';
  50. 50. Drupal SAPPORO 開発環境としての準備 (2) • CSS と JS の圧縮を解除する • 管理画面のパフォーマンス設定を開く • パス: admin/config/development/performance • 帯域幅最適化で次の2つのチェックをオフにする • CSS ファイルを結合する • JavaScript ファイルを集約
  51. 51. 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> ・・・ html.html.twig(抜粋) 最後のダンプ出力を表示するには デバッグモードで実行する必要あり
  52. 52. Drupal SAPPORO デバッグモードでの出力 • dump() 関数の動作 • Twig をデバッグモードで動作させることで dump() 関数が動作する {# ダンプの例 #} {{ dump(tokens) }} html.html.twig(抜粋) 当該コードを {{dump()}} に書き換えると すべてのテンプレート変数がダンプされます。
  53. 53. Drupal SAPPORO テンプレートの提案(suggestion) • suggestion とは? • コアをオーバーライドできるテンプレートファイル名の候補のこと • 適用範囲などが異なる複数のテンプレート名の候補が存在する場合がある • 優先順位が決まっている • 優先順位の高い順に探索し、テーマ内で最初に見つかったものが適用される • 具体的なファイル名の候補は下記を参照 • https://www.drupal.org/docs/8/theming/twig/twig-template- naming-conventions 種々の条件に対応して 適用されるテンプレートの候補を ファイル名パターンとして提示します たとえば、ブロックのテンプレートなら・・・
  54. 54. 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
  55. 55. Drupal SAPPORO テンプレート名の候補の確認 • 各設定を有効にした環境でサンプルを表示してみる: • 表示されたページのソースを確認してみよう <!-- THEME DEBUG --> <!-- THEME HOOK: 'html' --> <!-- FILE NAME SUGGESTIONS: * html--front.html.twig * html--node.html.twig x html.html.twig --> <!-- BEGIN OUTPUT from 'themes/oscdemo/html.html.twig' --> <!DOCTYPE html> <html> ・・・ </html> <!-- END OUTPUT from 'themes/cmsmix2/html.html.twig' --> テンプレート ファイル名の提案の一覧と 現在使用されているテンプレートファイルが コメントとして出力されるようになる。 このページ生成で使用された 候補ファイル名には x が表示される
  56. 56. Drupal SAPPORO step3 CSS/JavaScript を組み込む(ライブラリ)
  57. 57. Drupal SAPPORO テーマ作成題材 • 使用素材:Start Bootstrap の 「Modern Business」 • https://startbootstrap.com/template-overviews/modern-business/
  58. 58. 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> <!-- Bootstrap Core CSS --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- Custom CSS --> <link href="css/modern-business.css" rel="stylesheet"> <!-- Custom Fonts --> <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> ・・・
  59. 59. 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> <!-- Bootstrap Core CSS --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- Custom CSS --> <link href="css/modern-business.css" rel="stylesheet"> <!-- Custom Fonts --> <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"> ・・・ 題材の index.html(冒頭部分) これらのファイルをアセットとしてライブラリを定義し、 .info.yml から参照することにしましょう
  60. 60. 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
  61. 61. 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 など別のライブラリへの依存が ある場合はここに指定する。
  62. 62. 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: 各種調整用の独自スタイルシート
  63. 63. Drupal SAPPORO テーマに組み込む • ライブラリの参照先 • 題材テンプレートに付属する下記フォルダをテーマフォルダにコピーする • [css]、[font-awesome]、[js] の各フォルダ • ライブラリへの参照設定 • cmsmix3.info.yml ファイルに次の記述を追加する • この場合はサイト内のすべてのファイルに適用される ・・・ libraries: - cmsmix3/bootstrap - cmsmix3/modern-business - cmsmix3/font-awesome - cmsmix3/misc cmsmix3.info.yml(追加部分) libraries: 先に定義した各ライブラリへの参照を登録する。 これにより、各ライブラリを読み込むコードが、 すべてのページで出力される。
  64. 64. Drupal SAPPORO step4 ページテンプレートを導入する
  65. 65. 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 で 「ライブラリ」 として定義済み
  66. 66. Drupal SAPPORO ページテンプレート • 題材の index.html の該当部分をコピーする 1. page.html.twig ファイルを作成する 2. index.html の body 要素の中身をそのままコピーする 3. 末尾の script 要素は、ライブラリで代替されるので削除する <!-- Navigation --> <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container"> ・・・ </div> </footer> </div> <!-- /.container --> page.html.twig(冒頭と末尾の部分のみ) これで題材テンプレートのトップページのマークアップと、 そこで必要な CSS/JS をアセットとしてテーマに組み込みました。 キャッシュをクリアすると、題材と同じトップページが表示されます。
  67. 67. Drupal SAPPORO オーバライドをトップページに限定する • トップ(フロント)ページだけに適用するには • 出力されたページのソースで Twig デバッグのコメントから テンプレート名の候補を調べると・・・ ・・・ <!-- THEME DEBUG --> <!-- THEME HOOK: 'page' --> <!-- FILE NAME SUGGESTIONS: * page--front.html.twig * page--node--1.html.twig * page--node--%.html.twig * page--node.html.twig x page.html.twig --> <!-- BEGIN OUTPUT from 'themes/oscdemo/page.html.twig' --> <!-- Navigation --> ・・・ page--front.html.twig トップページ専用の置換候補 page.html.twig 現在使用されているテンプレートファイル名 page.html.twig の名前を page--front.html.twig に変更することで テーマによるオーバーライドをトップページに限定できる。
  68. 68. Drupal SAPPORO index.html の body のマークアップと CSS/JS をトップページに組み込んだ状態
  69. 69. Drupal SAPPORO step5 グローバルナビにメインメニューを組み込む
  70. 70. 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 変数の 出力コードで置換してしまおう
  71. 71. Drupal SAPPORO メニュー項目を用意する • メインメニューに表示するメニュー項目を用意する • パス: admin/structure/menu/manage/main • 題材と同じメニューの項目を作成しておく 各項目のリンク先はとりあえず トップページにしておきます。 キャッシュをクリアすると、 グローバルナビに反映されるはず。
  72. 72. Drupal SAPPORO コアのメインメニューをグローバルナビに組み込んだところ クラス属性の設定が不十分で レイアウトが崩れている
  73. 73. Drupal SAPPORO 生成ページのソースを題材と比較すると… <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li> <a href="about.html">About</a> </li> 題材の index.html(抜粋) <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> ・・・ <ul> <li> <a href="/" data-drupal-link-system-path="&lt;front&gt;">About</a> </li> Drupal の生成ページ(抜粋) ul 要素のクラス属性が不足している。 この部分を出力しているテンプレートは?
  74. 74. Drupal SAPPORO Twig デバッグのコメントを確認すると… <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> ・・・ <!-- THEME DEBUG --> <!-- THEME HOOK: 'menu__main' --> <!-- FILE NAME SUGGESTIONS: * menu--main.html.twig x menu.html.twig --> <!-- BEGIN OUTPUT from 'core/modules/system/templates/menu.html.twig' --> <ul> <li> <a href="/" data-drupal-link-system-path="&lt;front&gt;">About</a> </li> Drupal の生成ページ(抜粋) 現在使用されているメニューのテンプレートが menu.html.twig であること、および メインメニュー専用のテンプレートファイルの menu--main.html.twig で オーバーライドできることがわかる。
  75. 75. 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() メソッドで属性を追加できる。
  76. 76. Drupal SAPPORO メニューのレイアウト修正後 メニューブロックとして出力されるため コンテキストリンクから編集できる
  77. 77. Drupal SAPPORO step6 リージョンの定義とブロックの割り当て
  78. 78. Drupal SAPPORO 各部の実装方法の検討 今回使用するリージョン ① Carousel(カスタム) ② コンテンツ(標準) ③ Marketing icons(カスタム) ④ Portfolio(カスタム) ⑤ Features(カスタム) ⑥ Call to Action(カスタム) ① ② ③ ④ ⑤ ⑥
  79. 79. 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 で使用できる
  80. 80. 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
  81. 81. Drupal SAPPORO ブロックレイアウトの管理画面で確認する • *.info.yml で定義したリージョンが管理画面に表示される
  82. 82. Drupal SAPPORO テンプレートにリージョンを定義する • リージョンをトップページのテンプレートに定義するには • ページのテンプレート (page--front.html.twig) を開いて、 リージョンに対応する部分に {{ page.<キー>}} を配置していく • <キー> の部分は *.info.yml で定義したリージョンのキー • リージョンに配置したブロックのコンテンツは、この部分に出力される ・・・ {{ page.highlighted }} <div class="carousel"> {{ page.carousel }} </div> ・・・ page--front.html.twig(抜粋) スライダ配置用のリージョン
  83. 83. Drupal SAPPORO ・・・ <!-- Page Content --> <div class="container"> <!-- Marketing Icons Section --> <div class="row"> {{ page.content }} {{ page.marketing_icons }} </div> <!-- Portfolio Section --> <div class="row"> {{ page.portfolio }} </div> <!-- Features Section --> <div class="row"> {{ page.features }} </div> <hr> <!-- Call to Action Section --> <div class="well"> <div class="row"> {{ page.call_to_action }} </div> </div> ・・・ page--front.html.twig(つづき) トップページ用のノード配置用 (見出しのみ) 横三段ボックス配置用 画像のグリッド表示用 文章+画像のブロック配置用 Call to Action ブロック配置用 これで、元の静的なコンテンツの代わりに、 各リージョンに配置したブロックが出力されます。
  84. 84. Drupal SAPPORO トップページ用のコンテンツを用意する • フロント用の基本ページを作成する • コンテンツタイプ 「基本ページ」 でコンテンツを新規作成し、 タイトルを "Welcome to Modern Business" とする。 • 本文は空白にしておく • このコンテンツをフロントページに設定する。 • パス: admin/config/system/site-information 作成したコンテンツのIDが1の場合 これで、フロントページ用のコンテンツが用意できました。
  85. 85. Drupal SAPPORO 表示してみる • Content リージョンに先に作成したコンテンツが表示される Content リージョンに配置されたコンテンツが ページに出力されていることがわかります。
  86. 86. Drupal SAPPORO 三段ボックス用のブロックを用意する • Marketing icons リージョンに配置する3つのブロック • 題材にあった3つのボックスを Drupal の基本ブロックとして作成する • 手順: • カスタムブロックライブラリの管理画面で [カスタムブロックを追加] する。 • 基本ブロックを選択する。 • ブロックの説明に、三段ボックスを識別する名前を入力し、 本文には、ブロックとして表示するコンテンツを入力する。 作成するコンテンツは sample_contents.txt からコピーするとよい
  87. 87. Drupal SAPPORO Marketing icons リージョンに配置する • ブロックレイアウトの管理画面から • Marketing icons リージョンに3つのブロックを配置する • 各ブロックの 「閲覧の制限」 で [ページ] に <front> と入力する • これによりトップページでのみ表示されるブロックになる。 3つのブロックを追加したところ
  88. 88. Drupal SAPPORO 表示してみる 3つのブロックが表示されることがわかります。 ただし、まだ横3段ボックスにはなりません。
  89. 89. Drupal SAPPORO step7 テーマ API を利用して class 属性を追加する
  90. 90. Drupal SAPPORO 横3段ボックスにするには • 題材の 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 に同じクラスを追加すればよい
  91. 91. Drupal SAPPORO API で属性に変更を加える方法 • *.theme ファイル • 出力の前処理などを実装するための PHP ファイル • テーマフォルダに <テーマ名>.theme という名前で作成する • 出力の前処理(プリプロセス) • THEME_preprocess_HOOK(&$variables) 関数 • プリプロセスを行うための関数 • THEME の部分はテーマ名で置き換える • HOOK の部分は対象要素に応じた名前で置き換える • 例1)cmsmix7_preprocess_block(&$variables) • oscdemo テーマでブロックの出力に変更を加えることができる • 例2)cmsmix7_preprocess_field(&$variables) • oscedemo テーマでフィールドの出力に変更を加えることができる
  92. 92. Drupal SAPPORO ブロック出力の前処理を実装する • cmsmix7_preprocess_block(&$variables) の実装 • テーマフォルダに cmsmix7.theme ファイルを作成する • 次のコードを記述して保存する • キャッシュをクリアすると関数が有効になる • $variables を変更することでブロックの出力を操作できる • $variables 配列の構造を調べるにはどうするか? <?php function cmsmix7_preprocess_block(&$variables) { } cmsmix7.theme PHP の var_dump() でも可能ですが、 Drupal の場合はもっと良い方法が用意されています。
  93. 93. Drupal SAPPORO Devel モジュールの利用 • 開発支援用のモジュール • https://www.drupal.org/project/devel • 開発作業を支援する種々の機能を提供する • 次の2つのモジュールを有効にする • Devel • Devel Kint • dpm() 関数 • Devel モジュールを有効にすると使用できるダンプ関数 • 引数で指定した変数を 「ステータスメッセージ」 ブロックに出力する • Devel の管理画面から出力方法を指定できる • admin/config/development/devel
  94. 94. Drupal SAPPORO Devel: ダンプ方法の選択 • Devel 管理画面でダンプ方法を指定する • admin/config/development/devel ここでは Kint を使用してみましょう。 https://github.com/kint-php/kint
  95. 95. Drupal SAPPORO ダンプしてみる • dpm() 関数を利用して引数をダンプする • cmsmix7.theme を次のように変更し、キャッシュをクリアする function cmsmix7_preprocess_block(&$variables) { dpm($variables); } cmsmix7.theme 各ブロックごとに $variables が Kint ダンプされます。
  96. 96. Drupal SAPPORO 横3段ボックスにしたいブロックを調べる • 一番最後のダンプを展開して調べていくと… 3つのボックスに対応するブロックについて、 ['attributes']['class'] 要素の値として 'col-md-4' を追加すればよさそうだ・・・
  97. 97. Drupal SAPPORO configuration の下を見ていくと・・・ ・・・ ブロックのタイトルがココに・・・ → この値でブロックを識別できる
  98. 98. 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 3段ボックスのブロックの id 属性に一致するブロックに クラス属性の値として col-md-4 を追加する。
  99. 99. Drupal SAPPORO 結果を確認 • Medium device の幅を超えると横3段表示になる • 3つのブロックの div のクラス属性に col-md-4 が追加される
  100. 100. Drupal SAPPORO step8 Views で Bootstrap のグリッドシステムを利用する
  101. 101. Drupal SAPPORO 「ポートフォリオ」 コンテンツタイプ 1. [サイト構築] - [コンテンツタイプ] - [コンテンツタイプの追加] をクリック 2. 表示されるフォームに次のように入力: • 名前 ポートフォリオ • description (空欄でもOK) 3. 保存する。 4. [フィールドの管理] タブで [フィールドの追加] をクリック。 5. 「フィールドの追加」 ページの [既存のフィールドを再利用] の一覧から 画像: field_image を選択し、ラベルに「画像」と入力して保存。 6. 次の画面でそのまま [設定の保存] をクリック。
  102. 102. Drupal SAPPORO
  103. 103. Drupal SAPPORO ここで、…サンプル用データを自動生成しておく • Devel generate モジュールを有効にする • admin/modules (機能拡張) • Generate content 機能を利用する • admin/config/development/generate/content • コンテンツタイプに 「ポートフォリオ」 を選択 • "How many nodes would you like to generate?" に6を指定する • 実行すると、6件のポートフォリオのコンテンツが生成される
  104. 104. Drupal SAPPORO コンテンツの作成 • 「ポートフォリオ」 型のコンテンツを6件作成
  105. 105. Drupal SAPPORO View と Views モジュール • データベース用語の "View" • ビュー(View)表 • ひとつ以上のテーブルから任意のデータを選択&カスタマイズして表したもの • 一度定義すれば、同じ条件に基づく結果を簡単に取得できる • 何に使う? • Drupal のエンティティに対する "ビュー" を作るための仕組み • 管理 UI を使用して特定のクエリを定義し、保存できる • 一度定義した Views はサイトの各部で再利用できる • 出力先(display)の指定: • ページ(URLが与えられて独立したコンテンツとして表示できる) • ブロック(テンプレート内のリージョンに埋め込まれるコンテンツ) • フィード(URLを与えられ、種々の形式で取り出される)
  106. 106. Drupal SAPPORO クエリ(問合せ)の構成要素 SQL 疑似コード例) SELECT TITLE // 列 → フィールド FROM BLOG // 表 → エンティティ WHERE PUBLISH=TRUE // 抽出条件 ORDER BY POSTDATE; // 整列条件
  107. 107. Drupal SAPPORO Views モジュールの UI 取得するフィールド(SELECT) 選択条件(WHERE) 並べ替え条件(ORDER BY)
  108. 108. Drupal SAPPORO 題材の Portfolio 部分 • 各画像が対応するページへのリンクになっている • 横幅に応じて横3段、2段、1段とレイアウトが変わる • 各画像のコンテナ要素のクラス属性:col-md-4 col-sm-6 col-12 • 各画像のクラス属性:img-responsive img-portfolio img-hover
  109. 109. Drupal SAPPORO Views で画像のグリッド表示を実装する • Views を使って同じ表示を実現する • 手順: 1. 画像をフィールドに持つコンテンツタイプ 「ポートフォリオ」 を定義 2. 作成したタイプで6件分のコンテンツ(ノード)を作成 3. ポートフォリオ型コンテンツ一覧を出力するブロック Views を定義 • 「フォーマットなしの一覧」 として出力 • 「行のクラス」 として次のクラス属性を付加する(コンテナ div のクラス) • col-md-4 col-sm-6 col-12 • 画像フィールドを出力する • 「結果の書き換え」 を利用して次のクラス属性を付加する • img-responsive img-portfolio img-hover 4. Views のブロックを Portfolio リージョンに配置する
  110. 110. Drupal SAPPORO 「ポートフォリオ」 Views の作成 (1) • [サイト構築] - [ビューズ] をクリックして、 [ビューを追加] をクリックする。 • 次のように入力する: • ビューの名前: ポートフォリオ一覧 • ビューの設定 • 表示: コンテンツ • タイプ指定: ポートフォリオ • 並び順: 新しい順(任意) • ブロックの設定で [ブロックを作成] をオン • ブロックのタイトルを 「Portfolio Heading」 • ブロックの表示設定: • 「フォーマットなしの一覧」 の 「フィールド」 • ブロックごとの項目に 「6」 • [保存して編集] をクリックする。
  111. 111. Drupal SAPPORO 「ポートフォリオ」 Views の作成 (2) • さらに、次のように設定を調整する: • [フィールド] の [追加] をクリックし、検索ボックスに 「画像」 と入力、 絞り込まれた [画像] フィールドのチェックをオンにして [フィールドを追 加して設定] をクリック。 • 次の画面のフォーマッターを 「画像のURL」、 画像のスタイルを「なし」にして、いったん [適用] をクリックする。 • プレビューで、タイトルとパスが表示されていることを確認したら、 [フィールド] の [▼] をクリックして、[並べ替え] をクリック、 [コンテンツ タイトル] の [削除] をクリックして削除してから [適用] をクリックする。 • 再度プレビューで、今度は画像のパスだけの一覧になることを確認。 • [フォーマット] の [設定] をクリックする。
  112. 112. Drupal SAPPORO クラス属性の設定 • 行のクラスに col-md-4 col-sm-6 col-12 を追加して [適用]
  113. 113. Drupal SAPPORO 画像フィールドの設定 • 画像フィールドの設定 • フォーマッターを [画像のURL] とし、[結果の書き換え]で img タグを出力
  114. 114. Drupal SAPPORO 画像スタイルの追加 • オリジナル画像のままではサイズがバラバラ… • 表示用にリサイズしてから Views で使いたいので、 固定サイズにリサイズする 「画像」 スタイルを定義する。 • [環境設定] - [メディア] - [画像スタイル] をクリックして、 [画像スタイルを追加] をクリックする。 • [画像スタイル名称] に 「ポートフォリオ」 と入力して [新しいスタイルを 作成] する。 • [効果] の一覧から [リサイズ] を選択して [追加] する。 • 幅を 750、高さを 500 に設定して [エフェクトの追加] をクリック。 • 先の 「ポートフォリオ」 Views の編集に戻り、 • [フィールド] の [コンテンツ 画像] をクリックし、画像のスタイルとして [ポートフォリオ] を選択し、[適用] をクリックし、Views を保存する。
  115. 115. Drupal SAPPORO Views ブロックを Portfolio リージョンに配置 • [サイト構築] - [ブロックレイアウト] をクリックし、[Carousel] リージョンで [ブロックを追加] して、「ポートフォリオ一覧:Block」 ブロックを追加する。
  116. 116. Drupal SAPPORO 結果を確認
  117. 117. Drupal SAPPORO ステップ9 独自のブロックタイプを定義して利用する
  118. 118. Drupal SAPPORO 題材の ”Modern Business Features” 部 • 説明文と画像がセットになって1つの区画を形成している • 説明文と画像をフィールドとするタイプを定義できそう… • 画面幅に応じてレイアウトが左右、上下に切り替わる • 説明文のコンテナ div のクラス属性:col-md-6 • 画像のコンテナ div のクラス属性:col-md-6 • 画像のクラス属性:img-responsive
  119. 119. Drupal SAPPORO ブロックタイプの定義 • カスタムブロックライブラリのブロックタイプから • パス: admin/structure/block/block-content/types • [カスタムブロックタイプを追加] をクリックして 「画像付き紹介文」 を定義する。 説明文と説明画像のフィールドを 持つ独自のブロックタイプを定義 説明画像の内部名称を field_descimg にしてください
  120. 120. Drupal SAPPORO フィールドのコンテナを定義するには • Field Group モジュール • 複数のフィールドの表示出力をグループ化できるようにする • https://www.drupal.org/project/field_group • フィールドの 「表示管理」 の設定でグループを追加できるようになる • この機能を利用して左右の HTML 要素として div コンテナを定義する • 「説明文」 フィールドを 「左側」 グループの配下に • 「説明画像」 のフィールドを 「右側」 グループの配下に
  121. 121. Drupal SAPPORO 定義したコンテナにクラス属性を指定するには • Field Formatter Class モジュール • フィールドのコンテナにクラス属性を指定できるようにする • https://www.drupal.org/project/field_formatter_class • フィールドの 「表示管理」 の設定でグループにクラス属性を設定できるようになる • これを利用して col-md-6 を設定
  122. 122. Drupal SAPPORO ブロックのインスタンスを作成 • 作成したブロックタイプで カスタムブロックを作成する • タイトル: Modern Business Beatures • 説明文: 題材の紹介文コンテンツ • 説明画像: 題材の画像 (デフォルト画像を利用)
  123. 123. Drupal SAPPORO 表示確認 • 画像が親 div のサイズに収まらない • max-width:100% が未設定 • img-responsive クラスが 設定されていないため
  124. 124. 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 を追加する。
  125. 125. Drupal SAPPORO 表示確認
  126. 126. Drupal SAPPORO その他の調整 • Call to Action リージョンへのブロック配置 • 基本ブロックとして作成 • 管理者ログイン中の管理メニューとナビの競合 • テーマの css/cmsmix.css で調整 • position を調整して重ならないようにする • z-index を調整してスクロール時に管理メニューが隠れないようにする • トップスライダについて • スライダはモジュールとして提供されているものが多数あるので、 今回は theming で実装せず、モジュールを利用する。 • 例:Responsive Slideshow モジュール • https://www.drupal.org/project/responsive_slideshow
  127. 127. Drupal SAPPORO 最終形 • コンテキストリンクが使用できる • 各ブロックの編集と設定変更ができる • 各ブロックのクイック編集ができる • Views の編集ができる • カスタム ブロックタイプのクイック編集では 紹介文の編集のほか、 画像のアップロードもできる
  128. 128. Drupal SAPPORO まとめ • Drupal 8 の ブロックシステムとコンテンツの配置 • Drupal 8 テーマについて • Twig の基本 • Drupal 8 テーマ開発入門 • 開発環境の設定 • アセット ライブラリ(CSS/JS ファイルの組み込み) • リージョンの定義とブロックの割り当て • プリプロセス API • Views の利用とカスタムブロックの定義

×