メディア木龍ホームページ お問い合わせ

トップページへ戻る

HTML差込ツール EXCEL2HTMLでXSLT超入門

このページでは、HTML差込ツール EXCEL2HTMLの操作方法のご説明と、そこからXSLTの初歩的な説明を書かせていただいております。必要や興味に応じて読んでいただけると嬉しいです。
XSLTについては「RSSを使ったリンクページを作成するXSLTセット」でXSLT実践でさらに詳しい説明をさせていただいております。こちらもご覧いただけるとうれしいです。
なお、この説明で使用しているフリー版の他に、複数テンプレート、複数フォルダ、Shift_JIS以外の文字コード、さらにはテキストファイルの差し込みにも対応したPro版もございます。
こちらもよろしくお願い申し上げます。

●HTML差込ツール EXCEL2HTMLってどういうもの?

HTML差込ツール EXCEL2HTMLというのは、EXCELからWORDに差し込み印刷する要領で、EXCELのリストデータをHTMLのテンプレートに差し込み、保存するものです。つまり、保存先ファイル名と差し込みデータが入力されたEXCELのリストと、差込個所にマークをつけたHTMLファイルを選択して実行し、保存先フォルダを選択してOKをクリックすれば、構造が同じで内容の異なるHTMLファイルを一度に作れるツールです。お役立ちリンクにあるGORILOGのgoriさんのアイデアで作りました。
このツール自体はXMLを採用しているわけではありませんが、この「差し込み」という考え方が、XSLTの理解に役立ちます。
このページではHTML差込ツール EXCEL2HTMLの解説とともに、XML、XSLTの説明もさせていただきます。
HTML差込ツール EXCEL2HTML フリー版をダウンロードする

●HTML差込ツール EXCEL2HTMLの使い方  ページトップへ

1. メニュー画面

任意のフォルダに圧縮ファイルを解凍し、excel2html2_3.htaをダブルクリックして起動します。
画面の指示に従って、テンプレートファイルとEXCELのリストを選択します。
EXCELのセル中にAlt+Enterで改行した個所がある場合、その処理をどうするか選択します。
初期値としてHTMLのテンプレート用の<br>が入ってますが、XHTMLのテンプレートに差し込む場合は<br />を、それ以外のテキストで、改行の位置にタグが必要ない場合は、「変更しない」を選択して「実行」ボタンをクリックします。

 メニュー画面

2. フォルダ選択ダイアログボックス

実行ボタンをクリックすると、下の写真のように、フォルダ選択ダイアログボックスが出てきます。
+印をクリックすれば、その下の階層も表示できます。
保存先を選択してからOKをクリックします。

フォルダ選択ダイアログ

●XMLってどういうもの?  ページトップへ

XMLというのは、文書やデータの意味や構造を記述するためのマークアップ言語の1つで、次のような形のテキストファイルになっています。

<1階層目の要素>
 <2階層目の要素>○○○</2階層目の要素>
  <3階層目の要素>○○○○</3階層目の要素>
 <2階層目の要素>○○○○</2階層目の要素>
</1階層目の要素>

ここで1番大きなルールは、すべての階層を入れ子にして、いちばん上の階層は1つだけにするということです。
こういう形にデータを作ると、中に記述されたすべての階層について、
「いちばん上の階層の最初の子要素」とか、「1階層目の要素の最初の子要素のさらに子要素(3階層目の要素)」とか、「1番目の階層の2番目の子要素(2階層目の要素)」というように指定できるようになります。

なお、XMLについて詳しくはキーマンズネットのXML解説ページもご覧ください。

●何でHTML差込ツール EXCEL2HTMLでXMLやXSLTの入門になるの?  ページトップへ

1. HTMLのテンプレートをテキストエディターで開いてみましょう

EXCEL2HTMLに添付してあるHTMLのテンプレートをテキストエディターで開くと、下の画像のようになります。

ソース (画面をクリックすると拡大します。別窓が開きます。)

この【】で囲まれたところに、EXCELの該当する項目の内容が入ります。

2. EXCELのリストの可変部分をXMLにしてみます  ページトップへ

XML、XSLTのサンプルをダウンロードする

まず、EXCELのリストを見てみましょう。

リスト

このB列から後ろをXMLにすると、

XMLリスト (画面をクリックすると拡大します。別窓が開きます。

となります。
差し込みでは、<商品コード>の内容をテンプレートの【商品コード】の部分に入れることになります。

3. XSLTを作ってみましょう  ページトップへ

XSLTでは、【商品コード】の部分に

<xsl:value-of select="商品コード" />

と入れます。EXCEL2HTMLではそのままそこにデータを入れるだけですが、XSLTの場合は、この場合は入れて、この場合は入れないとか、この場合はこちらのデータを入れて、この場合はこちらのデータを入れるなどの条件をつけることもできます。
とりあえず、まずは添付のtemplate.htmを使って商品コード1のデータを入れるためのXSLTを作ってみましょう。

下の図が、出来上がったXSLTです。左の数字は、行数を表すもので、実際には入力しません。

XSLTリスト (画面をクリックすると拡大します。別窓が開きます。)

1行目はXML宣言です。
2行目でXSLTのバージョンとネームスペースを指定しています。
ここまではおまじないと考えていいです。
3行目は、XML文書をどういう形式に変換するか、また、文字コードはどうするかを指定しています。
methodのところでは、htmlのほかに、xml、textなどが指定できます。
ここでは、Shift_JISコードのHTMLにしてほしいと指定しています。

4行目から、いよいよコーディングです。
4行目の<xsl:template match="/">というのは、このテンプレートの中に書かれた指定は、XML文書のルートノードにマッチするという意味です。
つまり、XML文書全体を処理の対象にします。
5行目からは普通にHTMLを書きます。このあたりはHTMLエディターを使ってあらかじめ作っておいてもいいと思います。ただし、普通のHTMLと異なり、XSLTもXML文書の一種ですから、閉じタグは必須です。閉じタグのないものについては、
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
のように、後ろに/をつけます。
15行目に、見慣れないものが出てきます。これは、XML文書の中のlist要素の子要素である商品要素の中の1番目の要素について、ある限り繰り返して処理してくださいという意味です。この例では1番目のオレンジについてだけ処理するので[1]をつけていますが、すべての商品要素について同じように処理する場合は、[1]は不要です。
表の左側に項目名を、右側にその内容を表示するようにしています。EXCEL2HTMLで【商品コード】と印を入れたところには、
<xsl:value-of select="商品コード" />
が入ってますね。
以下、フリガナ、商品名、梱包単位、単価と同じように処理します。
この例では1つの商品についてだけなので、<table>タグの内側に<xsl:for-each>を入れましたが、すべての商品要素について処理を繰り返す場合は、<table>タグの上に<for-each select="商品">を入れて</table>タグの下側に</xsl:for-each>を入れると、商品ごとの表をそれぞれ1つずつ、この場合は合計4つ作ることができます。
繰り返し処理は、<xsl:for-each select="○○">で始まり、</xsl:for-each>で閉じます。

30行目で<html>タグを閉じたら、その後ろに</template>で<xsl:template match="/">を閉じます。
さらにその後ろに</xsl:stylesheet>を入れて、XSLTを閉じます。

先ほどのXML文書を、今作ったXSLTで変換すると、下の画像のようなHTMLが出来上がります。
変換する際にはWord2003以上を使うか、vectorでXSLTで検索すると、便利なツールたくさん見つかります。

結果ソース
(画面をクリックすると拡大します。別窓が開きます。)
ブラウザで表示
(ブラウザで表示した状態)

4. いろいろ試してみてください  ページトップへ

HTML差込ツール EXCEL2HTMLでは、初期状態ではHTMLを対象にしていますが、Alt+Enterの処理を選ぶことによって、EXCELからXMLやXHTMLなど、テキスト形式のものになら差し込んで文書を作れます。条件分岐などないケースでは、まずはこのEXCEL2HTMLで作ってみて、もし、いろいろ条件を付けたいケースなどが出てきたら、XSLTに挑戦してみることをお勧めします。
XSLTを覚えると、6.のようにAmazonのWebサービスを使って自分なりの情報発信をすることもできます。

5. さらに  ページトップへ

Pro版の小組の例は、XSLTを使っても実現できます。さきほどダウンロードしたサンプルを使って以下の手順で練習してみましょう。

この例題が出来たとき、あなたはきっと、もうXSLTは怖くなくなっていることでしょう。

なお、作ろうとするHTMLやXMLが複雑で、その都度XSLTを考えるのは面倒な場合や、条件はテンプレートのバリエーションで対応したいというときには、ぜひPro版をご利用ください。

6. 参考になった書籍  ページトップへ

ここでは、XSLTについて私が使って参考になった本を初めとして、参考になると思われる本をご紹介します。

XML+XSLT実用スーパーサンプル集―いきなり理解するよりも、マネして覚えるほうが早くて簡単! サンプルが充実していて、とてもわかりやすいです。InternetExplorerが標準のXSLTに対応したとき、最初にこの本で勉強させていただきました。
XSLTバイブル
―プログラマーズリファレンス
Amazonに在庫がないのが残念なのですが、この本は文字通りXSLTのバイブルです。今でも常にそばに置いて使っています。
ビギニングXHTML XSLTバイブルと共に、座右の書です。XHTMLの基礎からXMLの概要、JavaScript、DOMまで、じっくり読むことによって基礎力がつくようになっています。
2001年発行ですが、今、改めて読んでいます。

その他XML、XSLT、XHTML関係の書籍

うち、
XML関係
XSLT関係
XHTML関係

その他にも、たくさんの書籍が発行されています。
XSLTのほかにも、XML、XHTML関連も含めてご紹介させていただきます。Amazon関連もあります。