ホームページ制作・SEO対策 福岡のアイドットデザイン。Webマーケティングのご相談も承ります。

お問い合わせ・ご相談はコチラ

blog

ブログ

jQueryでCSVデータを扱いHTMLを書くのに便利なライブラリ「jquery.csv.js」

| カテゴリー : JavaScript

Webサイトをつくる時、簡単なニュースの更新だけのためにCMSを組み込むのはちょっと大げさだな〜と感じることはないでしょうか?

今回はそんなときに役立つjquery.csv.jsを紹介いたします。
これを使えばjQueryでCSVデータを分解し取り扱うことが可能になり、ニュース一覧のような繰り返し要素をCSVデータをもとに作りたいときに便利です。

jquery.csv.jsを使ってみよう

それでは早速必要なjsファイルをダウンロード、といきたいところですがどうやら配布元のページが見られなくなっているようなので今回はこちらのページにあるサンプルから使用させていただきました。

まずはHTML上でjquery.csv.jsの読み込み、実際にjQueryの記述を行うファイルの読み込みをします。事前にjquery自体も読み込んでおくことを忘れないようにしましょう。

HTMLにはCSVデータを利用して作成するリストを表示する場所も記述しておきます。上のコードでは ul#itemlist の箇所になります。

実際にCSVデータを利用してHTMLを組み立ててみましょう。先程読み込んだsample.jsに次のような記述をします。

今回はitemlist.csvというファイルを用意してその中のデータを利用しています。データの中身はこんな感じのものを用意しているとしましょう。カンマ区切りで日付、URL、タイトル、本文、のデータになります。

対象のCSVデータの分解などはjquery.csv.jsが行ってくれるので、あとはそのデータを元にHTMLを構築しています。

うまく行けば次のようなHTMLが表示されるはずです。

このようにCSVの中身に応じてHTMLを出力してくれるならCMSを導入するよりも手軽ですね。

案件によってはこうした形でお客さまに気軽に更新してもらう仕組みが合うかもしれません。

参考記事

今回は次の記事を参考にさせていただきました。

アイドットデザインのブログはWeb業界の話題に限らず幅広いビジネストピックについて書いています。
よろしければFacebookページのフォローをどうぞ!ビジネスに役立つ情報をお届けします!

福岡のホームページ制作・SEO対策はアイドットデザインまでご相談ください!
インターネット集客やWebマーケティングのご相談も承ります。

お気軽にお問い合わせください!

お見積りやご相談は、メール/お電話にてお気軽にご連絡ください。専属の担当者が丁寧にご対応いたします。