clmemo@aka

今朝のポストに「今日の戯事」さんのページで鋭いツッコミが入った。

でも #1 は，いらないような気が・・・

ここで言う #1 は、リンク・タグの番号のこと。復習すると、リンク・タグの書式はこう。

(link: [2005-07-01] foo #1)

この番号、実は、なくてもいい。 ChangeLog メモは時系列順に並んでるから、番号がなくても物事の順序は明確。だから要らない。そして、途中で このメモはこのスレッドに含めといた方がいいかなとメモを挿入すると番号をずらさなきゃいけなくなる。バグの温床だね。

一つ言い訳させてもらうと、このリンク・タグを考えた時、スレッドの分岐を考えてた。メールのやり取りでも、スレッドが二つ三つに分かれることがあるから、そういう時にどうするか。そこで思いついたのが、 RCS のサブバージョン番号の方法。

1
↓
2
↓
3
↓     ⇓
4.1.1 4.2.1
↓     ↓
4.1.2 4.2.2
↓     ↓
4.1.3 4.2.3

こんな感じに、スレッドが分岐したら、小さな番号を付けて管理すればいいと思った。

リンク・タグを個人的に一年間使っての感想: 実際、スレッドの分岐なんてほとんど起こらない。起きたら、そのスレッドが分かれた時に新しいリンク・タグを用意した方がスッキリしてて分かり易い。

そんなわけで、今はリンク・タグの番号に必要性は感じてない。

こんな時に番号があると楽になるのでは? とか、番号はない方がイイ、とか御意見・コメント下さい。とりあえず、番号なしリンク・タグ用の elisp です。

;
; link
;
(defun clmemo-tag-link-grep ()
  (interactive)
  (let (query beg end)
    (setq beg (progn (beginning-of-line) (skip-chars-forward " \t") (point))
   end (search-forward ")" nil t)
   query (regexp-quote (buffer-substring-no-properties beg end)))
    (if (fboundp 'clgrep-item)
 (funcall #'clgrep-item query)
      (occur query))))

(defun clmemo-tag-link-insert ()
  (interactive)
  (concat "["
    (save-excursion
      (clmemo-backward-entry)
      (buffer-substring-no-properties
        (point) (progn (skip-chars-forward "-0-9") (point)))) "] "))

(setq clmemo-tag-list
      '("link" clmemo-tag-link-grep clmemo-tag-link-insert))

[2005-07-05]: Fixed bag.

ChangeLog メモは基本的にテキスト・ファイルなメモ形式だから、流れのあるメモ同士 (スレッド?) を繋げて表示する機能はない。そこで、一工夫してスレッド表示する方法を紹介してみる。ちなみに、このアイデアは chalow ML (非公開) に一年以上も前に投稿したもの。

方法は簡単。

1. スレッド固有の文字列 (リンク・タグ) をメモに埋め込む。
2. clgrep で「スレッド固有の文字列」を検索して一覧表示させる。

リンク・タグ

スレッドに固有の文字列は、リンク・タグと呼ぶことにしてる。書式はこう。

(link: [2005-07-02] foo #1)

上の例は、foo というスレッドを 2005-07-02 に作ったということ。スレッドが続けば、末尾の #1 の番号を上げていく。キモは、固有の文字列にスレッド開始の日付を含めること。一日のうちに、同種のスレッドを立ち上げることなんて滅多にないし、仮にあったとしても一日のうちだったら名前がバッティングしてもすぐ気付く (はず)。

リンク・タグ (link: [2005-07-02] foo # に対して clgrep をかければ、リンク・タグを含むメモだけが取り出せる。

使用例

以前このブログに書いた HMV のアカウントに入れない件について、メモしたスレッドを例として表示させてみよう。

2005-06-10 (Fri)  Masayuki Ataka  <ataka@milk.freemail.ne.jp>

 * Blog: HMV のアカウントに入れなかった件についてブログに書いた。
 同じようなトラブルに遭った人がいたら、ということで。
 (link: [2005-05-29] hmv #5)

2005-06-08 (Wed)  Masayuki Ataka  <ataka@milk.freemail.ne.jp>

 * HMV: 新アカウント登録。で、再び使えるようになった。
 (link: [2005-05-29] hmv #4)

2005-06-02 (Thu)  Masayuki Ataka  <ataka@milk.freemail.ne.jp>

 * HMV: アカウントにログインできない件について返答。
 > 新パスワード確認メールを見て、再トライしてくれ。
 その確認メールが届かないんだけど...
 (link: [2005-05-29] hmv #3)

2005-06-01 (Wed)  Masayuki Ataka  <ataka@milk.freemail.ne.jp>

 * HMV: ログイン用のメール・アドレスを教えて欲しいとサポート・センターからメール。
 (link: [2005-05-29] hmv #2)

2005-05-29 (Sun)  Masayuki Ataka  <ataka@milk.freemail.ne.jp>

 * HMV: HMV にログインできない件について
 メールで問い合わせた。
 (howm: 20050529-045054.howm)
 (link: [2005-05-29] hmv #1)

カテゴリー検索で同じような事もできるけど、もっと細かく一連の作業・手続き・話の流れをピックアップできるのがいい所。もし上の例で「HMV」に対して検索をすると、HMV で買い物をした話とかが出てきて情報が絞り込めない (もちろん、HMV でのお買い物は別のスレッドで管理してて、CD の購入・入金・発送・到着なんて 4 つ以上のメモが繋がる)。

clmemo hacks

#2 以降のリンク・タグは、コピペで入れればいいとして、一番最初のリンク・タグの生成と、リンク・タグの検索が面倒ですな。次のコードを .emacs に入れると幸せになれるかもしんない。

;
; link
;
(defun clmemo-tag-link-grep ()
  (interactive)
  (let (query beg end)
    (setq beg (progn (beginning-of-line) (skip-chars-forward " \t") (point))
   end (search-forward "#" nil t)
   query (concat (regexp-quote (buffer-substring-no-properties beg end))
   "[0-9.]+)"))
    (if (fboundp 'clgrep-item)
 (funcall #'clgrep-item query)
      (occur query))))

(defun clmemo-tag-link-insert ()
  (interactive)
  (concat "[
    (save-excursion
      (clmemo-backward-entry)
      (buffer-substring-no-properties
        (point) (progn (skip-chars-forward "-0-9") (point))))
  (insert "]  #1")
  (backward-char 3))

(setq clmemo-tag-list
      '("link" clmemo-tag-link-grep clmemo-tag-link-insert))

リンク・タグを入れたい所で C-c ( l するとタグが挿入される。そんで、リンク・タグの上で C-c RET するとリンク・タグを含むメモだけが抽出される。ただし、リンク・タグの中のインライン日付で C-c RET すると、その日付へのジャンプになっちゃうので注意。

CSS記述規則「プロパティ別整理法」の提案

大きな CSS ファイルを作ると、整理ができなくなって HTML につけた id や class 名が混沌としてくる。または、どんな id・class 名をつけるべきか混乱してくるという。そこで、あきやんさんが提案するのが「プロパティ別整理法」というもの。詳しい説明は、 あきやんさんのページを見てもらうとして、とりあえず概略をば。サンプルは、 自分のページで使っている CSS ファイル。

あきやんさん曰く、大低の人はセレクター毎にプロパティーを設定している。ぼくの CSS ファイルもそう。

body {
 margin: 1em 5%;
 line-height: 1.35;
}

h1 {
 text-align: center;
 text-family: sans-serif;
 text-size: xx-large;
 margin: 0.8em -5%;
 padding: 0.5em;
 background-color: #ffff00;
}

h2 {
 text-family: sans-serif;
 text-size: xx-large;
 border-bottom: 4px dotted #666666;
 padding-bottom: 4px;
 padding-top: 20px;
}

h3 {
 text-size: x-large;
 border-bottom: 2px dotted #666666;
 padding-bottom: 4px;
 padding-top: 20px;
}
(続く)

この方式を 図書館方式と名付けてる。不満点を一言であらわすと、

とにかく無駄な時間がかかることが不満です。

メンテナンス性の低さ、見栄えと関係の無い事象への負担が無視できないほどに大きいのです。これは、良いスタイルを目指す際の重い足かせとなっています。

とのこと。ぼくは、それほど大きな CSS ファイルは作ってないので不満はないけど、CSS 処理にバグを持つ NN4 とか IE5 の対策を入れている CSS ファイルはすごい事になっているので、大変そうなのは薄々分かる。

そこで プロパティ別整理法。これはシンプルに、1 セレクターに 1 プロパティーと割り切ってしまう方法。上の例をプロパティ別整理法で書くとこうなる。

/* background-color */
h1 { background-color:#ffff00 }

/* border-bottom */
h2 { border-bottom:4px dotted #666666 }
h3 { border-bottom:2px dotted #666666 }

/* line-height */
body { line-height:1.35 }

/* margin */
body { margin:1em 5% }
h1 { margin:0.8em -5% }

/* padding */
h1 { padding:0.5em }

/* padding-bottom */
h2 { padding-bottom:4px }
h3 { padding-bottom:4px }

/* padding-top */
h2 { padding-top:20px }
h3 { padding-top:20px }

/* text-align */
h1 { text-align:center }

/* text-family */
h1 { text-family:sans-serif }
h2 { text-family:sans-serif }

/* text-size */
h1 { text-size:xx-large }
h2 { text-size:xx-large }
h3 { text-size:x-large }
(続く)

いろいろ利点はあるそうだけど、ぼくはプロパティーごとに設定が分かるのがよいなぁと思う。セレクター単位でプロパティー値を見るには、grep を使えばよい、とのこと。

blg-css.el

さて、ここからが本題。プロパティー別な情報をセレクター別な情報に grep で変換できるというなら、セレクター別な情報 (旧来の方法) をプロパティー別に直すこともできるんじゃない? というわけで、 blgrep の CSS 用フロント・エンドを作ってみた。フロント・エンド名は blg-css。提供する関数は blg-css と blg-css-line の二つ。

実行例はこんな感じ。

• M-x blg-css RET text-size

  h1 {
   text-align: center;
   text-family: sans-serif;
   text-size: xx-large;
   margin: 0.8em -5%;
   padding: 0.5em;
   background-color: #ffff00;
  }
  
  h2 {
   text-family: sans-serif;
   text-size: xx-large;
   border-bottom: 4px dotted #666666;
   padding-bottom: 4px;
   padding-top: 20px;
  }
  
  h3 {
   text-size: x-large;
   border-bottom: 2px dotted #666666;
   padding-bottom: 4px;
   padding-top: 20px;
  }
  (続く)
    

• M-x blg-css-line RET text-size

  h1 {
   text-size: xx-large;
  h2 {
   text-size: xx-large;
  h3 {
   text-size: x-large;
  h4 {
   text-size: x-large;
  h5{
   text-size: large;
    

blg-css-line が、プロパティ別整理法の代わりに使える。ただし、検索結果が不完全な CSS ファイル (閉じの中括弧がない) になってしまうのと、セレクターとプロパティーの間に改行が入ってしまうのが嫌らしい。 blg-css は、検索に引っかかったセレクターを丸ごと出力するので旨味はないかな。

完全なプロパティ別整理法がやりたければ、あきやんさんが作っている 蓄々CSS自動整形を使うべきだと思うけど、

尚、小規模なCSSは例外ケースとなります。

また、CSSを新たに構築する際もプロパティ別整理法で書き始めることは推奨されません。 多くのCSSは図書館方式で整理されている

ということなので、プロパティー別整理法に移行する前の中位いの CSS ファイルで blg-css は使えるじゃないかな。

blg-css のインストール

まず、 blgrep 0.2 をインストール。その後、下の blg-css.el をダウンロードして、blgrep.el をインストールした場所と同じ所に入れます。

• blg-css.el

最後に、.emacs に次の二行を入れれば、 M-x blg-css, M-x blg-css-line ができるようになります。

(autoload 'blg-css "blg-css" "CSS grep." t)
(autoload 'blg-css-line "blg-css" "CSS grep line." t)

via

• たつをの ChangeLog: プロパティ別にCSSを記述する方法