blingbling_HTML - blingbling DSL Wiki - blingbling DSL

blingbling HTML

blingbling HTMLは、JavaScript向けのHTML規格です。blingbling DSLシリーズのひとつで、HTMLでできることの大部分を実現できる他、PHPスタイルの埋め込み式や、拡張タグを使ったマークアップにも対応しています。

Outline

1. blingbling HTML
   1. 機能・特徴
   2. 文法
      1. 基本的な書き方
      2. 文章を含める
      3. 文章の改行
      4. スクリプトの埋め込み
      5. 画面出力
   3. 拡張

機能・特徴

blingbling HTMLには次のような機能・特徴があります。シリーズを通しての特徴はblingbling DSLを参照下さい。

• スクリプトへのテンプレートの埋め込み
• 出力としてDOMを返す
• 埋め込み式や変数を使ったマークアップ
• 自分で開発した要素や属性を使ったレンダリング
• レンダリング結果の補正（アフターフィルター）
• HTMLとの文法上の違いが少なく、ノウハウをそのまま活用できる

文法

blingbling HTMLは、HTMLさながらに開始タグ、内容、終了タグを使って記述します。HTMLとの文法上の違いは、タグの記述に山括弧ではなく丸括弧を、属性の記述に角括弧を用いることぐらいで、HTML同様に見やすくインデントすることもできます。ただし、エクステンション（プラグイン拡張）により文法そのものが拡張されている場合はこの限りではありません。以下に、いくつかのサンプルコードを示します。

基本的な書き方

ドキュメントの始まりのHTMLタグでそれがblingbling HTMLで記述されていることを示し、その中に内容を追加していきます。タグの終了は基本的に空タグで表現します。HTMLはインタプリタが提供するグローバル変数 です。

 (html)
         ("div[id=hoge][class=fuga]")()
 ();

このコードは以下の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;
 })();

文章を含める

タグの頭に"="をつければ、そのタグをテキストとして解釈します。

 (html)
         ("h1")
                 ("=hello, world")
         ()
 ();

文章の改行

"BR"タグを使うと文章がそこで改行されます。BRをはじめ、LINK、IMGなどの子を持たない要素は終了タグが不要です。

 (html)
         ("=hello, world")("br")
         ("=blingbling HTMLによる出力")
 ();

スクリプトの埋め込み

"("と")"で囲まれた部分はJavaScriptとして認識されます。グローバルはもちろんスコープ内のすべての変数にアクセスできるので、名前空間を汚染する心配もありません。

 var host = location.host;
 (function(){
         var text = "にようこそ";
         (html)
                 ("h1")
                         ("="+host+text)
                 ()
         ();
 })()

画面出力

blingbling HTMLの出力はDOMNodeListです。ブラウザへ画面結果を出力するためには、DOM　APIやjQueryなどのフレームワークを利用し、以下のように記述します。※DOM Documentのロードが完了している事が前提です

DOMを使った例 :

 document
         .getElementsByTagName("body")
                 .item(0)
                         .appendChild((
                                 (html)
                                         ("h1")
                                                 ("=hello, world")
                                         ()
                                 ()
                         )[0]);

jQueryを使った例 :

 $("body").html(
         (html)
                 ("h1")
                         ("=hello, world")
                 ()
         ()
 );

拡張

blingbling HTMLのインタプリタは、そのほとんどの機能（例えばここまでで紹介した文法の全てもそう）が標準ライブラリ添付のエクステンションとして実装されているので、ディベロッパはこれを追加したり差し替えたりするだけで、自分で開発した要素や独自構文が使用できるようになります。この項では２つのエクステンションを例に、拡張の使い方や実装例を示します。

例 1 : Comment Extension

blingbling HTMLにはいくつかの公認エクステンションがあります。そのひとつ「Comment」は次のような拡張構文を提供します。

 (html)
         ("h1")
                 ("!hello, world") //コメントノードとして解釈される
         ()
 ();

Commentは、コードの頭が"!"で始まっている場合にそのコードをコメントノードとして解釈するエクステンションです。これは次のように実装されています。

 (html)
         (function(mix){
                 return (typeof mix == "string"
                         && mix.charAt(0) == "!")?
                         this.appendChild(
                                 document.createComment(mix.slice(1))
                         ): void(0);
         })
 ();

Commentはインタプリタにビルドするタイプのエクステンションです。ビルドは、jsLexなどのツールを使って次のような手順で行います。

1. blingbling HTMLのリポジトリからインタプリタの開発コードをチェックアウト
2. blingbling HTMLのリポジトリから追加したいエクステンションをチェックアウト
3. 開発コードの中から必要なファイルを選別し、commentとともにビルド

エクステンションは相互に依存しているものもあれば、競合しているものもあるので、正しい順番でそれらをビルドしなければなりません。blingbling HTMLには、限定的ではあるものの、こうしたビルド作業を軽減するための拡張構文も用意されています。

例 2 : DTD Extension

以下のコードは標準ライブラリ添付の「DTD」エクステンションが提供する拡張構文を用いたFUGAレンダラーの実装例です。

 (html)
         ("!ELEMENT FUGA", function(){　//FUGA要素のレンダリングを担う
                 return this.appendChild(
                                 document.createElement("h1")
                 );
         })
 ();

DTDは、新しい要素や属性を登録するためのエクステンションです。新しく登録された要素（この場合はFUGA）は一般的な要素と同じように扱うことができます。

 (html)
         ("fuga") //h1としてレンダリングされる
                 ("=hello, world")
         ()
 ();

DTDで実装されたエクステンション（レンダラー）は、インタプリタの後に<SCRIPT>から読込むだけで使用できます。

 <script type="text/javascript" src="/src/blingbling-html.0.9.min.js"></script>
 <script type="text/javascript" src="/src/fuga.js"></script>