「Drupal8 スタートブック」の内容を Drupal10 で試してみる

Drupal8 スタートブック

現在も、日本語の Drupal 書籍だと上位に上がってくる書籍です。

バージョン

書籍で利用されている Drupal バージョンは 8 です。

最新の Drupal11 で確認しながら進めようとしたところ、書籍内で利用されている Drupal テーマ、 「Paxton」が Drupal10 までしか対応していませんでした。

そのため、 Drupal10 で確認を進めていきます。

デモサイト

Drupal8 は EOL ですが、下記デモサイトで書籍のコンテンツを今でも確認することができます。

余談

公式からも、同様の内容の記事が出てました。

環境

• Windows11
• WSL2 (Ubuntu)
• ddev
• Drupal10

環境のセットアップ

ddev で Drupal 環境を作成します。

mkdir -p ~/projects/drupal10 && cd ~/projects/drupal10

# ddev 構成ファイル作成
ddev config --project-type=drupal10 --docroot=web --create-docroot

# ddev 起動
ddev start

# Drupal をインストール
ddev composer create "drupal/recommended-project:^10" .
ddev restart
ddev require drush/drush
ddev drush site:install standard --account-name=admin --account-pass=admin --site-name="My Drupal 10 Site"

Paxton のインストール

現在テーマは composer でインストールされるように案内されているため、 composer でインストールします。

$ ddev composer require 'drupal/paxton:^3.0'
./composer.json has been updated
Running composer update drupal/paxton
Loading composer repositories with package information
Updating dependencies
Lock file operations: 1 install, 0 updates, 0 removals
  - Locking drupal/paxton (3.0.0)
Writing lock file
Installing dependencies from lock file (including require-dev)
Package operations: 1 install, 0 updates, 0 removals
  - Installing drupal/paxton (3.0.0): Extracting archive
Generating autoload files
42 packages you are using are looking for funding.
Use the `composer fund` command to find out more!
No security vulnerability advisories found.

書籍に従いテーマの設定を行います。

2章 - コンテンツ

「会社概要」ページと「採用情報」ページの作成

メニューへの追加

「新着情報」コンテンツタイプの作成と、「タグ」フィールドの追加

「新着情報」コンテンツを作成。

「製品カテゴリ」タクソノミーの作成と、「製品紹介」コンテンツタイプの作成

製品コンテンツを作成。

3章 - Views

Views と、 Views のブロック (Views ブロック) を作成。

トップページのみの表示する形で作成した Views ブロックをブロックレイアウトにて content リージョンに配置。

トップに表示されるようになりました。

製品詳細の Views ブロックについても作成し、トップページに設置します。

表示されました。

次に、絞り込み条件 (Filter criteria) を公開 (expose) することによって、一覧に絞り込みの入力ボックスを表示します。

表示できました (靴で絞り込んでいます)。

同様に、タクソノミー (製品カテゴリ) による絞り込みもできました (ファッションで絞り込んでいます)。

フィルターの位置調整 & レスポンシブ対応。

4章 - ブロックレイアウトとコンタクトフォームの作成

コンタクトフォーム

タイトルを「お問い合わせ」に変更。

ブロックレイアウト

ブロックレイアウトを書籍同様に変更し、表示レイアウトを整える。

カスタムブロック

書籍内で「カスタムブロック」と説明されている部分は、 Drupal10 では「コンテンツブロック」となっているため、「コンテンツブロック」を作成。

作成したブロックを設置。

なお、「save and configure」をクリックすれば、作成後すぐに設置することも可能です。

モジュール

レイアウトに使えるモジュールとして紹介されていたモジュールについて Drupal10 でインストールして確認してみます。

tarohida@tarohida-l13:~/projects/drupal10$ ddev composer require 'drupal/ds'
./composer.json has been updated
Running composer update drupal/ds
Loading composer repositories with package information
Updating dependencies
Lock file operations: 1 install, 0 updates, 0 removals
  - Locking drupal/ds (3.30.0)
Writing lock file
Installing dependencies from lock file (including require-dev)
Package operations: 1 install, 0 updates, 0 removals
  - Downloading drupal/ds (3.30.0)
  - Installing drupal/ds (3.30.0): Extracting archive
Generating autoload files
42 packages you are using are looking for funding.
Use the `composer fund` command to find out more!
No security vulnerability advisories found.
Using version ^3.30 for drupal/ds
tarohida@tarohida-l13:~/projects/drupal10$ less composer.json
tarohida@tarohida-l13:~/projects/drupal10$ ddev composer require 'drupal/panels'
./composer.json has been updated
Running composer update drupal/panels
Loading composer repositories with package information
Updating dependencies
Lock file operations: 5 installs, 0 updates, 0 removals
  - Locking drupal/ctools (4.1.0)
  - Locking drupal/jquery_ui (1.7.0)
  - Locking drupal/jquery_ui_draggable (2.1.0)
  - Locking drupal/jquery_ui_droppable (2.1.0)
  - Locking drupal/panels (4.9.0)
Writing lock file
Installing dependencies from lock file (including require-dev)
Package operations: 5 installs, 0 updates, 0 removals
  - Downloading drupal/jquery_ui (1.7.0)
  - Downloading drupal/jquery_ui_draggable (2.1.0)
  - Downloading drupal/jquery_ui_droppable (2.1.0)
  - Downloading drupal/ctools (4.1.0)
  - Downloading drupal/panels (4.9.0)
  - Installing drupal/jquery_ui (1.7.0): Extracting archive
  - Installing drupal/jquery_ui_draggable (2.1.0): Extracting archive
  - Installing drupal/jquery_ui_droppable (2.1.0): Extracting archive
  - Installing drupal/ctools (4.1.0): Extracting archive
  - Installing drupal/panels (4.9.0): Extracting archive
Generating autoload files
42 packages you are using are looking for funding.
Use the `composer fund` command to find out more!
No security vulnerability advisories found.
Using version ^4.9 for drupal/panels
tarohida@tarohida-l13:~/projects/drupal10$ ddev composer require 'drupal/block_visibility_groups'
./composer.json has been updated
Running composer update drupal/block_visibility_groups
Loading composer repositories with package information
Updating dependencies
Lock file operations: 1 install, 0 updates, 0 removals
  - Locking drupal/block_visibility_groups (2.0.4)
Writing lock file
Installing dependencies from lock file (including require-dev)
Package operations: 1 install, 0 updates, 0 removals
  - Downloading drupal/block_visibility_groups (2.0.4)
  - Installing drupal/block_visibility_groups (2.0.4): Extracting archive
Generating autoload files
42 packages you are using are looking for funding.
Use the `composer fund` command to find out more!
No security vulnerability advisories found.
Using version ^2.0 for drupal/block_visibility_groups

それぞれインストール、およびアンインストール可能でしたが、使い方があまりわかりませんでした。割愛します。

5章 - コンテンツの翻訳と多言語設定

標準の翻訳モジュール (Configuration Translation, Content Translation) を有効化し、利用します。

「Block Layout」から「Language Switcher」のブロックを選択し、設置。

「言語を選択」のブロックを設置。

翻訳したコンテンツの作成

「Edit Menu」から編集画面に遷移し、「Translate menu」タブから

「会社概要」をクリックし、翻訳を設定していきます。

今まで英語をデフォルトで進めていたので、書籍の内容と食い違いが発生しています。ここを調整しつつ。

デフォルト (英語ページ) は「About us」、日本語ページは「会社概要」に設定。

メニューの翻訳が完了しました。

/ja/ にアクセスすると下記のようになります。

View についても調整します。そのままだと両方のコンテンツが表示されるため、

言語が翻訳の言語であるコンテンツのみを表示するようにします。

英語表示の時は英語の記事、日本語表示の時は日本語の記事が表示されるようになりました。

6章 - モジュールのインストール、ユーザ作成と権限の設定

モジュールの検索

https://www.drupal.org/project/project_module で検索します。

Simple XML Sitemap モジュール

今回は、書籍で紹介されている「Simple XML Sitemap」をインストールします。

ユーザとロールと権限

Drupal は、以下のようなモデル。

• ロールに権限を割り当てる
• ユーザをロールに割り当てる

AWS の IAM と同じような仕組み。

「Configuration > People > Role および Permission」から設定可能。

「西都管理」ユーザの作成など。

以下のような権限分けができる。

ユーザ管理に関して

• 「西都管理」ユーザは可能
• 「新着太郎」および「製品花子」ユーザは閲覧不可能

コンテンツに関して

• 「新着太郎」は、「新着情報」コンテンツのみ作成、編集可能
• 「製品花子」は、「製品紹介」コンテンツのみ作成、編集可能
• 「西都管理」は、両者の作成と編集が可能

付録: テーマ

テンプレートに関するマニュアルの翻訳もありました。 Article ノードのコンテンツを描画するときは

まず node--article.html.twig テンプレートを参照。

ない場合は、 node.html.twig テンプレートを参照 (ベーステンプレートという)

というようなことが記載されていました。

それぞれ、下記のようなテンプレートがあり、それぞれより優先度の高いファイル名のテンプレートによって上書きすることができます。

• ページテンプレート： page.html.twig
• リージョンテンプレート: region.html.twig
• ブロックテンプレート: block.html.twig
• ノードテンプレート: node.html.twig
• タクソノミーテンプレート：taxonomy_term.html.twig
• フィールドテンプレート：field.html.twig
• コメントテンプレート: comment.html.twig
• フォーラムテンプレート
• メンテナンスページテンプレート
• 検索結果テンプレート

まあここは、いろんなテンプレートがあるんだなぁということと、上書きできることを覚えておいて、適宜必要になったら確認する感じでよいかと思ったので、さらっと。

心に残った記述。

以下、すべて書籍より引用

Drupal の特徴である「統一された形式でデータを扱う」という概念

コンテンツタイプとフィールドの設定画面は、データ構造、入力画面開発、表示画面開発の 3つの機能を統合したものといえます。
これを GUI 上から開発できる点が Drupal の非常に優れた特徴といえます。

簡単に言えば、コンテンツタイプはコンテンツを作る際のテンプレートに当たります。

Drupal デベロッパーに「Drupal で一番優れた機能はなんですか？」と質問したとします。まず第一に返ってくる答えは間違いなく「Views」です。

Views を一言で説明すると、「サイト内の任意のデータの集合を選択して表示するために、統一されたインターフェースを提供する機能」