ツール備忘録：ExcelをHTMLに変換する方法
目次
Excelの表をHTMLに変換したい
このブログをはじめて最も苦戦したのが表の作成でした。
PHPやPythonに触れ、プログラムを覚えてからは表の作成はループ処理で行うことがほとんど。
tdタグの数を数える作業がこれほど進まず苦痛だったとは…。
この苦行から逃れるため「絶対に何か方法はあるはず！」と考え調査してみる事にしました。
変換に使うサンプルはWowma!のCSVファイルで照会したitem.csv を切詰めたテスト版のこいつ。
Excelの【名前を付けてHTML保存】で実験
天下のマイクロソフトさんが作った機能なのだから一発OKさ！
そんな思いもむなしく、散々な結果に…。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 |
<table border=0 cellpadding=0 cellspacing=0 width=862 style='border-collapse: collapse;table-layout:fixed;width:647pt'> <col width=72 span=7 style='width:54pt'> <col width=358 style='mso-width-source:userset;mso-width-alt:11456;width:269pt'> <tr height=25 style='height:18.75pt'> <td height=25 class=xl65 width=72 style='height:18.75pt;width:54pt'>No</td> <td class=xl65 width=72 style='border-left:none;width:54pt'>フィール<span style='display:none'>ド<ruby>名<font class="font5"><rt>メイ</rt></font></ruby></span></td> <td class=xl65 width=72 style='border-left:none;width:54pt'><ruby>項目<span style='display:none'><rt>コウモク</rt></span></ruby><ruby>名<span style='display:none'><rt>メイ</rt></span></ruby></td> <td class=xl65 width=72 style='border-left:none;width:54pt'><ruby>入力<span style='display:none'><rt>ニュウリョク</rt></span></ruby></td> <td class=xl65 width=72 style='border-left:none;width:54pt'><ruby>型<span style='display:none'><rt>カタ</rt></span></ruby></td> <td class=xl65 width=72 style='border-left:none;width:54pt'>バイト<ruby>数<span style='display:none'><rt>スウ</rt></span></ruby></td> <td class=xl65 width=72 style='border-left:none;width:54pt'><ruby>検索<span style='display:none'><rt>ケンサク</rt></span></ruby><ruby>対象<span style='display:none'><rt>タイショウ</rt></span></ruby></td> <td class=xl65 width=358 style='border-left:none;width:269pt'><ruby>入力値<span style='display:none'><rt>ニュウリョクチ</rt></span></ruby><ruby>説明<span style='display:none'><rt>セツメイ</rt></span></ruby></td> </tr> <tr height=175 style='height:131.25pt'> <td height=175 class=xl65 align=right style='height:131.25pt;border-top:none'>1</td> <td class=xl65 style='border-top:none;border-left:none'>ctrlCol</td> <td class=xl65 style='border-top:none;border-left:none'>コントロ<span style='display:none'>ールカラム</span></td> <td class=xl65 style='border-top:none;border-left:none'>必須</td> <td class=xl65 style='border-top:none;border-left:none'><ruby>文字列<span style='display:none'><rt>モジレツ</rt></span></ruby></td> <td class=xl65 align=right style='border-top:none;border-left:none'>1</td> <td class=xl65 style='border-top:none;border-left:none'>-</td> <td class=xl66 width=358 style='border-top:none;border-left:none;width:269pt'>選択肢別在庫の軸を設定(今ある軸を削除して再作成)する場合はN、在庫数を更新する場合Uを設定する。設定がない場合(空の場合)、処理をスキップする。<br> コントロールカラムのヘッダーがない場合エラーとなる。<br> ※stock.csvの場合、Dは設定できません。</td> </tr> <tr height=25 style='height:18.75pt'> <td height=25 class=xl65 align=right style='height:18.75pt;border-top:none'>2</td> <td class=xl65 style='border-top:none;border-left:none'>lotNumber</td> <td class=xl65 style='border-top:none;border-left:none'>ロットナ<span style='display:none'>ンバー</span></td> <td class=xl65 style='border-top:none;border-left:none'>-</td> <td class=xl65 style='border-top:none;border-left:none'><ruby>数値<span style='display:none'><rt>スウチ</rt></span></ruby></td> <td class=xl65 align=right style='border-top:none;border-left:none'>18</td> <td class=xl65 style='border-top:none;border-left:none'>-</td> <td class=xl65 style='border-top:none;border-left:none'> </td> </tr> <tr height=25 style='height:18.75pt'> <td height=25 class=xl65 align=right style='height:18.75pt;border-top:none'>3</td> <td class=xl65 style='border-top:none;border-left:none'>itemCode</td> <td class=xl65 style='border-top:none;border-left:none'>商品コー<span style='display:none'>ド</span></td> <td class=xl65 style='border-top:none;border-left:none'>-</td> <td class=xl65 style='border-top:none;border-left:none'><ruby>文字列<span style='display:none'><rt>モジレツ</rt></span></ruby></td> <td class=xl65 align=right style='border-top:none;border-left:none'>256</td> <td class=xl65 style='border-top:none;border-left:none'>◎</td> <td class=xl65 style='border-top:none;border-left:none'> </td> </tr> <![if supportMisalignedColumns]> <tr height=0 style='display:none'> <td width=72 style='width:54pt'></td> <td width=72 style='width:54pt'></td> <td width=72 style='width:54pt'></td> <td width=72 style='width:54pt'></td> <td width=72 style='width:54pt'></td> <td width=72 style='width:54pt'></td> <td width=72 style='width:54pt'></td> <td width=358 style='width:269pt'></td> </tr> <![endif]> </table> |
え？ナニコレ？？
こんな簡単なテーブルを何故にここまで複雑に出来るのでしょう…。
よく見るとふり仮名が display:none で登録されてます。単語が分割されてるってことは形態素分析かけたのでしょう。
|
1 2 3 |
<td class=xl65 width=72 style='border-left:none;width:54pt'><ruby>項目<span style='display:none'><rt>コウモク</rt></span></ruby><ruby>名<span style='display:none'><rt>メイ</rt></span></ruby></td> |
ごめんなさい、困難ごちゃごちゃしたのは不要です。
Googleさんに聞いてみました
まずは検索ワード【excel html テーブル 変換】で実行。
おっ！結構ツール提供してくださる方がいるんですね。
どれもExcelの表をコピーしWEBの所定の位置にペーストするだけ。それぞれ動作が少しづつ違う所がまた面白いです。
と言うことで検索結果を4サイト備忘録として残します。
使い方がシンプルな Excel to HTML
TECH-UNLIMiTEDさん提供のExcel⇒HTMLテーブル変換ツール。thタグ考慮されていて、行、列、行+列の3タイプに対応してます。
タブでインデントを付けてくれるので見やすさも最高です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
<table> <tr> <th>No</th> <th>フィールド名</th> <th>項目名</th> <th>入力</th> <th>型</th> <th>バイト数</th> <th>検索対象</th> <th>入力値説明</th> </tr> <tr> <td>1</td> <td>ctrlCol</td> <td>コントロールカラム</td> <td>必須</td> <td>文字列</td> <td>1</td> <td>-</td> <td>"選択肢別在庫の軸を設定(今ある軸を削除して再作成)する場合はN、在庫数を更新する場合Uを設定する。設定がない場合(空の場合)、処理をスキップする。</td> </tr> <tr> <td>コントロールカラムのヘッダーがない場合エラーとなる。</td> </tr> <tr> <td>※stock.csvの場合、Dは設定できません。"</td> </tr> <tr> <td>2</td> <td>lotNumber</td> <td>ロットナンバー</td> <td>-</td> <td>数値</td> <td>18</td> <td>-</td> <td></td> </tr> <tr> <td>3</td> <td>itemCode</td> <td>商品コード</td> <td>-</td> <td>文字列</td> <td>256</td> <td>◎</td> <td></td> </tr> <tr> <td></td> </tr> </table> |
一部でおかしな挙動がありました。
|
1 2 3 4 5 6 7 8 |
<td>"選択肢別在庫の軸を設定(今ある軸を削除して再作成)する場合はN、在庫数を更新する場合Uを設定する。設定がない場合(空の場合)、処理をスキップする。</td> </tr> <tr> <td>コントロールカラムのヘッダーがない場合エラーとなる。</td> </tr> <tr> <td>※stock.csvの場合、Dは設定できません。"</td> </tr> |
ここはセル内改行を行っていた箇所です。
どうやら別々に認識されて違う行に移されてしまったみたいです。
インデントが変えられるExcelからHTMLテーブル変換
エーオーシステムさんが提供して下さっているツールです。
インデントって確かに個人個人で癖あるんですよね。Python使いは「インデントは半角スペース2つ！」とか言いそうです。ちなみに私は基本タブ。慣れたインデント以外はチョット気持ち悪かったりします。「そこに目を付けるか！」そんな面白いツールです。では、タブ区切りで実行してみます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<table> <tr> <td>No</td> <td>フィールド名</td> <td>項目名</td> <td>入力</td> <td>型</td> <td>バイト数</td> <td>検索対象</td> <td>入力値説明</td> </tr> <tr> <td>1</td> <td>ctrlCol</td> <td>コントロールカラム</td> <td>必須</td> <td>文字列</td> <td>1</td> <td>-</td> <td>選択肢別在庫の軸を設定(今ある軸を削除して再作成)する場合はN、在庫数を更新する場合Uを設定する。設定がない場合(空の場合)、処理をスキップする。 コントロールカラムのヘッダーがない場合エラーとなる。 ※stock.csvの場合、Dは設定できません。</td> </tr> <tr> <td>2</td> <td>lotNumber</td> <td>ロットナンバー</td> <td>-</td> <td>数値</td> <td>18</td> <td>-</td> <td></td> </tr> <tr> <td>3</td> <td>itemCode</td> <td>商品コード</td> <td>-</td> <td>文字列</td> <td>256</td> <td>◎</td> <td></td> </tr> </table> |
先程のExcel To HTMLで発生したセル内改行の問題はクリアされてます。(改行はなくなり、スペース区切りで結合されてます)
|
1 |
<td>選択肢別在庫の軸を設定(今ある軸を削除して再作成)する場合はN、在庫数を更新する場合Uを設定する。設定がない場合(空の場合)、処理をスキップする。 コントロールカラムのヘッダーがない場合エラーとなる。 ※stock.csvの場合、Dは設定できません。</td> |
ExcelからHTMLテーブル変換もシンプルなテーブルを吐き出してくれて大満足です。
セル内改行のあるExcelを快適変換
タグインデックスさんが提供してくれているExcel⇒HTMLテーブル変換ツール。
使い方はいたってシンプル。上記2つのツールに無かった特徴的な点が【セル内改行の変換ルール】を設定できる事。作ってみたテーブルがこちら。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
<table border="1"> <thead> <tr> <th>No</th> <th>フィールド名</th> <th>項目名</th> <th>入力</th> <th>型</th> <th>バイト数</th> <th>検索対象</th> <th>入力値説明</th> </tr> </thead> <tbody> <tr> <th>1</th> <td>ctrlCol</td> <td>コントロールカラム</td> <td>必須</td> <td>文字列</td> <td>1</td> <td>-</td> <td>選択肢別在庫の軸を設定(今ある軸を削除して再作成)する場合はN、在庫数を更新する場合Uを設定する。設定がない場合(空の場合)、処理をスキップする。<br>コントロールカラムのヘッダーがない場合エラーとなる。<br>※stock.csvの場合、Dは設定できません。</td> </tr> <tr> <th>2</th> <td>lotNumber</td> <td>ロットナンバー</td> <td>-</td> <td>数値</td> <td>18</td> <td>-</td> <td></td> </tr> <tr> <th>3</th> <td>itemCode</td> <td>商品コード</td> <td>-</td> <td>文字列</td> <td>256</td> <td>◎</td> <td></td> </tr> </tbody> </table> |
border=”1″ が勝手に入ってますが、まぁこれくらいなら修正簡単なので問題ないですね。
注目はここ。
|
1 |
<td>選択肢別在庫の軸を設定(今ある軸を削除して再作成)する場合はN、在庫数を更新する場合Uを設定する。設定がない場合(空の場合)、処理をスキップする。<br>コントロールカラムのヘッダーがない場合エラーとなる。<br>※stock.csvの場合、Dは設定できません。</td> |
見事です。
スタイルシートまで作るExcel⇒HTML変換ツール
エクセルシートをHTMLテーブルに変換しちゃう君 (ββ)ネーミングセンスはさておき、誰が提供してくださってるのでしょか。こんな便利なツール、沢山テーブル書く前に知りたかったです。最大の特徴はスタイルシートの作成！thタグのカラー指定までできてしまいます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 |
<style> table { border-collapse: collapse; } th { border: solid 1px #666666; color: #000000; background-color: #ff9999; } td { border: solid 1px #666666; color: #000000; background-color: #ffffff; } </style> <table> <thead> <tr> <th> No </th> <th> フィールド名 </th> <th> 項目名 </th> <th> 入力 </th> <th> 型 </th> <th> バイト数 </th> <th> 検索対象 </th> <th> 入力値説明 </th> </tr> </thead> <tbody> <tr> <th> 1 </th> <td> ctrlCol </td> <td> コントロールカラム </td> <td> 必須 </td> <td> 文字列 </td> <td> 1 </td> <td> - </td> <td> 選択肢別在庫の軸を設定(今ある軸を削除して再作成)する場合はN、在庫数を更新する場合Uを設定する。設定がない場合(空の場合)、処理をスキップする。<br /> コントロールカラムのヘッダーがない場合エラーとなる。<br /> ※stock.csvの場合、Dは設定できません。 </td> </tr> <tr> <th> 2 </th> <td> lotNumber </td> <td> ロットナンバー </td> <td> - </td> <td> 数値 </td> <td> 18 </td> <td colspan="2"> - </td> </tr> <tr> <th> 3 </th> <td> itemCode </td> <td> 商品コード </td> <td> - </td> <td> 文字列 </td> <td> 256 </td> <td colspan="2"> ◎ </td> </tr> </tbody> </table> |
セル内改行はこんな感じで見やすいです。
|
1 2 3 4 5 |
<td> 選択肢別在庫の軸を設定(今ある軸を削除して再作成)する場合はN、在庫数を更新する場合Uを設定する。設定がない場合(空の場合)、処理をスキップする。<br /> コントロールカラムのヘッダーがない場合エラーとなる。<br /> ※stock.csvの場合、Dは設定できません。 </td> |
まとめ
備忘録として記載した4つのツール共に特徴があり調べていて楽しかったです。
私の用途としては、タグインデックスさんのツールを最も利用するかなぁ。
これが判ると億劫になっていた各モールのAPI仕様もこのブログに記載できそうな気がしてきました。
-
前の記事
業務用備忘録：コピー機価格の価格比較 2018.08.29
-
次の記事
楽天市場API：楽天プロダクト情報取得 2018.08.30