Web製作メモ帳

Web制作で気づいたことをつらつらと

t2bの出力HTMLの文字数を減らすためにXSLTをカスタマイズ

Twitterの1日のつぶやきをまとめたブログを作成するためにt2bという自動投稿ツールを使っている。Twitterから1日のつぶやきの内容を取得し、ブログに自動投稿してくれるウェブサービスである。そのt2bで変換設定を「デフォルトHTML」にしていたのだが、つぶやきがちょっと多いとブログ側の文字数制限を超えてしまい、うまく投稿されないことがある。困ったものだ。文字数が多くなる原因はHTMLのタグにあるのであった。t2bが吐き出すHTMLはクラスなどいろんなタグ属性が設定されていて、タグの分も文字数にカウントされるため、文字数が増えてしまっていたのだ。「テキスト出力」というモードもあり、それを使うとリンクとかが設定されないので、文字数は最低限で済むが味気ない。

そこでt2bの変換モードを「カスタムXSLT」にして無駄なタグ属性を削ったり、クラス名を短くしてみたりした*1。その文字数が少なくてすむXSLTをここで紹介しよう。

<?xml version="1.0" encoding="UTF-8"?>

<xsl:stylesheet
        xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
        version="1.0">

    <xsl:param name="date" select=""/>

    <xsl:output method="html" encoding="UTF-8"/>

    <xsl:template match="/">
        <xsl:apply-templates/>
    </xsl:template>

    <xsl:template match="statuses">
        <div class="t2b">
        <dl class="statuses">
        <xsl:apply-templates />
        </dl>
        </div>
    </xsl:template>

    <xsl:template match="status">
        <xsl:element name="dd">
            <xsl:attribute name="class">hent</xsl:attribute>
            <span class="s-body">
                <span class="e-content"><xsl:value-of select="text2" disable-output-escaping="yes" /></span>
                <span class="e-meta">
                    <xsl:text> (</xsl:text>
		            <xsl:element name="a">
		                <xsl:attribute name="href">http://twitter.com/<xsl:value-of select="user/screen_name" />/status/<xsl:value-of select="id" /></xsl:attribute>
		                <xsl:attribute name="target">_blank</xsl:attribute>
		                <span class="pub"><xsl:value-of select="created_at_lt" /></span>
		            </xsl:element>
                    <span>from <xsl:value-of select="source" disable-output-escaping="yes" />)</span>
                    <xsl:if test="in_reply_to_status_id/text() != ''">
                        <xsl:text> </xsl:text>
                        <xsl:element name="a">
                            <xsl:attribute name="href">http://twitter.com/<xsl:value-of select="in_reply_to_screen_name" />/status/<xsl:value-of select="in_reply_to_status_id" /></xsl:attribute>
                            <xsl:attribute name="target">_blank</xsl:attribute>
                            in reply to <xsl:value-of select="in_reply_to_screen_name" />
                        </xsl:element>
                    </xsl:if>
                </span>
            </span>
        </xsl:element>
    </xsl:template>

</xsl:stylesheet>


デフォルトHTMLと比べると文字数が格段に少なくて済む。デフォルトHTMLと異なる点は、

  • あまり使わない様な属性を削除した(Aタグ内のrelなど)
  • class属性(クラス名)をデフォルトよりも短くした
  • Twitterのstatusへリンクされた投稿時刻等を括弧でくくる様にした(文字数の問題ではなく本がリンクで終わっていると繋がって見える現象への対処)
  • リスト形式を OL ではなく DL にした(これは私の好みの問題なので必須ではない)

といったところである。

使用前と使用後の違いは実際に私のブログを例にするので、それをご覧いただきたい(興味があればソースを見てみるとHTML出力が違ってるのがわかります)。

ご覧の通り、見た目はほとんど変わらない。リスト形式を ol から ul に変更しているので番号が出ているか出ていないかという違いはあるが、文字数を大幅に減らしたことによる見た目の影響はほとんどないのである*2

カスタムXSLTを使用するにはt2b(α)管理画面から「変換設定」を選んで、変換XSLTリストボックスでカスタムHTMLを選ぶと、下のほうにカスタムXSLTフィールドが表示されるので、そこに上記のコードを(必要に応じてカスタマイズして)コピーすれば設定できる。

これで、ブログ側の文字数制限で失敗することが格段に減るだろう。

今回t2bからの投稿設定をいじってみて最も苦労したのはHTML形式で投稿するとダグ間にある改行がブログに表示する際に勝手に<BR>に変更されてしまう。これは私がTwitterまとめブログを置いているlivedoorブログに限らず大多数のブログシステムにおいてそうだろう。(少なくともt2bの)XSLTはHTMLタグ間の改行の微妙な制御ができないのが問題であるんだよな。XMLの世界では改行は無視されるので、XSLTプロセッサは改行の出し方はあまり意識されずに作られているが、ブログシステムの入力としてみた場合は改行コードは改行として扱われ<BR>に変換されてしまうので。
その辺の改行の数の制御に一番手こずったのだが、時間がかかった割にはそれほど見栄えのしないものになってしまった。本当はもうちょっと無駄な改行を減らしたいのだが…。

*1:t2bはTwitterから自動取得したXMLファイルをXSLTを用いてHTMLに変換してブログにポストしている。XSLTとは、XMLによって記述された文書を他のXML文書に変換するための簡易言語であり、XML文書の構造を別の形式に変形するための変換ルールを記述するもの

*2:ただし、すでにt2bのデフォルトHTMLのクラス名を用いてCSSを設定している場合はCSSにクラス名だけを変えて変更が必要