MovableType で外部の RSS などを取得・整形して表示する

Posted by
ぴろり
Posted at
2013/09/18 12:12
Trackbacks
関連記事 (0)
Post Comment
コメントできます
Category
プラグイン カテゴリ
カバーイメージ

 先日、立て続けに公開した 2 本の MovableType プラグイン、XMLTransformerHttpUserAgent を利用して、外部のウェブサービスから RSS などの XML 文書を取得し、これを整形して表示する方法を紹介します。MovableType には、RSS に対応したプラグインが既に幾つかあったりしますが、XMLTransformer では XSLT を利用しているため、RSS フィードに限らず、ありとあらゆる XML 文書に対応できます。

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

概要

 手順としては、HttpUserAgent プラグインを利用して、外部サイトから XML 文書を取得します。次に、XMLTransformer プラグインを利用して、取得した XML 文書を整形するだけです。MovableType 側では、テンプレートに XSLT スタイルシートを記述することが主な作業になります。
 MovableType のテンプレート タグと異なり、XLST スタイルシートはなかなかクセがあって最初はかなり混乱しますが、その仕様は W3C で策定されているものであり、また XSLT に関する書籍解説ページも充実しています。独自規格ではなく世界標準規格ですので、この機会に覚えておいても損はないと思います。

RSS フィードからヘッドラインを生成する例

 ニュース サイトなどが配信している RSS フィードから、ヘッドラインを生成する例を示します。

<$mt:HttpGet url="http://communities.movabletype.jp/atom.xml" setvar="xml"$>
<mt:XMLTransform doc="$xml">
<?xml version="1.0" encoding="UTF-8" ?>
<xsl:stylesheet version="1.0"
    xmlns:doc="http://www.w3.org/2005/Atom"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output indent="yes" />

<xsl:template match="doc:feed">
  <ul><xsl:for-each select="doc:entry">
    <li><a href="{doc:link/@href}"><xsl:value-of select="doc:title"/></a></li>   
  </xsl:for-each></ul>
</xsl:template>

</xsl:stylesheet>
</mt:XMLTransform>

Google カレンダーの予定一覧を生成する例

 Google カレンダーの XML フィードから、予定一覧を生成する例を示します。

<$mt:HttpGet url="https://www.google.com/calendar/feeds/piroli.yukarinomiya%40gmail.com/private-0123456789abcdef0123456789aqbcde/basic" setvar="xml"$>
<mt:XMLTransform doc="$xml">
<?xml version="1.0" encoding="UTF-8" ?>
<xsl:stylesheet version="1.0"
    xmlns:doc="http://www.w3.org/2005/Atom"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output indent="yes" />

<xsl:template match="doc:feed">
  <ul><xsl:for-each select="doc:entry">
    <li><a href="{doc:link[@rel='alternate']/@href}"><xsl:value-of select="doc:title"/></a></li>
  </xsl:for-each></ul>
</xsl:template>

</xsl:stylesheet>
</mt:XMLTransform>

Google マップで公開されている地図から登録地点一覧を生成する例

 Google マップで公開されている ご当地ラーメンマップ の KML データから、登録されている地点一覧を生成する例を示します。

<$mt:HttpGet url="https://maps.google.co.jp/maps/ms?ie=UTF8&oe=UTF8&authuser=0&msa=0&output=kml&msid=207124152362853563418.00000111bdb1bbaab4567" setvar="xml"$>
<mt:XMLTransform doc="$xml">
<?xml version="1.0" encoding="UTF-8" ?>
<xsl:stylesheet version="1.0"
    xmlns:kml="http://earth.google.com/kml/2.2"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output indent="yes" />

<xsl:template match="kml:Document">
    <dl><xsl:for-each select="kml:Placemark">
        <dt><xsl:value-of select="kml:name" /></dt>
        <dd><xsl:value-of select="kml:description" /></dd>
    </xsl:for-each></dl>
</xsl:template>

</xsl:stylesheet>
</mt:XMLTransform>

Facebook のいいね!ランキングを生成する例

 「いいね!」ランキングを作る で公開・集計しているデータを XML 形式で取得し、その結果を整形する例を示します。左サイドバーにある「いいね!ランキング」は、この方法で生成しています。

<$mt:HttpGet url="http://lab.magicvox.net/likelife/ranking.cgi?xml&home=http://www.magicvox.net/" setvar="xml"$>
<mt:XMLTransform doc="$xml">
<?xml version="1.0" encoding="UTF-8" ?>
<xsl:stylesheet version="1.0"
    xmlns:omv="http://magicvox.net/pub/xmlns/likelife/"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output indent="yes" />

<xsl:template match="omv:ol">
    <ol><xsl:for-each select="omv:li">
        <li><a href="{omv:a/@href}"><xsl:value-of select="omv:a" /></a>
            <span class="fog">(<xsl:value-of select="omv:span[@class='like-count']" /> pts)</span></li>
    </xsl:for-each></ol>
</xsl:template>

</xsl:stylesheet>
</mt:XMLTransform>
このエントリーをはてなブックマークに追加  


この記事を読んだ人はこんな記事も読んでいます記事リコメンデーションについて

カバー画像:HTTP でコンテンツを取得する MovableType プラグイン:HttpUserAgent

関連記事/トラックバック

関連記事/トラックバックはまだありません

この記事にトラックバックを送るには?

コメントを投稿する

 
 (必須, 匿名可, 公開, トリップが使えます)
 (必須, 匿名可, 非公開, Gravatar に対応しています)
 (必須)
スパム コメント防止のため「投稿確認」欄に ランダムな数字 CAPTCHAについて を入力してから送信してください。お手数ですがご協力のほど宜しくお願いいたします。