TopJavaScriptjQueryプラグイン > 2013年8月
2013年8月21日

JSONデータをHTMLにマッピングできるjQueryプラグイン「JSON2HTML」

August 21,2013 12:03 AM
Tag:[, , ]
Permalink

JSONデータをHTMLにマッピングできるjQueryプラグイン「JSON2HTML」を紹介します。

JSON2HTML
JSON2HTML

1.概要

「JSON2HTML」はJSONデータをHTMLにマッピングするためのHTMLテンプレートエンジンです。

次のようなJSONデータがあるとします。

var data = [
    { 'name': 'A', 'value': 10 },
    { 'name': 'B', 'value': 20 },
    { 'name': 'C', 'value': 30 }
];

たとえば、このJSONデータから次のようなHTMLを出力することができます。

<ul>
    <li>A (10)</li>
    <li>B (20)</li>
    <li>C (30)</li>
</ul>

jQueryプラグインとnode.jsパッケージの2種類が配布されています。

2.ダウンロード

JSON2HTMLのページにアクセスして、「DOWNLOAD for jquery」のリンクをクリック。

JSON2HTMLのページ

「Download jquery.json2html」のリンクをクリック。これでダウンロードが開始するので任意のフォルダに保存します。

Download

githubからダウンロードすることも可能です。

jquery.json2html

3.基本的な使い方

jQuery版の場合、jQueryとダウンロードしたjson2html.jsおよびjquery.json2html.jsを読み込みます。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="json2html.js"></script>
<script src="jquery.json2html.js"></script>

冒頭のサンプルのJSONデータをHTMLにマッピングさせるには、次のように記述します。

<script>
var data = [
    { 'name': 'A', 'value': 10 },
    { 'name': 'B', 'value': 20 },
    { 'name': 'C', 'value': 30 }
];
var transform = {'tag':'li','html':'${name} (${value})'};
$(function(){
    $('#list').json2html(data, transform);
});
</script>
<ul id="list"></ul>

HTMLにマッピングさせるための変数transformを設定します。'tag'の値に生成するHTML要素名、htmlに要素の内容としてJSONデータを指定します。

var transform = {'tag':'li','html':'${name} (${value})'};

あとは、指定した要素にjson2html()を使って実行します。

$('#list').json2html(data, transform);

第1パラメータにJSONデータ、第2パラメータにマッピングデータを指定します。

サンプル1

4.JSONデータをid属性とclass属性に設定する

JSONデータをid属性とclass属性の値として設定するには、マッピングデータに'id'や'class'を利用します。

<script>
var data = [
    { 'id': 'A', 'class': 'x', 'value': 10 },
    { 'id': 'B', 'class': 'y', 'value': 20 },
    { 'id': 'C', 'class': 'z', 'value': 30 }
];
var transform = { tag: 'div',
                  id: '${id}',
                  class: '${class}',
                  html: '${value}'
                };
$(function(){
    $('#list').json2html(data, transform);
});
</script>
<div id="list"></div>

このサンプルでは次のHTMLマークアップを出力します。

<div id="list">
  <div id="A" class="x">10</div>
  <div id="B" class="y">20</div>
  <div id="C" class="z">30</div>
</div>
サンプル2

5.HTMLを入れ子にする

3項のJSONデータのHTMLを入れ子にするには、変数transformに'children'を与えます。

var transform = 
    tag:'li', children:[
        { tag: 'h3', html: '${name}'},
        { tag: 'div', html: '(${value})'}
    ]
};

これで、li要素の子要素として次のようなHTMLマークアップを出力します。

<ul id="list">
  <li>
    <h3>A</h3><div>(10)</div>
  </li>
  <li>
    <h3>B</h3><div>(20)</div>
  </li>
  <li>
    <h3>C</h3><div>(30)</div>
  </li>
</ul>
サンプル3

6.入れ子になっているJSONデータをマッピングさせる

やや複雑ですが、入れ子になっているJSONデータをマッピングさせることも可能です。

サンプルを以下に示します。

<script>
var data = [{ Name: 'Parent1', Children:[ { Name:'Child1' },{ Name:'Child2' } ]},
            { Name: 'Parent2', Children:[ { Name:'Child3' },{ Name:'Child4' } ]}];
 
var transform_parent = [
    { tag: 'h3', html: '${Name}' },
    { tag: 'ul', children: function(obj){ return(json2html.transform(obj.Children, transform_child)); }}
    ];
var transform_child = 
    { tag:'li', children:[
        { tag: 'span', html: '${Name}' }
    ]};
 
$(function(){
    $('#list').json2html(data , transform_parent);
});
</script>
<div id="list"></div>

解説です。

JSONデータは次のような配列とハッシュの入れ子になっています。

var data = [{ Name: 'Parent1', Children:[ { Name:'Child1' },{ Name:'Child2' } ]},
            { Name: 'Parent2', Children:[ { Name:'Child3' },{ Name:'Child4' } ]}];

マッピングデータは親と子の2つを用意します。親のマッピングデータはName部分のみを定義し、入れ子になっているデータは'children'の中でコールバックで呼び出します。

var transform_parent = [
    { tag: 'h3', html: '${Name}' },
    { tag: 'ul', children: function(obj){ return(json2html.transform(obj.Children, transform_child)); }}
    ];

そして子のマッピングデータは通常の定義を行います。

var transform_child = 
    { tag:'li', children:[
        { tag: 'span', html: '${Name}' }
    ]};

最後にjson2html()で第2パラメータに親のマッピングデータを指定します。

$('#list').json2html(data , transform_parent);

このサンプルでは次のHTMLを出力します。

<div id="list">
  <h3>Parent1</h3>
  <ul>
    <li><span>Child1</span></li>
    <li><span>Child2</span></li>
  </ul>
  <h3>Parent2</h3>
  <ul>
    <li><span>Child3</span></li>
    <li><span>Child4</span></li>
  </ul>
</div>
サンプル4

7.補助ツール

テンプレートエンジン的にはちょっと使いにくいかもしれないプラグインですが、補助ツールとして「Transform Builder」がトップページ下に用意されています。

Transform Builder
Transform Builder

左側のテキストエリアに実現したいHTMLマークアップとマッピングさせたいJSONデータを記述すれば、マッピングデータを右側のテキストエリアに出力します。

Comments [0] | Trackbacks [0]
2013年8月 6日

ローディング画面を簡単に表示できるjQueryプラグイン「BlockUI」

August 6,2013 1:55 AM
Tag:[, ]
Permalink

イベント発生時にオーバーレイやメッセージ・ローディング画像といった、いわゆるローディング画面を簡単に表示できるjQueryプラグイン「BlockUI」を紹介します。

BlockUIによるローディング画面
BlockUI

1.機能

「BlockUI」は、例えばあるイベントが発生したときにオーバーレイやメッセージ・ローディング画像などを表示させる見栄えの変更とともに、ユーザーがページを操作できないようにブロックするプラグインです。

フォームの投稿直後など、ユーザーが操作できないようブロックしたいときに有効です。

サンプルを用意したのでご利用ください。サンプルに表示されているフォームボタンをクリックすると2秒ほどUIがブロックされます。

サンプル

ページ全体のブロックだけでなく、特定の要素をブロックすることも可能です。

またブロック中はメッセージの他に、モーダルダイアログを表示することも可能です。

2.プラグインのダウンロード

BlockUI」のサイトにアクセスして、「Download and Support」のタブをクリック。

BlockUIのサイト

「jquery.blockUI.js」のリンクを右クリックしてファイルを「jquery.blockUI.js」というファイル名で保存します。

ダウンロード

githubからもダウンロード可能です。

3.基本的な使い方

jQueryと、ダウンロードしたjquery.blockUI.jsを読み込みます。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.blockUI.js"></script>

イベント発生時にブロックを開始したい場合は、次のように「blockUI()」を記述します。

<script>
$(function(){
    $('#foo').click(function(){
        $.blockUI();
    });
});
</script>
<input type="button" id="foo" value="click" />

ブロックを解除したい場合は、次のように「unblockUI()」を記述します。

<script>
$(function(){
    $('#foo').click(function(){
        $.blockUI();
        setTimeout($.unblockUI, 2000);
    });
});
</script>
<input type="button" id="foo" value="click" />

上記のサンプルではsetTimuout()を使ってブロック解除を行っていますが、実用的なサンプルとしては下のコードのようにコールバックで行うのが適切かと思います。

<script>
$(function(){
    $('#foo').click(function(){
        $.blockUI();
        $.ajax({
            url: "foo.cgi",
        }).done(function() {
            // ...
        }).always(function() {
            $.unblockUI();
        });
    });
});
</script>
<input type="button" id="foo" value="send" />

4.特定の要素をブロックする

特定の要素をブロックするには、blockUI()実行時に要素を指定するだけです。

$('#foo').blockUI();

要素を指定してブロックした場合、unblockUI()にも同じ要素を指定します。

$('#foo').unblockUI();

5.モーダルウィンドウを表示する

モーダルウィンドウを表示するには、モーダルウィンドウを表示する要素をページ上に作成しておき、blockUI()でその要素を指定します。

<script>
$(function(){
    $('#bar').click(function() {
        $.blockUI({ message: $('#foo') });
    }); 
    $('#yes').click(function() {
        $.unblockUI();
        // ...
    }); 
    $('#no').click(function() {
        $.unblockUI();
        return false;
    }); 
}); 
</script>
<div id="foo" style="display:none; cursor: default"> 
    <p>処理を続けますか?</p> 
    <input type="button" id="yes" value="はい" /> 
    <input type="button" id="no" value="いいえ" /> 
</div>
<input type="button" id="bar" value="送信" /

なお上記の例では「はい」「いいえ」に対する処理も実装する必要があります。

6.オプション

BlockUIには多くのオプションが用意されています。ここでは主なものをいくつか紹介します。

message
ブロック中のメッセージを設定します。

css
ブロック中のメッセージ部分のスタイルを設定します。

css: { 
    padding: 0, 
    margin: 0, 
    width: '30%', 
    top: '40%', 
    left: '35%', 
    textAlign: 'center', 
    color: '#000', 
    border: '3px solid #aaa', 
    backgroundColor:'#fff', 
    cursor: 'wait' 
} 

showOverlay
オーバーレイを行いたくない場合は「false」を設定します。

overlayCSS
オーバーレイのスタイルを設定します。

overlayCSS:  { 
    backgroundColor: '#000', 
    opacity: 0.6, 
    cursor: 'wait' 
}

fadeIn
オーバーレイのフェードイン時間をmsで設定します。

fadeOut
オーバーレイのフェードアウト時間をmsで設定します。

オプションはblockUI()に設定します。サンプルは以下のようになります。

$.blockUI({
    message: text,
    fadeIn: 200,
    fadeOut: 0,
    overlayCSS:  {
         backgroundColor: '#aaa',
         opacity: 0.6,
         cursor: 'wait'
    },
    css: {
        padding: '30px 0 0 0',
        margin: 0,
        height: '50px',
        width: '250px',
        border: '2px solid #aaa',
    }
});
Comments [0] | Trackbacks [0]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3