詳細解説:Drupalサイトを静的HTML(Static HTML)に変換する方法

この記事の目次

静的HTMLって?


日本のクライアントの要望ではよく静的HTMLへの吐き出しが求められることがあります。地方自治体の案件ではRFPに必須要件として入っていることもあります。Movable TypeやWordpressのStatic HTMLジェネレーターの人気を見ても日本では頻繁に求められている機能だということが言えると思います。


どのCMSやWebサービスもサーバーからブラウザが解釈できる形式で送られてくるファイルはすべてHTMLです。取り立てて静的HTMLという言葉があるのは不思議に思えますよね。なんのことかというと、サーバー上にHTMLファイルが存在してそれをブラウザに送ってくるかどうかという意味になります(index.html ,  about.html などなど)。

 CMS以前のWebサイトやLP(ランディングページ)、キャンペーンサイトなどはいまでもこの形がまだまだ現役です。編集や更新はHTMLを直に触ることになります。コンテンツが増えてくると管理が大変である、サイトに複数ユーザー存在しコンテンツを出し分けたい、いろいろな機能を追加したいという要望からCMSが生まれてきた経緯があります。


通常、Drupalサイトはコアや、Redis、リバースプロキシ、CDN等のキャッシュシステムを併用しますが、Drupalプログラム自体はユーザーからのリクエストを直接受け取り動作しています。少し概念が違いますので前提のお話を少しします。

静的HTMLで難しいこと


サーバーサイドプログラムとの通信をしない、静的HTMLのみサイトで難しいこととしては
   • ユーザー登録とログイン
   • コメント機能
   • コンタクトフォーム
   • 検索機能
   • Viewのフィルター
   • Ajaxでのサーバー交信
   • ロール別のコンテンツやブロックの出し分け
   • ユーザー単位のコンテンツの出し分け
   • リアルタイムでのコンテンツ更新
   • スケジュール公開
   • 自由なURL変更
   • ワークフロー機能
など今時のWebサイトやWebサービスで必要なことはほぼ難しいことがわかります。


静的CMSとは


静的なHTMLでは難しいコンテンツを管理する機能をサーバーサイドのプログラムで処理し、閲覧用のHTMLを別途書き出して置くタイプのCMSが存在します。日本では商用のCMSを中心にまだかなりポピュラーな形です。メリットとしては、

• HTMLファイルとサーバーサイドプログラムを分離できるので、表示パフォーマンスの改善が容易になる。
• プログラムやデータベースなどを攻撃を受けにくい場所に設置できる。

ということになります。


Drupalの基本は動的CMS

Drupalを含め多くのCMSはWebアプリケーションフレームワークは動的にHTMLを生成します。
これらはブラウザからのURLリクエストがあった時に都度、データベースなどのコンテンツ保存庫にアクセスして情報を取り出し、ビジネスロジックに合わせた処理をし、適切なテンプレートを経由してHTMLに整形後、ブラウザへ送り返されます。
サーバー上には◯◯◯.htmlというファイルは存在せず、index.phpなど特定のファイルが一旦すべてのアクセスを受け取り、ルーティング処理を施しています。URLはバーチャルな文字列で、実体としてのhtmlファイルと結びついてはいません。


なぜ動的CMSなのか


ここでなぜDrupalコアは動的なスタイルを選択しているのか考えてみましょう。
静的CMSのデメリットへのソリューションともいえる部分になりますが、

• 現代のWebサイトの主流になりつつある、One to Oneマーケティングに必須の機能になるユーザー毎、ロール毎にコンテンツを出し分けることが可能。

• ユーザーにログインさせて、コミュニケーションを取ることが可能
コミュニティサイトや、FacebookなどのSNSはユーザー個人単位で見ている内容が全く違いますから、そもそも静的CMSでは対応できません。

• 大量のコンテンツが溜まってきてもコンテンツの追加、編集時の負荷とストレスがない。
少ないページ数では問題になりにくいところですが、Webサイトがさまざまなコンテンツが集約されるページを持っていたり、メニューに絡む部分や一覧ページなど、一つのコンテンツを編集しただけでも静的CMSでは全サイトのHTML吐き出しが必要になります。エンタープライズレベルの企業では数千〜数万ページのコンテンツを持つことは当たり前にありますので、この負荷はかなりなものになります。ワークフロー機能でのコンテンツ公開、差し戻しなども簡単には行なえません。

 

Headless Drupal


現在、動的CMSをバックエンドで使いつつ、静的HTML+Javascriptでのサーバー連携でHTMLの書き換えを行う実験的な取り組みが進んでいますが、ここでは触れず別の機会にまわします。

 

静的HTML吐き出しを使いたいシチュエーションとは

 Drupalで静的HTMLの吐き出しをしたいシチュエーションとしては
• サイトのコンテンツが少ない。
• アノニマスユーザー閲覧のみのサイト。
• 低コストで表示パフォーマンスを簡単に上げたい。
• セキュリティアップデートなどメンテナンスコストを掛けたくない。
• イベント終了後に変更の予定がないのでアーカイブしたい。

などがあります。

ソリューション


幾つかソリューションがありますので、簡単に紹介します。


コマンドラインで手動アーカイブしたい場合


イベント終了後に変更の予定がないのでアーカイブしたいなど、自動化するまでもない場合にオススメです。
wgetコマンドを打ってサイトまるごとのアーカイブを取れます。コストも掛からず簡単です。


wget -m -U Mozilla --page-requisites \
--retry-connrefused \
--limit-rate=5000k \
--convert-links \
--html-extension \
--restrict-file-names=windows \
--domains {your domain} \
--no-parent {your document root URI}


     

wgetコマンドをDrupalモジュールに組み込んだパターン

Exportするのではなくwgetコマンドで実際のサイトを呼び出して保存する方法です。メニューやリンクで辿れないページは生成されませんが、シンプルで見通しが良い方法でしょう。


Wget Static - Generate HTML and Save To FTP / Webdav https://www.drupal.org/project/wget_static

 

同じ発想で、Nodeの編集時にHookしてコマンド実行するモジュールを以前作りました。SFTPやRsyncにも対応しています。メンテはしていませんが参考にしてください。


Static HTML by wget https://www.drupal.org/sandbox/jimyhuang/static_html_wget

 

Boostモジュールを利用し低コストで表示パフォーマンスを簡単に上げたい場合

Boost moduleはHTMLファイルのキャッシュとしての利用が第一ですが、一番コストが掛からず表示パフォーマンスを上げることができるでしょう。


Boost https://www.drupal.org/project/boost

 

Drupalからエクスポートする方法

Static Generator   https://www.drupal.org/project/static

drupal_http_request() 関数を使ってHTML生成をします。パラレルリクエストなどを使って少し入り組んだアーキテクチャを採用しています。動的な部分と、静的な部分の同居も視野に入れていてBoostに近い使い方もできるようです。


コンテンツステージングまで視野に入れたソリューション

Zariz  https://www.drupal.org/project/zariz

OG作者のamitaibu さんが開発しているモジュール・ライブラリでかなり高機能です。目指すスコープが大きいのでこちらのドキュメントを見てください。

Gizra/zariz: Site preview and static site generator from Drupal https://github.com/Gizra/zariz

 

まとめ

静的なHTMLとして動作させるということは、Drupalの良さを半減させることでもあります。
上に挙げたモジュールのユーザー数を見てもアメリカ、ヨーロッパなどではあまり使われていないソリューションだということが一目でわかります。Webサイトに求める機能が高度化し、ビジネスやオンライン・マーケティングを遂行する上でなくてはならないものになってきている中であえて静的HTMLを利用するのは限られたシチュエーションになっているのだと考えます。おそらく日本も早晩、動的なサイトが当たり前になってくると想像します。

ただ、「クライアントに静的HTMLはできますか?」と問われた時に「必要性は少ないけれども、やればできますよ。」と答えられればよいのではないでしょうか。お役に立てれば幸いです。