ホームページビルダー・グレート初心者講座

　csv2tableでCSVファイルを読み込んで表を出力する

csv2tableについて

csv2tableはjQueryのプラグインで、Excelなどで出力できるCSVファイルを読み込み、
並び替え可能な表を出力してくれるjQueryのプラグインです。
設定後は読み込むCSVファイルを更新するだけで表の内容に反映される為とても便利です。

サンプル

以下のサンプルは Book1.csv を読み込んで表を出力しています。
最上部の題名セルをクリックすると各項目を並び替えできます。

ダウンロード

以下のサイトからcsv2tableをダウンロードします。

csv2table
https://plugins.jquery.com/project/csv2table

赤枠で囲われたzipファイルへのリンクをクリックして下さい。

備考

「Download」のリンクはソースコード単体へのリンクです。
zipファイルのリンクはテーブル内で利用する矢印画像などが同梱されたもので、
それらも使用しますので、zipファイルをダウンロードして下さい。

csv2table-0.02-b-2.8.zip にある数字はバージョン番号です。
新しいバージョンの場合は上記スクリーンショットと数字等が異なりますが問題ありません。

解凍と配置

ダウンロードしたzipファイルを解凍すると「img」ディレクトリと、「js」ディレクトリが
出てきますので、これをディレクトリごとHTMLファイルと同じディレクトリにコピーします。

コピーした「js」ディレクトリに移動し、

jquery-1.3b2.js を jquery.js にリネームし、
jquery.csv2table-0.02-b-2.8.js を jquery.csv2talbe.js にリネームします。

備考

ファイル名の変更（リネーム）は説明の都合上行ったものです。
次項タグの挿入でバージョン番号を含めて指定すれば、リネームの必要はありません。

ヘッダにタグを追加

ビルダーの「編集」 → 「ページの属性」とクリックし「その他」のタブをクリックします。

「その他のHTMLタグ」と記載された入力枠がありますので、そこへ以下のソースを追加します。
追加したら「OK」ボタンをクリックして下さい。

備考

直接HTMLソースに追記する場合は <head> ～ </head> の間に追加します。
jQueryが設置済みの場合は最上部の1行を除いた行を追加して下さい。

「HTMLソース」に切り替えて先ほど貼り付けたソース（最上部あたりにあります）の
赤枠部分を修正します。

次項で表を出力する場所にレイアウト枠<div>を挿入してIDを付けますが、
これと同じIDを指定して下さい。
よく分からない場合は例と同じ sample1 で結構です。

Book1.csv となっている箇所は読み込むCSVファイル名を指定します。
今回はHTMLファイルと同じ場所にCSVファイルを配置したのでファイル名だけ指定します。

レイアウト枠 <div> の設置

表を配置したい場所を左クリックしてカーソルを表示させます。

「挿入」 → 「その他」 → 「HTMLタグ」とクリックします。

「DIV」をクリックして「挿入」、「閉じる」をクリックします。

すると以下のようにレイアウト枠が挿入され、選択された状態になります。

上記の状態のまま「編集」 → 「スタイルの設定」とクリックし、
「定義済みIDの指定(1)」のフォームに前項で修正したIDを入力します。
sample1 のまま変更していない場合はここも sample1 と入力します。

備考

直接HTMLソースを編集する場合は <div id="sample1"></div> を挿入します。
idはヘッダ内に貼り付けたソース内のid（#sample1の箇所）と同じものにします。

CSVファイルの用意

Excelなどで作成しておき、出力する際に CSV（カンマ区切り）で出力します。

CSVファイルはHTMLファイルと同じディレクトリに配置しておきます。

サンプルで使用したCSVファイルは以下のものです。
https://aimix.jp/Book1.csv

動作の確認

以上の操作でレイアウト枠を入れた箇所に表が出力されます。
「プレビュー」画面に切り替えて動作確認を行ってみましょう。

動作しない場合は？

文字コードが異なっている場合

HTMLファイルと jquery.csv2table.js の文字コードが異なっている場合、
「プレビュー」の際などにエラーとなってしまいます。

jquery.csv2table.js はダウンロード時に UTF-8 ですので、HTMLファイルをUTF-8 にするか、
jquery.csv2table.js側をHTMLファイルの文字コードに合わせてやる必要があります。

HTMLファイル側を変更する場合は「ファイル」 → 「名前を付けて保存」から「出力漢字コード」を
jquery.csv2table.js と同じ漢字コードにします。
テキストエディタ TeraPad の場合 jquery.csv2table.js 側の文字コードを確認するには、TeraPadで
jquery.csv2table.js を開き「ファイル」 → 「文字コード指定再読み込み」をクリックして、選択状態（灰色）
になっている漢字コードを確認します。

jquery.csv2table.js側を変更する場合は上記TeraPadの場合、
「ファイル」 → 「文字/改行コード指定保存」から漢字コードを指定して保存します。

文字化けしてしまう場合

出力はできるものの、文字が下のように化けてしまう場合、CSVファイルの文字コードが
HTMLファイルと異なっている可能性があります。

テキストエディタ TeraPad で文字コードを変更する場合は、
「ファイル」 → 「文字/改行コード指定保存」から文字コードを指定して保存します。
大抵の場合は Shift-JIS か UTF-8 ですので、どちらかで保存して確認して下さい。

表内の画像が×印になっている場合

jquery.csv2table.js が置かれているディレクトリ内に img ディレクトリがあり、
その中に icon-n.gif などが配置されている必要があります。

ソースコードだけダウンロードした場合は以下のページから .zip ファイルもダウンロードします。
配布されているzipファイル内にこれらの画像が同梱されています。

csv2table
https://plugins.jquery.com/project/csv2table