CREATOR BLOG

静的サイトジェネレータ「Phest」導入のメリット5

2014/11/16
tan
  • このエントリーをはてなブックマークに追加

静的サイトジェネレータがブームだとか聞きます。
私の場合は、大変な要件が来た時になにかいい方法はないものか・・・と辿り着いたのが
静的サイトジェネレータでした。
初期に集中して構築した結果、その後の修正や運用でとてつもない工数の削減ができたので、
導入は大成功となりました。

静的サイトジェネレータですが、初期コーディングの時点でも威力を発揮しました。
ここでは初期コーディングにおいての静的サイトジェネレータのメリットを5つまとめました。

もくじ

  • そもそも静的サイトジェネレータとは?
  • 選ばれたのはPhestでした
  • メリット1:同じことを複数記述しなくていい
  • メリット2:ルールを把握しやすい
  • メリット3:パスの設定方法が豊富
  • メリット4:テスト用、本番用ファイルの生成が楽
  • メリット5:パターンのテストが簡単にできる
  • 最後に

そもそも静的サイトジェネレータとは?

テンプレートファイルを元に、プログラム的にhtmlファイルを生成する手法が静的サイトジェネレータです。
考え方はCMSと似ています。
CMSと大きく違うのは、データベースを必要とせずサーバーがなくても動作する点です。

選ばれたのはPhestでした

Phest
ChatWork社開発の「PHP + Smarty製のデザイナ向け静的サイトジェネレータ」です。
静的サイトジェネレータはかなり種類があることは知っていましたが、いくつも試している時間もなかったのでこれしか試していません。
納期が迫る中、プログラミング言語はjavascriptくらいしか書けない私でも構築できました。

Phestを選んだ理由

  • 日本語ドキュメントがあった
  • 黒い画面を使わないので取っ付きやすかった
  • 開発環境をわりと簡単に速く構築できた

メリット1:同じことを複数記述しなくていい

ヘッダー、フッターのモジュール化

module2
共通して全ページにあるソースをモジュール化することで、同じ記述を複数書く必要がありません。(SSIでもできますね)
htmlファイルを跨いで共通する要素をモジュール化しておけば、修正があったとしても一箇所直せばいいことになります。

共通文言の変数化

module1
もう一つ上げられるのが、共通文言です。
タイトルって地味にいろんなところで使うんです・・・
変数化することで、一箇所に記述したタイトルが指定したところに入っていきます。

これ、今更感あると思いましたか?

CMSが浸透している今、当然の技術ですね。
ですがCMSを導入するのって最終工程で、初期コーディングではコピペを駆使して頑張っています。
(このダミーテキストにはタイトルが自動で入るんですよ!ではクライアントは納得しないんですね・・・)
初めから静的ジェネレータを導入してしまえば、こんな手間も省けてしまうわけです。ケアレスミスも防げます!

メリット2:ルールを把握しやすい

rule
コーディングは私がするのですが、CMS構築は分業しているので他のエンジニアが作業します。
その時に静的コーディングデータだけでなく、静的サイトジェネレータを構築する時に使ったテンプレートデータがあることでルールが把握しやすくなります。
とは言ってもまだCMS構築のエンジニアに引き渡した実績はないので、妄想上の話なのですが・・・

より組みのルールを意識することでよりCMSに適したコーディングができたことは事実です!
また、全体観が把握しやすくなりました。

メリット3:パスの設定方法が豊富

パスはさまざまなものがありますね。
httpからのパス、/からのパス、相対パス・・・
これらもテスト環境と本番環境で変化しやすく、相対パスに至ってはディレクトリ構造の深さで変わってきてしまいます。

Phestには便利なテンプレート変数が用意されているので、簡単に設定することができます。
METAの設定や相対パスの設定がとても楽になりました。

Phest独自
テンプレートタグ
http://samplesite.com/about/index.html
だった場合に実際に出力されるもの
ブラウザからアクセスするルートパス {$_home} http://samplesite.com
ルートパスからのページパス {$_path} about/index.html
{$_path}のフォルダ名部分のみ {$_folder} about
トップフォルダへの相対パス {$_top} ../../

メリット4:テスト用、本番用ファイルの生成が楽

Phestでは、ビルドの種類が大きく分けて「Local」と「production」と2つあります。
以下のように使い分けることが想定されています。

Local テスト用
production 本番用

ビルドによって生成されるブロックを制御できる

特定のタグで括ることで、本番用でのみ生成されるブロックとテスト用でのみ生成されるブロックを作ることができます。
納品データ作成の作業を削減でき、更にはケアレスミスも防げます。

テスト用でのみ生成 相対パス、<meta name="robots" content="noindex, nofollow">
本番用でのみ生成 トラッキングタグ

メリット5:パターンのテストが簡単にできる

PhestではYAMLというデータ形式を使うことができます。YAMLはテキストで配列などのデータを簡単に作ることができます。
例えばCMSでは記事投稿によってデータを登録する必要がありますが、YAMLだと簡単にデータを増やしたり内容を変えたりできます。

YAML

テンプレートエンジンのSmartyと組み合わせると、ものすごい威力を発揮します。
YAMLで作った配列を元に、簡単にリストを作れちゃうんです。

Smarty

ここでは配列の数だけ<li>を生成しています。
条件によって特定のclassの付与もできます。

ということは、中身がなにもない時、リストが1つしかない時、文字数が多い時少ない時、画像サイズが規格外の時などさまざまなパターンのテストをすぐにすることができるんです!
リストが1つだけだったらソースを単にコピペすればいいですが、いろんなリストがあったらどうですか・・・
pickupだけをまとめたリスト、ランキングリスト、タグで絞ったリスト・・・・・・(×-×)

最後に

結果的にどんでん返しの修正に柔軟に対応、ケアレスミス大幅減、作業工数大幅削減となりました。
もし静的サイトジェネレータを導入していなかったら・・・の想像はしたくない程です。

また、静的サイトジェネレータは運用の時にどうするかをメインで決めることが多いと思いますが、初期構築で利用→CMSに移行という使い方もあるということを実感しました。

導入のハードルが比較的低いPhestを、試してみてはいかがでしょうか!(ChatWork社の回し者ではないです!)

Recent Entry

CSSの単位まとめ pxからvm/vh/vmin/vmaxまで

レスポンシブHTMLメールを作ってみての感想

CSSのリファクタリングでした5つのこと

大人が読んでも頭を使う絵本の紹介

サイト内にうまくInstagramを取り入れてるサイト11選

Category

Archive