実務でよくあるのが、「このリストの内容をページ内に全部並べて」というもの。
リストの形式は様々で、エクセル・PDF・テキストで箇条書き などなど…
並べ方の形式も同様に、テーブル・リンク・複雑なモジュール などなど…
数十件、数百件にもおよぶリストを一つずつコピペ。時間もかかるしミスもしやすい。何より単調でツマラナイ。
そんな時はエクセルを使ってリストからHTMLを生成しちゃいましょう。もちろんスプレッドシートでもかいません。
本記事はスプレッドシートを使用して説明します。
ステップ① 表を作成する
まずは受領したリストの内容をエクセルで表にしましょう。
元からエクセル・スプレッドシートでリストを受領している場合はここはスキップしてOKです。
シートの作成
まずは新規のエクセル・スプレッドシートを作成しましょう。
以下のように1行目には項目名、1列目には連番を入れておくと扱いやすいです。
入力し終えたら表内のいずれかのセルを選択したうえで 表示形式 > テーブルに変換 を選択し、テーブル化しておきましょう。
ステップ② ベースHTMLを作成する
テーブルの内容をどのような形でページ上に表示するか、ベースのHTMLを作成しましょう。
この記事ではHTMLのtableをベースとしてみます。
| ID | 商品名 | 仕入れ業者 | 仕入れ価格 | 販売価格 |
|---|---|---|---|---|
| 1 | りんご | A社 | 100円 | 200円 |
こちらのHTMLコードは以下です。
<figure class="wp-block-table">
<table class="has-fixed-layout">
<thead><tr><th>ID</th><th>商品名</th><th>仕入れ業者</th><th>仕入れ価格</th><th>販売価格</th></tr></thead>
<tbody>
<tr><td>1</td><td>りんご</td><td>A社</td><td>100円</td><td>200円</td></tr>
</tbody>
</table>
</figure>このコードをベースにスプレッドシート内のテーブルをそのままHTML化したいなら、全ての行の<tr><td>1</td><td>りんご</td><td>A社</td><td>100円</td><td>200円</td></tr>のコードさえ作ってしまえばいいわけです。
ステップ③ ベースHTMLを張り付けて分解
スプレッドシートに新しいシート「ベースHTML」を追加し、ステップ②で作成したHTMLコードを張り付けてください。
このHTMLを少し整形します。対象は量産が必要な行、今回は5行目が対象です。
以下のように行によって内容が変わる部分と、変わらない定型部分で複数行に分解します。
内容が変わる部分はわかりやすいようにテーブルの列名を入れておくとよいでしょう。
わかりやすいように色付けしてますが、必須では必要ありません。
ステップ④ コードを生成する
いよいよベースコードを元にコードを生成していきます。
「データ」シートのテーブル右端に新しい列を追加します。今回は生成HTMLという列名にしておきます。
生成HTMLの1行目、空のセルに対してベースHTMLとテーブルの中身を&でつなげるだけの関数を作成することでHTMLを生成していきます。
ポイントとしては、ベースHTMLのセルは共通のため、F4キーを押して$A$5のように固定化すること。
表のセルは表名称[列名]の形で指定してあげると今後のカスタマイズもしやすいです。
今回は以下のような関数となりました。
='ベースHTML'!$A$5&表_1[#]&'ベースHTML'!$C$5&表_1[商品名]&'ベースHTML'!$E$5&表_1[仕入れ業者]&'ベースHTML'!$G$5&表_1[仕入れ価格（円）]&'ベースHTML'!$I$5&表_1[販売価格（円）]&'ベースHTML'!$K$5正しく&で結合できていれば、ステップ②で作成したベースHTMLのものと同じものができがっているはずです。
正しく生成されていることが確認できたら、関数を全行にコピーしましょう。
ステップ⑤ HTMLとして貼り付け
生成HTML 列の内容はそのままページに張り付けることができます。
ステップ②のベースHTML tbody 中身を生成HTMLに置き換えてみましょう。
| ID | 商品名 | 仕入れ業者 | 仕入れ価格 | 販売価格 |
|---|---|---|---|---|
| 1 | りんご | A社 | 100円 | 200円 |
| 2 | みかん | B社 | 50円 | 100円 |
| 3 | ぶどう | C社 | 200円 | 400円 |
| 4 | なし | D社 | 120円 | 250円 |
| 5 | メロン | A社 | 600円 | 1000円 |
| 6 | スイカ | D社 | 400円 | 750円 |
| 7 | マスカット | D社 | 200円 | 400円 |
| 8 | マンゴー | B社 | 150円 | 300円 |
| 9 | もも | C社 | 350円 | 800円 |
| 10 | パイナップル | B社 | 500円 | 1200円 |
<figure class="wp-block-table">
<table class="has-fixed-layout">
<thead><tr><th>ID</th><th>商品名</th><th>仕入れ業者</th><th>仕入れ価格</th><th>販売価格</th></tr></thead>
<tbody>
<tr><td>1</td><td>りんご</td><td>A社</td><td>100円</td><td>200円</td></tr>
<tr><td>2</td><td>みかん</td><td>B社</td><td>50円</td><td>100円</td></tr>
<tr><td>3</td><td>ぶどう</td><td>C社</td><td>200円</td><td>400円</td></tr>
<tr><td>4</td><td>なし</td><td>D社</td><td>120円</td><td>250円</td></tr>
<tr><td>5</td><td>メロン</td><td>A社</td><td>600円</td><td>1000円</td></tr>
<tr><td>6</td><td>スイカ</td><td>D社</td><td>400円</td><td>750円</td></tr>
<tr><td>7</td><td>マスカット</td><td>D社</td><td>200円</td><td>400円</td></tr>
<tr><td>8</td><td>マンゴー</td><td>B社</td><td>150円</td><td>300円</td></tr>
<tr><td>9</td><td>もも</td><td>C社</td><td>350円</td><td>800円</td></tr>
<tr><td>10</td><td>パイナップル</td><td>B社</td><td>500円</td><td>1200円</td></tr>
</tbody>
</table>
</figure>想定通りの形式で表示されましたね。
この方法ならテーブルが数百、数千という大量のデータでも同じ方法でHTML化が可能です。
ステップ⑥ 更新用の原稿として使用する
ある意味この生成方法の真価は、原稿として利用し更新を効率化できる。という点です。
このような大量の情報がまとまったページは更新頻度が高かったり、一度で数十行が追加・削除されるような更新が発生することがあります。
そんな時は、HTML生成のために作成したこのスプレッドシートをクライアントに共有し、「更新がある場合はこのシートを更新してください」とお伝えしましょう。
クライアントは一つずつ修正指示をする必要は無くシートを更新するだけ、コーダーは生成HTMLを一括でコピペするだけ、という非常に効率的でミスをしづらい運用になります。
まとめ
今回はエクセル・スプレッドシートを使用したコーディング術をまとめてみました。
個人的にはステップ⑥がクライアントにとっても運用が楽になる方法となっており、このコーディング術の効果を最大限生かすための重要ポイントです。
クライアントからの評価も上がると思うので是非活用してみてください。