HAM MEDIA MEMO

現在の自分の制作の多くが、静的HTMLファイルの納品もしくはCMSに組み込むためのHTMLの納品です。静的ではありますが、共通部はincludeファイルなどで分けて納品してもOKというような状況がほとんどです。

そのため、これまでは共通部をSSIやPHPのincludeなどを使ってコーディングをしていたのですが、 jekyll や middleman などをちらほら聞くようになった２年ほど前から、静的サイトジェネレータを利用するようになりました。

今回は、最近利用してみた静的サイトジェネレータの 「metalsmith」 を利用してみたので、メモとしてエントリーしておきます。

Metalsmith

昨日のエントリー『gulp で BrowserSync を使う』 を書いたのですが、 watch の記述をちょっと間違えていたところ、ブラウザのタブが大量に開いてエラーとなる問題が起きたので、メモとしてエントリー

HTML・CSS・JS 周りを含むプロジェクトを進める際に、これまでなら MAMP などのローカルでのサーバー環境を用意して進めていたのですが、 grunt や gulp などが出てきてからは、それらをベースに BrowserSync などを利用して開発を進めるようになりました。

毎回準備する手間が省けるのと、デプロイ場所をいろいろと変更してもひとまとめで扱うことができるため、今では無くてはならないツールになっています。

BrowserSync

gulp の勉強をしようと、 package.json から構成を見なおして、とりあえず進めようとしたのですが、 $ npm install とたたいてみたところ

『npm WARN package.json @ No repository field.』

と警告がでてインストール進まないまま終ったでござる。

『CSS Nite in SAPPORO Vol.15「先どりWebトレンド2015」に登壇して』 で JavaScript との連携を書いたのですが、JavaScriptと合わせて使っていると、 Transition の終了時に合わせて処理を行うようなケースが時折でてきます。

Transition 終了時に JavaScript でイベントを拾えるので、今日はそれを使ったちょっとしたサンプルを紹介。