Webサイトをつくる時、簡単なニュースの更新だけのためにCMSを組み込むのはちょっと大げさだな〜と感じることはないでしょうか？
今回はそんなときに役立つjquery.csv.jsを紹介いたします。
これを使えばjQueryでCSVデータを分解し取り扱うことが可能になり、ニュース一覧のような繰り返し要素をCSVデータをもとに作りたいときに便利です。
jquery.csv.jsを使ってみよう
それでは早速必要なjsファイルをダウンロード、といきたいところですがどうやら配布元のページが見られなくなっているようなので今回はこちらのページにあるサンプルから使用させていただきました。
1 2 3 4 | <script type="text/javascript" src="jquery.csv.js"></script> <script type="text/javascript" src="sample.js"></script> <ul id="itemlist"></ul> |
まずはHTML上でjquery.csv.jsの読み込み、実際にjQueryの記述を行うファイルの読み込みをします。事前にjquery自体も読み込んでおくことを忘れないようにしましょう。
HTMLにはCSVデータを利用して作成するリストを表示する場所も記述しておきます。上のコードでは ul#itemlist の箇所になります。
実際にCSVデータを利用してHTMLを組み立ててみましょう。先程読み込んだsample.jsに次のような記述をします。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | $(window).load(function () { $.get('./itemlist.csv',function(data){ var csv = $.csv()(data); var itemlist = ''; $(csv).each(function(index){ itemlist += '<li class="list-item">'; itemlist += '<p class="date">' + this[0] + '</p>'; itemlist += '<p class="title"><a href="' + this[1] + '">' + this[2] + '</a></p>'; itemlist += '<p class="body">' + this[3] + '</p>'; itemlist += '</li>'; }) $("#itemlist").append(itemlist); }); }); |
今回はitemlist.csvというファイルを用意してその中のデータを利用しています。データの中身はこんな感じのものを用意しているとしましょう。カンマ区切りで日付、URL、タイトル、本文、のデータになります。
1 2 3 | 2017/08/01,http://sample.jp/news/0801,タイトル1です。,これが8月1日の記事になります。ここは本文です。 2017/08/02,http://sample.jp/news/0802,タイトル2です。,これが8月2日の記事になります。ここは本文です。 2017/08/03,http://sample.jp/news/0803,タイトル3です。,これが8月3日の記事になります。ここは本文です。 |
対象のCSVデータの分解などはjquery.csv.jsが行ってくれるので、あとはそのデータを元にHTMLを構築しています。
うまく行けば次のようなHTMLが表示されるはずです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <ul id="itemlist"> <li class="list-item"> <p class="date">2017/08/01</p> <p class="title"><a href="http://sample.jp/news/0801">タイトル1です。</a></p> <p class="body">これが8月1日の記事になります。ここは本文です。</p> </li> <li class="list-item"> <p class="date">2017/08/02</p> <p class="title"><a href="http://sample.jp/news/0802">タイトル2です。</a></p> <p class="body">これが8月2日の記事になります。ここは本文です。</p> </li> <li class="list-item"> <p class="date">2017/08/03</p> <p class="title"><a href="http://sample.jp/news/0803">タイトル3です。</a></p> <p class="body">これが8月3日の記事になります。ここは本文です。</p> </li> </ul> |
このようにCSVの中身に応じてHTMLを出力してくれるならCMSを導入するよりも手軽ですね。
案件によってはこうした形でお客さまに気軽に更新してもらう仕組みが合うかもしれません。
参考記事
今回は次の記事を参考にさせていただきました。
- 【jquery】csvファイルを読み込んでhtmlのリストを書き出す(jquery.csv.js)
- jQueryでCSVを読み込んでみる
- jQuery でCSVデータを簡単に取り扱える「jQuery CSV」
「ホームページ制作のことは良くわからない…。」シンス株式会社はそんな中小企業の強い味方です。
