これまで行ったDrupalでのWebサイト公開から、静的ファイル化(html化)した形でWebサイトの公開を行うJamstackに変更しました。今回紹介する『Tome』は、Drupalで構築したWebサイトを、構造を含めてhtmlに変換するモジュールになります。現行のJam stack化に伴うWebサイト『構築』と『公開』双方の要になっています。
『Tome』をインストールし、Drupalで構築したWebサイトを、構造を含めてhtmlに変換するプロセスをまとめてみました。
『目次』
- Top --- Tomeの概要
- #01 Installing Tome --- Tomeのインストールと有効化を行い実際に『静的ファイル』の生成
- #02 Adjustment --- Tomeで生成した生成ファイルの確認、問題点の修正
- #03 Conclude --- Tomeを使い実践投入した感想
ページ下部の簡易ナビゲーションバーの番号をクリックすると記事内を移動出来ます。記事の読み返しなどにご利用ください。
前回の記事で、駆け足ですが、Jamstack化で行う作業をまとめていますので、おさらいしてみます。
MacBookProでの作業
1. Orbstack + DDEV + Drupal + Tome を使い、MacBookProでサイト構築を完結できる環境を整備。
2. DrupalのモジュールであるTomeを使い作成したWebサイトの『ページ構成をhtml化』しています。
AWSへのデプロイ
3. 『ページ構成をhtml化』したファイルを『LightsailにsFTPでアップロード』します。
4. 『 Lightsailにアップロード』の過程は『差分』のみが更新されます。
5. 『 Lightsailにアップロード』が完了すると『Cloud Frontが即時に反映』されWebサイトの公開が完了。
今回は、” 2. DrupalのモジュールであるTomeを使い作成したWebサイトの『ページ構成をhtml化』しています。 ”に関わるプロセスをまとめています。
Tome.
『Tome』はDrupalで構築したWebサイトを『静的ファイル : html』化するモジュールです。
drupal.org Tomeより引用
- Tomeは静的サイトジェネレーターであり、コンテンツ用の静的ストレージシステムです。
- Tomeは、個別に使用できる2つのサブモジュールに分かれています。
- 静的サイトを生成したいだけの場合は、Tome Static を有効にしてください。
- Gitにコンテンツと設定を保存したいだけの場合は、Tome Syncを有効にしてください。
- 両方をご希望の場合は、Tome を有効にしてください。
Tomeは静的ファイルを生成する『Tome Static』とGithubにDrupalのコンテンツと構成を保存する『Tome Sync』で構成されています。『Tome Static』で構成した静的コンテンツを『Tome Sync』でGitを使ってデプロイ出来ます。
私は、デプロイにGitを使っていないので、『Tome Static』のみをインストールし使用しています。
Installing Tome
Tomeのインストールを行います。他のモジュール同様Composerを使います。現在Tomeの最新版は『8.x-1.16』となっています。私のMac BookにインストールしているDrupal 11.4.4で問題なく動いています。
※ Drupal 11.4.0のメジャーアップデートの際、Symfonyに起因するTome Syncの構文エラーが発生していましたが、11.4.2で解消されています。私は、デプロイにGitを使用していないので、11.4.0で発生したエラー対応として、Tome Syncをアンインストールしています。
$ composer require 'drupal/tome:^1.16' -W
$ drush updatedb
$ drush cr以上でTomeがインストールされます。
Using Tome
Tomeがインストールされたので有効化します。
管理画面の『機能拡張』
Tome
- Tome / 静的サイトのために必要なものが全てそろっています。
- Tome Base / Tome SyncとTome Staticの間の共有サービスとトレイトが含まれています。
- Tome Static / Drupalサイト全体を静的なHTMLとしてエクスポートします。
- Tome Static Cron / Processes static paths in a cron queue worker.
- Tome Static Super Cache / 静的ビルドをより長期間キャッシュするために、コアとTome Staticのキャッシュのふるまいを変更します。
- Tome Sync / Drupalのコンテンツをフラットファイルからインストールし、コンテンツを同期をします。
- Tome Sync Autoclean (Experimental) / Automatically deletes files that are unused. This module could definitely lead to data loss, use with caution!
1.から6までにチェックを入れてインストールするとTomeの全機能が利用出来ます。私は、6.Tome Syncと7.Tome Sync Autocleanは有効化していません。
以上で、静的ファイルを生成するTomeが使用可能になります。
Tome Static
早速、Tomeを使い、Drupalで構築したサイトを静的化します。
管理画面の『環境設定』
- Tome Static 静的サイトを生成する / Create a static copy of your site using Tome.
- 静的サイトをダウンロードする / Download the latest static build.
- 静的サイトのプレビュー / Preview the latest static build.
上記が表示されます。ファイルの静的化は”1. Tome Static 静的サイトを生成する”で行います。
Home > 管理 > 環境設定 > Tome > Tome Static > 静的サイトを生成する
静的サイトを生成する
[生成]
Submitting this form will initiate a build of all uncached static pages site using Tome. Existing files in the static export directory (../html) will be overridden.
[ベースURL]
he absolute URL used for generating static pages. This should match the domain on the site where the static site will be deployed.
『ここに実際に公開するURLを入れます』私のサイトだと『https://inter-est01.com』
[送信]『静的サイトを生成するページ』に進み、『ベースURL』に実際公開するURLを入れて『送信』を行うと静的ファイルが生成されます。これをしないと、サイト内で指定しているローカルドメインが公開ドメインに変換されません。一例をあげるとメタタグのURLがローカルドメインのままになります。
$ ls
composer.json
composer.lock
content
files
html //生成されたhtmlディレクトリ
recipes
vendor
web
$ cd html
$ ls
contact ja search tarm-tag-outerwear term-article-web
core lifestyle sitemap.xml tarm-tag-tops term-lifestyle-fashion...
...
// htmlディレクトリ内にディレクトリが作成されます。
$ cd creation
$ ls
index.html learn002 learn005 learn008 learn011 ...
$ cd learn002
$ ls
index.html
// creation/learn002/index.htmlの形でhtmlが生成されています。生成されるファイルはDDEVプロジェクト内のルートディレクトリに『html』というディレクトリが生成されそこにDrupalで構築したサイトが構造化を維持した状態で全てhtml化（ディレクトリ/index.html）されます。
Adjustment
Tomeを使い、構造化を維持したhtmlファイルが構築されます。
公開前に確認をします。
Preview
Tomeに『Preview』機能がありますが、表示されるページにCSSやJSが効きません。公開ページの状況を正確に把握するため、簡易Webサーバーを動かして確認します。
$ cd html
$ python3 -m http.server 8000 --bind 127.0.0.1
Serving HTTP on 127.0.0.1 port 8000 (http://127.0.0.1:8000/)
...
// ブラウザで http://127.0.0.1:8000/ を表示すると静的化したサイトが確認できます。
// 停止はCTL+C簡易Webサーバーで確認します。Drupalで作成したサイトが、静的ファイル化され表示されます。問題なく静的化処理が完了しています。
Metatag
Drupalのモジュールである、Metatagで各ページのメタタグを設定しています。非常に優秀なモジュールなので、インストールしてデフォルトのままで、基本的なメタタグは自動的にページに挿入されます。
DrupalはCMSなので、URL末尾が『/なし』となります。
<link rel="canonical" href="https://inter-est01.com/ja" />
<link rel="alternate" hreflang="x-default" href="https://inter-est01.com/en" />
<link rel="alternate" hreflang="ja" href="https://inter-est01.com/ja" />
<link rel="alternate" hreflang="en" href="https://inter-est01.com/en" />ここで一つ問題が生じます。実際の公開はhtmlなので、公開URLはURL末尾が『/あり』になります。
何が問題になるかというと、Googleなど検索エンジンのクローラーが、正規ページをURL末尾『/なし』で認識しながら、実際は、URL末尾『/あり』が正規ページになり、正規ページと認識しているURL末尾『/なし』を301と認識し、クロールのたびに全ページで301を大量に吐いてしまいます。
公開や、ユーザーの閲覧には全く問題がないのですが、検索インデックスという観点で見ると、正規ページをリダイレクトしていることになります。
実際のURLがURL末尾『/あり』なので、メタタグの正規ページを、URL末尾『/なし』からURL末尾『/あり』に変更します。
"canonical" は "Token[node:url]" が使えるので、MetatagモジュールのToken入力を "[node:url]/ : 末尾/を追加" すれば、全ページに反映されます。問題は、言語が入ったURLのトークンが見当たらなかったので、 "hreflang" の設定は各ページにURL末尾『/あり』を個別で書いていく必要があります。
<link rel="canonical" href="https://inter-est01.com/ja/" />
<link rel="alternate" hreflang="x-default" href="https://localname.ddev.site/en/" />
<link rel="alternate" hreflang="ja" href="https://localname.ddev.site/ja/" />
<link rel="alternate" hreflang="en" href="https://localname.ddev.site/en/" />TomeもトークンのURLは変換してくれますが、個別で書いたローカルドメインは変換しません。私は静的ファイル生成後以下のスクリプトで一括変換をかけています。DDEVプロジェクトディレクトリより一段上のディレクトリから実行します。
find localname/html/ -name "*.html" -exec sed -i '' 's|https://localname\.ddev\.site/|https://inter-est01\.com/|g' {} +上記を実行することで、メタタグは以下に変換されます。
<link rel="canonical" href="https://inter-est01.com/ja/" />
<link rel="alternate" hreflang="x-default" href="https://inter-est01.com/en/" />
<link rel="alternate" hreflang="ja" href="https://inter-est01.com/ja/" />
<link rel="alternate" hreflang="en" href="https://inter-est01.com/en/" />公開ドメイン "href="https://inter-est01.com/en/" 末尾に『/』が追加されました。
sitemap.xml
Tomeではsitemapをローカルドメインから公開ドメインに変換しません。
sitemap.xml
<url>
<loc>https://localname.ddev.site/ja</loc>
<xhtml:link rel="alternate" hreflang="ja" href="https://localname.ddev.site/ja"/>
<xhtml:link rel="alternate" hreflang="en" href="https://localname.ddev.site/en"/>
<lastmod>2026-07-18T04:21:07+09:00</lastmod>
<changefreq>daily</changefreq>
<priority>1.0</priority>
</url>ローカルファイルなので、テキストエディタを使い置換します。ドメイン名の置換とURL末尾に『/』を入れます。
"href="https://localname.ddev.site/ja"
を
"href="https://inter-est01.com/ja/"
にテキストエディタを使い置換します。私はCotEditorかBBEditを使っています。
<url>
<loc>https://inter-est01.com/ja/</loc>
<xhtml:link rel="alternate" hreflang="ja" href="https://inter-est01.com/ja/"/>
<xhtml:link rel="alternate" hreflang="en" href="https://inter-est01.com/en/"/>
<lastmod>2026-07-18T04:21:07+09:00</lastmod>
<changefreq>daily</changefreq>
<priority>1.0</priority>
</url>公開ドメインに変換され、ドメイン末尾に『/』が追加されました。
robot.txt
Tomeはrobots.txtは生成しません。Drupalのデフォルトである "web/robots.txt" を公開ディレクトリ『html』にコピーしてディレクトリと一緒にアップロードする事で対応しています。
All set
公開準備が完了します。
『Tomeで静的ファイル書き出し』 --- 『Tome Static』
『生成されたhtmlの確認』 --- 『簡易Webサーバーで確認』
『メタタグの不整合の修正』 --- 『Metatagとスクリプトで対応』
『sitemap.xmlのURL変換』 --- 『BBEditの置換で対応』
Tome Staticで生成ファイルを吐き出し、sitemap.xmlのローカルドメインを置換すれば大丈夫と考えていたのが、サーチコンソールのクローラーの結果を見たら、301が大量に出ておりメタタグの不整合の修正という当初考えていなかった対応をしました。
考えてみれば、CMSのデフォルトURLであるURL末尾『/なし』で構成されたWebサイトを、静的ファイルであるhtmlに変換して公開するので、正規ページがURL末尾『/あり』になるのは当たり前なのですが、実際に公開しGoogleのクローラーがクロールした結果301が出ている状態を見て、気がつき修正しています。
厳密には、サイト内の内部リンクも、URL末尾『/なし』で構成されており、修正を行うか考えたのですが、キリがないのでそのままにしています。
DrupalのJamstackは初めての試みであり、実際に構築し、公開しないとわからない問題が見えた事も収穫です。
Conclude
ローカル環境である、MacBookProのOrbstack、DDEV、DrupalにTomeを追加し、Drupalで構築したWebサイトを静的ファイルで書き出し、内容を確認したところ、sitemap.xmlがTomeの生成対象ではないことや、robots.txtが生成されない事は公開前に確認できていたので対応していました。
CMSとhtmlの公開されるURL構造の差で生じる、『URL末尾の/有無』は全く頭にありませんでした。これは、ブラウザで見ても、綺麗にリダイレクトされており、一般ユーザーの閲覧には全く問題ないと考えていました。
その後、サーチコンソールの結果を見たら、Googleのクローラーによる、正規ページとしての認識という課題が表面化したので、その対応に時間が取られてしまいました。
時間がかかった一番の理由が、『hreflang』の設定を行う際、Metatagモジュールで使えるTokenとエンティティの確認が必要となり、これまでTokenはそれほど意識したことが、なかったので、Tokenを探し、さまざまなTokenとエンティティの連結といった、これまであまりしていなかったプロセスを試しましたが、Tokenによる全ページへの反映という自動化の道が見つからず、結局個別にURLを書き込む対応が確実かつ一番の近道であると考え、対応しています。
メタタグの問題は、ありましたが、Tomeを使う事で、これまで同様Drupalで構築したサイトが、非常に簡単に、『構造を含めたhtml化』されます。このプロセスが成り立つ事で、Jamstackのプランが現実化しています。
CloudFrontとLightsail(仮)
静的ファイルをCDNで配信するJamstackなので構成の要であるCloudFrontと静的ファイルを置いているLightsailについてまとめています。