初めてのDrupal Theming

DrupalCafe vol.66
in JUSO Coworking
2018.1.19

右下のコントローラもしくは矢印キーで移動、Escキーでスライド全体をご覧頂けます。

自己紹介

名前　小寺順子（こざる）
所属　こざる舎（フリーランス）
仕事　マークアップエンジニア
趣味　ビール、オイスター、絵本、電子工作系手芸

アジェンダ

e-Stat 政府統計の総合窓口サイトをThemingしたときのお話です

Drupal8と仲良くなる
テーマをカスタマイズする
PHP用のテンプレート：Twig
番外編：事件は現場で起きている

Drupal8と仲良くなる

この本、こざるの Drupal バイブルです

一番読んだところ

P.263 付録C. Twigテンプレートの命名規則

Drupal8で使用するテンプレートは、
Twigのファイル名でルール化されています。
テンプレートにはいくつか種類があります

HTMLテンプレート
ページテンプレート
リージョンテンプレート
ブロックテンプレートなど

Twig Template naming conventionsの日本語訳です。
ANNAIさんのブログにも掲載されていました

コネタ

本文内に猫の写真が掲載されています。

この写真はどこで撮られたものでしょうか？

コタエ

付録C. Twigテンプレートの命名規則を翻訳してくださった

井上さん（ANNAIの社員さんです）のお宅で
飼われていたねこちゃんでした！

残念ながらねこちゃんは年末に他界されたそうです...
でも本の中では活躍中
天国から、井上さんのご活躍を見守ってくれてるはず！

オンラインMTGで、こんなコネタをハサみつつ、
Drupalの理解を深めました

本と実践でDrupalと仲良しに

Drupalは文献に英語が多く
最初は苦戦することもたくさんありましたが

Drupal本を読んだり
わからない箇所を教えていただいたりしつつ

なんとか仲良しになれました（タブン）

テーマをカスタマイズする

Bootstrap 3ベースのテーマを
ベーステーマとして構築しました

Bootstrap

Bootstrapは、CSSフレームワークです。

レスポンシブ対応（グリッドレイアウトなど）
Sass/less対応

よくつかっているフレームワークだったので
作りやすかったです

HTMLテンプレート

HTMLの基本構造（html/head/bodyなど）を定義
ベーステーマのテンプレートを使用しました

ページテンプレート

ページ用のテンプレート
ページの種類ごとにカスタマイズしました

リージョンテンプレート

ページにリージョンを配置する際に使用します
ベーステーマのテンプレートを使用しました

リージョン作成時は設定ファイル [theme name].info.yml に記載する必要があります

ブロックテンプレート

リージョンにブロックを配置する際に使用します
カスタマイズが必要なブロックのみ、テンプレートを作成しました

PHP用のテンプレート：Twig

Twig は、PHP用のテンプレートです

HTMLテンプレート
ページテンプレート
リージョンテンプレート
ブロックテンプレートなど

は、すべてTwigで書かれています

Twigの書き方

Twigでは、HTMLタグに下記の区切り文字を入れて
if/forや変数などを書きます

使える変数などは、コメントに！

変数名などは、ベーステーマの
テンプレートのコメントを参考にします

英語大変！？

Drupalやっていると
英語の文献を読む機会が増えます

大変！？

今はGoogle翻訳もあるし
なんとかなります w

Twig覚えるの大変！？

どこに何を書く
どういう構成にする

などを相談しつつ作るので
Twig自体への理解より
Drupalの構造の理解のほうが大変でした！

番外編

事件は現場で起きている

「カルーセルの作動がおかしいです」

2017年◯月◯日 Slackにて

調べていただけますか？

こないだ動いていたけどなぁ...

「動いてる...あれ？」

ログインするとおかしい？

非ログイン時は作動しているカルーセル

Chrome DevToolでみると、HTMLが違う！？

なんで？？？

原因はいずこに！？

ログイン時にはなぜかAjaxで
書き出されているカルーセル

書き出されているカルーセルのクラス名に
bigpipe という名前がたくさんあったので
ググってみると英語のページに...

BigPipe

BigPipeは Module でした
Moduleは標準の機能を拡張するためのプログラムで
WordPressでいうプラグインのようなものです

（心の声）Moduleかぁ...わからないかな...（そっとサイトを閉じる）

捜査結果を報告

「すみません、原因わからなかったです」

(小声）書き出されたタグに bigpipe という記述がたくさんあったので、
ググってみましたが（中略）私にはわからなかったです…

神の声

bigpipeですか！可能性あるかも。

尊い教えが返ってきました

ViewsのSQLクエリの条件がある程度複雑になると、
BigPipeというDrupalのキャッシュ機構が
ログイン状態ではViewsの部分をAjaxで
非同期にレンダリングするようになるようです

（心の声）
難しい..けど、原因わかってよかった！

事件は無事解決！

その後...原因を踏まえた修正が行われ
事件は収束へと向かいました

BigPipeは「表示速度を上げる」
ための Module でした

事件のおかげで、こざるの知識も増えました
ありがとうございました

おわり

未知いっぱいなDrupalですが
ぼちぼち頑張ろうと思います

ご静聴ありがとうございました