トップ » 技術記事 » Flex2でソースコードをブログに貼り付けるツールを作る(2) - ソースコードをブログに貼り付けるツールを拡張しよう

Flex2でソースコードをブログに貼り付けるツールを作る(2) - ソースコードをブログに貼り付けるツールを拡張しよう

タグ: Flash Flex swfobject

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

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

前回のおさらい

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


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

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

要望や改善点について

さっそく、実戦で使い始めた「唐辛子」ですが、いくつか不満点や要望が上がってきています。まず、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に変換する

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

コラム~拡張性について:

拡張性を重視した造りにしておけば、後々プログラムを改良するのが楽になります。ですから、ちょっとしたプログラムを作るときにも、拡張性を考慮した造りにしておけば、将来、すばやく機能を拡張することができるでしょう。

だからと言って、なんでもかんでも、大げさな造りにしたり、汎用的に不要な機能まで作りこむのは感心できません。拡張性を重視しすぎると、30分で完成するはずのプログラムを作るのに、何時間もかけてしまうことになります。

何事にもバランス感覚と、自分に与えられている残り時間を、心がける必要があると思います。特に、凝り性の人(私もその一人ですが..)は時間を忘れて没頭しがちですので、作業をはじめてどのくらい経過しているのか、時間をチェックしながら作ることが必要かもしれません。

また、デザインパターンなど、プログラミングの定石を意識して設計するだけで、拡張性の高いプログラムを作ることができます。トリッキーなプログラムを作らず、できるだけ、「普通のコード」「誰にでも書けるコード」を書くことが保守性を高めることに貢献します。

Series Navigation«ブログに美しいソースコードを貼り付けよう

1 2

執筆者紹介

クジラ飛行机

クジラ飛行机

くじらはんど(http://kujirahand/)にて、日本語プログラミング言語「なでしこ」(IPA未踏ユース採択)、テキスト音楽「サクラ」(OSPオンラインソフト大賞入賞)など多くのオンラインソフトを開発。著書に「Flexプロフェッショナルガイド」「なでしこ公式バイブル」、「一週間でマスターするActionScript3.0」など。

TrackBack URL :