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

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

タグ: Flash Flex swfobject

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

本稿では、Adobe Flex2を利用して、ソースコードをブログに貼り付けるためのHTML整形ツールを製作する過程を紹介します。

今回製作したプログラム「ソースコードHTML変換「唐辛子」」は、まだまだですが既に公開していますし、今後も育てていこうと思っていますので、使ってみてください。

なお、JavaScript/Ajax や Flash/Flexなど、Webブラウザで動くアプリケーションに興味を持っている方で、ある程度プログラミング経験がある方を対象としています。

こんにちは。クジラ飛行机です。今回より、八角研究所にて技術ブログを書かせていただくことになりました。よろしくお願いします。その第一回として、ソースコードをブログに綺麗に貼り付けるための整形ツールの製作記事を書いてみようと思います。

製作動機~ブログに美しいソースコードを貼り付けたい

プログラミングで困ったときに、検索エンジンで資料を探すと、個人のブログに求めていた答えが載ってるということが多くあります。私も、プログラミングをしていて気づいたことなどがあると、自分のブログにメモしておく習慣があります。なぜ、ブログにメモするのかと言えば、他の人のためになるというのもありますが、検索してみると、自分のブログに答えが載っていたということがよくあるからです。

数ヶ月前に書いたプログラムが、他人の書いたプログラムに見えるというのは、誰にでもあることですが、以前つまづいて悩んだ部分で、再び悩むということも案外多いものです。情けないことに、自分の書いたブログに何度救われたでしょうか。

さて、技術ブログを書いていると、時々、なんとかならないかなぁと思うことがあります。それは、ブログに投稿するとき「どうしたら美しくソースコードを貼り付けることができるだろうか。」ということです。

検索エンジンで探してみると、綺麗にソースを貼り付ける、JavaScript や、綺麗に予約語を色分けしてくれるツールなども存在することが分かりましたが、インストールの必要なWindowsアプリケーションだったり、なかなか気軽に使えるものが見つかりません。

そこで、ソースコードを綺麗にHTMLに変換するツールを作ってみようという気になりました。

どのツールで作ろうか?

ソースコードをHTMLに変換ツールを作ろうと思った時、真っ先に思いついたのが、Flexです。Flexは今、私が一番お気に入りのツールです。Flexなら、面倒なインストール作業も不要で、Webブラウザさえあれば動くのは当然のこと、実行速度も、JavaScriptの何倍も速いので、ある程度、手抜きして作っても、実用的な速度が出るだろうと考えたのです。

どんな機能が必要か?

アプリケーションを作り始める時に、するべきことは、まず、必要な機能を洗い出すことです。今回のアプリケーションは、「ソースコードをHTMLに変換する機能」があれば良いのですが、まずは、いろいろと欲しい機能を書き出してみました。

  • HTML/CSS, JavaScript/ActionScript, C/Pascal/Perl/PHP/Python/Rubyなど、有名なプログラミング言語やマークアップ言語に対応したい。
  • 文字列やキーワード語句、コメント等に色をつけて構文を強調をしたい。
  • 完成したHTMLのプレビュー表示ができるようにしたい。

この1つずつの項目を、考えていきます。

1点目、多くのプログラミング言語に対応するというのは将来的な目標です。ただし、多くの言語に対応するためには、時間と根性が必要になってしまうので、とりあえず、今回は、Flexのソース(MXML = XML + ActionScriptの混合)が変換できる機能を作ろうと思います。このとき、将来のことを考えて、なるだけ、複数の言語に対応できるように、拡張性を考慮に入れます。

2点目、プログラムの構文に色をつけて強調がしたいです。このために、HTMLへ変換するときに、CSS(スタイルシート)を利用します。構文を<span>などのタグで囲み、それぞれ構文ごとにクラスを付けておけば、後から好みのデザインに調整することもできます。

3点目、Flex の TextAreaコンポーネントには、簡易HTMLを表示する機能があるので、これを利用して、変換処理をした時に、変換結果がすぐ確認できるようにします。この機能は、ユーザーのためというのもありますが、デバッグが楽になるからという理由で実装します。

完成アプリケーション~ソースコードのHTML変換ツール「唐辛子」

以下に完成したアプリケーションを掲載します。

【使い方】まず、変換したいソースコードを貼り付けます。次に、言語を選択して、[変換]ボタンを押します。すると、プレビュー画面と、HTMLのコードが表示されます。このHTMLを貼り付け、CSSタブにあるテキストをリンクすれば、綺麗にプログラムを表示させることができます。

以下のリンクをクリックすると実行されます。
http://kujirahand.com/tools/tougarasi/

実行してみたところ:
ソースコードHTML化ツール「唐辛子」

ソースコード:
→ソースコードのダウンロード

以下、よりプログラムの詳しい内容についてみていきます。

Series Navigationソースコードをブログに貼り付けるツールを拡張しよう»

1 2

執筆者紹介

クジラ飛行机

クジラ飛行机

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

TrackBack URL :