Skip to content

Nunjucks + gulp で静的 HTML をモジュール化する

Nunjucks + gulp で静的 HTML をモジュール化する published on Nunjucks + gulp で静的 HTML をモジュール化する へのコメントはまだありません

やりたいこと

概要

静的 HTML を複数ページ作成するときに、共通部分(ヘッダーとかフッターとか)をコピペしたくない。

「PHP とか使って include とかすればいいじゃん」

ていう意見もあるんだけど、動作確認に web サーバー立てるの面倒だし、単なる HTML で済むなら HTMLで 完結させたい。

細かい背景

gulp-ect を使って、やりたいことは大体実現出来ていたんだけど、以下の2つの理由により、別の方法に切り替えたいと思った。

  • ECTgulp-ect も最終更新日が3年前
  • ファイルのパスを埋め込む(後述)、というののやり方が分からなかったし出来なさそう

やったこと(TL;DR)

さきに結論だけ書いておくと、

  • Nunjucks というテンプレートエンジンの記法で、ファイルを作成
  • gulp-nunjucks-render という gulp のプラグインを使って、HTML を出力
    • gulp-data という微妙な名前のも併用

という方法で実現した。

Continue reading Nunjucks + gulp で静的 HTML をモジュール化する

JavaScript、イベントの順序

JavaScript、イベントの順序 published on JavaScript、イベントの順序 へのコメントはまだありません

最近のWebサイト・システムではとにかくとにかく「ダイナミック」で、画像・テキストなど至る所にイベントハンドラーが登録されている。
ごく原始的なやり方だと

<img src="foo.jpg" id="img1" onclick="somefunc()">

なんて方法だけど、最近ではprototype.jsのEvent.observeとかを使ってる人も多いと思う。
Event.observeだと

Event.observe('img1','click','somefunc()')

って感じになるけど、このメソッドには第4の引数がある。何に使うかだけど、例えばあるdiv領域の中にもう1つdiv領域があって(divじゃなくてもimgでも何でもいいけど)、それらに共にonclickのイベントハンドラーが設定されている場合、マウスをクリックするとどっちのイベントハンドラーが先に呼ばれるか?
答えは内側の要素に設定されたイベントハンドラーが先に呼ばれるんだけど、第4の引数useCaptureをtrueにするとちょっと違った動作に。とまぁその辺りをコントロールする引数。このページが分かりやすい説明だった。

Continue reading JavaScript、イベントの順序

CSS、colgroup

CSS、colgroup published on CSS、colgroup へのコメントはまだありません

HTMLのtableでcolgroupってのがあるってのをこないだ初めて知った…

<table>
<tr>
<td class="c1">1-1</td>
<td class="c2">1-2</td>
<td class="c2">1-3</td>
</tr>
<tr>
<td class="c1">2-1</td>
<td class="c2">2-2</td>
<td class="c2">2-3</td>
</tr>
<tr>
<td class="c1">3-1</td>
<td class="c2">3-2</td>
<td class="c2">3-3</td>
</tr>
</table>

通常はDreamWeaver等のツールでHTMLを書くからこの辺はもちろん自動的にやってくれるけど、上記のHTMLだと行数が増えてくるとファイルサイズが大きくなる。
それくらいだったらあまり問題ないかもしれないけど、テーブルのデータの部分(1-1〜3-3)が別の所で生成される場合(サーブレットだったりAjaxだったり)、デザインを変えたい場合はプログラムの部分を変更しなければいけない。
それを下のように書くと、tr, tdタグにはclass要素が付かないので便利な時もあるかも。

<table>
<colgroup>
<col span="1" class="c1" />
<col span="2" class="c2" />
</colgroup>
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
</table>

このページが分かりやすかった。