haml

Ham Cutlet(en)2

HTMLのインデントを綺麗にするだけのサービス、Ham Cutletを英語対応にしました。ブラウザの言語設定で英語が優先になってる人には英語で表示されるようになりました。

HTMLのインデントを病的に気にする外人さんがいたらオススメしてください・・・。

この記事のタグ

コメントはまだありません

 komagata

ハムカツの中身

  • Jun
  • 02
  • 2010

ハムです。

ではなくて、先日リリースしたインデントを綺麗にするサービス「Ham Cutlet」の技術的な話しです。

RubyにHamlというテンプレート言語があるんですが、それのユーザーの方なら、「Haml使っただけじゃん」という感じだと思います。Hamlが素晴らしいんです。Hamlサイコー!

要は下記の2行です。

haml = Haml::HTML.new(params[:source]).render
@html = Haml::Engine.new(haml, :attr_wrapper => '"').render

Hamlのソースを覗いてみるとHaml::HTMLというクラスでHTMLのHaml化、Haml::EngineというクラスでHamlのHTML化が行われていることがわかります。綺麗に作られているのでアプリに組み込むのも簡単です。

Hamlの吐くHTMLのattributeはデフォルトでシングルクォートですが、Haml::Engineのコンストラクタのオプションでダブルクォートに変えられます。いい加減なHTMLの修正・補完にはHaml::HTML内部でHpricotが使われています。

ちなみに当然Ham CutletのサービスのHTMLもHamlを使って書かれています。ソースのインデントが綺麗になっているのが分かると思います。

Hamlとの出会い

HTMLのソースの見栄えなんてまったくどうでもいいことなのかもしれませんが、僕は非常に気になっていて、Railsでインデントの違うファイルから共通のpartialテンプレートを読み込んだ時に、こちらの努力ではどうしてもインデントが揃わないことに非常に苛立っていました。(HTMLのインデントを合わせたい – p0t

これは僕にとっては大問題だったんですが、周りに訴えても、「へぇ〜」とか「我慢すればいいんじゃないんすか?」といった感じで諦めそうになっていました。

Hamlの噂は何となく聞いていたんですが、Ruby on Rails Summer Festival 2008というイベントでid:ursmさん(現日本Hamlの会)がHamlの発表をされました。

その後の懇親会でid:ursmさんに前述の疑問をブツけてみたところ、「partialを読み込んだファイルのインデントに揃いますよ」とのお言葉。

「コレしかない!」と思い自分のブログなどをHaml化していきました。しかし、僕も雇われの身。仕事のプロジェクトで周りの迷惑も考えず、勝手なテンプレート言語を持ち込む訳にもいかず自重していました。

しかし、FJORDで@machidaさんに話したところ、何故か「いいですね!」ということになり、Help me, hackers!他ほとんどの仕事でHamlを使えるようになりました。
(Git + Rails + Hamlのマークアップが出来るデザイナーのご用命は@machidaまで・・・)

Ham Cutletはこちらでソースも公開しています。下記で簡単にローカルで動かせるのでヘボイところなど、ご指摘いただけると嬉しいです。

% gem install bundler
% bundle install
% rackup

(http://localhost:9292/ にアクセス!)

Hamlを知ってればすぐ作れるサービスです。正直、heroku + sinatra + bundlerという組み合わせの使い方を調べるのにほとんどの時間を取られました・・・。このセットはちょっとしたWebアプリの作成にとても便利ですね。特にBundlerは0.9系になってから使い方も更にスマートになってRubyGemsの利便性を更に強調してくれるので大好きです。

コメントはまだありません

snapshot.png

Help me, hackers!に続くフィヨルドのサービス第二弾をリリース!
今回はちょっとした便利ツールHTMLのインデントを美しくするサービス、その名も「Ham Cutlet(通称ハムカツ)」です。

色んな人が触ってHTMLがガタガタなサイトをいじってイライラ、なんてことはよくありませんか?そんなとき、Ham Cutletにそのソースを貼ってみてください。
インデントの美しいHTMLがゲット出来ます。

このツールはHelp me, hackers!でも採用しているHamlというマークアップ言語を実現するrailsrubyのgemを使っています(詳しいことは@komagataさんまで)。

技術的には、

(インデントがぐちゃぐちゃの)HTML → 一旦hamlにする → HTMLに戻す(インデントが美しくなってる!)

…ということをしています。
早速、イライラさせられるHTMLをHamlを使ってCOOK!

この記事のタグ

2件のコメント

 machida

hamlのハム

  • Apr
  • 26
  • 2010

只今思いっきり開発中のサービス、help me,hackers!では、hamlというテンプレート言語でマークアップを書いてます。
階層でブロックを分けるため、閉じタグがいらないの見た目がすっきりしてて実に見易いです(YAMLみたいに書くHTMLでHAML?)。

ERBだとこう書くところが…

ERB

<%= print_date %>
<%= current_user.address %>

<%= current_user.email %>
<%= current_user.bio %>

hamlだとこう書きます。

haml


#profile
.left.column
#date= print_date
#address= current_user.address
.right.column
#email= current_user.email
#bio= current_user.bio

今回、僕も初めてhamlLに挑戦ということでhamlの公式サイトを見てみたら、なかなかイカしたサイトだったのでここで報告。

snapshot.png

HAML(ハムル)なのでハムが置いてあります。

download.gif

キャッチコピーは「マークアップ俳句」

haml

コメントはまだありません