コラムColumn

表組みのコーディング時間を大幅短縮!

はじめまして、こんにちは。meです。
コーディング作業が大好きで、2000年からWeb業界に身を置いてます。
業界歴の長さだけはKAIDO GROUP 宇都宮でダントツ。
作業中のひとりごとが多いタイプのコーダーです。

コツコツとコードを書くことは大好き。
でも、口癖のひとつに「面倒くさい!」がある面倒くさがりやでもあります。
そんな私が、作業時間を短縮するためにしていることの1つをご紹介。
表組みのコーディング時間を大幅短縮する方法
me_1509a_mv

Excelデータなどで支給された表組みをコーディングする場合、1つ1つのセルのデータをエクセルからコピペ、などという非常に手間のかかる方法を取っている方、いませんか!?

今回、「オープンデータ・ベリーとちぎ」で提供されている「栃木県の人口(月報)2015年8月」のcsvデータを、表組みをつくる際に使用しています。
(こんなデータが提供されるサイトが出来てるなんて知らなかった!)

Dreamweaverの「ライブ」編集画面に
エクセルからまるごとコピペ

me_1509a_02csvデータをダウンロードしてエクセルで開くと
こんな画面になります。データ部分をまるごと選択して、
Dreamweaverの「ライブ」の編集画面に丸ごとコピペ。
me_1509a_03全てのセルを <td> とした table が出来上がりました。
width=”77″ などの部分は、表組みのデザインに合わせて削除するなり、classをあてるなり、修正すればあっという間に表組みが完成。
しかし。
表の意味を考えるとエクセルの1行目(市町村名〜世帯数(世帯))とA列(各市町村名)に関しては見出しの <th> にしたいし、見やすさを考えると1行目とA列とは背景色などデザインを変えたい。
全てのセルが <td> なのはちょっと困る。
そして、それを1つ1つ修正していくのは、ちょっと面倒な作業。

そこで

Execl上でコードを書こう

上でDreamweaverを使った方法を紹介していますが、Dreamweaverなどの便利な制作用のソフトが誕生する前からコーダーをしているmeがコーディング時に使っているのは未だにちょっとだけ便利な機能のあるテキストエディタです。
そうなると、表組みも全て手打ちやらデータのコピペやらでちまちまと作業していく必要があります。
表組みをコーディングする際に、データをセルごとにコピペして行く方法は、手間ももちろんかかりますが、ミスもとても起きやすい方法でもあります。
ExcelからDWにコピペで完成☆なんて方法がなかった頃から、表組みをコーディングするときにミスを減らすために考えた方法がこれ。

Excel上でコードを書いてしまうんです。

me_1509a_04Excelにはセルのデータを「下方向へコピー」という便利な機能があるので、一旦、頭の中でどういうふうにコーディングするかを整理出来れば数パターンの<tr>や<th><td>の組み合わせを書いて、あとはExcel「下方向へコピー」などで全行にコピー作業するだけ。

今回だとこの表組みに必要なHTMLタグは

<table>
<tr><th>
</th><th>
</th></tr>
<tr><th class="city">
</th><td>
</td><td>
</td></tr>
</table>

このパターンのみになります。

そしてこのコード込みのExcel上の記述部分をまるごと選択して、テキストエディタやDreamweaverの「コード」の編集画面にコピペ。

me_1509a_05ペーストしたデータには、「タブ」が含まれてしまっていますので、一括置換等で「タブ」を削除した後、データの最初に
<table>、最後に</table>を追加して、データを整形してください。
Dreamweaverなら「ソースフォーマットの適用」をすれば、きれいなネスト(入れ子)構造に書き換えてくれます。
これにcssを当てれば、表組みの出来上がりです。
完成した表組みのサンプル

おわりに

表組み以外にも、Excelを使ってコーディングの時間が大幅短縮出来るシーンはあります。

コーディングに使えるのは、
DreamweaverなどのWebオーサリングツールや、テキストエディタだけじゃない。

ということを頭の隅に入れておくと、
より楽しく早くコーディングが出来る方法が見つかるかもしれません。

HTML / コーディング / Excel / 時短

執筆者:ブログ担当

お問い合わせフォーム