2007/09/04 18:18

skEdit コードナビゲータ(Code Navigator)を有効に使う

COULD: skEdit 3.6で長谷川さんが言及していますがそれ以上のエントリーがなかなか出てきません。。skEdit + SVN(Subversion)の回でも書きましたけど、やっぱりユーザ数が少ない上、みんなさらりとこなしてしまっているのかな、と思います。

今回は、コードナビゲータを有効に使用する方法を説明します。あくまでも、私見ですので、使いにくい！と思われる方もいらっしゃるかもしれません。

コメントを表示するコードナビゲータ

上記で紹介した長谷川さんのCSSコメントをコードナビゲータに表示させる方法はいくつか問題があったりします。それは、

• コードナビゲータに表示させたくないコメントまで表示されてしまう
• コメントを使用したCSS Hackまで表示されてしまう

などが挙げられます。これらを解決する方法は、skEditのコードナビゲータ用のコメントを書くしか手段はありません。CSS Hackだけ表示させない、なども可能ですが、セパレータとして、/* ------------------------------------------ */と記述したいときに、困ってしまいます。

skEditのコードナビゲータ用のコメントですが、書き方は何でも構わないと思います。僕は、/** skEditのコードナビゲータ用のコメント */としました。最初のアスタリスクを2つ並べています。これが一番スマートかなぁ、と思いました。

このようにskEditコードナビゲータ用コメントのガイドラインを決めたら、正規表現を記述すればいいことになります。skEditの正規表現で( )を使用した場合、(1)に入ります。( ) ( )ならば(1)(2)とできます。$や\ではないですね。

トリガー:/\*\* ?([^\*]+) ?\*/タイトル:*** (1)カテゴリ名:CSS Comment説明:Shows CSS Comment (/** Comment */)

トリガー以外は自由に記述して問題ないと思います。タイトルが実際に表示されることになり、(1)部分がコメントの内容と置き換わります。僕は分かりやすいように、行頭に「*** 」を付けていますが好みで変更して構わないと思います。カテゴリ名・説明ともにあとあと分かりやすいように記述すれば問題ないと思います。

あとは、CSSでコードナビゲータ用のコメントは /** Comment */ と書くようにすれば問題ありません。うまく表示できない場合は、正規表現を疑ってみてください。

Javadocコメントを表示するコードナビゲータ

Javadocコメントについては、Googleで検索していただきたい。簡単な Javadoc の書き方など、有益なWebページは結構存在します。このJavadocコメントは、Java用のドキュメントの為のコメントだが、ある一定のルールに基づいてコメントを書くにはとてもいい見本になります。

CSSもある程度、大分類が出来るかな。それごとにファイルを分けてしまってもいいと思いますが、ヘッダー・コンテンツ・サイドバー・フッター等、全ページ一緒で数行しかないのにわざわざファイルを分けてしまっては管理が億劫で仕方ないときとかに、１つもしくはある程度の数のCSSファイルで管理することになるが、その大分類ごとにJavadocコメントを記述しておくといいかもしれません。まー、ワークフローは異なりますから、適当にどうぞ。

Javadocコメントは、@authorで誰が記述したのか、@seeでここも見ろ！など、第三者がみても分かりやすいようにするといいかもしれません。と言うか、自分しか見なくても、3ヶ月前に書いた自分のプログラム等は別人が書いたものと思っても過言ではないはずです。後々の自分のために詳しく書いておくに越したことはありません。@versionや更新日なども記述しておくのもいいかもしれませんが。そうすることで、誰がいつ更新したのがわかり、SCMと併用すれば完璧じゃないのかなぁ、なんて思うのです。

Javadocについてはこれくらいにし、実際の正規表現を書いてみます。カテゴリ名と説明は省略します。

トリガー:/\*\*\n \* ([^*]+)\nタイトル:----- (1) -----

トリガー: \* @([a-z]+) +([^\*]+)\nタイトル: (1): (2)

半角スペースとか意外と重要だったりして・・・わかりにくくてごめんなさい。
なんかよくわからいのですが、$が使えないのです。たぶん全てを1行と見なして処理してます。なので、\nで代用します。僕が間違えてたら指摘してくれると嬉しいです。

なにがオリジナルか分からなくなってきたけど、とりあえず使用しているコードナビゲータ

えー、これがあれですね。アレです。id系です。#content {}
#content #entry {}
#content .entry {}
#content p {}こんな感じのにヒットします。

トリガー:\n#([a-z0-9_-]+) ?([#.])?([a-z0-9_-]*)?[ \n]?{タイトル:#(1) (2)(3)

class系は以下のだけ。てか、上のid系で、#content .entry {}はヒットするんで・・・.section {}

トリガー:\n\.([a-z0-9_-]+)[ \n]?{タイトル:.(1)

上の2つはcss用だけど、html用にもidにヒットさせる。
トリガー:<[a-z0-9_="' -]+id="([a-z0-9_-]+)"[a-z0-9_="' -]*>タイトル:#(1)

あと、HTMLのhnがあるけど、これはオリジナルで入っているかな
トリガー:<[hH]([1-6])[^>]*>\s*([^<]+)\s*<タイトル:<h(1)> (2)

そんな感じでした。
次回はSnippetについて書きたいなぁ、なんて思っています。
この文書も半年くらい熟成させていましたので、いつになることやら。。。