Web開発FAQ

HTMLテンプレートの効率化について

HTMLテンプレートの効率化について教えてください。

EnterpriseServerでは「HTMLテンプレート」という構造を採用しているため、HTML部分の作成には、
各社から市販されているHTML制作ツールを利用することができます。
これらはほとんどがGUIによるもので、HTML初心者でも短時間のうちに緻密なHTMLファイルを制作できるなど、たいへん便利なツールです。

しかし注意したいのは、それらは効率的なサイト管理もしくはWebデザインとの融合を謳っているものがほとんどであり、企業の基幹システムのインターフェースとしてのHTMLファイルを書き出してくれるわけではありません。

たとえば、素早いレスポンスを返せる構造が挙げられます。
企業の基幹システム用途であるからには、毎日、決まった時刻に日報処理を行なう必要があります。
通常のWebサイトと異なり、処理されるのはさまざまなデータをバインドする動的なものです。
ユーザーリクエストの受付から必要データのバインド、HTMLへの書き出し、HTTPサーバーによる送出、
といった一連の処理が短時間に集中し、ときには数百ものセッションに上ることも予想されます。
それでも素早く動作するためには、テンプレート自体をたとえ1バイトでも軽量化する必要があるのです。

ここで紹介するのは、市販のHTMLツールではカバーされていない、ファイル軽量化のテクニックです。

● 頻繁に出現する修飾指定をスタイルシートとする。

「<FONT SIZE="+1" FACE="ＭＳ Ｐゴシック"><b>〜</b></FONT>」の記述
    ↓ 
b.big {font-size:larger; font-family:ＭＳ Ｐゴシック; font-weight:bold;}

をスタイル記述することでタグ構造は以下のようになります。 

『<b class="big">〜</b>』

もとの記述が複数のHTMLファイルで頻繁に使用されているなら、スタイルシートを外部ファイル（*.css）とすることで、ネットワーク・トラフィックの総量をいっそう低減することができます。

● 重複するタグ指定を単純化する。

「<TR>
  <TD width="3"  height="10" valign="top" align="left"></TD>
  <TD width="10" height="10" valign="top" align="left">〜</TD>
  <TD width="30" height="10" valign="top" align="left">〜</TD>
    ・
    ・
    ・
  </TR>」

この様な場合、まず<TD>の属性の共通項をピックアップし、「行の概念」を統括する<TR>に記述できる内容であれば、<TR>に記述を統一します。
「align」は指定しない場合、左寄せとなりますので上記の「align="left"」は不要です。
また、<TD>〜</TD>がブランクにも関わらず、align指定などがあるものについても、表示上無意味ですので削除します。 これらをまとめるとタグ構造は以下のようになります。 

『<TR height="10" valign="top"> 
  <TD width="3"></TD>
  <TD width="10">〜</TD>
  <TD width="30">〜</TD>
    ・
    ・
    ・
</TR>』

● 不要なタグ・属性を削除する。

「<img src="/images/（サイズ調整用ブランク画像）" alt="" width="1"  height="1">」

の場合の『alt』属性や、 

「<SELECT NAME="COMBOBOX">
    <OPTION VALUE=""></OPTION>
    <OPTION VALUE="####">################</OPTION>
  </SELECT>」

のような場合の『 </OPTION> 』タグなど、削除しても問題がないタグ・属性についても削除します。

● 不要なスペースを削除する。

「<FONT SIZE="-1" FACE="ＭＳ Ｐゴシック"> <SPAN ID="F0000"> 文字列</SPAN> </FONT>」

のように、タグ間およびタグと文字列の間にあるスペースを削除します。 また行頭からその行の開始文字列までのスペースも削除します。 

 <table border="0" cellpadding="0" cellspacing="0" width="600">
   <tr>
    <td width="200">
     <font color="#666666" size="+1"><b>左列見出し</b></font>
      </td>
       <td width="5"></td>
        <td width="395" align="right">
         <table border="0" cellpadding="0" cellspacing="0" 
             width="395">
          <tr>
           <td width="95">
            <font color="#666633"><b>入れ子テーブルの左列
                </b></font>
           </td>
           <td width="300">
         <font color="#999999">入れ子テーブルの右列</font>
        </td>
       </tr>
      </table>
     </td>
    </tr>
  </table>

上記（785バイト）が次のようになります。 

<table border="0" cellpadding="0" cellspacing="0" width="600">
 <tr>
 <td width="200">
 <font color="#666666" size="+1"><b>左列見出し</b></font>
 </td>
 <td width="5"></td>
 <td width="395" align="right">
 <table border="0" cellpadding="0" cellspacing="0" width="395">
 <tr>
 <td width="95">
 <font color="#666633"><b>入れ子テーブルの左列</b></font>
 </td>
 <td width="300">
 <font color="#999999">入れ子テーブルの右列</font>
 </td>
 </tr>
 </table>
 </tdgt;
 </tr>
 </table>

記述量、475バイト

さらに、任意の改行を削除することでいっそう軽量化することができます。
たとえ1ファイルあたり100バイト〜数キロバイトの低減でも、1000人のユーザーが1日2回、
10ファイルを閲覧すると、1日あたり2メガバイトもしくはそれ以上のトラフィック低減 につながります。
つまり、それだけレスポンスの向上が期待できるのです。

● Java Scriptの設計

データ入力が多くを占める基幹業務では、入力値を適切なものに是正する必要があることから、
クライアントサイドで軽快に機能するJavaScriptを入力値のフィルタリングに使用されることでしょう。
この場合、複数のHTMLファイルで頻繁に使用するスクリプトを適宜モジュール化し、外部ファイル（*.js）とすることで、スタイルシートの時と同様、ネットワーク・トラフィックの総量を低減させることができます。
フィルタリングの設計だけでなく、入力箇所に応じたモジュール設計も必要となりますが、ただでさえ長大になりがちなフィルタ記述を効果的に圧縮できます。