アプリ版:「スタンプのみでお礼する」機能のリリースについて

Excel 2007 を使っています。
Excelのテーブルをhtml形式で保存しました。
(「名前を付けて保存」の「その他の形式」から「Webページ」選択)
そのファィルをウェブの無料サーバーにアップロードしようとしたところ、
サイズが大きすぎて制限を超えてしまいました。
そこで、サイズを縮小したいと思っています。
(今回作ったファイルは6MB、これを3MB未満に)

ファイルサイズが大きくなる理由は
スタイルシートの部分(style='~')の繰り返しが多いからのようで、
試しに、style='~' の部分を全て削除したらサイズが半分以下になりました。

そこで、style='~' の部分をclass='…'にまとめたいと思い、
テキストの置換をいろいろと試みましたが、
style='~' の異なるセルが数種類あることで難しく、
私だけの力では失敗するばかりでした。

何か良い方法は無いでしょうか?
テキストの置換に拘りません。
Excelで作ったhtmlファイルのブラウザでの見た目を変えずに、
少ない手間でサイズを大幅に縮小する方法が知りたいです。

ちなみに、style='~' を消す前のhtmlソースは約9万行あります。

よろしくお願いします。

質問者からの補足コメント

  • Excelのように背景色を交互に変えたり、
    列の幅がバラバラになってるのをどうするのか分からなかったのですが、
    nth-child を使うのですね。
    使ったことがないので気付きませんでした。
    それならば、各<tr><td>内に記載する必要が無いので、
    テンプレートを作っておけば楽に処理できそうです。
    ちょっと考えてみます。
    ありがとうございました。

    No.2の回答に寄せられた補足コメントです。 補足日時:2016/05/06 17:57
  • HAPPY

    次の手順で11.2MBのhtmlファイルが2.57MBに縮小されました。
    htmlソースも縮小前よりもすっきりしました。
    1.いったんhtmlファイルで保存する。
    2.作成したhtmlファイルをExcelで開く。
    3.再び、保存したい部分を選択してからhtmlファイルで保存する。

    nth-child を使ったスタイルシートよりも煩雑ですが、
    こだわらなければ楽かもしれません。

      補足日時:2016/05/06 19:06

A 回答 (3件)

★No.1の回答も、すべて


タブは_に置換してあります。・・・

サンプル

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
_<meta http-equiv="content-type" content="text/html; charset=UTF-8">
_<title>サンプル</title>
_<meta name="author" content="ORUKA1951">
_<meta http-equiv="Content-Style-Type" content="text/css">
_<link rev="made" href="mailto:oruka1951&#64;hoge.com" title="send a mail" >
_<link rel="START" href="../index.html">
_<style type="text/css">
<!--
html,body{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{margin:0;line-height:1.6em;}
p{text-indent:1em;}
div.header,div.section,div.footer{width:90%;min-width:630px;max-width:900px;margin:0 auto;padding:5px;}
table{
_border-collapse:collapse;
}
table th,table td{width:5em;border:solid 1px blue;padding:0.5em 1em;}

table tr:nth-child(3n) td{background-color:aqua;}
table tr:nth-child(3n+2) td{background-color:lime;}
table tr td+td+td{color:red;font-weight:bold;}
table tr td+td+td+td{color:black;font-weight:normal;}

-->
_</style>
</head>
<body>
_<div class="header">
__<h1>タイトル</h1>
__<p>このページでは・・・・</p>
_</div>
_<div class="section">
__<h2>見出し</h2>
__<table>
___<caption>50音</caption>
___<tbody>
____<tr>
_____<th>行</th><th>A</th><th>I</th><th>U</th><th>E</th><th>O</th>
____</tr>
____<tr>
_____<th>あ行</th><td>あ</td><td>い</td><td>う</td><td>え</td><td>お</td>
____</tr>
____<tr>
_____<th>か行</th><td>か</td><td>き</td><td>く</td><td>け</td><td>こ</td>
____</tr>
____<tr>
_____<th>さ行</th><td>さ</td><td>し</td><td>す</td><td>せ</td><td>そ</td>
____</tr>
____<tr>
_____<th>た行</th><td>た</td><td>ち</td><td>つ</td><td>て</td><td>と</td>
____</tr>
____<tr>
_____<th>な行</th><td>な</td><td>に</td><td>ぬ</td><td>ね</td><td>の</td>
____</tr>
____<tr>
_____<th>は行</th><td>は</td><td>ひ</td><td>ふ</td><td>へ</td><td>ほ</td>
____</tr>
____<tr>
_____<th>わ</th><td></td><td></td><td></td><td></td><td>ん</td>
____</tr>
___</tbody>
__</table>

_</div>
_<div class="footer">
__<h2>文書情報</h2>
__<dl class="documentHistry">
___<dt id="FIRST-PUBLISHED">First Published</dt>
___<dd>2013-03-03</dd>
__</dl>
_</div>
</body>
</html>
この回答への補足あり
    • good
    • 0
この回答へのお礼

回答、ありがとうございます。
Excelでのテーブルスタイルを残すのが難しそうです。
とりあえず、テキストを足したり置換の順番を工夫することで対処しておきました。
不可視部分を含めたExcelのサイズは10MB超え。修正後は2.03MBになりました。

お礼日時:2016/05/03 16:27

>Excelでのテーブルスタイルを残すのが難しそうです。


 そのためにスタイルシートがあるのですよ。
1) HTMLの最大の目的は「どんな環境からもWebの情報を利用できるようにすべき( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」です。そのために、『プレゼンテーションに関する要素や属性は、次々と他の機構、とりわけスタイルシートに置換えられていく。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』のであり、
「スタイルシートでは、行間の設定やインデントの設定、テキスト色や背景色、フォントのサイズとスタイル、その他様々なプロパティの設定が簡単にできる。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」
 なのです。
2) excelは表計算ソフトですから、その表現力は極めて限定されています。

 table tr:nth-child(3n) td{background-color:aqua;}
 3n行の背景色は水色

 これをエクセルで行おうとしたら一仕事になるがスタイルシートだと、カチャカチャと、ものの数秒もかからない。

 私も膨大な表をHTMLに直すことが、しばしばありますが、基本的に 少なければ、正規表現の扱える EmEditor、多くなると テキスト処理が得意なPerl( https://ja.wikipedia.org/wiki/Perl#.E7.89.B9.E5. … )を使って処理します。

 スタイルシートを外部ファイルにしておけば、それこそ素のtableだけ置くことになる。

★ファイルサイズは、数百kb以内で収まるでしょう。
 csvで出力して、その数倍が目安

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
・・
_<link rel="styleSheet" type="text/css" media="print,handheld" href="./styleSheet/print.css">
</head>

★ エクセル出力のHTMLはローカルで、エクセル使わずに見るためだけの手段でしかありません。決してウエブ用には使えませんし。使ってはならない。
    • good
    • 0
この回答へのお礼

回答、ありがとうございました。

お礼日時:2016/05/03 17:37

excelのHTML出力なんて、しょせんexc,elを持っていない人がブラウザで読めるようにする以上の機能はありません。

とんでもないものしかできない。
 その表の部分だけにして、テキストファイルに書き出します。内部に,(半角)が使われていたら全角の,に置換しておきましょう。
 書き出すのはCSVがよいでしょう。

行,A,I,U,E,O
あ行,あ,い,う,え,お
か行,か,き,く,け,こ
さ行,さ,し,す,せ,そ
・・・・
わ,,,,ん
 
という風になるはずです。
次いでそれをテキストエディタで開きますが、Windowsのメモ帳では機能がありませんので、EmEditor( https://jp.emeditor.com/ )などの高機能テキストエディタが必要です。
 EmEditorは有償ですが、一か月は無料で試用できます。

 テキストエディタを起動して、そのcsvファイルを開いたら・・前後に改行を加えてから
編集→すべて置換で
\n

</td></tr>\n\t\t<tr>\n\t\t\t\t<td>
とすると

</td>
___</tr>
___<tr>
____<td>行,A,I,U,E,O</td>
___</tr>
___<tr>
____<td>あ行,あ,い,う,え,お</td>
___</tr>
___<tr>
____<td>か行,か,き,く,け,こ</td>
___</tr>
___<tr>
____<td>さ行,さ,し,す,せ,そ</td>
___</tr>
___<tr>
____<td>・・・・</td>
___</tr>
___<tr>
____<td>わ,,,,ん</td>
___</tr>
___<tr>
____<td>

と置換されますので、
次いでもう一度
,

</td><td>

と置換すると
</td>
___</tr>
___<tr>
____<td>行</td><td>A</td><td>I</td><td>U</td><td>E</td><td>O</td>
___</tr>
___<tr>
____<td>あ行</td><td>あ</td><td>い</td><td>う</td><td>え</td><td>お</td>
___</tr>
___<tr>
____<td>か行</td><td>か</td><td>き</td><td>く</td><td>け</td><td>こ</td>
___</tr>
___<tr>
____<td>さ行</td><td>さ</td><td>し</td><td>す</td><td>せ</td><td>そ</td>
___</tr>
___<tr>
____<td>・・・・</td>
___</tr>
___<tr>
____<td>わ</td><td></td><td></td><td></td><td>ん</td>
___</tr>
___<tr>
____<td>

となりますから、前後の余分なものを取り除いて、<table><tbody></tbody></table>でくくります。
_<table>
__<tbody>
___<tr>
____<td>行</td><td>A</td><td>I</td><td>U</td><td>E>,O</td>
___</tr>
___<tr>
____<td>あ行</td><td>あ</td><td>い</td><td>う</td><td>え</td><td>お</td>
___</tr>
___<tr>
____<td>か行</td><td>か</td><td>き</td><td>く</td><td>け</td><td>こ</td>
___</tr>
___<tr>
____<td>さ行</td><td>さ</td><td>し</td><td>す</td><td>せ</td><td>そ</td>
___</tr>
___<tr>
____<td>・・・・</td>
___</tr>
___<tr>
____<td>わ</td><td></td><td></td><td></td><td>ん</td>
___</tr>
__</tbody>
_</table>
と整理します。

次いで細かい修正ですが
最初の行は見出し行でしたら。その行を選択してから
td>

th>
とすると

_<table>
__<tbody>
___<tr>
____<th>行</th><th>A</th><th>I</th><th>U</th><th>E>,O</th>
___</tr>
___<tr>
____<td>あ行</td><td>あ</td><td>い</td><td>う</td><td>え</td><td>お</td>
___</tr>
___<tr>
____<td>か行</td><td>か</td><td>き</td><td>く</td><td>け</td><td>こ</td>
___</tr>
___<tr>
____<td>さ行</td><td>さ</td><td>し</td><td>す</td><td>せ</td><td>そ</td>
___</tr>
___<tr>
____<td>・・・・</td>
___</tr>
___<tr>
____<td>わ</td><td></td><td></td><td></td><td>ん</td>
___</tr>
__</tbody>
_</table>


 もあるのでしたら
_<table>
__<thead>
___<tr>
____<th>行</th><th>A</th><th>I</th><th>U</th><th>E>,O</th>
___</tr>
__</thead>
__<tfoot>
___<tr>
____<th>行</th><th>A</th><th>I</th><th>U</th><th>E>,O</th>
___</tr>
__</tfoot>
__<tbody>
___<tr>
____<td>あ行</td><td>あ</td><td>い</td><td>う</td><td>え</td><td>お</td>
___</tr>
___<tr>
____<td>か行</td><td>か</td><td>き</td><td>く</td><td>け</td><td>こ</td>
___</tr>
___<tr>
____<td>さ行</td><td>さ</td><td>し</td><td>す</td><td>せ</td><td>そ</td>
___</tr>
___<tr>
____<td>・・・・</td>
___</tr>
___<tr>
____<td>わ</td><td></td><td></td><td></td><td>ん</td>
___</tr>
__</tbody>
_</table>

しておくと、印刷したときにすべてのページで見出し行が印刷される。

また、最初の列が見出しでしたら

^\t\t\t\t<td>(.?)</td>

\t\t\t\t<th>\1</th>

さらに

と置換すると

_<table>
__<tbody>
___<tr>
____<th>行</th><th>A</th><th>I</th><th>U</th><th>E>,O</th>
___</tr>
___<tr>
____<th>あ行</th><td>あ</td><td>い</td><td>う</td><td>え</td><td>お</td>
___</tr>
___<tr>
____<th>か行</th><td>か</td><td>き</td><td>く</td><td>け</td><td>こ</td>
___</tr>
___<tr>
____<th>さ行</th><td>さ</td><td>し</td><td>す</td><td>せ</td><td>そ</td>
___</tr>
___<tr>
____<th>・・・・</th>
___</tr>
___<tr>
____<th>わ</th><td></td><td></td><td></td><td>ん</td>
___</tr>
__</tbody>
_</table>

となります。

あとはスタイルシートで、お好きにデザインするとよい。
 偶数行とか3行ごとに背景をかえるとか
 2列目は太字で背景が黄色とか
    • good
    • 0
この回答へのお礼

回答、ありがとうございました。

お礼日時:2016/05/03 16:22

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!