読者です 読者をやめる 読者になる 読者になる

僕は僕で誰かじゃない

ビジネスとテクノロジーと健康についてあれこれ

MENU

静的サイトジェネレータ「Metalsmith」と、テンプレートエンジン「Swig」で効率化&爆速コーディング!

f:id:sitk:20160618091104p:plain

先日の名古屋遠征で教えてもらった「Metalsmith」。

(あ、名古屋のことRiot.jsの件しかブログに書いてない(;´Д`))

www.kobatatakayuki.com

静的サイトジェネレータっていうのは初めて聞きましたが、、、

使い始めると、これは辞められなさそうです( 0w0)ノ ウェーイ

ハムさんありがとう!

h2ham.net

詳しくは、ハムさんのサイトを参考にどうぞ!

下記は、自分への忘備録を兼ねて。。。

Metalsmithのコンセプト

サイトには、こう記されています。

EVERYTHING IS A PLUGIN

とあるように、プラグインがいろいろあります。

まだ、使いこなせる気がしませんが(;´Д`)

気になる方は、サイトをチェックしてみてください。

www.metalsmith.io

では、早速触ってみましょう。

package.json を作成

ようやく、黒い画面ともお友達になりつつあります(๑´ڡ`๑)

ということで、、、

まずはおなじみのpackage.jsonの作成から。

{
  "devDependencies": {
    "metalsmith": "~1.0.1",
    "metalsmith-templates": "~0.6.0",
    "swig": "~1.4.2"
  },
  "private": true
}

ここで、Swigって出てきてます。

Swigっていうのは、どうやらテンプレートエンジンと呼ばれるもののようです。

http://paularmstrong.github.io/swig/

SwigとMetalsmithを組み合わせると最強!ということを、ハムさんから教えていただきました。

npm install

続いて、下記コマンドで、プラグインを一括でインストール。

便利っすね、これ。

npm install

フォルダ構造

今回、僕の中で衝撃を受けたのが、フォルダ構造でした。

何かというと、

  • 呼び出し元(ソース)のフォルダ:_source
  • テンプレート用のフォルダ:_tpl
  • 吐き出し用のフォルダ:htdocs(コンパイル時に生成されます)

と、3つのフォルダの概念があるのだと。。。

今までは、trunkの中で普通に展開してて、sassファイルの置き場所とかによく困ってたんですけど。

なるほど、こういう考え方をしてるのね。ということを学ばせていただきました。

/root/    
┣ /_source/      ー呼び出し元(ソース)のフォルダ    
┃ ┃ /company/    ー階層構造も作れます    
┃ ┃ ┗index.html    
┃ ┗index.html    
┣ /_tpl/        ーテンプレート用のフォルダ    
┃ ┣default.html   
┃ ┣footer.html    
┃ ┗header.html    
┣ /htdocs/      ー吐き出し用のフォルダ(コンパイル後に生成)    
┃ ┃ /company/        
┃ ┃ ┗index.html    
┃ ┗index.html    
┣ metalsmith.json   ーmetalsmithの設定ファイル    
┗ package.json     ーもろもろ設定ファイル    

フォルダ構造のキャプチャも載せておきます。

f:id:sitk:20160619034750p:plain

ここから、いろいろ自分用にカスタマイズしていこう。

動くものができたら、あとの応用は自分次第ですからね。

オレオレ仕様に染めていきます。

あと、呼び出し元のフォルダで階層構造を作ると、

吐き出されるHTMLも、階層構造を保ったまま出力してくれる。

この機能もありがたい。

metalsmith.json を作成

つづきまして。

metalsmith.json の設定。

{
  "source": "_source", //外部読み込み用フォルダ
  "destination": "htdocs", //出力先フォルダ
  "plugins": {
    "metalsmith-templates": {
      "engine": "swig", //テンプレートエンジン
      "directory": "_tpl" //出力先フォルダ
    }
  }
}

※実装時はコメント外してくださいね。エラーになります。

こちらのファイルの内容としては、ファイルの吐き出し先や、テンプレートフォルダの指定などですかね。

いろいろ拡張できるようなので、今後もいろいろ触ってみようと思います。

(今の段階では、呪文のようにコピペ!)

テンプレートファイルを作成

もろもろ設定ファイルができたら、あとはテンプレートをつくります。

書き方は、こんな感じ。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>{{ title }}</title>
</head>
<body>

<!-- ヘッダー読み込み -->
{% include 'header.html' %}

<h1>{{ title }}</h1>

<!-- コンテンツ読み込み -->
{{ contents | safe }}

<!-- フッター読み込み -->
{% include 'footer.html' %}

</body>
</html>

なるほどですね。

ヘッダーやフッターなども、インクルードできますね!

外部読み込み用のデータを作成

テンプレートができたら、読み込ませる用のデータをつくります。

書き方は、こんな感じ。

---
template: default.html
title: テスト
---
<p>本文テスト</p>

ここに、コンテンツの内容を記載していきます。

テンプレートと、コンテンツが分離できるので、管理がしやすそうです。

コンパイル

設定ファイルを作った!

テンプレートも作った!

読み込ませるデータも作った!

そしたら、あとはコンパイル!

下記の呪文をどうぞ。

node node_modules/.bin/metalsmith

これで、めでたく「htdocs」フォルダが生成されて、htmlファイルが吐き出されていることでしょう。

さいごに

ひとまず、動くことを確認できたので、カスタマイズしていきますー。

ハムさん、ありがとう!

(って、何回言うてんねん。。。)

h2ham.net

おわり。