Flex2でソースコードをブログに貼り付けるツールを作る

• ブログに美しいソースコードを貼り付けよう
• ソースコードをブログに貼り付けるツールを拡張しよう

Flex2でソースコードをブログに貼り付けるツールを作る その２

こんにちは。クジラ飛行机です。前回の技術記事、「Flex2でソースコードをブログに貼り付けるツールを作る」で、Flex2を使った、プログラムの整形ツール「唐辛子」を作ってみました。今回は、機能の拡張について、そして、新たなプログラミング言語に対応する方法を紹介しようと思います。

前回のおさらい

前回の技術記事、「Flex2でソースコードをブログに貼り付けるツールを作る」で、Flex2を使った、プログラムの整形ツール「唐辛子」を作ってみました。既に、私自身、ブログにプログラムを貼り付けるのに利用しており、さくっと作った割には良くできたものだと自画自賛しております。

ちなみに、自画自賛は大切です。エンジニアをやっている人には、「こんなプログラム、誰でも作ることができるだろう」とか「ｘｘさんなら、もっと短時間で作れてしまうだろう」など、自身を過小評価される方が多いようです。ですが、こうしたマイナス思考は禁物です。常に、プラス思考を持ち、モノを作る楽しみ、喜びを持ってプログラムを作ることにしましょう。また、「ｘｘの分野なら自分は誰にも負けない」という得意分野を作ることも、自身につながると思います。常に自画自賛することを心がけて、楽しいエンジニアライフを過ごしましょう。

さて、今回は主に、前回作ったツールの修正点の確認と、実際に、プログラミング言語を追加する方法を紹介したいと思います。

• 今回作ったプログラム：→「唐辛子」のページで実際に動作しています。
• プログラムのソースコード：唐辛子ソースコード(ライセンスGPL)

要望や改善点について

さっそく、実戦で使い始めた「唐辛子」ですが、いくつか不満点や要望が上がってきています。まず、CSSに関して、唐辛子で使うCSSは、以下のようになっています。

/* Source Code CSS */
pre.code {
..省略..
}
span.tag { color: #0000ff; }
span.attr { color: #000; }
..省略..

それで、現在、キーワードによる強調クラスが、span.tag や span.keyword になっていますが、これだと、Webサイトの他のCSSのクラスと重なる恐れがあるので、もう少し、階層を深くして、pre.code span.keyword のようにして、被らないようにしたいと要望がありました。確かに、その通りです。

改良後：

/* Source Code CSS */
pre.code {
..省略..
}
pre.code span.tag  { color: #0000ff;  }
pre.code span.attr       { color: #000;     }
pre.code span.value      { color: #900;     }
..省略..

CSSでクラス名は「.クラス名」のように指定します。そして、preタグのcodeクラスなら「pre.code」と指定します。さらに、preタグのcodeクラスの中の span タグと限定したい場合には「pre.code span.クラス名」とすれば良いのでした。改めて、サイトデザインやCSSについて考える良い機会になりました。

CSSに直接スタイルを埋め込む

また、CSSファイルを直接指定できないブログも多いので、styleタグを利用して、直接、色番号を埋め込めるように改良したいとの要望もありました。

この要望を実現するためには、プログラム自体に手を加える必要があります。しかし、将来の拡張性を考慮して作っていたので、HTML生成用に利用している SToken クラスを少し書き換えるだけでよく、10分の作業で対応することができました。

ここで唐辛子で行う処理を箇条書きにしてみます。プログラムは以下の手順で実行されます。

1. パーサー(構文解析機)を選択(言語ごとにパーサーを用意している)
2. パーサーが、ソースコードをトークンの単位に区切る
3. 数値や文字列など特別なトークンなら、トークンに特別な意味を与える
4. 区切ったトークンを順にたどって、HTMLに変換する

そこで、４番目のトークンをHTMLに変換する部分に、少し手を加えただけで、style属性にキーワード色を直接指定するコードを作ることができるようになりました。