静的サイトをどのように制作していますか?
静的サイトジェネレーターを使っていますか?
webデザイナーはphotoshopやsketchでサイトデザインをして、html/css/javascriptのコーディングといった静的サイトの制作を行う機会が多いかと思います。
私の場合も同様に、WordpressやWebアプリケーションに組み込むための静的サイトを制作することが多くなっています。
この静的サイト制作を効率的に行いたいなとずっと思っていて、まずlessをやり始めたのですが、sass/scssを使っている人の割合が高かったので慌てて切り替えました。
その後、さらなる効率性を求めて1年ほど前から静的サイトジェネレーターを取り入れました。
静的サイトジェネレーターとは?
そもそも静的サイトジェネレータとは、静的サイトを効率的に制作するためのツールで、好みの言語で開発して納品用にhtml/css/jsといった形式に変換してくれるものです。
効率化するツールだけあって様々な機能が用意されています。
- 開発用の対応言語の数が多い
- ヘッダーやフッターを外部ファイル化して必要に応じて呼び出せる
- 条件分岐やループを使える
- 変数を使える
などなど、とにかくスムーズに開発するための機能が豊富です。 今では数多くの静的サイトジェネレーターがあり、有名なものでは、jekllyやmiddleman、最近ではHugoなどが人気のようです。
海外サイトですが、staticgenでは、静的サイトジェネレーターを一覧でき、それぞれgithubでのスター数やフォーク数をまとめてくれています。
効率的に作業を行えるようになるかも
現時点で私は、middlemanを好んで使っています。それまでは、scssやcoffeescriptをコンパイルする時はcodekitを使っていたのですが、コンパイルは全てmiddlemanがやってくれるようになりました。
実際の作業の流れは、新規案件のコーディング前にmiddlemanの初期設定を行います。その時にscss/coffeescript/slimといった言語が使えるようにしておいて制作開始です。コンパイルするツールを別途立ち上げておく必要がないので、かなり楽になりました。
middlemanの良い点を挙げてみる
なぜ数ある中からmiddlemanを選んだのかと言われれば、同じプロジェクトの凄腕エンジニアの方に勧められたからという単純な理由です。
ただ、使い続けている理由は、慣れ以外では以下の点が大きかったと思います。
日本語ドキュメントがある
困ったことや気になることを調べる時に日本語対応のサイトや解説があるのは心理的にかなり安心です。日本語対応していただいた方々ありがとうございます。
開発用サーバーがある
ローカル開発環境とか作るの苦手、よく分からない、設定が面倒だという経験ありませんか。
middlemanでは、ターミナルで以下のコマンドを打つだけでローカルサーバーが起動します。
bundle exec middleman
しかも、設定を追加すれば、プログラムの修正や変更を即時反映してくれるオートリロードなる機能を使うことができます。これを使えば、変更内容を保存するだけでブラウザを自動更新してくれ、常に最新の状態になる訳です。
共通のレイアウト設定やファイルをパーツ化できる
雛形になるページのレイアウトを設定して、それぞれのページでそのレイアウトを呼び出すことができます。
例えば、ヘッダー、コンテンツ、フッターで構成されたレイアウトをA、B、Cのページに適用し、合わせてレイアウトのコンテンツ部分がA、B、Cそれぞれのページで異なるものにしたい場合は、A、B、Cそれぞれのページ内に使用するレイアウトはこれと明示するだけで自動出力してくれます。
ちょっとわかりにくいですが、以下のようなイメージです。
このレイアウト機能のように、共通する部分を別ファイルにしていろんな場所で呼び出すことができれば、重複の記述が減り、コード量も少なくなります。
変数が使える
ページごとに変数をつけたり、サイト全体で使える変数を設定することができます。最初は理解が難しかったのですが、徐々に慣れてくると便利さを実感できます。 例えば、以下のようなナビゲーションメニューがあり、それぞれのメニューの名前に当たるものをname、そのURLをurlといった変数にして設定しておきます。
navigation:
- name: home
url: /001/
- name: about
url: /002/
- name: contact
url: /003/
私はslimという言語でhtmlを書きますが、設定した変数を呼び出すような記述を書くと、
ul.nav
- data.menus.navigation.each do |i|
li
= link_to i['name'], i['url']
以下のようなhtmlで出力してくれます。
<ul class="nav">
<li><a href="/000/">home</a></li>
<li><a href="/001/">about</a></li>
<li><a href="/002/">contact</a></li>
</ul>
いきなりのコードでなかなか掴みにくいかもしれませんが、使い方のコツがわかれば、変数を追加したり削除したりするだけで、いろいろなことができるようになります。
目的や用途でいろいろ触ってみると良いよ
メリットとして挙げた上記機能は調べてみるとmiddleman固有のものではなく、他のジェネレーターでも同様の機能が提供されているようです。(そうすると、middlemanを使い続けている理由は慣れだけになってしまう…。)
最近では、ブログサイトを作る場合はコンパイルが早いHugoが人気があり、黒い画面を使いたくない人にはchatwork社製のphestなどがあるようです。
以下は参考までに
デザイナーは使って損はないと思う
最近はscssを使うデザイナーが周りにも多くなりましたが、静的サイトジェネレーターはそういう方が使うと効果をより発揮するツールなのかもしれません。コーディングの時間が減る分を、UIの検討や他の案件、 スキルアップに費やすことも可能かもしれません。
自分は案件絡みで静的サイトジェネレーターの存在を知り、使うように半ば強制されたおかげで制作に欠かせないツールになりました。しかもslimやcoffeescriptも覚えることもできた。(たまには強制されることも悪くないな。)。まだ使ったことがない人は一度チャレンジしてみてはいかがでしょうか。