拡張メタ言語を使用して静的ホームページを簡単に作成する

ちょっとしたホームページやブログを作成するとき、どのように作成しているでしょうか?

最初はhtmlcssをそのままテキストエディタなどで書いて作成していたが、ページ数が多くなるにつれ管理が大変になり、ワードプレスといったような支援システムを使って作成するようになったという人もいるかと思います。

phpなどを使いたいが、レンタルサーバー代を抑えたり、サーバーにはhtmlファイルだけおいて管理を簡単にしたい、という人には拡張メタ言語やテンプレートエンジンを使用するのをおすすめします。

拡張メタ言語とは

プログラミングに馴染みのない方には聞きなれない言葉かもしれません。メタというのは置いといて、csshtmlなどの言語にいろいろな便利な機能を拡張した言語のことです。

たとえばcssに変数を使用したり、htmlのヘッダ部分やフッタ部分を共通化したりすることができます。

gulp

拡張メタ言語で書いたファイルをサーバーに置いてアクセスしても、ブラウザ(コンピューター)は認識できません。

拡張メタ言語で書いたファイルはcsshtmlなどのブラウザが理解できる言語に変換する必要があります。

gulpというツールを使用すれば拡張メタ言語からcss,htmlなどの言語への変換が簡単にできるようになります。詳しい使い方はgulp|gulpの基本的な使い方でしています。

LESS

cssの拡張メタ言語には、LESSがあります。詳しい紹介はless|cssに変数を使い実装を効率化する方法でしています。

Nunjucks

htmlの拡張メタ言語にはejs,swig,Nunjucksなどがあります。

htmlの場合は拡張メタ言語よりもテンプレートエンジンという呼び方をすることが多いようです。swig|htmlのヘッダ・フッタの共通化などで実装を効率化するswigの基本的な使い方について説明しています。

私は今までswigを使用することが多かったのですが、ホームページの規模が大きくなってくると、もっといろいろな便利な機能が使いたくなり、ネットでいろいろと調べてみたところ、Nunjucksというテンプレートエンジンが評判がよかったので使ってみました。

いろんな便利な機能があるのでとてもお勧めなのですが、日本語のページがほとんどどなかったので、nunjucks/basicで基本的な使い方を紹介します。


関連記事

  • watchifyとgulpで自動コンパイルと差分更新をおこなう

    vuejsの開発環境を構築するでvueをビルドする環境を作成しました。今回は開発環境をさらに便利にするために、ファイルが変更されたら自動でビルドを実行し、ブラウザをリロードする処理を実装します。開発用...


  • swig|htmlのヘッダ・フッタの共通化などで実装を効率化する

    swigでhtmlの実装すれば、htmlのヘッダーやフッターの共通化などができ、htmlの管理・実装の効率が格段に上がります。swigとは、テンプレートエンジンの1つで、htmlの中に変数やif文やf...


  • テンプレートエンジンのnunjucksとhighlight.js組み合わせる

    便利なテンプレートエンジンのnunjucksのテンプレートの中で、コードをシンタックスハイライト(色付け)する便利なライブラリのhighlight.jsを組み込む方法を紹介します。nunjucksのコ...


  • Nunjucksで独自のファンクションを実行する

    Nunjucksのテンプレートファイルに独自に定義した別ファイルのファンクションを実行する方法を紹介します。gulpでコンパイルする場合を想定しています。gulp-nunjucks-renderでNu...


  • Nunjucksの基本的な使い方 -extends,block,include-

    htmlのおすすめテンプレートエンジンNunjucksがとても便利なのですが、日本語のページがほとんど見当たらなかったので、基本的な使い方を紹介します。ホームページを作成していると、htmlのヘッダと...


  • npmのpackage.jsonを最新のバージョンに更新する

    package.jsonのパッケージを最新のバージョンに更新する方法を紹介します。npmは以下のコマンドを実行すれば、package.jsonに記載されているバージョンに更新されます。最新のバージョン...


  • less|cssに変数を使い実装を効率化する方法

    ホームページを作っていて、規模が大きくなっていくにつれ、気をつけていてもcssのソースはグチャグチャになってしまい、後で見返したときに「これはどこのスタイルだっけ?」となってしまうことがあると思います...


  • gulpの便利なタスク gulpfile.jsの記述例

    gulpの便利なおすすめプラグインで紹介したプラグインなどを利用したgulpの便利なタスクの実装例を紹介します。less,js,htmlのコンパイルや軽量化、watchとlivereload、エラー時...


  • gulp|watchやlivereloadのタスクを停止する方法

    gulpでwatchやlivereloadを停止したい場合、ctrl+Cで停止することができますが、sublime textやatomのプラグインからwatchなどを起動した場合、ctrl+Cで停止す...


  • gulpでディレクトリ構造を維持したままdestにコピーする

    gulpで以下のようなフォルダ構成で、page.html、page2.htmlをそれぞれのフォルダ配下のフォルダにコピーする場合、普通にdestを指定するだけではうまくいかないことがあります。以下のよ...