htmlからjadeに変換出来るWebサービス「HTML2Jade」

node.jsのv4系がリリースされたぐらいからでしょうか、
筆者はGulp等タスクランナー、Alt JSのコンパイル以外でも
node.js + Express + jadeを使うことが多くなりました。

Webデザイナーさんもプロジェクトで
テンプレートにJadeを使う案件がチラホラ出てきたのではないでしょうか。

jadeはhtmlが短く記述出来るので大変便利なのですが
htmlタグをそのままコピー＆ペースト出来ないので 1からタグを書くことになります。

既存サイトのリニューアルやCSSフレームワークを試したい時には
使い勝手がどうしても悪くなりますね。

そういう時に便利なWebサービスが「HTML2Jade」です。

このサービス、使い方も簡単で
HTMLタグをペーストするとJade形式に自動に変換してくれます。

試しにBootstrapのサイトからTagを引用し、jadeに変換してみましょう！

下記のHTMLコードが ...

<!-- 変換前のHTMLコード -->
<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail3">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword3">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>

このようなJadeコードに変換されました。

//- HTMLからJadeに変換されたコード
form.form-inline
  .form-group
    label.sr-only(for='exampleInputAmount') Amount (in dollars)
    .input-group
      .input-group-addon $
      input#exampleInputAmount.form-control(type='text', placeholder='Amount')
      .input-group-addon .00
  button.btn.btn-primary(type='submit') Transfer cash

HTML -> Jadeに変換しましたが、その逆のJade -> HTMLの変換にも対応しています。
( * 実際に使う時は変数や条件式が入るのでjade -> HTMLにする機会は少ないと思いますが ... )

また、HTML -> Jadeに変換するライブラリもnode.js形式で提供されているので、
自前のシステムに導入することもできます。

GitHub: donpark/html2jade

新しいCSSフレームワークをJadeテンプレート上で試したい時や、
自前のHTMLサイトをJadeに置き換えたい時に使えるので
ゼヒゼヒチェックしてみてください！

HTML2Jade