Short break

DrupalでWebサイトを構築する為の概念やルールと、機能の理解についての記事をまとめていますが、なかなか思ったような記事にならず少し行き詰まっていますので、気分転換を兼ねて、現在のサイトの状況をまとめてみます。

Introduction.

近々のサイトの状況は以下になります。

  1. DrupalCoreのアップデート
  2. モジュールの追加とアップデート
  3. サイトの多言語化として英語ページがまとまって来ました。
  4. Drupal Core標準で用意されるサイト内検索機能をテスト的に使っています。

11/20以降、日を置かずにDrupal Coreのアップデートの通知が来ているので、都度アップデートをしています。内容はセキュリティパッチやバグ修正になっています。Drupal Coreのアップデートと近いタイミングでモジュールのアップデートも来ていますので同様にアップデートを行います。サイトのアクセス状況を確認したいので、GoogleサーチコンソールとGoogleアナリティックスの設定を行っています。

前回記事で触れた、多言語化の機能を使用して英語のサイトを構築していましたが、ほぼ終了しました。一つのサイト内に日本語サイトと英語サイトが混在する形になっています。

まだ大した記事数がないので当面は必要ないと考えていたサイト内検索をテストを兼ねて配置してみました。Drupal Coreに標準で用意されているsearch機能をそのまま使用しています。

1. Drupal Core Up Date.

更新通知が日を置かず連続で届いていたので都度最新版にアップデートをしています。

  1. 10.3.10 - 22 November 2024 // 10.3のパッチ(バグ修正)  11/22にアップデート完了
  2. 10.3.9 - 20 November 2024 // 10.xシリーズのセキュリティリリース 11/20にアップデート完了
  3. 10.3.8 - 12 November 2024 // 10.3のパッチ(バグ修正) 11/12にアップデート完了
  4. 10.3.7 - 7 November // 2024 10.3のパッチ(バグ修正) 前回アップデート

Drupal Core 10.3.7 > > > Drupal Core 10.3.10 に更新しました。

1-1.Composer Up Date.

更新は前回同様Composerで行います。Bitnamiのマニュアルに従い、以下の形で行います。

  1. Up Dateを行うのでメンテナンスモードにします
  2. .htaccess、settings.php、robots.txtファイルのバックアップを作成します。
  3. 作業ディレクトリをDrupalアプリケーションに変更します。
  4. Composerとdrushでアプリケーションをアップグレードします。
  5. DBの更新とキャッシュのクリア
  6. アプリケーションが正常に更新されたことを確認
  7. ファイルのバックアップを復元します。
  8. Up Dateが完了したのでメンテナンスモードを元に戻す。

Buckup.

.htaccess、settings.php、robots.txtファイルのバックアップを作成します。

$ cp /opt/bitnami/drupal/.htaccess /home/bitnami/.htaccess.backup
$ cp /opt/bitnami/drupal/sites/default/settings.php /home/bitnami/settings.php.backup
$ cp /opt/bitnami/drupal/robots.txt /home/bitnami/robots.txt.backup

Change directory.

作業ディレクトリをDrupalアプリケーションに変更します。

$ cd /opt/bitnami/drupal/

Drupal Update.

以下のコマンドを実行して、Composerとdrushでアプリケーションをアップグレードします。

$ drush cache:rebuild
[success] Cache rebuild complete.
$ sudo composer update "drupal/core-*" --with-all-dependencies

Up Date開始

Do not run Composer as root/super user! See https://getcomposer.org/root for details
Continue as root/super user [yes]? yes
Loading composer repositories with package information
Updating dependencies
Lock file operations: 0 installs, 26 updates, 0 removals
- Upgrading drupal/core (10.3.9 => 10.3.10)
- Upgrading drupal/core-composer-scaffold (10.3.9 => 10.3.10)

~ 中略 ~

Generating autoload files
Hardening vendor directory with .htaccess and web.config files.
45 packages you are using are looking for funding.
Use the `composer fund` command to find out more!
Cleaning installed packages.
No security vulnerability advisories found.
$

Up Date完了


DB Update.

DBの更新とキャッシュのクリア

$ drush updatedb
[success] No pending updates.
$ drush cache:rebuild
[success] Cache rebuild complete.

Check for updates.

アプリケーションが正常に更新されたことを確認

$ drush core:status
Drupal version   : 10.3.10
Site URI         : http://default
DB driver        : mysql
DB hostname      : 127.0.0.1
~ 中略
Drupal root      : /opt/bitnami/drupal
Site path        : sites/default
Files, Public    : sites/default/files
Files, Temp      : /tmp

Drupal version : 10.3.10 に無事更新されています。


Reconstruction.

.htaccessとrobots.txtファイルのバックアップを復元します。

$ cp /home/bitnami/.htaccess.backup /opt/bitnami/drupal/.htaccess
$ cp /home/bitnami/robots.txt.backup /opt/bitnami/drupal/robots.txt

以上でDrupal Coreが10.3.7 > 10.3.10に更新されました。

LightsailでDrupalを運用以降、Drupal Coreの更新は 10.3.3 > > > 10.3.10と更新しています。

2. Module Up Date.

  1. Captcha (2.0.6 => 2.0.7)
  2. Easy breadcrumb (2.0.8 => 2.0.9)

利用しているモジュールのUp Dateの通知も来ていましたのでこちらも更新します。モジュールの更新は通常はAdminコンソールからも更新可能ですが、私の環境では権限の設定の関係でエラーが出てしまいAdminコンソールからの更新が出来ないのでComposerを使ってアップデートを行います。

ComposerのモジュールUp Dateは

$ composer update drupal/(モジュール名) --with-all-dependencies

で行えます。

2-1. Captcha Up Date.

Google reCaptchaを使用する為に使用しているモジュールであるCaptchaのUp Dateをします。

Captch update.

Up Date開始

$ sudo composer update drupal/captcha --with-all-dependencies
-----
Do not run Composer as root/super user! See https://getcomposer.org/root for details
Continue as root/super user [yes]? yes
Loading composer repositories with package information
Updating dependencies
Lock file operations: 0 installs, 1 update, 0 removals
- Upgrading drupal/captcha (2.0.6 => 2.0.7)
Writing lock file
Installing dependencies from lock file (including require-dev)
Package operations: 0 installs, 1 update, 0 removals
- Downloading drupal/captcha (2.0.7)
- Upgrading drupal/captcha (2.0.6 => 2.0.7): Extracting archive
Generating autoload files
Hardening vendor directory with .htaccess and web.config files.
45 packages you are using are looking for funding.
Use the `composer fund` command to find out more!
Cleaning installed packages.
No security vulnerability advisories found.
-----

Up Date完了


DBの更新とキャッシュのクリア

$ drush updatedb
[success] No pending updates.
$ drush cache:rebuild
[success] Cache rebuild complete.

UP Dateの確認

$ drush pm:list
 --------------------- ---------------------------------- ---------- ----------
  Package               Name                               Status     Version
 --------------------- ---------------------------------- ---------- ----------
  Core                  Actions UI (action)              Disabled   10.3.10
  Core                  Announcements                    Enabled    10.3.10
  ~~~ 中略 ~~~
  Spam control          CAPTCHA (captcha)                Enabled    2.0.7
  Spam control          Image CAPTCHA                    Enabled    2.0.7
                        (image_captcha)

Captcha (2.0.6 => 2.0.7)のアップデートが完了しました。

2-2. Easy breadcrumb Up Date.

パンくずリストに使用しているモジュールであるEasy breadcrumbのUp Dateをします。

Easy Breadcrumb Update

Up Date開始

$ sudo composer update drupal/easy_breadcrumb --with-all-dependencies
-----
Do not run Composer as root/super user! See https://getcomposer.org/root for details
Continue as root/super user [yes]? yes
Loading composer repositories with package information
Updating dependencies
Lock file operations: 0 installs, 10 updates, 0 removals
- Upgrading drupal/easy_breadcrumb (2.0.8 => 2.0.9)
- Upgrading symfony/dependency-injection (v6.4.15 => v6.4.16)
~~~~~ 中略 ~~~~~
Writing lock file
Installing dependencies from lock file (including require-dev)
Package operations: 0 installs, 10 updates, 0 removals
- Downloading symfony/deprecation-contracts (v3.5.1)
~~~~~ 中略 ~~~~~
- Downloading symfony/dependency-injection (v6.4.16)
- Downloading drupal/easy_breadcrumb (2.0.9)
- Upgrading symfony/deprecation-contracts (v3.5.0 => v3.5.1): Extracting archive
~~~~~ 中略 ~~~~~
- Upgrading drupal/easy_breadcrumb (2.0.8 => 2.0.9): Extracting archive
  Cleaning: symfony/validator
  Cleaning: symfony/routing
  Cleaning: symfony/http-foundation
  Cleaning: symfony/http-kernel
  Cleaning: symfony/dependency-injection
Generating autoload files
Hardening vendor directory with .htaccess and web.config files.
45 packages you are using are looking for funding.
Use the `composer fund` command to find out more!
Cleaning installed packages.
No security vulnerability advisories found.
-----

Up Date完了


DBの更新とキャッシュのクリア

$ drush updatedb
[success] No pending updates.
$ drush cache:rebuild
[success] Cache rebuild complete.

UP Dateの確認

$ drush pm:list
 --------------------- ---------------------------------- ---------- ----------
  Package               Name                               Status     Version
 --------------------- ---------------------------------- ---------- ----------
  Core                  Actions UI (action)                Disabled   10.3.10
  Core                  Announcements                      Enabled    10.3.10
  ~~~ 中略 ~~~
  Navigation         Easy Breadcrumb                       Enabled    2.0.9
                        (easy_breadcrumb)

Easy breadcrumb (2.0.8 => 2.0.9)のアップデートが完了しました。

3. Adding modules.

Googleサーチコンソールの登録と、Googleアナリティックスの登録を行う為に2つのモジュールをインストールします。GoogleサーチコンソールもGoogleアナリティックスもアクセスを解析するサービスになります。

GoogleサーチコンソールはGoogle検索からのアクセスを解析します。主な解析内容は、検索キーワードの順位と表示回数クリック数に対し、言語や地域、端末種別などターゲットとするユーザーの情報が得られます。

Google検索は、Googleにインデックスと言われるページ別の登録が行われる事で、Google検索の結果にページが表示される仕組みになっています。GoogleはBotを使い世界中のWebサイトを巡回しており、Webサイトを公開するとこのGoogleのBotがサイトを訪れて既定の審査を行い、審査を通るとGoogleのインデックスにサイトやサイト内のページが登録されます。

GoogleBotがサイトを訪れた際にあらかじめサイトの構成を知らせる事でGoogleがサイト構成を把握し審査の効率が上がり、インデックスの登録のスピードが上がります。ページ構成をGoogleに知らせるにはサイトマップと言われるページ構成を記載したXMLのデータをサイトに配置する必要があります。

Googleサーチコンソールの設定は以下を行います。

  1. Googleサーチコンソールの判別用のID(google-site-verification=43桁)はDNSのTXTレコードに設置します。
  2. Googleにサイト構成を告知するために配置するXMLの配置は Simple XML Sitemapのモジュールを使用します。

Googleサーチコンソールのアクセス解析はGoogle検索の解析結果に限定されますが、Googleアナリティックスは検索結果からのアクセスだけでなくリピートを含めたサイトを訪れたユーザーのアクセス解析をします。地域や言語、検索とその他などアクセス元の解析や、ページビューやセッションなどサイト内でのユーザーのアクションを解析することで、サイト内のユーザーの行動傾向を条件分析します。

Googleアナリティックスの設定は以下を行います。

  1. Googleアナリティクスの判別用のID(G-から始まるID)をサイトに設置するにはGoogle Tagモジュールを使用します。

今回新たにインストールするモジュールは以下になります。

  1. Simple XML Sitemap 2024/11 現在 Version 4.2.2
  2. Google Tag 2024/11 現在 Version 2.0.6

Googleサーチコンソールと、Googleアナリティックスについては、Google側の設定など含めると記事が長くなるので使い方や設定方法を含め別記事でまとめていければと考えています。

Composerのモジュール新規インストールは

$ composer require 'drupal/(モジュール名):^(バージョン)'

で行えます。

3-1. Adding Simple XML Sitemap.

Googleにサイト構成を告知するXMLの配置を行う Simple XML Sitemapモジュールをインストールします。

Install Simple XML Sitemap.

インストール開始

$ sudo composer require 'drupal/simple_sitemap:^4.2'
-----
Do not run Composer as root/super user! See https://getcomposer.org/root for details
Continue as root/super user [yes]? yes
Loading composer repositories with package information
Updating dependencies
Lock file operations: 1 installs, 0 update, 0 removals
- Locking drupal/simple_sitemap (4.2.2)
~~~ ターミナルのログを残していないのでインストールログはありません ~~~
Generating autoload files
Hardening vendor directory with .htaccess and web.config files.
45 packages you are using are looking for funding.
Use the `composer fund` command to find out more!
Cleaning installed packages.
No security vulnerability advisories found.
-----

インストール完了


DBの更新とキャッシュのクリア

$ drush updatedb
[success] No pending updates.
$ drush cache:rebuild
[success] Cache rebuild complete.

モジュール追加の確認

$ drush pm:list
 --------------------- ---------------------------------- ---------- ----------
  Package               Name                               Status     Version
 --------------------- ---------------------------------- ---------- ----------
  Core                  Actions UI (action)                Disabled   10.3.10
  Core                  Announcements                      Enabled    10.3.10
  ~~~ 中略 ~~~
  SEO                   Simple XML Sitemap (Search         Disabled   4.2.2
                        engines)
                        (simple_sitemap_engines)
  SEO                   Simple XML Sitemap (Views)         Disabled   4.2.2
                        (simple_sitemap_views)
  SEO                   Simple XML Sitemap                 Enabled    4.2.2
                        (simple_sitemap)

Simple XML Sitemap (4.2.2)のインストールが完了しました。

3-2. Adding Google Tag.

Googleアナリティクスの判別用のID(G-から始まるID)をサイトに設置するGoogle Tagモジュールをインストールします。

Install Google Tag.

インストール開始

$ sudo composer require 'drupal/google_tag:^2.0'
-----
Do not run Composer as root/super user! See https://getcomposer.org/root for details
Continue as root/super user [yes]? yes
Loading composer repositories with package information
Updating dependencies
Lock file operations: 1 installs, 0 update, 0 removals
- Locking drupal/google_tag (2.0.6)
~~~ ターミナルのログを残していないのでインストールログはありません ~~~
Generating autoload files
Hardening vendor directory with .htaccess and web.config files.
45 packages you are using are looking for funding.
Use the `composer fund` command to find out more!
Cleaning installed packages.
No security vulnerability advisories found.
-----

インストール完了


DBの更新とキャッシュのクリア

$ drush updatedb
[success] No pending updates.
$ drush cache:rebuild
[success] Cache rebuild complete.

モジュール追加の確認

$ drush pm:list
 --------------------- ---------------------------------- ---------- ----------
  Package               Name                               Status     Version
 --------------------- ---------------------------------- ---------- ----------
  Core                  Actions UI (action)              Disabled   10.3.10
  Core                  Announcements                    Enabled    10.3.10
  ~~~ 中略 ~~~
  Other                Google Tag (google_tag)           Enabled    2.0.6

Google Tag (2.0.6)のインストールが完了しました。

4. Creating an English website.

前回、#C17 Short breakで記事にした英語ページの作成はほぼ完了しました。

前回の記事


Drupalに標準で搭載されている多言語化の機能を使用してみようと考え、日本語で作成したWebサイトの英語版を作成しています。

Drupalの多言語化ですが、日本語ページを自動的に翻訳するわけではなく、指定するメニューや固定されているフィールドをDrupalが英訳します。記事は自身で翻訳したものを別途用意する必要がありますので、私はDeepLを使用して翻訳を行い、言語設定で英語を指定し英文の別記事の形で作成しています。

一番のポイントは、言語設定を行ったページは、URLのドメイン以降に言語ディレクトリが追加されます。

私のサイトだと

  1. 日本語 https://inter-est01.com/ja/article01
  2. 英語 https://inter-est01.com/en/article01

のような形になります。

言語選択で英語を指定するページはすべて/enにまとめられます。このことでコンテンツブロックのレイアウトで、メニューやサイドバーを英語用のものに指定したり、コンタクトフォームのフィールドが英文表示されるなどの形で、英語化されます。

これまで書いたDrupalの記事やLifestyleの記事の英語化、英語化したタクソノミーの仕分けなどを進めています。実際の作業内容は別途記事にまとめていきます。

途中経過ですが、TopメニューのLanguageにてEngishを選択するとご覧いただけます。


Drupalの翻訳機能がコンテンツタイプやブロックなどにデフォルトで用意されているフィールドや説明に限定されており自身で書いた記事や作成したブロックのメニューは翻訳されないので別途英語用を用意して対応しています。

英語化したページの為に別途用意したもの

  1. 記事のコンテンツタイプは言語選択を英語としたものを別途用意し英語に翻訳した記事を書きます。
  2. ビューで作成したカテゴリーリストのページや関連記事や新着記事のブロックなども全て言語選択を英語としたものを別途用意
  3. タクソノミーで作成したボキャブラリー、タームも全て言語選択を英語とし英語のものを別途用意
  4. メニューやフッターなどのブロックも同様に全て言語選択を英語とし、内容を英語化しリンク先も英語ページを指定したものを別途用意
  5. コンタクトフォームは、言語設定のデフォルトである日本語に英語を追加して翻訳 > フォームの入力フィールドの説明や送信ボタンが言語で切り替わる事を確認 > 別途ページを用意せず、同一ページに日本語/英語の説明を記載し対応
  6. プライマリドメイン inter-est01.comはデフォルト言語である日本語となるので、コンタクトフォーム同様、日本語/英語の説明を記載し対応
  7. 従来のプライメリドメインで指定していたTopページを日本語/英語それぞれ作成し、各言語選択からサイト内リンクのHomeに指定します。
  8. パンくずのHomeがプライマリードメインにリンクされているが、英語のエイリアス/enからのリンクinter-est01.com/enはエイリアスが効かずノード番号で表示されるのでEasy breadcrumbのページの表記名の変更で対応
  9. 次項で説明するサイト内検索の翻訳化を指定し、コンタクトフォーム同様、入力フィールドの説明や検索ボタンが言語で切り替わる事を確認、デフォルトのSearchを使用しているので、現時点では検索結果に日本語/英語の記事が表示されています。今後指定言語のみの記事を表示する方法を考えています。

今回、Drupalの多言語化機能を使用し、日本語ページと英語ページを作成しましたが、機能面や使い勝手の良さについて満足しています。概念がシンプルで、選択言語をエイリアス化しまとめるので/ja日本語/en英語の基本を理解する事で、Drupalが翻訳する部分とそれ以外に自身で翻訳する部分を把握し必要な翻訳ページを作成すれば、サイトの多言語化が比較的容易に実現出来ます。

ただ、管理面を考えると、記事数やメニュー項目などが単純に倍になってしまったり、Adminコンソールが、翻訳指定したものとしないもので言語が混在したりと管理が面倒になって来ます。

私のサイトは、デフォルトメニューを使っていないので問題ないのですが、デフォルトメニューを使用する場合、メニュータイトルのリンク先はプライマリードメインに指定される事で表示されるページは翻訳で変更することができないので、英語のページからタイトルメニューでホームに戻ると日本語になってしまいます。

  1. inter-est01.com : プライマリードメイン / 日本語
  2. inter-est01.com/ja : プライマリードメインのページを表示 / 日本語
  3. inter-est01.com/en : プライマリードメインのページを表示 日本語
  4. /jaや/enのデフォルトはプライマリードメインとなるがプログラム上予約されているエイリアスなのでリンク先の指定が変更出来ない。

私は、プライマリードメインの記事内容を日本語/英語両方を記載する事で対応しています。ユーザーエージェントやリファラーでのリダイレクトも考えましたが、あまり推奨されたやり方ではないのでこの形で対応しています。

過去にWordPressで日本語/英語のサイトを作成した際に、サブドメインを切り、それぞれ別にWordPressをインストールし日本語サイト/英語サイトを分けて作成し別で管理したのですが、自由度を考えると、Drupalもこの形が良いのではないかと考えています。実現するしないは別問題ですが今回Drupalの多言語化機能を使用してみて感じた結果になります。

メインとなる日本語のサイトとなります。

Japanese.

日本語のページになります。Drupalの基本言語に日本語を選択していますので、通常はこちらが表示されます。

作成している英語のサイトとなります。

English.

英語のページになります。Drupalの言語選択で英語を選択しています。記事の翻訳を行い、表示されるメニューなどの言語選択を英語にすることで、英語サイトになっています。

5. Add search function.

サイト内検索を設置しました。公開から日が浅く記事数や内容も薄いサイトなので、当面必要ないのではないかと考えていましたが、デフォルトのSearch機能を実際に使用してみたかったので試用版のような形ですがサイト内検索も利用可能となっています。

設定はシンプルで、コンテンツ、ヘルプ、ユーザーの3項目の検索が可能となっていて、検索精度に関わる最低文字数の設定やエイリアスの設定、検索順位の条件を指定出来ます。

検索結果の表示がリストタグで構成されていますがこの構成の変更をAdminコンソールから出来ないのでテンプレートファイルのページ構成を変更する必要があります。私自身TWIGやpreprosess関数などについての理解ができていないので、学習する必要があります。

他の選択種としてSearch APIのモジュールを使用するという手もあります。Search APIはSearch機能にビューの機能を持たせているので検索結果のデザインを自由に設定出来ることや、異なる条件でフィルタリングした複数の検索機能を持つことができます。

いくつかの選択種があるので、検索機能の目的を整理し構築していきたいと考えています。

Conclude.

気分転換のために書いた記事ですが、記事を書き出すと思ったより面倒でした。。。今後構築している当サイトの構成内容などを題材にもう少し具体的で実践的なDrupalの使用方法の記事を書いていきたいと考えています。

Next article.

Local環境の整備

サイトの公開移行、MacBookにインストールしているDrupalに触れていなかったので、久しぶりに触れてみます。アップデートが溜まっていたのでアップデートも済ませてしまいます。

投稿日
2024-12-02
投稿者
S.Takeda
タグ
記事内容
関連記事.

DrupalやWebサイト構築の関連記事になります。宜しければご覧ください。

Mac BookでDrupalを動かす.

MacでDrupalを使う環境を記事でまとめています。

Mac Articles.

Drupal タクソノミーその2

前項でDrupalのタクソノミーの概要を説明しましたので、今回は実際の使用例を当サイトの実例を見ながら説明して行きます。

Drupal Articles.

Drupal ビュー機能-1 ページ

作成したページをリスト化して自由にサイト内に配置出来るビューの機能についてまとめて行きます。

Drupal Articles.