クライアントサイドプログラムといわれているJavaScriptがサーバサイドで動く。なんだかおもしろそうですね。
node.jsはグーグルが開発したV8エンジン上で実行されます。まずは実行環境を整えるためnode.jsをインストールしましょう。

なにかと噂の「node.js」について調べてみる。
あとでじっくり読んでみよう。

• 本家サイト：http://nodejs.org/
• 本家サイト（日本語サイト）：http://nodejs.jp/nodejs.org_ja/
• 日本ユーザグループ：http://nodejs.jp/
• Node.js とは一体何か？：https://www.ibm.com/developerworks/jp/opensource/library/os-nodejs/
• サーバサイドJavaScriptの本命「node.js」の基礎知識 ：http://www.atmarkit.co.jp/ait/articles/1102/28/news105.html
• Nodeビギナーズブック：http://www.nodebeginner.org/index-jp.html
• 基礎から学ぶNode.js：http://gihyo.jp/dev/serial/01/nodejs/0001

写真家の方のサイトを作る際に画像をコピーできないようにしてもらえないか・・・と言われ、コピー禁止用のJavaScriptを書いてみました。HTMLがクライアント側で解釈されるので完全にコピー禁止にすることはできませんが、一手間かけないとコピーできないようになってます。

なるべく簡単に導入できるよう書いてみました。

JavaScriptではイベント発生時に関数を実行させる場合、以下のように記述します。イベントに関数を代入しておき、イベント発生時に実行します。イベントに関数を設定する場合は関数名に()をつけませんね。

window.onload = 関数名;

もし下記のソースコードのように関数名に()をつけてしまうとうまく動かないことがあります。それはなぜでしょう？この疑問を検証してみます。

window.onload = 関数名(); //うまく動かないことがある

JavaScriptで起きたエラーに対処するためには、エラーメッセージを表示させる必要があります。各ブラウザでどのように表示をされるのか紹介します。

「SyntaxHighlighter を使ってみる（導入編）」に引き続き、今回はソースコードを記述する際の様々な使い方を試してみます。

まずは標準の記述法で書いたときの表示です。

<h4 class="id_title4">使用用途</h4>
<p>
移動先のページやページ内の特定の場所を指定する<br />
HTMLだけでなく、画像や音声にリンクを指定することもできる
</p>

本日のメニュー

1. ソースコードのコピー
2. 最初の行番号を変える
3. 特定の行をハイライトする
4. 他言語のソースコードとHTMLを同時に色分けする
5. 行番号を表示させない
6. ソースをコードを隠す
7. ソースコードにタイトルをつける
8. IE8でHTMLの要素が大文字になってしまうのを直す
9. デザインテーマを変える
10. 奇数行と偶数行で色分けする

ソースコードのコピー

3系になってからFlashを使ったクリップボードへのコピーがなくなり、ソースコードをダブルクリックするとコードが全選択状態になるのでそこから自分でコピーするようになりました。

最初の行番号を変える

<pre class="brush:html first-line:100">
<h4 class="id_title4">使用用途</h4>
<p>
移動先のページやページ内の特定の場所を指定する<br />
HTMLだけでなく、画像や音声にリンクを指定することもできる
</p>
</pre>

上記記述のようにclass属性に「first-line:行番号」を追加します。今回100行目を最初の行に指定しています。表示結果は下記のように100行目スタートになります。

<h4 class="id_title4 first-line:100">使用用途</h4>
<p>
移動先のページやページ内の特定の場所を指定する<br />
HTMLだけでなく、画像や音声にリンクを指定することもできる
</p>

特定の行をハイライトする

<pre class="brush:html highlight:[1,4]">
<h4 class="id_title4">使用用途</h4>
<p>
移動先のページやページ内の特定の場所を指定する<br />
HTMLだけでなく、画像や音声にリンクを指定することもできる
</p>
</pre>

class属性に「highlight:[行番号]」を追加します。複数行の場合は「highlight:[行番号,行番号,行番号]」のようにカンマ区切りで行番号を指定します。上記の例では1行目と4行目をハイライトするように指定しているので下記のような表示結果になります。

<h4 class="id_title4 first-line:100">使用用途</h4>
<p>
移動先のページやページ内の特定の場所を指定する<br />
HTMLだけでなく、画像や音声にリンクを指定することもできる
</p>

他言語のソースコードとHTMLを同時に色分けする

<p>下にあるボタンをクリックしてください。</p>
<input type="submit" value="am" name="time">
<input type="submit" value="pm" name="time">
<p>
<?php
if (isset($_GET["time"])) {
    if ($_GET["time"] == "am") {
        echo ("午前です。\n");
    } else if ($_GET["time"] == "pm") {
        echo ("午後です。\n");
    }
}
?>
</p>

PHPとHTMLが混在している上記のソースコードを「<pre class="brush:html">」のようにHTML指定して表示させるとHTMLしか色分けされません。

<pre class="brush:html">
<p>下にあるボタンをクリックしてください。</p>
<input type="submit" value="am" name="time">
<input type="submit" value="pm" name="time">
<p>
<?php
if (isset($_GET["time"])) {
    if ($_GET["time"] == "am") {
        echo ("午前です。\n");
    } else if ($_GET["time"] == "pm") {
        echo ("午後です。\n");
    }
}
?>
</p>
</pre>

次に「<pre class="brush:php">」のようにPHP指定して表示させるとPHPしか色分けされません。

<pre class="brush:php"><p>下にあるボタンをクリックしてください。</p>
<input type="submit" value="am" name="time">
<input type="submit" value="pm" name="time">
<p>
<?php
if (isset($_GET["time"])) {
    if ($_GET["time"] == "am") {
        echo ("午前です。\n");
    } else if ($_GET["time"] == "pm") {
        echo ("午後です。\n");
    }
}
?>
</p>
</pre>

そんなときは「<pre class="brush:php html-script: true">」のようにHTML以外の言語を標準指定してclass属性に「html-script: true」を追加すると下記のようにPHPもHTMLも色分けされて表示されます。

<pre class="brush:php html-script: true">
<p>下にあるボタンをクリックしてください。</p>
<input type="submit" value="am" name="time">
<input type="submit" value="pm" name="time">
<p>
<?php
if (isset($_GET["time"])) {
    if ($_GET["time"] == "am") {
        echo ("午前です。\n");
    } else if ($_GET["time"] == "pm") {
        echo ("午後です。\n");
    }
}
?>
</p>
</pre>

行番号を表示させない

<pre class="brush:html gutter: false">
<h4 class="id_title4">使用用途</h4>
<p>
移動先のページやページ内の特定の場所を指定する<br />
HTMLだけでなく、画像や音声にリンクを指定することもできる
</p>
</pre>

class属性に「gutter: false」を追加します。すると行番号が表示されなくなります。

<h4 class="id_title4 first-line:100">使用用途</h4>
<p>
移動先のページやページ内の特定の場所を指定する<br />
HTMLだけでなく、画像や音声にリンクを指定することもできる
</p>

ソースをコードを隠す

ソースコードをたたんで非表示にしておき、クリックで表示させることができます。

<pre class="brush:html collapse: true; toolbar: true">
<h4 class="id_title4">使用用途</h4>
<p>
移動先のページやページ内の特定の場所を指定する<br />
HTMLだけでなく、画像や音声にリンクを指定することもできる
</p>
</pre>

class属性に「collapse: true; toolbar: true」を追加します。すると下記のようにソースコードがたたまれて表示されなくなり、クリックすることでソースコードが表示されます。長いソースコードを書く場合には重宝しそうです。

<pre class="brush:html collapse: true; toolbar: true">
<h4 class="id_title4">使用用途</h4>
<p>
移動先のページやページ内の特定の場所を指定する<br />
HTMLだけでなく、画像や音声にリンクを指定することもできる
</p>
</pre>

ソースコードにタイトルをつける

<pre class="brush:html" title="ソースコードにタイトルをつける">
<h4 class="id_title4">使用用途</h4>
<p>
移動先のページやページ内の特定の場所を指定する<br />
HTMLだけでなく、画像や音声にリンクを指定することもできる
</p>
</pre>

title属性の値に表示したいタイトルを記述します。今まではclass属性に値を追加していたのですが、今回は「title="ソースコードにタイトルをつける"」のようにtitle属性が追加されているので注意。

<pre class="brush:html" title="ソースコードにタイトルをつける">
<h4 class="id_title4">使用用途</h4>
<p>
移動先のページやページ内の特定の場所を指定する<br />
HTMLだけでなく、画像や音声にリンクを指定することもできる
</p>
</pre>

IE8でHTMLの要素が大文字になってしまうのを直す

下記のように、実体参照を使わずにHTMLのソースコードを<pre>タグの中に記述すると、IE8でHTMLの要素が大文字で表記されたり、「<br />」が「<BR>」と表示されてしまいます。FireFoxではきちんと表示されるので、実体参照しなくてもHTMLが記述できて便利～と思っていたのですが、きちんと書かなければダメですね・・・。

※実体参照とはHTMLで意味を持つマークアップ記号を表記するときに使う記述で、代表的なものは以下のとおり。

<pre class="brush:html">
<h4 class="id_title4">使用用途</h4>
<p>
移動先のページやページ内の特定の場所を指定する<br />
HTMLだけでなく、画像や音声にリンクを指定することもできる
</p>
</pre>

上記のように実体参照を使わないで記述してしまうと、IE8でHTMLの要素が大文字になってしまったり、「<br />」が「<BR>」と表示されてしまう。

<PRE class=brush:html>
<H4 class=id_title4>使用用途</H4>
<P>
移動先のページやページ内の特定の場所を指定する<BR>
HTMLだけでなく、画像や音声にリンクを指定することもできる
</P>
</PRE>

なので、HTMLを記述するときは普段どおり実体参照を使って書きます。

<pre class="brush:html">
<h4 class="id_title4">使用用途</h4>
<p>
移動先のページやページ内の特定の場所を指定する<br />
HTMLだけでなく、画像や音声にリンクを指定することもできる
</p>
</pre>

すると、要素がきちんと小文字で表示されます。

<pre class="brush:html">
<h4 class="id_title4">使用用途</h4>
<p>
移動先のページやページ内の特定の場所を指定する<br />
HTMLだけでなく、画像や音声にリンクを指定することもできる
</p>
</pre>

デザインテーマを変える

SyntaxHighlighterにはデザインテーマがいくつかあり、stylesフォルダにあるデザインテーマCSSを読み込むことで簡単にデザインを変えることができます。「SyntaxHighlighter を使ってみる（導入編）」でライブラリの読み込みをしましたが、実はそこで一緒にデザインテーマCSSも読み込ませていました。

<script type="text/javascript" src="http://-YourServer-/scripts/shCore.js" charset="Shift_JIS"></script>

<script type="text/javascript" src="http://-YourServer-/scripts/shBrushCss.js"></script>
<script type="text/javascript" src="http://-YourServer-/scripts/shBrushPhp.js"></script>

<link type="text/css" rel="stylesheet" href="http://-YourServer-/styles/shCore.css" />
<link type="text/css" rel="stylesheet" href="http://-YourServer-/styles/shThemeDefault.css" />

<script type="text/javascript">
SyntaxHighlighter.all();
</script>

7行目で読み込んでいるのがデザインテーマのCSSです。現在は初期設定デザインの「shThemeDefault.css」を読み込ませていますが、ここを書き換えて別のデザインテーマCSSを読み込ませるとデザインが変わります。

<link type="text/css" rel="stylesheet" href="http://-YourServer-/styles/shThemeEmacs.css">

上記のように「shThemeEmacs.css」を読み込ませるとEmacs風のデザインになります。用意されているデザインテーマは下記の表のとおりなので好きなデザインテーマを見つけて該当ファイルを読み込ませます。

奇数行と偶数行で色分けする

デザインに関する部分はstylesフォルダにあるCSSを書き換えます。奇数行、偶数行の背景色について書かれているのは「shThemeDefault.css」です。

.syntaxhighlighter .line.alt1 {
  background-color: #FAFAFA !important;
}
.syntaxhighlighter .line.alt2 {
  background-color: white !important;
}

22行目の「.syntaxhighlighter .line.alt1」が偶数行の設定なので、ここの背景色を変えます。このブログでは薄いグレーの「#FAFAFA」を指定しています。奇数行も変えたい場合は26行目のbackground-colorプロパティの値を変えましょう。

最後に今日やったことのおさらい

1. ソースコードのコピー
2. 最初の行番号を変える
3. 特定の行をハイライトする
4. 他言語のソースコードとHTMLを同時に色分けする
5. 行番号を表示させない
6. ソースをコードを隠す
7. ソースコードにタイトルをつける
8. IE8でHTMLの要素が大文字になってしまうのを直す
9. デザインテーマを変える
10. 奇数行と偶数行で色分けする

いろいろと試してみましたが、本家サイトの「http://alexgorbatchev.com/」の情報が新鮮かつ正確ですので訪れてみてください。圧縮前のshCore.jsファイルをアップロードすると動かなかったのですが、なぜなんでしょう？誰か教えて～～。

「とにかくなんでもやってみる」の最初の記事は「SyntaxHighlighterを使ってみる（導入編）」です。
SyntaxHighlighterは行番号のついたソースコードを表示してくれるJavascriptライブラリで、言語ごとに見やすく色分け表示してくれる便利なライブラリです。

導入までの手順

1. どんなことができるか
2. ファイルのダウンロード
3. ファイルをサーバに設置
4. SyntaxHighlighterのライブラリを読み込む
5. ソースコードを記述する

どんなことができるか

まずはどんな風に表示されるのか見てみましょう。

最初に<pre>タグを使って通常のHTMLソースコード表示

<h4 class="id_title4">使用用途</h4>
<p>
移動先のページやページ内の特定の場所を指定する<br />
HTMLだけでなく、画像や音声にリンクを指定することもできる
</p>

次はSyntaxHighlighterを使ってHTMLのソースコード表示

<h4 class="id_title4">使用用途</h4>
<p>
移動先のページやページ内の特定の場所を指定する<br />
HTMLだけでなく、画像や音声にリンクを指定することもできる
</p>

SyntaxHighlighterを使うと要素や属性値などのキーワードが色分けされて見やすい。HTML以外の言語にも対応しており、下記のように各言語のキーワードが色分け表示されます。

同様に通常の<pre>タグを使ってCSSのソースコード表示

#header-description {
    color:#AAAAAA;
}

SyntaxHighlighterを使ってCSSのソースコード表示

#header-description {
    color:#AAAAAA;
}

通常の<pre>タグを使ってJavaのソースコード表示

class Test {
    public static void main(String args[]){
        int i = 5;
        System.out.println(i + 100);
    }
}

SyntaxHighlighterを使ってJavaのソースコード表示

class Test {
    public static void main(String args[]){
        int i = 5;
        System.out.println(i + 100);
    }
}

ファイルのダウンロード

まずは「SyntaxHighlighter」を http://alexgorbatchev.com/SyntaxHighlighter/ からダウンロードします。

右メニューの「download」をクリック

「Click here to download.」をクリックするとダウンロードが始まります

今回2010年10月時点での最新版「SyntaxHighlighter 3.0.83」をダウンロードしました。

ファイルをサーバに設置

ダウンロードしたファイルを解凍すると以下のファイルが入っているので、この中の「scripts」フォルダと「styles」フォルダをサーバの任意の場所にアップロードします。

SyntaxHighlighterのライブラリを読み込む

SyntaxHighlighterを使いたいHTMLファイルの<head>部分にライブラリ読み込みの記述を追加する

「http://-YourServer-/」部分を自分のサーバ名に置き換えてください。
今回は絶対パスで指定しましたが、相対パスで指定してももちろんOK。

<script type="text/javascript" src="http://-YourServer-/scripts/shCore.js" charset="Shift_JIS"></script>

<script type="text/javascript" src="http://-YourServer-/scripts/shBrushCss.js"></script>
<script type="text/javascript" src="http://-YourServer-/scripts/shBrushPhp.js"></script>

<link type="text/css" rel="stylesheet" href="http://-YourServer-/styles/shCore.css" />
<link type="text/css" rel="stylesheet" href="http://-YourServer-/styles/shThemeDefault.css" />

<script type="text/javascript">
SyntaxHighlighter.all();
</script>

上の例ではCSSとPHPのソースコードをSyntaxHighlighterで表示させることにしています。
では、どの部分でその指定をしているか見てみましょう

<script type="text/javascript" src="http://-YourServer-/scripts/shBrushCss.js"></script>
<script type="text/javascript" src="http://-YourServer-/scripts/shBrushPhp.js"></script>

4行目で「shBrushCss.js」を読み込みCSSの表記を、同様に5行目で「shBrushPhp.js」を読み込むことでPHPの表記に対応させています。
「shBrushCss.js」や「shBrushPhp.js」は、さきほどアップロードした「scripts」フォルダの中に入っており、CSSやPHP以外にも各言語に対応したjsファイルが入っているので適宜読み込みます。
尚、対応している言語と読み込みjsファイルの対応表は下記のとおり。

ソースコードを記述する

ソースコードを記述する際は<pre>タグを使って記述し、「class="brush:言語"」を追加します。下記の例ではCSSを記述しているので「class="brush:css"」と記述しています。

<pre class="brush:css">#header-description {
    color:#AAAAAA;
}
</pre>

「class="brush:言語"」の言語部分は下記の表から対応するキーワードを選んで指定します。

最後に導入までの手順をおさらい

1. ファイルのダウンロード
2. ファイルをサーバに設置
3. SyntaxHighlighterのライブラリを読み込む
4. ソースコードを記述する

今回は導入編でした。こんな素敵なライブラリをオープンソースで公開している「http://alexgorbatchev.com/」に感謝です。次回は「SyntaxHighlighter を使ってみる（使い方編）」を書こうと思います。