特集記事

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

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

2007/03/23 07:00

ポスト

7.サムネイルの自動生成

　変換元ファイルの<a>タグにthumbnail="yes"を指定することで、リンク先画像のサムネイルを表示します。サムネイルは自動的に生成されます。このスクリプトを実行するには「Easyサムネイル」がインストールされている必要があります。

変換元ファイル

<?xml-stylesheet type="text/xsl" href="sample.xsl"?>

<html>
<head>
  <title>7.サムネイル自動生成</title>
</head>
<body>

<h1>7.サムネイル自動生成</h1>

<p>
  画像リンク時に&lt;a href="..." <span style="font-weight:bold;">
thumbnail="yes"</span>&gt;&lt;/a&gt;とすることで、
リンク先画像のサムネイルを表示するスクリプトです。
サムネイル画像は自動生成されます。
</p>

<a href="image00.jpg" thumbnail="yes"></a>
<a href="image01.jpg" thumbnail="yes"></a>
<a href="image02.jpg" thumbnail="yes"></a>

</body>
</html>

変換結果

XSLTスクリプト

<?xml version="1.0"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
                xmlns:msxsl="urn:schemas-microsoft-com:xslt"
                version="1.0">

  <!-- パス関係用 -->
  <xsl:import href="../4/app1.xsl"/>

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

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

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

  <!-- サムネイル生成 -->
  <msxsl:script language="JScript" implements-prefix="xmlns">
    //aタグを渡すことでサムネイル画像を自動生成し、そのパスを返す。
    function createThumbnail(src)
    {
      // サムネイル画像のパス
      var thumb = src.replace(/(.*\/)?([^\/]*?)(?:\.[^.\/]*)?$/,
        "$1thumbnail/$2.png");
      // サムネイル画像を入れるフォルダ
      var thumbf = src.replace(/(.*\/)?([^\/]*?)(?:\.[^.\/]*)?$/,
        "$1thumbnail");

      // ファイルが存在するかどうか調べる
      var fso = new ActiveXObject("Scripting.FileSystemObject");
      if(!fso.FileExists(getLocalPath(thumb)))
      {
        // thumbnailファイルがない
        // 変換開始
        // イージーサムネイル
        var easy = new ActiveXObject("ZICONVINP.EasyThumbnail");
        easy.BitCount = 8;        // 256色
        easy.ConvertEndMode = 0;  // 変換後に何もしない
        easy.cxImage = 64;        // サムネイルサイズX
        easy.cyImage = 64;        // サムネイルサイズY
        easy.ImageZoom = 2;        // 縦横比を無視してズーム
        easy.PngIsInterlace = 0;  // プログレシブPNGではない
        easy.TargetFolder = getLocalPath(thumbf);
        easy.TargetFolderMode = 0;// ターゲットフォルダに直接出力
        easy.TargetImageType = "png";
        easy.ConvertFiles(getLocalPath(src));
      }

      // thumbnail画像のパスを帰す
      return thumb;
    }
  </msxsl:script>

  <xsl:template match="a[@thumbnail='yes']">
    <xsl:copy>
      <xsl:apply-templates select="@*[name()!='thumbnail']|node()"/>
      <img src="{xmlns:createThumbnail(string(@href))}"
           style="border-style:none;"/>
    </xsl:copy>
  </xsl:template>

</xsl:stylesheet>

　変換の手順を大まかに示すと

thumbnail="yes"が指定された<a>タグより、リンク先画像の相対パスを得る。
その相対パスをJScript関数createThumbnailに渡し、サムネイルを生成する。その後、サムネイルの相対パスを返す。
帰ってきたパスを使ってサムネイルを表示

　となります。

　2番でcreateThumbnail関数に渡されるのは『変換元ファイルから見た』相対パスです。しかも、区切り記号が「/」であるため、そのままJScript内で使用することはできません。そこで、「4.ヘッダ＆フッタの自動追加」で作成したgetLocalPath関数を使い、内部で絶対パスに変換しています。

　1番と3番の処理は、XSLTのテンプレート中で行われます。

<xsl:template match="a[@thumbnail='yes']">
  <xsl:copy>
    <xsl:apply-templates select="@*[name()!='thumbnail']|node()"/>
    <img src="{xmlns:createThumbnail(string(@href))}"
         style="border-style:none;"/>
  </xsl:copy>
</xsl:template>