imgtag

これはなに？

HTML(もしくは Jade )のimgタグをジェネレートしてくれる Node モジュール。

インストール

$ npm install -g imgtag

使い方

1. ジェネレートしたい画像群があるディレクトリにコマンドラインから移動(cd)する。
2. imgtag とコマンドを入力すると、下記のようなタグがCLI上にジェネレートされる。

<img src="img/blk1_pic1.png" width="190" height="190" alt="" />
<img src="img/blk1_pic2.png" width="190" height="190" alt="" />
<img src="img/blk1_pic3.png" width="190" height="190" alt="" />

オプション

|引数|内容| |:-----|:-----| |-p (--path)| ジェネレートされるimgタグに記載されるパス デフォルトは img/ | |-t (--type)| ジェネレートされるタグタイプをHTMLかJadeか選択。html / jade デフォルトは html| |-r (--isRetina)| Retina用に画像サイズを1/2にする。true/false デフォルトは false | |-h (--isHeight)| height属性なしで、width属性をMath.roundした状態で出力(おもにRetinaサイズ用) 。 true/false デフォルトはfalse| |-f (--isFile)| 外部ファイル出力。true/false デフォルトはfalse。trueの場合はimg.txtに出力される|

使い方サンプル

1.現在デスクトップにいて、hogehoge/common/img ディレクトリ内の画像のHTMLタグをhogehoge/index.htmlから参照されるパスでジェネレートしたい。

$ cd hogehoge/common/img
$ imgtag -p common/img

ジェネレート結果

<img src="common/img/blk1_pic1.png" width="190" height="190" alt="" />
<img src="common/img/blk1_pic2.png" width="190" height="190" alt="" />
<img src="common/img/blk1_pic3.png" width="190" height="190" alt="" />

2.現在デスクトップにいて、hogehoge/common/img ディレクトリ内の画像のJadeタグをhogehoge/index.htmlから参照されるパスでジェネレートしたい。

$ cd hogehoge/common/img
$ imgtag -p common/img -t jade

ジェネレート結果

img(src="common/img/blk1_pic1.png" width="190" height="190" alt="")
img(src="common/img/blk1_pic2.png" width="190" height="190" alt="")
img(src="common/img/blk1_pic3.png" width="190" height="190" alt="")

3.現在デスクトップにいて、hogehoge/common/img ディレクトリ内の画像のHTMLタグをhogehoge/index.htmlから参照されるパスで、サイズは Retinaディスプレイに対応するよう半分のサイズでジェネレートしたい。

$ cd hogehoge/common/img
$ imgtag -p common/img -r true

ジェネレート結果

<img src="common/img/blk1_pic1.png" width="95" height="95" alt="" />
<img src="common/img/blk1_pic2.png" width="95" height="95" alt="" />
<img src="common/img/blk1_pic3.png" width="95" height="95" alt="" />

※ Retinaモードで、元々の画像サイズが奇数だと小数点になってしまいます。このへんのテクニックを使って事前に画像サイズを偶数化することをおすすめします。

HTML - 画像が奇数ピクセルだとスマホ表示でにじむので、偶数に変更するnodeスクリプト - Qiita

4.3の条件で、Retina用に画像を偶数にするのが面倒なのでheight属性なしでwidth属性も整数で出力したい。

$ cd hogehoge/common/img
$ imgtag -p common/img -r true -h true

ジェネレート結果

<img src="common/img/blk1_pic1.png" "width="95" "alt="" />
<img src="common/img/blk1_pic2.png" "width="95" "alt="" />
<img src="common/img/blk1_pic3.png" "width="95" "alt="" />

※ 少数値は四捨五入されます。