html

ホームページの更新はそれなりに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の知識が必要です。

ウェブ用カレンダーをオンラインで自動作成

ホームページを運営していると、今月のお休みとかイベントの開催日の案内とか、何かとカレンダーを使いたいときがあるよね。そんなとき、いちいちHTMLでカレンダーを作るのはすっごく手間がかかるし、何より面倒（笑）そこで役に立つのが、この「カレンダー作成ツール（自動作成カレンダー屋さん）」というサイト。セルの色、文字色などをそれぞれ指定するだけで、簡単にカレンダーのコードを生成してくれる。

カレンダー作成ツール（自動作成カレンダー屋さん）

例えば、以下のようなカレンダーが瞬時に作れちゃう優れものだ。

ウェブ用カレンダー自動作成ツールの使い方
まず、作成したいカレンダーの年と月を指定して、あとは各項目の背景色、文字色などをそれぞれ好きな色に設定するだけ。最後に、「ソースをクリップボードにコピー」ボタンを押せば、HTMLソースがコピーできるから、自分のホームページのカレンダーを表示したい箇所に、ソースを貼り付けるだけ。

ホームページ作成の仕事をしている人、こぉ～んな便利なもの見逃す手はないよね！是非活用しよう！