npmを使用して静的HTMLのヘッダーやフッターを共通化する

手っ取り早く終わらせたい人

npmを使用してヘッダー部分を共通化したHTMLを生成します。この記事は初心者向けなので長いです。

手っ取り早く終わらせたい人は最後から読んでください。

はじめに

弊社のWebサイトはいくつかの外部の業者の方に協力していただいて作っていただいています。(いつもありがとうございます)

先日、ヘッダーを少し変更してもらったのですが、修正ファイルが数十個に上がり気軽にお願いしたのものの申し訳ない気持ちでいっぱいになり、言い忘れてたのでもう一回修正ねと言いにくくなってしまいました。

ヘッダーを共通化する方法ですが調べ方が悪いのかもしれませんが、あまり良い方法がみつかりません。まず、PHPやSSIを使う方法はヘッダーを統一するだけのために少し大袈裟すぎる気がします。また、JavaScriptでヘッダーを生成する方法もGoogleなどどこまで対応してくれるのかわからないのでSEO的にどうかわかりません。

キャッシュ関係やS3などのPHPやSSIを使用できないが高性能・高耐久性・低コストな環境での配信など静的HTMLの利点はたくさんあります。やれVueだSvelteだとこの数年私がはしゃいでいる間、静的HTMLの世界はこんなにも取り残されていたわけです。このヘッダ変更地獄に苦しんでいる民を救わねばなりません。

ということで何か方法がないか探ってみたところ、npmコマンドでHTMLを生成する方法にたどり着きました。

npmで生成ぐらいならReactとか使った方がというのもあるかもしれませんが、上記の様な限られた状況やフロントエンドフレームワークはハードルが高いと思う人なら使う状況はあると思います。

Node.js

Node.jsのインストール

まず初めに一番難しいことを言わなければなりません。Node.jsをインストールしてください。nodeをインストールして使いこなすことができるのは選ばれた者のみです。苦しんでいる民を救わねばならぬ。といいましたが、全ての民を救えるわけではないのです。

やり方はNode.jsのホームページに行ってダウンロードして、インストールしてください。わからない場合は「Node.jsインストール」で調べてインストールします。

Node.jsのインストール確認

Node.jsがインストールできたら、ターミナルを起動します。好きな方法でよいですが、わからない人は下記に従ってください。

Windowsの人はスタートメニュー→「Windows PowerShell」→「Windows PowerShell」をクリックします。
Macの人はFinderで「アプリケーション」→「ユーティリティ」とたどって「ターミナル」をダブルクリックします。
Linuxの人は説明しません。

nodeのコマンドを打ってnodeコマンドが使えるか試してみましょう。「node -v」と打ってWindowsではEnterキー、MacではReturnキーを押します。

（このWindowsではEnterキー、MacではReturnキーを押す動作でコマンドが実行されますが、以降は「実行します」と省略します。また、「node」と「-v」の間のスペースを忘れず入れてください。スペースは重要です。)

バージョンが表示されたら無事にインストールされています。

$ node -v 
v18.7.0

上記のようなコマンド入力例でのコマンドは＄より後ろを入力し、＄は入力しません。＄の表示方法は環境によって様々ですがこの記事では$で統一します。

HTML5 Boilerplateの導入

何事も先人の培った経験をもとにするのは良いことです。

ウェブで最も人気のあるフロントエンド・テンプレートとサイトに書いてあるので、それを信じてHTML5 Boilerplateから開始することにします。サイトからzipをダウンロードし使うことができますが、せっかくnodeをインストールしたのでnodeを使ってダウンロードします。

ターミナルで移動する

どんなファイルでもそうですが、サイトを作る前にそれらを置く場所を決めておく必要があります。ここで少し違うのは、ターミナルでその場所に移動してコマンドを打たなければならないということです。

上でWindowsで「PowerShell」、Mac標準のターミナルを起動した人ならば簡単な方法があります。

まず、適当な場所にフォルダを作ります。ここに作ったサイトを入れていくことにします。「projects」なんかが個人的にはカッコよくていいと思います。ここでは例として「projects」フォルダという名前で作成します。

今度はターミナルに戻って、「cd」と入力し、その後にスペースを入れます。

$ cd

次に作った「projects」フォルダをターミナルにドラッグ&ドロップします。すると「cd」の後ろに「projects」フォルダまでの場所が入力されるので、ここで実行します。

$ cd /Users/yamashita/Desktop/projects

無事移動できたかは「pwd」コマンドで知ることができます。それっぽいパスだったらOKです。

$ pwd
/Users/yamashita/Desktop/projects

HTML5 Boilerplateテンプレートから新しいサイトの作成

無事ターミナルで「projects」フォルダに移動できたら、新しいサイト用をコマンドを使って作成します。
ここでは「my-site」というフォルダ名でサイトを作成します。
下記コマンドを実行してください。

$ npx create-html5-boilerplate my-site

Select languageと表示され、言語がたくさん表示されます。
↑↓のカーソルキーで選ぶこともできますが、見つけにくい場合は「ja」と入力すると絞り込めますので、
Japanese(ja)のところでWindowsではEnterキー、MacではReturnキーを押します。

? Select language ja
  Chichewa; Chewa; Nyanja (ny)
  Gujarati (gu)
❯ Japanese (ja)
  Javanese (jv)
  Panjabi, Punjabi (pa)
  South Azerbaijani (az)
  Fijian (fj)

npmコマンドの使用

表示に必要なプログラム類のインストール

上記「npx create-html5-boilerplate」コマンドでHTML5 Boilerplateのテンプレートからサイト作成用のフォルダ「my-site」が作成されました。

HTML5 Boilerplateテンプレートから作成したサイトではそのままHTMLを表示することができません。

まずはこのサイト用の表示に必要なプログラム類をインストールする必要があります。

ターミナルでサイト作成用のフォルダに移動します。
もうすでに「projects」フォルダにいますので、その下に作成された「my-site」フォルダに移動するためには、
下記コマンドを入力します。

$ cd my-site

ターミナルを一度閉じてしまった場合は、上で記述した「ターミナルで移動する」を行なった後に上記コマンドを打ってください。

ここで「npm install」コマンドを実行します。

$ npm install

なにやら色々表示されますが、最後の方に下記の様な表示があれば問題ありません。
(数字部分は人によって変わります。）

added 754 packages, and audited 821 packages in 9s

デバッグサーバーでのサイトの表示

「npm install」で必要なプログラム類のインストールのインストールが完了すれば、後少しです。
下記のコマンドを打つことによりデバッグサーバーでサイトを表示することができます。

$ npm run start

コマンドを打つとブラウザが起動し、「Hello world! This is HTML5 Boilerplate.」が表示されるはずです。

ブラウザが自動起動しない場合はブラウザを起動し、下記に移動します。

このデバッグサーバーの良いところはファイルを保存するとすぐに表示が反映されることです。
試しにトップにある「index.html」をエディターで開いて編集して保存すると即座に反映されます。

ここでHTMLやCSSを編集して思いのままサイトを作成するのも良いと思います。まだ道半ばなので気が済んだら先に進んでください。

サーバーでサイトの公開

デバッグサーバーで遊んでいるのも楽しいものですが、作ったものをサーバーで公開しなければ自己満足で終わってしまいます。

まず、これらを公開するためには公開用にHTMLを生成しなければなりません。「my-site」フォルダにターミナルで移動して下記コマンドを実行します。

$ npm run build

>  @0.0.1 build
> parcel build index.html

✨  Built in 230ms.

dist/modernizr-3.11.2.min.bbf62f91.js.map    19.45 KB     3ms
dist/modernizr-3.11.2.min.bbf62f91.js         9.08 KB    13ms
dist/normalize.02b6c58e.css.map               7.29 KB     3ms
dist/main.e753a5ff.css.map                    6.57 KB     3ms
dist/icon.878d0521.png                        3.93 KB    14ms
dist/normalize.02b6c58e.css                   1.81 KB    11ms
dist/plugins.40a68ed9.js                      1.45 KB    12ms
dist/main.e753a5ff.css                        1.41 KB     8ms
dist/plugins.40a68ed9.js.map                  1.17 KB     4ms
dist/main.f84e1103.js                         1.11 KB    12ms
dist/index.html                               1.05 KB     4ms
dist/site.webmanifest                           193 B     9ms
dist/main.f84e1103.js.map                        95 B     3ms

上記の様に特にエラーも表示されなければ成功です。

「my-site」フォルダの下に「dist」というフォルダができているはずですので、この中身をサーバーに持って行って公開します。「dist」を作るのをビルド、サーバーに置くのをデプロイと言うとちょっとプロっぽいです。

中身を見るとhtmlの中身がファイルが全て「main.c52e0fe2.css」の様に後ろにハッシュというものがついています。これはファイルを変更すると変わります。この機能のおかげでサイトを更新したときにサイトが崩れたー。とか言われてキャッシュを消してくださいとか言う手間が必要なくなります。

また、「index.html」からだどれないファイルについてはdistフォルダに置かれないので、どこからもリンクされていないファイルについては、手動でdistフォルダに放り込んでください。

あと、サーバーで公開する時は公開する最上位のディレクトリじゃないとダメです。つまり「https://example.com/ 」の様な感じでアクセスできなければダメです。「https://example.com/sub/sub/sub/ 」みたいな感じはできません。

ここらへんは「parcel」というやつの設定で色々できるのですが、いつか気が向いたら書かさせていただきたいと思います。

posthtml-includeでヘッダーを共通化する

「HTML5 Boilerplate」と「npm」を使用してサイトをビルドするところまできましたが、今やなんの記事を書いていたのかわからなくなってきました。ここでやっと本題です。

まず「posthtml-include」というツールをインストールする必要があります。ターミナルで「my-site」に移動し下記コマンドを実行します。

$ npm install -D posthtml-include

「my-site」フォルダの下に「.posthtmlrc.js」という名前で下記の内容のファイルを作成します。中身を理解する必要はありません。ただコピるのみです。

module.exports = { 
    plugins: {
        "posthtml-include": {
            root: __dirname
        }
    }
}

次に「my-site」フォルダの下に(個人的にはあまりカッコよくないですが)「common」フォルダを作成します。「common」フォルダの下に「header.html」を作成し、共通ヘッダーを書き込みます。今回はシンプルに下記の様にします。

<header>
watashi ha header de aru.<br />
<a href="./1.html">1 he</a><br />
<a href="./2.html">2 he</a><br />
<hr />
</header>

Index.htmlの「Add your site or application content here」の下あたりにincludeタグを入れます。
includeタグは「posthtml-include」を入れないと特に意味を持ちませんので、事前に入れておく様にします。

<!-- Add your site or application content here -->
<include src="./common/header.html"></include>

共通ヘッダーの検証用に「1.html」のファイル名でHTMLを作成します。シンプルに下記の様にします。

<!DOCTYPE html>
<html>
  <body>
    <include src="./common/header.html"></include>
    <main>1 ni kita.</main>
  </body>
</html>

「2.html」のファイル名でもう一つ作りましょう。

<!DOCTYPE html>
<html>
  <body>
    <include src="./common/header.html"></include>
    <main>2 ni kita.</main>
  </body>
</html>

いつも通り「npm run start」コマンドを実行してサイトを確認します。Index.html、1.html、2.html全てで共通のヘッダーが表示されることが確認できると思います。

$ npm run start

デプロイするには「npm run build」を実行して、「dist」フォルダをサーバーにぶち込みます。

$ npm run build

まとめとソースコード

HTML5 Boilerplateからサイトを作り、posthtml-includeでヘッダーを統一しました。面倒な人は下記に「test-posthtml-include」という名前でソースを置きましたので、「npm install」して、「npm run start」すれば使えます。使ってやってください。

$ git clone https://github.com/adviser-navi/test-posthtml-include.git
$ cd test-posthtml-include
$ npm install
$ npm run start