2012-09-19

margin-top派かmargin-bottom派で言えば、margin-top派です

CSS

世の中にはmargin-top派とmargin-bottom派がいるとかいないとか。

自分はmargin-top派です。

margin-left派とmargin-right派がいるならば、margin-left派です。

試しにmargin-bottom派になってみようかなと頑張ってみたんですけど、やはり慣れもあり、margin-topの方がしっくりきたのでエントリーを起こすことにしました。

margin-top派な理由

margin-top派になったのには理由はなくて、なんとなくmargin-top派になった気がするのですが、margin-bottom派に移るのが少し面倒な理由はあります。

その理由は:first-child擬似クラスの存在です。

例1

例えば、以下の様なHTMLがあったとします。各section.contentの間には30pxの余白が欲しかったとします。

<section class="content">
  <h1>title1</h1>
  <p>section2</p>
</section>
<section class="content">
  <h1>title2</h1>
  <p>section2</p>
</section>
<section class="content">
  <h1>title3</h1>
  <p>section3</p>
</section>

この場合、:first-childを利用すると、margin-topで楽にレイアウトできます。

section.content {
  margin-top: 30px;
}
section.content:first-child {
  margin-top: 0;
}

margin-topで、30pxの余白を取ります。そうすると各section.contentの間には、30pxの余白が確保できます。しかし、このままだと、先頭のsection.contentには余計な30pxの余白が入ってしまいますので、:first-child擬似クラスを利用して、先頭の余白を0にすることで、各section.contentの間に30pxの余白を作るということが実現できます。

例2

横並びでも同じです。リストが横並びで、各リスト項目の間に20pxの余白を取りたい場合です。

<ul>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
</ul>

CSSはこんな感じになります。

ul {
  margin: 0;
  padding: 0;
}
ul li {
  list-style-type: none;
  display: inline;
  margin-left: 20px;
}
ul li:first-child {
  margin-left: 0;
}

こんな感じです。

このケースでは、:first-childを使わなくても、以下のようにすればOKですね。

ul {
  margin: 0 0 0 -20px;
  padding: 0;
}
ul li {
  list-style-type: none;
  display: inline;
  margin-left: 20px;
}

それ、:last-childでできるよ

そうなんですけど、IE7から対応しているのと、IE9から対応しているのとでは、大きな違いがありますし、IE8とか捨てれる状況でないので、:last-childを実務で使える状況はあまりありません。

まとめ

margin-top派、かつ、margin-left派です。その理由は:first-child擬似クラスを利用して、余白を調整する機会が多いからです。

IE6に対応しないといけない案件の場合は、:first-childの代わりに、.firstを付けることがありますが、要素を後ろに追加する機会の方が多い気がするので、.lastと付けた要素より、.firstと付けた要素の方が、後々、影響を受けないことが多い気がします。なんとなくですけど。

数年後、:last-childがどんな案件でも使えるようになったら、margin-bottom派に移行するかもしれません。現状は、margin-topの方が利点があると思っているので、margin-top派です。

もし、margin-top派だと面倒な事例があれば、ツッコミいただけると嬉しいです。

2012-09-06

S式から(X|HT)MLに変換する簡易的なコマンドラインツール作った

Perl Lisp

Lispの仏様と言われた竹内郁雄先生は、XMLを分厚いカッコのあるLispとおっしゃっているそうです。

実際に、S式で(HT|X)MLを書くと、自然でシンプルに書けるので、S式を(HT|X)MLに変換する単純なコンバータを作りました。

作ったもの

Buakko - Simple s−expression to (X|HT)ML converter.

ネーミングのBuakkoは「分厚いカッコ」をもじりました。

シンプルなコンバータです。むしろ、現時点ではいろいろ機能が足りない感じです。

S式といっても、データの表記方法の一つとして採用しているだけで、Lispとの関連性は強くはありません。演算機能もありませんし。

ツールはPerlで書かれています。

動かすのに必要なもの

Perl 5.8以上
CPANモジュール
- Parse::RecDescent
- Path::Class

また、インストールにはcpanmが必要です。

使い方

インストールするとbuakkoというコマンドラインツールがインストールされるので、それを使います。

$ buakko sample > sample.html

これで、sampleというS式で記述したHTMLファイルを、sample.htmlというHTMLに変換します。

リダイレクトしなければ、標準出力にプリントされます。

例

以下の様なS式形式のファイルを

(html (@lang "ja")
  (head # ヘッダ
    (meta (@charset "utf-8"))
    (title "EXAMPLE"))
  (body (@class "example home") # ボディ
    (h1 "example!")
    (p 
      (a (@href "http://example.com/" @target "_blank") "example web site."))))

以下のようなHTMLファイルに変換します。

<!doctype html><html lang="ja"><head><!--ヘッダ--><meta charset="utf-8" /><title>EXAMPLE</title></head><body class="example home"><!--ボディ--><h1>example!</h1><p><a href="http://example.com/" target="_blank">example web site.</a></p></body></html>

その他、細かい仕様とかインストール方法は、下記のREADMEをご覧ください。

README.md

作った動機

hiccupをとても気に入っていて、Clojureを利用する時には、これを利用すればよいのですが、Clojureを使わなくても気軽にS式をHTMLに変換できるツールがあるといいなぁと思っていました。

何かのモジュールで出来ればよかったんですけど、なかなかズバリなものがなかったので、パーサ部分から書くことにしました。

Perlで作った理由は、Movable Typeで利用したいと思っているからです。これでテンプレートを書けるようにしたい。

このコンバータには、演算機能がありませんが、Movable Typeには、MTVarやら、MTIFやら、MTForやらいろいろあるので、これくらいの機能でも充分かなと思います。

汎用性はすごく低いので、必要に応じてバージョンアップできたらいいですね。

気づいたこと

パーサを書かないといけないというのはわかっていたものの、自分のレベルでは、正規表現でパーサ書くのは厳しいと思ったので、いろいろ調べてみると、Parse::RecDescentという超便利なツールを見つけました。

このツールを作る大半が、Parse::RecDescentの使い方を調べる時間になった気がしますが、これを使えば、Perlで使うちょっとしたミニ言語が作れそうです。

それでも正しく書けているのかどうかよくわからないし、それ以前にコンパイラ周りのこと、全然知らないので、このツールに頼らなくても、ミニ言語が作れるようになりたいですね。

他に、野良モジュールをインストールしてもらう方法とか全然知らなかったので、いろいろ苦戦しました。

まとめ

S式とは言いつつも、ただ、記法を利用しただけなので、別にLispができるできないは関係なく使ってくれる人がいるといいなぁと思います。S式もDOMも、同じく木ですし、S式はそんなに難しいものではないです。

とりあえず、タイプ数は減るし、zen-coding感覚で使ってもらえれば良いかと。

そのままLispに目覚めても良いと思いますよ; )

時間のある時に、Movable Typeのプラグインとして利用できるようと思います。

2012-08-02

次の13日の金曜日というサービスをリリースしました

Clojure

最近、なかなかプログラミングする機会がないので*1、作って放置していたプログラムを編集して、Webサービスにしてみました。

サイト

次の13日の金曜日

リポジトリ

taiju/next-friday-the-13th · GitHub

作ってみて

ClojureでWebサービス作りたいなーとは思ってはいたものの、なかなかそんな時間もモチベーションもなく、今に至ります。

作った背景とかサイトの使い方は、リポジトリのREADME.mdに書いてあります。

Clojureの基本は、4Clojureで概ね学んだので、新たに学んだのは、noirの使い方です。

noirのテンプレートは標準だとviewが別ファイルになっていますが、これくらい小規模であれば1ファイルで書く方が楽でした。

noirは、シンプルで、Mojolicious::Liteみたいに気軽に使えて良いのと、標準のテンプレートエンジンのhiccupがかなり良いです。zen-codingのような感覚で記述できます。zen-codingみたいに、手動でHTMLに展開する手間ないし、プログラムも埋め込めるし、勝手にminifyするし。

noirを使ってて困ったのは、JSONに出力する時に、charsetがISO-8859-1になってしまう点です。ただ、バージョンアップで改善されるっぽいので安心しました。（Google Groups)

Clojureらしく、無限シーケンスで処理したり、小さな関数を組み合わせて処理を組み立てるってところは意識しながら作りましたが、そもそも関数脳になりかかってるので、他の言語使うより、Lisp系統である、Clojure使った方がストレスなく記述できるようになってきました。ただ、Javaの主要のクラスとメソッドはなんとなくでも覚えておいた方がいいなぁとは思います。副作用はdotoの中に押し込んでしまえば、そんなに抵抗なく使えます。

なんというか、関数型言語は、小さな関数作って、拡張してみて、挙動変えてみて、入れ替えてみて、最後に欲しいのはこれ、って感じでルーズにプログラミングできる感じがして、自分の性格的に合ってるような気がするんですよね。

Clojure + noirでモノ作って、herokuに上げる流れは、ひと通り把握したので、また機会を見つけて、Clojureで何か作りたいですね。

*1:HTML/CSSのコーディングばっかりしてる...