スマートフォン推進室のエンジニアの山田です。こんにちは。
高画質の写真がアップロードできることでおなじみのエキサイトブログですが、ソースコード記載のサポート機能がないという悲しい欠点があります。

きっとそのうち、そのサポート機能も搭載してくれるであろうという期待を胸に、現時点でのソースコード記載時のノウハウを共有したいと思います。
とは書いたものの、中身は先人の知恵を拝借させていただいた内容だったりします。ありがとうございます。

3流プログラマのメモ書き - (ブログ)Exciteブログにソースコードを貼り付ける
http://jehupc.exblog.jp/8273597/




ブログ上にソースコードをキレイに記載する方法として、「Syntax Highlighter」といったJavaScriptライブラリなどを使う方法がありますが、エキサイトブログではJavaScriptのアップロード機能とHTMLヘッダの変更機能はありませんので、外部サーバにJavascriptを配置して、各記事ごとでjavascriptを読み込むという強引な方法しか使えません。ちなみに、プレミアムコースに入会することで、Javascriptプラグインを入れることも可能だそうです。入ろう！プレミアムコース！

話がそれました。そういったわけで、フリー・アドバンスコースでソースコードを記載する場合は、CSSを利用して、preタグ等で貼付ける方法が一般的になるかと思います。

例えばこうやってCSSに下記内容を記述して


こうやってCSSで装飾したソースコードを貼付ければ……


ほら、こんなにキレイ！

package jp.co.excite.test;

 

import android.app.Activity;

import android.os.Bundle;

import android.util.Log;

 

public class TestActivity extends Activity {

     private static final Integer fI = -100;

 

     @Override

     protected void onCreate(Bundle savedInstanceState) {

          // comment

          super.onCreate(savedInstanceState);

 

          for(int i=0;i<100;i++){

               Log.v("TestActivity","Hello " + i);

          }

     }

}

 

さて、この時点で捕捉するまでもありませんが、ただ貼付けるだけならともかく、装飾まで行おうとすると、かなりの労力がかかります。常人ではとても耐えられるものではないでしょう。ですが、この手のコンバーターサービスはすでに公開されていますので、こういったサービスを利用するのも一つの手かと思います。何より装飾がいらなくても、「>」や「<」といった文字はHTMLエンティティに変換しないと、ただしく表示されませんからね。

というわけで、いい感じにシンタックスハイライトしてくれたり、一部の特殊文字をHTMLエンティティ変換してくれるツールを用意してみました。

http://wataruyamada.xandbox.jp/geshi.html

コードシンタックスハイライトには「GeSHi」、HTMLの変換はphpのhtmlspecialchars()メソッドを通しただけの、見た目も簡素なツールですが、機会があれば是非ご利用ください。

しかしここまで書いておいてなんですが、やはり装飾までほどこしたソースコードの可読性は非常に低く、後々の保守作業も大変になるかと思います。ブログ上では必要最小限のソースコードの記載にとどめて、長きにわたるソースコードは、きちんとプロジェクト化してGitHub等を併用しながら使うことをおすすめいたします。

そんなわけで、Excite Smartphone Engineer's Blogのエンジニア達も、しばしばGitHubを利用してソースコードを公開しています。みんなアカウント取ろう！GitHub！