SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

特集記事

ホームページ製作を楽にする7つのXSLTスクリプト

XSLTでXHTMLを操作しホームページ作成作業を半自動化する

  • X ポスト
  • このエントリーをはてなブックマークに追加

本稿では、ホームページ製作に役立つさまざまなスクリプトをXSLTを用いて実装します。XSLTでXHTMLを操作することで、「繰り返し入力する内容の雛型化」「タイトルにサイト名を追加」「ローカルテスト時とネットワーク公開時でリンク先の切り替え」「ヘッダ&フッタの自動挿入」などの処理を自動化できます。

  • X ポスト
  • このエントリーをはてなブックマークに追加

はじめに

 本稿では、ホームページ製作に役立つさまざまなスクリプトをXSLTを用いて実装します。

 XSLTはXMLの変換に特化したスクリプト言語で、ホームページ製作に使用するXHTMLの操作を簡単に行うことができます。

  1. 繰り返し入力する内容の雛型化
  2. タイトルにサイト名を自動的に追加
  3. ローカルテスト時とアップロード時でのリンク先の切り替え
  4. ヘッダとフッタの自動追加
  5. 目次の自動生成
  6. キーワードの自動リンク
  7. サムネイルの自動生成

対象読者

 本稿では、XSLTスクリプトの文法やテンプレートなど、XSLTの基礎に関する説明を省略しています。XSLTに初めて触れる方は、参考文献で紹介したXSLTの解説サイトなどと併せてご覧ください。

必要な環境

 このサンプルはInternet Explorer 6.0+MSXSLを使用して動作確認をしています。スクリプト中でMSXSLの独自拡張を使用しているため、実行にはMSXSLが必要になります。MSXSLはMicrosoftが配付している、MSXMLの中に含まれています。MSXMLはMicrosoftのホームページからダウンロードできます。

 一部のスクリプトは、内部でJScriptを呼び出しファイル操作を行います。そのため「ウイルス対策ソフト」から、警告を受けるものがあります。スクリプトの内容はなんら悪意を含むものではありませんが、実行する際は記事の内容をよく読み、自己責任でお願い致します。

 

 また、「7.サムネイルの自動生成」のサンプルスクリプトを実行するためには、AKIHITO38さんのフリーソフト「Easyサムネイル」をインストールする必要があります。EasyサムネイルはVectorのダウンロードページより入手できます。

0.何もしないXSLTスクリプト

 XSLTは、XML文章の変換に特化したスクリプト言語です。「変換元XMLファイルに対し、何らかの操作を加えて、出力する」という形が、XSLTによる変換の核になります。例えば、ヘッダ自動挿入を行うXSLTスクリプトは、変換元のXHTMLにヘッダを挿入して出力するスクリプトであると言えます。

 初めに、変換元を加工せず、そのまま変換先に出力するXSLTスクリプトを紹介します。このスクリプトは、今後紹介するスクリプトの土台となります(実際にファイルを作成するときは、文字コードにご注意ください)。

sample.xsl(文字コード:utf-16 or utf-8)
<?xml version="1.0"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
                version="1.0">

  <!-- 出力モード -->
  <xsl:output method="html" encoding="Shift_JIS"/>

  <!-- 処理命令は無視 -->
  <xsl:template match="processing-instruction()"/>

  <!-- ノードや属性はそのまま出力 -->
  <xsl:template match="@*|node()" priority="-1.0">
    <xsl:copy><xsl:apply-templates select="@*|node()"/></xsl:copy>
  </xsl:template>

</xsl:stylesheet>

 1行目はXML宣言で、このファイルがXMLファイルであるということを示します。XSLTスクリプト自身もXML形式で記述します。

 2~3行目タグは、このXMLファイルがXSLTスクリプトであることを示すもので、このXMLファイルのルート要素(XMLファイルの一番上位の要素ノード)です。

 6行目のタグは、XSLTの出力に関する設定を行っています。今回は出力する文章の種類をHTMLに(method="html")、文字コードをShift_JISに(encoding="Shift_JIS")設定しています。

 9行目のタグは、変換元文章中の処理命令に対する処理を記述しています。今回は空要素になっているので、処理命令を見つけても何もしない、という指定になっています。

 12~14行目のタグは、変換元ファイルの処理命令以外のノードや属性に対するテンプレートを記述しています。テンプレートとは、変換元ファイルの要素に対する処理を記述したもので、XSLTにおけるコードの単位となります。くわしくは、参考文献をご覧ください。このテンプレートは、ノードや属性をそのままコピーすることを表しています。これにより、このXSLTスクリプトは変換元ファイルをそのまま出力します。

 それでは、このスクリプトを使用してXSLT変換を実際に行ってみましょう。テキストエディタを起動して、次の内容を入力し、ファイル名を「smaple.xml」として保存してください。上の2行にXSLT変換のための記述があることを除けば、普通のHTMLファイルと変わりありません。

sample.xml(文字コード:utf-16 or utf-8)
<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="sample.xsl"?>

<html>
<head>
  <title>0.何もしないXSLTスクリプト</title>
</head>
<body>
  <h1>0.何もしないXSLTスクリプト</h1>
  変換元ファイル(このファイル)の内容がそのまま出力されます。
</body>
</html>

 後は、Internet Explorerで変換元のファイルを開くだけで、変換が実行されます。

変換結果
変換結果

 このXSLTスクリプトは『何もしないXSLTスクリプト』なので、変換元ファイルに書かれたHTMLがそのまま出力されました。

XSLT変換とInternet Explorer

 XSLTスクリプトを実行するアプリケーションは、XSLTプロセッサと呼ばれます。XSLTプロセッサにはいくつか種類がありますが、本稿ではMicrosoftのMSXSLを使用します(MSXSLのインストール方法については、「必要な環境」をご覧ください)。

 MSXSLで変換を行うには、コマンドプロンプトで次のように入力します。

msxsl 変換元ファイル XSLTスクリプト -o 変換結果を出力するファイル名

 これがMSXSLの基本的な実行方法ですが、変換元ファイルを変更するたびにコマンドの実行を行うのは面倒です。そこで、Internet Explorerの出番となります。Internet Explorerには、<?xml-stylesheet type="text/xsl" href="..."?>の記述があるXMLファイルに対して自動的にXSLT変換を行い、その結果を表示する機能があります。この機能を使用すると、変換元ファイルに変更を加えた時、更新ボタンを押すだけで変更結果を確認することができます。

 変換結果を確認するときは「Internet Explorer」、変換結果を保存するときは「コマンドプロンプト+MSXSL」という使い分けができます。

『何もしないXSLTスクリプト』は本当に変換元をそのまま出力しているか?
 実は、上で紹介したXSLTスクリプトは「制御命令を取り除く」という加工を変換元文章に対して行っています。変換結果をファイルに保存し、それをInternet Explorerで開いた時に、二重に変換が行われるのを防ぐためです。
 

会員登録無料すると、続きをお読みいただけます

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

次のページ
1.繰り返し入力する内容の雛型化

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
特集記事連載記事一覧

もっと読む

この記事の著者

ひだちのいろ(ヒダチノイロ)

大学生。IT関係の仕事につくのが夢です。かやねずみの巣

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/1055 2008/08/26 13:37

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング