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.

D8でコンテンツをレイアウトする手法について

429 views

Published on

OSC 2018 Hokkaido セミナー資料

Published in: Internet
  • Be the first to comment

D8でコンテンツをレイアウトする手法について

  1. 1. Drupal SAPPORO オープンソース カンファレンス 2018 Hokkaido 2018年7月7日(土) @札幌コンベンションセンター 16:10~16:55
  2. 2. Drupal SAPPORO Drupal 8 テーマ入門 という予定でしたが、 あまりにも漠然としているので 対象もう少しを絞りまして…
  3. 3. Drupal SAPPORO コンテンツのレイアウト という視点から Drupal 8 とテーマを眺めてみたいと思います
  4. 4. Drupal SAPPORO 自己紹介 • 白根健司(しらねけんじ) • Drupal さっぽろ • http://drupalsapporo.net/ • ※ 「Drupal さっぽろ」 で検索 • 札幌近郊の Drupal ユーザーによるローカルコミュニティ • 月例の勉強会 • OSC Hokkaido 参加 • 温泉合宿(Drupal ONSEN)
  5. 5. Drupal SAPPORO 今日の内容 • テーマ作成ハンズオンについて • 2つのレイアウト手法 • ページ内の各リージョンにブロックを配置する方法 • 単一のリージョン内でフィールドをレイアウトする方法 • umami プロファイルを利用したデモ • エンティティ参照によるコンテンツ統合とレイアウト • レイアウト関連 D8 コアモジュール • Field Layout、Layout Builder(experimental) • まとめ
  6. 6. Drupal SAPPORO コンテンツ配置の2つの手法
  7. 7. Drupal SAPPORO ブロックシステムの 「リージョン」 について ページ リージョン リージョンの種類と ページ内のレイアウトが テーマによって定義される。
  8. 8. Drupal SAPPORO 「ブロック」 について ヘルプ ブロック メインページコンテンツ ブロック ステータスメッセージ ブロック ・・・ 種々のモジュールにより 1まとまりのコンテンツが ブロックとして出力される。
  9. 9. Drupal SAPPORO ブロックシステムを利用したレイアウト手法 ヘルプ ブロック メインページコンテンツ ブロック スタータスメッセージ ブロック 適切なリージョンに ブロックを配置することで コンテンツをレイアウトする。
  10. 10. Drupal SAPPORO 利用する機能=「ブロックレイアウト」 • 各ブロックの出力先となるリージョンを管理画面上で定義できる
  11. 11. Drupal SAPPORO この手法については… • CMSMix での Drupal 8 テーマ作成ハンズオンで解説 • https://www.slideshare.net/bkenro/cmsmix-sapporo- vol3-drupal-81323508 • 今日は、これと違うレイアウト手法を見ていくことにします。
  12. 12. Drupal SAPPORO Drupal のコンテンツは "fieldable" • ノード • Drupal システム上に蓄積されるコンテンツの単位 • コンテンツタイプで型と構造を定義 • 任意の数のフィールドを持てる • ブロック (狭義) • コアのブロックシステムを利用して定義される汎用ブロック • ブロックタイプで型と構造を定義 • 任意の数のフィールドを持てる ・・・
  13. 13. Drupal SAPPORO フィールドに基づくコンテンツの配置 メインページコンテンツ ブロック 「調理時間」 フィールド 「難易度」 フィールド 「調理手順」 フィールド 「材料」 フィールド 特定のブロック/リージョン内で フィールドの出力コンテンツを どう配置するか、という問題として コンテンツのレイアウトを考える
  14. 14. Drupal SAPPORO 「ディスプレイモード」 について • コンテンツエンティティに異なるプレゼンテーションを与える仕組み • 次の2つがある: ・ ビューモード(表示用) ・ フォームモード(編集用) • 詳しくはこちら: • Display Modes, View Modes, and Form Modes • https://www.drupal.org/docs/8/api/entity-api/display-modes- view-modes-and-form-modes
  15. 15. Drupal SAPPORO サンプル:umami プロファイルによるサイト • umami プロファイルとは • Drupal 8.5 で追加 • 料理雑誌を題材にしたデモサイト構築用インストールプロファイル • umami テーマ、サンプルコンテンツ、各種構成が設定済みのサイトができる
  16. 16. Drupal SAPPORO (参考) umami インストールプロファイルの使い方 • 場所: • core/profiles/demo_umami/ • 隠しプロファイル属性を解除して使う • インストール開始前に下記ファイルを編集: • core/profiles/demo_umami/demo_umami.info.yml • 6行目付近 hidden: true → hidden: false • これにより、インストール時のプロファイルの選択肢として umami が表示される • umami テーマ • core/profiles/demo_umami/themes/umami
  17. 17. Drupal SAPPORO Recipe コンテンツタイプ • 料理レシピ用のコンテンツタイプ • 内部名:recipe • サンプルコンテンツあり ・・・
  18. 18. Drupal SAPPORO Recipe ノードの例とレイアウト layout__region--top-first node__header page-title layout__region--bottom layout__region--top-second layout__region--bottom-secondlayout__region--bottom-first
  19. 19. Drupal SAPPORO umami で定義されているビューモード ノードの 全体表示用 Views の コンテンツ表示用
  20. 20. Drupal SAPPORO (参考) テンプレートの提案(suggestion) • suggestion とは? • コアをオーバーライドできるテンプレートファイル名の候補のこと • 適用範囲などが異なる複数のテンプレート名の候補が存在する場合がある • 優先順位が決まっている • 優先順位の高い順に探索し、テーマ内で最初に見つかったものが適用される • 具体的なファイル名の候補は下記を参照 • https://www.drupal.org/docs/8/theming/twig/twig-template- naming-conventions 種々の条件に対応して 適用されるテンプレートの候補を ファイル名パターンとして提示します たとえば、ブロックのテンプレートなら・・・
  21. 21. 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
  22. 22. Drupal SAPPORO (参考) テンプレート名の候補の確認 • Twig デバッグを有効するとテンプレート名の候補を確認できる <!-- 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 が表示される
  23. 23. Drupal SAPPORO ビューモードと Twig テンプレートの対応 • ノードのテンプレート ファイル名: • パターン: node--[type|nodeid]--[viewmode].html.twig • ベーステンプレート: node.html.twig • core/modules/node/templates/node.html.twig • Recipe コンテンツタイプの full ビューモードの場合: → node--recipe--full.html.twig コンテンツタイプ名 ビューモード名
  24. 24. Drupal SAPPORO umami テーマのテンプレートを見ると… recipe コンテンツタイプの full ビューモード用テンプレート
  25. 25. Drupal SAPPORO ・・・ <article{{ attributes.addClass(classes) }}> {{ title_prefix }} <header class="node__header"> <h1 class="page-title"> {{ label }} </h1> {% if display_submitted %} <div{{ author_attributes.addClass('node__submitted') }}> {% trans %}<span class="by-author">by {{ author_name }}</span> {{ created_date }}{% endtrans %} {{ metadata }} </div> {% endif %} {{ content.field_recipe_category }} {{ content.field_tags }} </header> {{ title_suffix }} <div{{ content_attributes.addClass('node__content') }}> <div class="layout__region--top"> <div class="layout__region layout__region--top-first"> {{ content.field_image }} </div> ・・・ node--receipe--full.html.twig このテンプレートを編集することで コンテンツブロック内のレイアウトを定義できる。
  26. 26. Drupal SAPPORO エンティティ参照によるコンテンツの統合 • 参照元ノードのビューモードで表示を制御 • 参照先のコンテンツをテンプレート内で組み込む Recipe コンテンツ • 調理時間 • 難易度 • 材料 • 調理手順 … Recipe category タクソノミーターム • アイコン画像 参照元のフィールドと参照先のフィールドを統合し、 Twig テンプレートでレイアウトを定義する エンティティ 参照
  27. 27. Drupal SAPPORO デモ
  28. 28. Drupal SAPPORO Views での利用 • 例:フロントページ • 表示フォーマット 「コンテンツ」 • ビューモードを指定する
  29. 29. Drupal SAPPORO <article{{ attributes.addClass(classes) }}> <div{{ content_attributes.addClass('node__content') }}> {{ content.field_image }} </div> <div class="node__meta"> {{ content.field_difficulty }} {{ title_prefix }} {% if not page %} <h2{{ title_attributes.addClass('node__title') }}> <a class="node__link" href="{{ url }}" rel="bookmark">{{ label }}</a> </h2> {% endif %} {{ title_suffix }} <div class="read-more"> <a class="read-more__link" href="{{ url }}">{{ 'View'|t }} {{ node.bundle }}</a> </div> </div> </article> node--highlighted-bottom.html ビューモードのテンプレートで Views の表示要素となる ボックス内部のレイアウトを定義
  30. 30. Drupal SAPPORO レイアウト関連の (試験的) コアモジュール • 今回の手法をサポートするモジュールがコア入りする可能性 • そうなれば、この方法がデファクト標準になるかも?
  31. 31. Drupal SAPPORO まとめ • D8 コアによる2つのコンテンツのレイアウト手法: • テーマで定義したリージョンにブロックを配置する方法 • 単一リージョン内でフィールド出力を配置する方法 • ディスプレイモード • 1つのエンティティに異なるプレゼンテーションを与える手段 • ビューモード(表示用)とフォームモード(編集用)に分かれる • 表示管理、Twig テンプレートはビューモードごとに定義できる • エンティティ参照の利用 • エンティティの参照関係を利用してコンテンツを編成&レイアウトできる • D8 コアのレイアウト関連モジュール • Field Layout、Layout Builder:レイアウトのデファクト?

×