miのジャンプリストを鍛えて、CSSエディタのあの機能を実現

Tips：自分のためのメモ Mac


この前のMacheist Bundleで手に入れたEspressoだが、会社の環境であるMac OS X10.4には対応していない。
家でのんびり使うとして、今ダウンロードできるCSSエディタの中で、うらやましい機能があった。


それは、大量になってしまった宣言ブロックのうち、セレクタのみを表示してくれること。
そして、中身は単なるテキストでしかないCSSをコメントで囲むことによって、いかにもグループ分けしているように見せることだった。


CSSを扱っていても、本格的に、かつサイトまるごと大量のCSSを扱わない人には、なんじゃらほいの話だろう。
簡単に言うと、操作するこちら側が、見出し部分だけを別に見ることができるウィンドウが別にあって、「あの宣言どこだっけ……」と、長文のCSSを毎回検索して探さなくても済むような機能なのだ。


その必要がある人は、CSSEditをダウンロードして、試用していただいた方が、昨今のCSSエディタが、どんな風な機能を付けて「楽に効率的にCSSを書かせようとしているのか」がわかりやすいだろう。


MacRabbit - CSSEdit - Web 2.0 in Style

miで同等の機能を実現する

と、言ってもしょぼいが。
もう一回書くと、私がほしかったのは、「宣言ブロック」のうち、プロパティや値を表示しないで別ウィンドウで見られること。
これをmiでどう実現するか。
miのジャンプリスト機能を使った。

長文になっても、見出しに遷移できる機能

miのジャンプリストとは、私なりの解釈を言うと、文章の見出し部分を別ウィンドウに抜き出して、文章構造の理解と長文になっても目的の箇所にすばやく移動できる機能。
そのテキストファイル内のブックマークと理解しても、差し支えはないだろう。
勘のいい人は、この時点でわかったかもしれないが、CSSの宣言ブロックの内、セレクタを見出しと認識させることによって、今開いているCSSファイルの「目次」件「ブックマーク」を別ウィンドウで表示させることができるのだ。

正規表現を使って、見出しを認識

ここからは、私の設定を披露、というだけでTipsとまではいかないかもしれないが、一応。
さっきから「見出し」をジャンプリストに表示させる、と言っているが、リッチテキストエディタでもないmiが、どうやって、この1文が見出しだと判断するのか。
それも自分で設定することになる。
私の場合セレクタの中でも、「id」だけ別ウィンドウで分かればいいので、「#」の文字が先頭に来た文字列を認識させている。


コメントも見出しにさせることによって、簡易グループ化

そしてもう一つ。
前述した宣言ブロックのグループ化も実現させるため、CSSのコメントも見出しとして認識させた。
大きなCSSの制作において困るもう一つのことが、「これらの宣言って、（レイアウト上の）あのあたりのことを言ってるんだよな」と、わかっていても、リッチテキストでもないから、それらを文章中でまとめられないことだ。
似たような場所に使っている宣言が、バラバラになっていると、修正段階で、HTMLに宣言を当てる時になって、探しづらい→ストレスがたまる。
Aという宣言は、あの部分のことを言っている、Bという宣言は、あの部分だけど、ロールオーバしたときの挙動を言っている、みたいなものがあっても、イラストレータやフォトショップでもないから、グループ化できるわけじゃない。


仲間はとりあえずは近くに

これもまた私の書き方なんだけど、cssで、似たような場所に使っている宣言は、なるべく近くに記述しておくようにしてある。
たとえば10行目に「div#aaa」、3000行目に、「div#aaa P」なんてことがないようにしている。

「▼」「▲」で見た目上のグループ化

ただ、それでもわかりづらい。
CSSの中には、基本的に日本語、全角文字が現れない。
どのあたりが、何に使っている宣言なのかをわかりやすくするために、まとめるべき宣言ブロックたちは、コメントで囲む。
コメントで囲んじゃったら、適用されなくなっちゃうでしょ、ってそうです。
なので、「ここから始まるよ」っていうコメントと「ここまでがお仲間だよ」ってコメントで挟んじゃうってこと。
これは、まあ基本というか、よく使われるテクニックだとは思う。
HTMLを書く際にも、そうしていた方は多いだろう。
実際CSSEditのグループ化機能も、特定の書き方のコメント2つで、上下をまとめてしまうものだ。
さらに私は、「ここから」「ここまで」感を出すために、「▼」「▲」をつかって囲むようにしている。
CSSの中で、塗りつぶされた？全角文字は、よく目立つ。


セレクタのみの宣言ブロックとコメント

これで念願だったセレクタのみの宣言ブロックが、別ウィンドウで表示される、という機能がmiでも実現される。
さらに、後半部分に書いたコメントも見出し認識させることによって、グループ化しているようなジャンプリストができあがるというわけ。





こんなこと気にしているのは、私だけかもしれないが、CSSのエディタは、どうもこれ！というものがない。
WYSIWYGっぽいエディタにしても、余計時間がかかるようなものが多いし、書き方に関しては覚えることの少ないCSSでは、WYSIWYG型というよりも、がんがん書けるエディタの方がいい。（手書き派とかは別にして。）
プレビュー機能とうまく組み合わされるようになってきたら、もっとおもしろいんだけど、まだまだ開発の余地はあると思う。


いやー、これだけのことにえらい長文になってしまった。
私独特の欲しい機能かもしれないが、miを使うCSSerが、少しでも幸せになってくれれば、幸いです。