jquery

ホームページの更新はそれなりにHTMLの知識などが必要なわけですが、まったくHTMLの知識が無いお客様からの要望で簡単に更新できないか良く相談を受けることがあります。更新と言っても、その内容は様々な訳ですが、今回は、簡単にHTML内に表組みを挿入できる、更新の方法を紹介しましょう。

外部CSVをHTML内でテーブル表示させる方法
簡単な流れは、Excelなどで作った表を元に、CSV形式のファイルを作成し、Jquery+プラグインを使用して実現します。

1. 必要なファイルの入手
まず最初に、以下の2つのファイルを入手します。（※以下のリンク先よりダウンロードできます。）

1. jquery.js
2. jquery.csv2table.js

2. 表の作成
Excelを使用して、出力したい表を作成します。最初の行には、見出しになる項目を設定してください。2行目以降はそれぞれのデータを入れます。

3.CSV形式で保存
Excelで作成した表をCSV形式で保存します。まず最初に、表を表示させるHTMLファイルと同じ階層に「data」という名前で新しいフォルダを作成します。次に、CSVで保存します。「ファイル＞名前を付けて保存」を選択し、「ファイルの種類（T)」の箇所で「CSV（カンマ区切り）（*.csv）」を選択します。

4. 既存のHTMLファイルの設定
HTMLのヘッダー内に、手順1でダウンロードしたJSファイル（jquery.jsとjquery.csv2table.js）を読み込むための記述をします。

<script type=”text/javascript” src=”js/jquery.js”></script>
<script type=”text/javascript” src=”js/jquery.csv2table.js”></script>

5. 表出力のための設定
HTML内の作成した表を表示したい箇所に、作成したCSVファイルの読み込みのための設定をします。HTMLの表を表示させたい箇所に以下のように記述をします。

<div id=”view1″></div>
<script>
$(function(){
$(’#view1′).csv2table(’./data/whatsnew.csv’);
});
</script>

以上で設定完了です。

補足事項

1. HTMLの文字コードにUTF-8を使用している場合は、手順3でCSVに書き出したファイルでは2バイト文字（日本語）は文字化けしてしまします。これを改善するには、一度書き出したCSVファイルをメモ帳で開き、内容はそのままで「名前を付けて保存」を選択、文字コードの欄の「ANSI」となっている箇所を、「UTF-8」に変更して保存します。
2. 表のデザインをカスタマイズするには、「jquery.csv2table.js」をメモ帳などで開き、任意の箇所を書き換えることで変更できます。ただし、HTMLとCSSの知識が必要です。

スムーズスクロールは格好いいけど・・・
ホームページの1ページが縦長になってしまう場合、ページ内リンクを設置して、より情報を探しやすくする手法はよく用いられますね。単なるページ内リンクをするだけなら誰でも簡単に導入できるわけですが、ちょっとでも格好良く見せたいところです。そこで、良く使われるのがJqueryと「smooth.pack.js」を使ったスムーズスクロールの方法があるわけです。

スムーズスクロール「smooth.pack.js」の問題点
スムーズスクロールを実現するのに、あちこちのサイトでよく使われているのが「smooth.pack.js」というものだと思いますが、実はこの方法にはちょっと問題があります。このスクリプトでは、nameタグを使用してページ内の任意の位置にスクロールさせるわけですが、この方法では、現在のホームページ作成に求められる「ウェブ標準」の仕様に反する手法になっています。ウェブ標準ではXHTMLでコーディングするんですが、XHTMLではname属性だけのアンカーは使えないんですね（厳密には推奨されていないというべきか・・・）。

そこで取られてきた方法として、アンカーに以下のように記述する方法があります。

<a name=”top” id=”top”></a>

しかし、どうもスマートじゃないですね～。実際には推奨されていないname属性も使われているわけだし・・・。

ウェブ標準に準拠したXHTML対応版スムーズスクロール
そこで、あちこちググって探し回ってみたところ、「smooth.pack.js」の変わりになるものを見つけました。
http://coliss.comに「Page Scroller ver.3」なるものがあり、このスクリプトではid属性を使用してスムーズスクロールを実現できます。これにより、XHTMLにも準拠した正規の記述方法でページ内リンクをスムーズスクロールさせることが可能になります。

設置方法は簡単で、ヘッダー内に「Jquery」と「page-scroller.js」を読み込むためのタグを挿入するだけです。みなさんも是非使ってみてください。

★Jquery関連オススメBook