edit= blingbling HTML =
blingbling HTMLは、JavaScript向けのHTML規格です。[FrontPage blingbling DSL]シリーズのひとつで、HTMLでできることの大部分を実現できる他、PHPスタイルの埋め込み式や、拡張タグを使ったマークアップにも対応しています。
[[PageOutline]]
== 機能・特徴 ==
blingbling HTMLには次のような機能・特徴があります。シリーズを通しての特徴は[FrontPage blingbling DSL]を参照下さい。
* スクリプトへのテンプレートの埋め込み
* 出力としてDOMを返す
* 埋め込み式や変数を使ったマークアップ
* 自分で開発した要素や属性を使ったレンダリング
* レンダリング結果の補正（アフターフィルター）
* HTMLとの文法上の違いが少なく、ノウハウをそのまま活用できる
== 文法 ==
blingbling HTMLは、HTMLさながらに開始タグ、内容、終了タグを使って記述します。HTMLとの文法上の違いは、タグの記述に山括弧ではなく丸括弧を、属性の記述に角括弧を用いることぐらいで、HTML同様に見やすくインデントすることもできます。ただし、エクステンション（プラグイン拡張）により文法そのものが拡張されている場合はこの限りではありません。以下に、いくつかのサンプルコードを示します。
=== 基本的な書き方 ===
ドキュメントの始まりのHTMLタグでそれがblingbling HTMLで記述されていることを示し、その中に内容を追加していきます。タグの終了は基本的に空タグで表現します。HTMLはインタプリタが提供するグローバル変数 です。
{{{ code javascript
(html)
("div[id=hoge][class=fuga]")()
();
}}}
このコードは以下のJavaScriptコードと等価です。
{{{ code javascript
(function(){
var H = document.createElement("html");
var D = document.createElement("div");
D.setAttribute("id", "hoge");
D.setAttribute("class", "fuga");
H.appendChild(D);
return H.childNodes;
})();
}}}
=== 文章を含める ===
タグの頭に"="をつければ、そのタグをテキストとして解釈します。
{{{ code javascript
(html)
("h1")
("=hello, world")
()
();
}}}
=== 文章の改行 ===
"BR"タグを使うと文章がそこで改行されます。BRをはじめ、LINK、IMGなどの子を持たない要素は終了タグが不要です。
{{{ code javascript
(html)
("=hello, world")("br")
("=blingbling HTMLによる出力")
();
}}}
=== スクリプトの埋め込み ===
"("と")"で囲まれた部分はJavaScriptとして認識されます。グローバルはもちろんスコープ内のすべての変数にアクセスできるので、名前空間を汚染する心配もありません。
{{{ code javascript
var host = location.host;
(function(){
var text = "にようこそ";
(html)
("h1")
("="+host+text)
()
();
})()
}}}
=== 画面出力 ===
blingbling HTMLの出力はDOMNodeListです。ブラウザへ画面結果を出力するためには、DOM APIやjQueryなどのフレームワークを利用し、以下のように記述します。※DOM Documentのロードが完了している事が前提です
DOMを使った例 :
{{{ code javascript
document
.getElementsByTagName("body")
.item(0)
.appendChild((
(html)
("h1")
("=hello, world")
()
()
)[0]);
}}}
jQueryを使った例 :
{{{ code javascript
$("body").html(
(html)
("h1")
("=hello, world")
()
()
);
}}}
== 拡張 ==
blingbling HTMLのインタプリタは、そのほとんどの機能（例えばここまでで紹介した文法の全てもそう）が標準ライブラリ添付のエクステンションとして実装されているので、ディベロッパはこれを追加したり差し替えたりするだけで、自分で開発した要素や独自構文が使用できるようになります。この項では２つのエクステンションを例に、拡張の使い方や実装例を示します。
例 1 : Comment Extension
blingbling HTMLにはいくつかの公認エクステンションがあります。そのひとつ「Comment」は次のような拡張構文を提供します。
{{{ code javascript
(html)
("h1")
("!hello, world") //コメントノードとして解釈される
()
();
}}}
Commentは、コードの頭が"!"で始まっている場合にそのコードをコメントノードとして解釈するエクステンションです。これは次のように実装されています。
{{{ code javascript
(html)
(function(mix){
return (typeof mix == "string"
&& mix.charAt(0) == "!")?
this.appendChild(
document.createComment(mix.slice(1))
): void(0);
})
();
}}}
Commentはインタプリタにビルドするタイプのエクステンションです。ビルドは、jsLexなどのツールを使って次のような手順で行います。
1. blingbling HTMLのリポジトリからインタプリタの開発コードをチェックアウト
1. blingbling HTMLのリポジトリから追加したいエクステンションをチェックアウト
1. 開発コードの中から必要なファイルを選別し、commentとともにビルド
エクステンションは相互に依存しているものもあれば、競合しているものもあるので、正しい順番でそれらをビルドしなければなりません。blingbling HTMLには、限定的ではあるものの、こうしたビルド作業を軽減するための拡張構文も用意されています。
例 2 : DTD Extension
以下のコードは標準ライブラリ添付の「DTD」エクステンションが提供する拡張構文を用いたFUGAレンダラーの実装例です。
{{{ code javascript
(html)
("!ELEMENT FUGA", function(){ //FUGA要素のレンダリングを担う
return this.appendChild(
document.createElement("h1")
);
})
();
}}}
DTDは、新しい要素や属性を登録するためのエクステンションです。新しく登録された要素（この場合はFUGA）は一般的な要素と同じように扱うことができます。
{{{ code javascript
(html)
("fuga") //h1としてレンダリングされる
("=hello, world")
()
();
}}}
DTDで実装されたエクステンション（レンダラー）は、インタプリタの後に<SCRIPT>から読込むだけで使用できます。
{{{ code javascript
<script type="text/javascript" src="/src/blingbling-html.0.9.min.js"></script>
<script type="text/javascript" src="/src/fuga.js"></script>
}}}