Excite Smartphone Engineer's Blog

2012年 10月 19日

エキサイトブログでのコードシンタックスハイライトについて

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

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

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




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

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

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


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


ほら、こんなにキレイ!
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!

by sp_tech | 2012-10-19 14:16 | Tool | Comments(0)


<< Xcode4.5.1でiOS用...      Titanium実装ノウハウの2 >>