Tech Racho エンジニアの「?」を「!」に。
  • 開発

任意のHTMLをクリップボードから手軽にHaml変換する方法

morimorihogeです。先日暴飲暴食をしてお腹を壊してから多少飲食を控えめにしてましたが、そろそろ復活してきた今日この頃。

Railsのビューといえば古くはERBテンプレートから、Rails 3近辺でHaml を使うのがメジャーになり、その後Hamlの記法は直感的ではない派からSlim がいい!という辺りに流れてきたのが昨今かと思います。

僕個人としてはどれでも良いと言えばいいのですが、html.erbだとタグの閉じ忘れなどの凡ミスをしてしまうことがあるので、Railsが分かるエンジニアのみがViewを弄る前提であればHamlかSlimが好みです。

Haml v.s. Slimは正直どっちでもいいしSlimの方が読みやすい派の気持ちもわかるのですが、一時期スタンダードを取ってしまってシェアが多いということで、僕の中ではHamlに軍配が上がるかな、という意見です。

HTMLをHaml変換するhtml2haml

Railsエンジニア(Haml書ける人達)だけで開発するのであれば良いのですが、世の中的にはHTMLコーディングまでは別の会社やHTMLコーダーが担当し、作成されたHTMLをRailsエンジニアがRailsテンプレートとして取り込むという流れも良くあります。

そんな時、HTMLをHamlに変換してくれるのがHtml2haml です。Github的にhaml公式のグループ に所属しているツールなので、変換の信頼性は高いと思います。

コマンドラインツールとしてできているので、bundleするというよりはローカルgemにインストールしてコマンドラインから実行するのがメジャーかなと思います(生成した結果を使うだけならRailsアプリ側にbundleする必要はないので)。

使い方

gem install html2haml

でインストールして

html2haml hoge.html

すれば標準出力に変換済みHamlが出力されます。

ファイルに保存せず変換したい

オプションなしで実行するならhtml2hamlはHTMLファイルを引数に取るのですが、Bootstrapベースのテンプレートで開発している時などは、Bootstrapの公式サンプル から一部をコピペして使いたいということがままあります。

そんなとき、わざわざ一時ファイルを作成してコマンドラインに食わせるのも面倒ですよね。

そんなときは標準入力から食わせます。html2hamlには-sで標準入力から取り込むオプションがありますので、-sオプションの後、HTMLを貼り付けてCtrl-Dすることで変換できます。

html2haml -s [Enter]
<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>
[Ctrl+D]

とすることで

.dropdown
  %button#dropdownMenu1.btn.btn-default.dropdown-toggle{"aria-expanded" => "true", "aria-haspopup" => "true", "data-toggle" => "dropdown", :type => "button"}
    Dropdown
    %span.caret
  %ul.dropdown-menu{"aria-labelledby" => "dropdownMenu1"}
    %li
      %a{:href => "#"} Action
    %li
      %a{:href => "#"} Another action
    %li
      %a{:href => "#"} Something else here
    %li.divider{:role => "separator"}
    %li
      %a{:href => "#"} Separated link

が得られます。

Hash記法をアロー形式からコロン形式にする

ちなみに、--ruby19-attributesオプションを使えば属性のハッシュ形式を懐かしいアロー形式("hoge" => "piyo")から見慣れたコロン形式(hoge: "piyo")に変換できます。

html2haml -s --ruby19-attributes

で食わせた結果は以下の通り。

.dropdown
  %button#dropdownMenu1.btn.btn-default.dropdown-toggle{"aria-expanded" => "true", "aria-haspopup" => "true", "data-toggle" => "dropdown", type: "button"}
    Dropdown
    %span.caret
  %ul.dropdown-menu{"aria-labelledby" => "dropdownMenu1"}
    %li
      %a{href: "#"} Action
    %li
      %a{href: "#"} Another action
    %li
      %a{href: "#"} Something else here
    %li.divider{role: "separator"}
    %li
      %a{href: "#"} Separated link

余談: hoge2huga的な変換ツールを作ってみよう

この手の「A形式のデータをB形式に変換する」といったコマンドは色々なものがあるのですが、その中でも割とメジャーなのが「#{A}2#{B}」形式の名前のツールです。A、Bはファイルの拡張子が使われます。

世の中にはたくさんのhoge2piyoという名前のツールがありますが、中身のソースを見てみると内部的にはより汎用的な変換ツールを使って作っていることが大半で、スクリプト自体はそのツールへのwrapperみたいになっていることが大半です。

僕も以前excel2json 的なものを作りましたが、この手のツールは言語に関わらずプログラミング練習にはほどよい規模だと思うので、修行してみたい人への課題にちょうど良いかもしれません。

特に調べたりせずに今ざっと思いついただけでも、以下のようなアイデアが考えられます。

pdf2png, pdf2jpg
ImageMagick あたりを使えばできそう。実用性もそれなりにありそう。
csv2xlsx, xlsx2csv
非エンジニアとやり取りしているとExcelでデータをもらうことはそれなりに多いので、あると便利です。RubyでExcelを扱う方法については Qiita: RubyでExcelファイルを扱うライブラリの比較 なんかが参考になると思います。
avi2jpg
FFmpeg は動画から指定フレームの画像を抜き出したりができたと思います(追加ライブラリがいるかもしれません)ので、多分作れそう。ただ実用的なものを作るには画像化する位置を指定するオプションを付けたりとかが必要かも。

とにかくデータを読んで変換して標準出力に出せば良いので、動作確認もやりやすいしお手軽ですので、何も作ったことがないという人はチャレンジしてみると良いと思います。

ちなみに、Haml2htmlはオプション-sで標準入力からの取り込みに対応していますが、多くのツールと同じくパイプで渡して使うこともできます。

今回と同じことはcatコマンドを使って

cat - | html2haml --ruby19-attributes

というのでもできるわけですね。

ちらっと見た感じでは、HTML2Slim には直接標準入力を待ち受けるオプションがなさそうでしたので、こちらのようなツールに標準入力を渡して使いたい場合には上記のようにcat -(標準入力を受け付けてそのまま標準出力に出す)を通せば良いと思います。

まとめ

そんなわけで普段使ってるツールの紹介でした。いつも使うという程ではないですが、知ってれば必要な時に引き出しから出して使う的な奴ですね。


CONTACT

TechRachoでは、パートナーシップをご検討いただける方からの
ご連絡をお待ちしております。ぜひお気軽にご意見・ご相談ください。