使い方

(X)HTMLは「見出し＋リスト（内容）＋それらを包むDIV」っていう構造になっていればOKです。内容部分はリストじゃなくても可。デモだと下記のようになっています。

<div class="genre">
<h3 class="header"><span>A</span></h3>
<div class="body">
<ul>
<li>Aで始まるアーティスト</li>
<li>Aで始まるアーティスト</li>
<li>Aで始まるアーティスト</li>
<li>Aで始まるアーティスト</li>
<li>Aで始まるアーティスト</li>
</ul>
</div>
</div>

必要なJSファイルを読み込んだ後、
$(対象の見出しを指定するセレクタ).iphoneH();
をドキュメントロード後に呼び出すように記述します。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="iphoneh.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('h3.header').iphoneH();
});
</script>

理屈を言えば、親DIVを基準に、見出しをposition:absoluteにしてtopの値をscrollイベントでいじっています。

見出しや内容部分は適当にスタイリングしましょう。デモだと元ネタが分かりやすいようにiPodアプリ風にまんまスタイリングしました。見出し部分に透過pngを使っていますが、IE6対策でどうのこうのとかはやっていません。

他のデザインに当てはめたときに正常に動くかはよく分からないです。多分その辺に突っ込みどころはたくさんあると思いますが（以下略

ライブラリ不要

jQuery

FancyZoom(jQuery)

必要ライブラリ：

jQuery

対応形式：

画像、インライン（Flashなど含む）

対象指定：

jQueryセレクタ

ライセンス：

不明

備考：

ウィンドウのシャドウ部分などの透過pngパーツが、IE6では透過gifで代用されており見た目が落ちる。

Prototype.js + script.aculo.us

FancyZoom

必要ライブラリ：

Prototype.js、script.aculo.us

対応形式：

インライン

対象指定：

href属性

ライセンス：

不明

備考：

対象のインラインコンテンツのIDをhref属性で指定できる・・・だけ？ウィンドウのシャドウ部分などの透過pngパーツが、IE6では透過gifで代用されており見た目が落ちる。

Lightbox2

必要ライブラリ：

Prototype.js、script.aculo.us

対応形式：

画像、画像ギャラリー

対象指定：

rel属性、title属性

ライセンス：

CCライセンス 表示 2.5 一般

備考：

元祖Lightbox。オプション設定などはないが、使い方は単純明快。

MooTools

SexyLightBox

必要ライブラリ：

MooTools

対応形式：

画像、画像ギャラリー

対象指定：

スクリプト、class属性、rel属性、title属性

ライセンス：

MITライセンス

備考：

画面上部からビヨーンと登場するという、変わったアニメーションが特徴的。公式サイトの字が読めない。.meというドメインがモンテネグロのドメインなので、モンテネグロのサイト・・・？

YUI

その他

基本設計

行番号を振るための処理は、基本的にsyntaxhighlithter.jsとほとんど同じ。というか、syntaxhighlighter.jsを参考にして作りました。

処理の流れとしては、

1. まずページ内に<pre><code>とマークアップされている部分を取得します。
2. それら個々を<ol><li>番号順リストのマークアップに変換します。それら個々を<ol><li>番号順リストのマークアップに変換したものと、そのままのもの（プレーンテキスト）、それぞれ二つづつを生成します。プレーンテキストの方はデフォルトで非表示にします
3. 奇数行と偶数行のli要素それぞれに別のclass属性値を設定します。
4. 変換後のコードとプレーンテキストとを切り替えるヘッダー部分を生成します。
5. 最後にdiv要素で包みます（後でスタイルを整える都合）。最後にこれらをdiv要素内に書き出し、元の<pre><code>部分と差し替えます。

<pre><code>function sample() {
alert("sample");
}</code></pre>

これが

<div class="LNW">
<div class="header" style="display:none">
<a href="#" class="ctrl1">with line number</a>
<span class="ctrl2">plain text</span>
</div>
<div class="header">
<span class="ctrl1">with line number</span>
<a href="#" class="ctrl2">plain text</a>
</div>
<ol>
<li class="odd">function&nbsp;sample()&nbsp;{</li>
<li class="even">&nbsp;&nbsp;alert(&quot;sample&quot;);</li>
<li class="odd">}</li>
</ol>
<pre style="display:none"><code>function sample() {
alert("sample");
}</code></pre>
</div>

こうなります。

改行をどうやって拾うか

取得したDOM要素のinnerHTMLプロパティから拾えれば全く問題なかったんです。innerHTMLから改行を拾う処理はこんな感じ。

var str = codeElement.innerHTML;
str = str.replace(/\r?\n/g, "\r");

で、splitメソッドで分割して、li要素に突っ込んでいけばOKと思っていました。

var line = str.split("\r");
var i,l,li;
for(i=0,l=line.length; i<l; i++) {
li = document.createElement("li");
li.innerHTML = line[i];
}

ところが、、WinIEがどうやっても改行を拾ってくれません。innerHTMLにした瞬間に全部改行が消えてしまう・・・！

そこで、取得した要素のコード部分をテキストノードとして拾い、そのnodeValueから拾ったら、うまくいきました。ただしこのやり方だと、テキストノード以外のノード（要素ノードとか）が混じっていると処理が複雑になりすぎてしまう・・・。ここで壁にぶち当たります。

「今の自分にはこりゃ作れない」という気になってきたので気分を切り替え、そういう仕様と割り切っていっそのことタグを使用不可にすればいいじゃんと考えました。取得したDOM要素内には常にテキストノードだけが入っている状態なら良いわけですから。

Safariのヘンなところ発見

コードの一行目に含まれているのが改行のみの場合、Safariがその改行を拾ってくれません。一行目が改行だけってシチュエーションがまずないので、これもスルーしています。

次のようになるべきコードが

  <ol>
<li class="odd"></li>
<li class="even">function&nbsp;sample()&nbsp;{</li>
<li class="odd">&nbsp;&nbsp;alert(&quot;sample&quot;);</li>
<li class="even">}</li>
</ol>

Safariでは次のようになります。

  <ol>
<li class="odd">function&nbsp;sample()&nbsp;{</li>
<li class="even">&nbsp;&nbsp;alert(&quot;sample&quot;);</li>
<li class="odd">}</li>
</ol>

ブラウザ振り分け処理

WinIEだけ別処理にしたいので振り分けます。確かWinIEだけ実装している、document.allオブジェクトを利用してみました。が、Operaもひっかかってきた（Operaもdocument.allを実装していた）ので、Operaだけが実装しているwindow.operaオブジェクトをさらに利用します。

if(document.all && !window.opera) {
WinIE用の処理
} else {
その他のブラウザ用の処理
}

ホントはもっとスマートなやり方があると思います・・・。

半角スペースの変換問題

いっぽう、WinIE以外のブラウザではinnerHTMLから改行が拾えるからタグ使えるんじゃね？と思っていたら、別の問題にぶち当たりました。次に問題となったのは半角スペースです。

まず前提として、コードのインデントなどに使われる半角スペースを拾い、&nbsp;へと変換する処理を行っています。タグに属性値をセットしている場合、この処理で属性名前の半角スペースを拾われてしまい、ヘンテコな状態に変換されてしまいました。

sample text
<a href="sample.html">sample text</a>
sample text

これが

sample text
&nbsp;&nbsp;<a&nbsp;href="sample.html">sample&nbsp;text</a>
&nbsp;&nbsp;sample&nbsp;text

こうなっちゃいました。
というわけで、結局タグは使えない仕様で行くことに決定。

CSSでも...

CSSを書く段階になってもWinIEに苦しめられます。

横に長いコードを詰め込んだときにスクロールバーを出すためにoverflow:autoを設定するわけですが、スクロールバーが出た状態のWinIEがとてもヘン。それから、ol要素にoverflow設定をするとIE6で幅がヘンなことに。syntaxhighlighter.jsを参考に、全体をdiv要素で包み、そちらにoverflow設定をするこにしました。

また、横スクロールバーが出た際にWinIEは、スクロールバーの高さ分をそのボックスの高さに含めてしまう模様。そしてそのせいで、横スクロールバーが出ると同時に、縦スクロールバーも出てしまう・・・。

横長なコードのくせに1行か2行しかない場合が最悪で、コードが横スクロールバーに隠れてしまい、ロクに見ることができなくなってしまいます。これはお話にならない！というわけでWinIEだけハックで下paddingを設定し、スクロールバー分の高さを稼ぎました。これによって縦スクロールバーが出なくなり、コードの閲覧性は上がりました。が、スクロールバーが出た時に下marginが狭くなるという副作用が・・・。もうここでお手上げとなりました。

function sample() {
alert("sample");
}

動作確認済みブラウザ

• Windows IE6 / 7 / 8
• Windows Firefox2 / 3
• Windows Opera9.6
• Windows Safari3.1
• Windows Google Chrome2
• Mac Safari3
• Mac Firefox2 / 3
• Mac Opera9.6

使い方

ダウンロードしたzipファイルを解凍すると、linenumberwriter.jsとlinenumberwriter.cssが入っています。この2つを両方とも(X)HTMLファイルから読み込んでください。例えば次のようなコードをhead要素内に記述し、呼び出します。

<script type="text/javascript" src="/js/linenumberwriter.js"></script>
<link rel="stylesheet" type="text/css" href="/css/linenumberwriter.css" media="screen,projection" />

前項JSを呼び出した後で、window.onloadイベントなどでLNW.write();というメソッドを呼び出してあげます。（その他にもwindow.onloadイベントで呼び出しているメソッドがあったら、イベントを上書きしないようご注意ください）

window.onload = function() {
LNW.write();
}

(X)HTML内の<pre><code>から</code><pre>まででマークアップされているコードが自動的に変換の対象となります。

使用上の注意&既知の不具合

• 現在の仕様では<pre><code>でマークアップしてしまうと、強制的に変換対象となってしまいますので、ページ内で例外的なスタイルを作れません。
• <pre><code>内ではタグが使えません。具体的にはコードの一部をstrong要素で強調するといった使い方や、コードの一部をspan要素でマークアップして色を付けるといった使い方はできません。これも仕様です。
  もしタグを使ってしまうと一部コードが非表示になってしまうなどして、表示が崩れます。
  0.4にアップデートするに当たり、<pre><code>内でタグが使用できるようになりました。
• 一行目に改行のみが含まれている場合、Safariではその改行を拾ってくれません。
• コードが表示エリアをはみ出した場合、スクロールバーが表示されますが、行の背景色がはみ出した部分に付きません。
• IEではスクロールバーが表示されてしまうと、いろいろとヘンなことに・・・（それをハックでごまかしています。。）

更新履歴

• 2009年10月15日 - 0.4.1にアップデート
  空白行が「nbsp;」と出力されてしまう不具合を修正しました。
• 2009年6月16日 - 0.4にアップデート
  変換対象内（<pre><code>内）でタグを使えるようにしました。コードの一部をstrong要素で強調したり、span要素で囲んで特定のスタイルを適用するといったことが可能となります。
• 2008年4月7日 - 0.2にアップデート
  タブっぽいリンクをクリックすることによって、プレーンテキストと切り替えられるようにしました。Firefoxでコードをコピペした時にリストマーカー部分がくっついてくるのが鬱陶しかったため、この機能をつけました。Firefoxではコピペしたい時は、プレーンテキストに切り替えてからコピペしましょう。
• 2008年4月5日 - 0.1.1にアップデート
  WinIEで&（アンパサンド）の変換処理がおかしかった点を修正しました。

プロパティについて

オブジェクトはその内部にプロパティを持つことができます。オブジェクト名とプロパティ名をドットで繋げることプロパティを呼び出せます。
例えば Array オブジェクトは length というプロパティを持ち、オブジェクト名.lengthとすることで、この配列オブジェクトの持つ要素の数を取り出すことができます。

var hoge = new Array("foo","bar");
alert(hoge.length) // 2 が表示される

length のようなものは Array オブジェクトに最初から組み込まれているプロパティなので、特に自分で定義しなくてもいきなり使うことができます。もちろん自分でプロパティを作ることもできます。

プロパティを作るには、作成したオブジェクトに .（ドット）を付けてプロパティを定義します。

var hoge = {};
hoge.x = 100;
alert(hoge.x); // 100 が表示される

もしくは、オブジェクトを作成する際にオブジェクトリテラル形式で定義します。

var fuga = {x: 100, y: 50}
alert(fuga.x + fuga.y); // 150 が表示される

コンストラクタとインスタンス

「オブジェクトで表現した」場合、new XXX()という文になりますがこれはXXX()というコンストラクタから新たなオブジェクトを作る、という意味となります。コンストラクタとは新たなオブジェクトを作る雛形のようなものであり、コンストラクタから作られたオブジェクトをインスタンスと呼びます。

JavaScriptでは関数をコンストラクタとして使うことができます。関数を定義する際、this.XXXという書き方でプロパティを定義しておくと、そのプロパティはインスタンスにも引き継がれます。

// hoge()コンストラクタを作成
// hoge()のプロパティとして x=100 を定義
function hoge() {this.x = 100;}
// hoge()コンストラクタからfugaオブジェクトを作る
// fugaオブジェクトはhoge()コンストラクタのインスタンスとなる
var fuga = new hoge()
// hoge()コンストラクタから x=100 プロパティが
// 継承されているので 100 が表示される
alert(fuga.x)