新人デザイナーじゃなくても知ってれば楽できるExcelを使ったHTML生成

10年前にMS Accessでホームページを作っていた男・うかです、こんにちわ。

今朝ツイッターを見ていたら、「エクセルでHTMLを生成する方法」が書かれた記事が流れてきました。私も時折、エクセルでHTMLを生成することがあるんですが、そのやり方をご紹介。

猫、パソコンに興味があるようです。

ネタ元サイトのご紹介

この記事のネタ元となっているのが、ウェブロケッツマガジンのこの記事。

めんどうな作業がわずか数秒に!新人デザイナーが 知らないと一生後悔するExcelを使ったHTML生成
面倒な作業が、わずか数秒で終わります!

わずか数秒ってのは言いすぎですが、Excelを使うと非常に楽です。この記事では、

  1. データ元となるエクセルファイルを用意
  2. 列を挿入してHTMLコードを入力
  3. テキストエディタにまるっとコピペ
  4. 空白(タブ)を文字置換で消去

という流れでHTMLを生成してますが、私はちょっと違う方法でやってるので、以下、その手順です。

うか流・ExcelでHTMLを生成する方法

サンプル

このようなExcelファイルのデータから、

ExcelでHTML生成:元データ

次のようなHTMLを生成します。

<dl>
	<dt>マリンピア日本海</dt>
	<dd>
		<span class="address">新潟県新潟市中央区西船見町5932-445</span>
		<span class="telno">025-222-7500</span>
	</dd>
</dl>

このサンプルHTMLのうち、<dl></dl>の間の部分をExcelで生成します。

1) 列の追加

まず、Excelシートに、HTMLタグを入力するための「列」を追加します。ここでは、C列とE列を追加し、A、C、E、G列にHTMLタグを入力します。

ExcelでHTML生成:列の追加

2) HTMLタグの入力

HTMLタグを入力するために用意したA、C、E、G列に、次のように入力します。

ExcelでHTML生成:HTMLタグの入力

入力内容
A列 <dt>
C列 </dt><dd><span class="address">
E列 </span><span class="telno">
G列 </span></dd>

3) 全行にコピー

データ1行目(サンプルの5行目)にが書けたら、全行にコピー。A、C、E、G列とも、データの最終行までコピーします。

ExcelでHTML生成:全行にコピー

ちなみに、データが連続して入力されている場合、コピーしたいセルを選択して右下の■部分をダブルクリックすると、一発で最終行までコピーできます。

4) 各セルを「&」で繋ぐ

A、C、E、G列、全て最終行までコピーできたら、それぞれを繋ぐための数式をH列に入力します。

ExcelでHTML生成:各セルを「&」で繋ぐ

入力内容
H列 =A5&B5&C5&D5&E5&F5&G5

セルを「&」で繋ぐことで、それぞれの値を続けて表示できるんですが、こうすることでA~G列そぞれに入力したHTMLタグとデータを1行に繋ぎ合わせることができます。

1つ目のセルに入力できたら、前記3)同様、最終行までコピーします。

ExcelでHTML生成:数式をコピー

5) テキストエディタにコピペ

前記4)で作成したHTMLタグとデータを繋ぎ合わせた部分(H列)をコピーします。

ExcelでHTML生成:データをコピー

それをテキストエディタに貼り付ければ、HTMLコードのできあがり。

ExcelでHTML生成:テキストエディタに貼り付け

最後に、貼り付けたHTMLタグ+データの前後を<dl></dl>で括れば、最初のサンプルの通りとなります。

6) 完成!

できあがったHTMLタグ+データを、必要な場所にコピペすれば、あら簡単、ExcelデータからのHTML生成が完成です。

データが多いと非常に楽なExcelによるHTML生成

プログラムが書ける方は、データをCSVファイルにしたりDBに突っ込んだりして、プログラムで生成すればいいんでしょうけど、そうもいかない私のような場合、データが多くなるとこの方法が威力を発揮します。

ネタ元の記事との違いは、最後に空白(タブ)を削除することでHTMLタグとデータを繋げる(ネタ元)か、Excel上で繋げてそのままコピペするか(うか流)。

どちらでも結果は同じなので、やりやすい方法でどうぞ。

また、この方法は、サンプルのdl/dt/ddタグ以外にも、

<table>
	<tr>
		<th>データ</th>
		<td>データ</td>
	</tr>
</table>

や、

<ul>
	<li>
		<a href="URLデータ">アンカーテキスト</a>
	</li>
</ul>

なんかにも応用でき、手入力するのに比べてはるかに短時間でHTMLを生成することができます。

とゆーことで、めんどくさい作業は、さっさと終わらせてしまいましょう!

【参考】
めんどうな作業がわずか数秒に!新人デザイナーが 知らないと一生後悔するExcelを使ったHTML生成