jQuery,「ちょっと触れる」からの 1 STEP UP !
デザイン部フロントエンドエンジニアチームです。
javascriptをがっつりとは書かないけれどjQueryくらいならなんとか書ける、
そんな僕みたいな方も増えてきたのではないでしょうか。
スクリプトがかけるとマークアップやファイル管理も効率化できそうなことが増えてきますよね。
そこで、最近僕が業務上で使ってみたjavascript(主にjQuery)をご紹介したいと思います。
原稿をデータ化してのHTML吐き出し！
商品一覧やスケジュール情報などのページを作成するときにある、膨大な原稿量の流し込み作業。
どれだけショートカットキーをマスターしたからといって、原稿をコピーしてHTMLにペーストする単純作業は
早く終わらせてしまいたい…
そのような場合に有用なのが原稿をデータ化してのHTML吐き出し！
並列の情報がたくさんあるコンテンツに画像、文言、リンクを一つ一つコピペするのはナンセンス。
そこで原稿ををjsで読める配列に整形してHTMLを書き出せば、コピペ回数は大幅に減る！はず。
例えば以下のような情報があったとします。
イベント名：hogehogeEvent 実行日：2014/01/01 集合場所：hogehoge駅 集合時間：05:00 定員：20名 料金：2000円
流し込む内容がこれ１つならマークアップ中に入力してしまえばいいのですが、
20件,50件情報があって、且つ静的ページだった場合に
これらをjsで使える形に直してあげると楽に作業ができます。
var dataAry = [{//データの内容
event:'hogehogeEvent'
,date:'2014/01/01'
,place:'hogehoge駅'
,setTime:'05:00'
,capacity:'20'
,fee:'2000円'
},{...},{...},{...
}];
var node='';
$.each(dataAry,function(c){
node += '\n';
node += '\n\t<dt>イベント名</dt><dt>';
node += '\n\t</dt><dd>'+dataAry.event+'</dd><dt>';
node += '\n\t</dt><dt>日時</dt><dt>';
node += '\n\t</dt><dd>'+dataAry.date+'|'dataAry.setTime+'</dd><dt>';
node += '\n\t</dt><dt>集合場所</dt><dt>';
node += '\n\t</dt><dd>'+dataAry.place+'</dd><dt>';
node += '\n\t</dt><dt>定員</dt><dt>';
node += '\n\t</dt><dd>'+dataAry.capacity+'名</dd><dt>';
node += '\n\t</dt><dt>料金</dt><dt>';
node += '\n\t</dt><dd>'+dataAry.fee+'</dd><dt>';
node += '\n</dt></dl>';
});
$('#output').text(node);
<!doctype html><meta charset="UTF-8" /> <textarea id="output"></textarea>
#outputをtextareaタグに設定しておけば簡単にインデント、改行を反映できます！
また、nodeを配列にしておけば、更にそれをループして自由自在に挿入可能！
あっという間にデータを流し込んだHTMLソースを吐き出してくれます。
あとはtextareaの中身をコピーしてHTMLファイルにペーストしてあげればOK!
HTMLにしてハードコーディングしてあげないといけないけど機械的にやりたいときなどに重宝します。
ただし、「最終的なHTMLもjsでデータ吐き出す形にすればいいんじゃね？」という発想から
js完結にしてしまうと、クローラーが単語を引っ張ってくれず痛い目に合うかもしれないので注意下さい！
必要な情報はかならずハードコーディングしてあげましょう。