Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

Microsummary を作成する

microsummary generator はページのコンテンツから microsummary を生成するためのコマンドの集合です。ウェブページは generator を <head> 要素の <link rel="microsummary"> 要素により参照できます。generators はそれが適用されるページのリストを持っている場合、ユーザにより個別にダウンロードしたりインストールすることができます。

このチュートリアルでは、Spread Firefox home page 用に Firefox の現在のダウンロード数をラベル Fx downloads とともに表示する microsummary generator を作成します。例: 174475447 Fx downloads

ページを microsummary に変換する XSLT 変換シートを作成し、generator をページに適用させるためにどのように記述するかを学び、generator をダウンロードおよびインストールできるようにします。

このチュートリアルでは、ステップごとに変換シートやその他のコードを再掲し、追加された新しい項目は分りやすいよう 太字で 表示されます。

注意: もしあなたがウェブサイトデザイナーで、サイトのページに microsummary を作りたいなら、そのようなジェネレータを書くことが出来ます。しかし、より簡単で効率的な手法は、ページを生成するときに用いているのと同じツールと言語を用いてサーバーサイドで microsummary を作成することです。

例えば、サイトでページを生成するのに PHP を使用しているなら、view=microsummary と いう URL パラメータが指定されたときに microsummary を生成する PHP コードを書くことが出来ます。そして、 <link rel="microsummary"> 要素を用いて microsummary をページ内でリンクします。

<head>
  <link rel="microsummary" href="index.php?view=microsummary">
</head>

Firefox は <link rel="microsummary"> 要素を発見すると、 href 属性の URL を読み込みます。URL がジェネレータを指していれば、それをページの microsummary を生成するジェネレータとして用います。一方、URL がプレーンテキスト(または、プレーンテキストに変換可能な HTML コンテンツ)を返せば、Firefox はそのコンテンツをページの microsummary として用います。

はじめに

Generators は http://www.mozilla.org/microsummaries/0.1 を名前空間とし、ルート要素が <generator> である XML 文書として表現されます。generator を作成するにはまず、新規に空のテキストファイルを作り、XML 宣言と空の <generator> タグを追加します。

<?xml version="1.0" encoding="UTF-8"?>
<generator xmlns="http://www.mozilla.org/microsummaries/0.1">
</generator>

名前をつける

generator は生成する microsummary に対する名前として name 属性を持つ必要があります。名前はこの microsummary がどんな情報を提供するのかをユーザに明確に示すものでなければなりません。われわれの generator は Firefox のダウンロード数を表示する microsummary を提供するので、"Firefox Download Count" という名前をつけることにします。

<?xml version="1.0" encoding="UTF-8"?>
<generator xmlns="http://www.mozilla.org/microsummaries/0.1"
           name="Firefox Download Count">
</generator>

XSLT 変換シートを追加する

generator はページのコンテンツを microsummary に変換する XSLT 変換シート(XSLT スタイルシート)を含んでいる必要があります。XSLT はドキュメントを同じ情報を持つ異なる表現に変換するための強力な言語です。

generator に <template> で囲んで XSLT 変換シートを追加します。

<?xml version="1.0" encoding="UTF-8"?>
<generator xmlns="http://www.mozilla.org/microsummaries/0.1"
           name="Firefox Download Count">
  <template>
    <transform xmlns="http://www.w3.org/1999/XSL/Transform" version="1.0">
    </transform>
  </template>
</generator>

microsummary generator はリッチテキストを出力をするような任意の XSLT を含むことができますが、Firefox は現在、XSLT のテキスト出力の表示しかサポートしていないことに注意してください。

出力タイプを指定する

XSLT 変換シートはテキスト形式の microsummary を生成するので、XSLT の <output> 要素でこれを指定します。

<?xml version="1.0" encoding="UTF-8"?>
<generator xmlns="http://www.mozilla.org/microsummaries/0.1"
           name="Firefox Download Count">
  <template>
    <transform xmlns="http://www.w3.org/1999/XSL/Transform" version="1.0">
      <output method="text"/>
    </transform>
  </template>
</generator>

簡単な XSLT <template> を使用する

XSLT プロセッサは、変換シートの XSLT <template> 要素をドキュメントのノード集合と比較することによりドキュメントを変換します。<template>match 属性があるノードとマッチすると、プロセッサは要素のコンテンツで定義された変換を実行します。

ドキュメントのノードツリーを探索し、ドキュメントのコンテンツに基づいて再帰的に出力を生成することができるので、このメカニズムはとても強力です。しかし、Spread Firefox の microsummary を生成する目的においては、ドキュメントのルート要素にマッチする単一の <template> 要素だけが必要です。以下がそのコードです。

<?xml version="1.0" encoding="UTF-8"?>
<generator xmlns="http://www.mozilla.org/microsummaries/0.1"
           name="Firefox Download Count">
  <template>
    <transform xmlns="http://www.w3.org/1999/XSL/Transform" version="1.0">
      <output method="text"/>
      <template match="/">
      </template>
    </transform>
  </template>
</generator>

ダウンロード数を含める

XSLT 変換シートの出力にダウンロード数を含めるには、テンプレートに XSLT の <value-of> 要素を追加する必要があります。その select 属性にはダウンロード数を含むノードを指し示す XPath 記述を記入します。

XPath は HTML/XML ドキュメントのノードを特定するための言語です。これにはこれらのノードとそのコンテンツを操作するための基本的な機能が含まれています。特定のノードを表現する XPath 記述を得る最も手っ取り早いやりかたは 拡張機能 XPath Checker を使うことです。

拡張機能をインストールして(インストールを完了するために Firefox を再起動します) Spread Firefox ホームページ へ行って、Firefox のダウンロード数を見つけ(右列の一番下の大きな数値)、数字の上で右クリックしコンテキストメニューから View XPath を選択します。.

XPath Checker は新規ウィンドウを開きます。ウィンドウには XPath フィールドが含まれ、そこにはダウンロード数をあらわすノードを指す XPath 記述: id('download-count') が表示されています。

XSLT の <template> 要素に <value-of> 要素を追加し、select 属性に XPath 記述を記入します。

<?xml version="1.0" encoding="UTF-8"?>
<generator xmlns="http://www.mozilla.org/microsummaries/0.1"
           name="Firefox Download Count">
  <template>
    <transform xmlns="http://www.w3.org/1999/XSL/Transform" version="1.0">
      <output method="text"/>
      <template match="/">
        <value-of select="id('download-count')"/>
      </template>
    </transform>
  </template>
</generator>

テキストを追加する

microsummary にラベル Fx downloads を追加するには、追加したいコンテンツをもつ XSLT の <text> 要素を XSLT の <template> 要素に追加する必要があります。

Add a <text> element to the XSLT template with the content Fx downloads:

<?xml version="1.0" encoding="UTF-8"?>
<generator xmlns="http://www.mozilla.org/microsummaries/0.1"
           name="Firefox Download Count">
  <template>
    <transform xmlns="http://www.w3.org/1999/XSL/Transform" version="1.0">
      <output method="text"/>
      <template match="/">
        <value-of select="id('download-count')"/>
        <text> Fx downloads</text>
      </template>
    </transform>
  </template>
</generator>

複数のスペースが1個にまとめられる HTML とは異なり、XSLT タグ間のスペースは XSLT の出力には含まれないので、ダウンロード数と分離するためのスペースを追加することに注意してください。

この追加で、Spread Firefox のホームページを microsummary に変換する XSLT 変換シートの作成は終了です。

generator を適用するページを指定する

ここまでで変換シートの作成が終了したので、次にそれを適用するページを指定する必要があります。もし我々が Spread Firefox のウェブ管理者なら、 <head> 要素に <link rel="microsummary"> タグを追加することにより、ページ自身から generator を参照するだけで済みます。

<head>
  ...
  <link rel="microsummary" href="path/to/our/generator.xml">
</head>

我々はサイト管理者ではありませんが、generator の中に generator をどのページに適用するかを指定し、generator をダウンロードしたりインストールできるようにすることができます。generator を適用するページを指定するには、 <generator> 要素の中で <pages> 要素を使用します。

<?xml version="1.0" encoding="UTF-8"?>
<generator xmlns="http://www.mozilla.org/microsummaries/0.1"
           name="Firefox Download Count">
  <template>
    <transform xmlns="http://www.w3.org/1999/XSL/Transform" version="1.0">
      <output method="text"/>
      <template match="/">
        <value-of select="id('download-count')"/>
        <text> Fx downloads</text>
      </template>
    </transform>
  </template>
  <pages>
  </pages>
</generator>

<pages> 要素は generator を適用する、あるいは適用しないページを指定する <include><exclude> 要素の並びを記述できます。

generator をページに適用するには、<include> 要素を追加します。そのコンテンツはページにマッチングさせる正規表現です。generator をページに適用させないためには、<exclude> 要素を追加します。

デフォルトでは、generators はどのページにも適用されないので、適用するページを明示的に指定する必要があります。また、以前適用していたページがない限り、どのページも適用除外する必要はありません。

Spread Firefox のホームページにマッチする <include> 要素を追加します。

<?xml version="1.0" encoding="UTF-8"?>
<generator xmlns="http://www.mozilla.org/microsummaries/0.1" name="Firefox Download Count">
  <template>
    <transform xmlns="http://www.w3.org/1999/XSL/Transform" version="1.0">
      <output method="text"/>
      <template match="/">
        <value-of select="id('download-count')"/>
        <text> Fx downloads</text>
      </template>
    </transform>
  </template>
  <pages>
    <include>http://(www\.)?spreadfirefox\.com/(index\.php)?</include>
  </pages>
</generator>

もし正規表現になじみがないなら、Creating regular expressions for a microsummary generator が参考になります。

generator をダウンロードできるようにする

generator が Spread Firefox ホームページに適用できるようになったので、残りはこれをダウンロードできるようにすることだけです。そのためには、これをウェブに置いてどこかのページに JavaScript のリンクを作成する必要があります。このリンクは generator のダウンロードとインストールを行うための Firefox の window.sidebar.addMicrosummaryGenerator() メソッドをコールするようにします。

例えば、generator を http://people.mozilla.com/~myk/micro...-generator.xml に置いて、http://people.mozilla.com/~myk/micro...ial/index.html からインストールできるようにしたければ、次のようなコードを index.html に追加します。

<a href="javascript:window.sidebar.addMicrosummaryGenerator('http://people.mozilla.com/~myk/microsummaries/tutorial/sfx-generator.xml')">
  Install the Spread Firefox home page microsummary!
</a>

microsummary をサポートしていないブラウザでこのリンクをクリックすると JavaScript のエラーが発生しますが、このようなユーザのエクスペリエンスを向上させるために、microsummary 対応のブラウザを使用しているかどうかを調べて、未対応ならば説明を表示すべきでしょう。例えば次のようなコードです。

<script>
const warning = "Sorry, you need a microsummary-enabled browser like Firefox 2.0 to install and use microsummary generators.";

function addGenerator(url) {
  if (typeof window.sidebar == "object" &&
    typeof window.sidebar.addMicrosummaryGenerator == "function")
    window.sidebar.addMicrosummaryGenerator(url);
  else
    alert(warning);
}
</script>
<a href="javascript:addGenerator('http://people.mozilla.com/~myk/microsummaries/tutorial/sfx-generator.xml')">
  Install the Spread Firefox home page microsummary!
</a>

バグ 341283 により、addMicrosummaryGenerator() は相対 URL を受け付けないことに注意してください。

おわりに

これでインストールすると最新の Firefox ダウンロード数を表示する microsummary generator ができました。Spread Firefox ホームページをブックマークして、 Add Bookmark ダイアログの Summary ドロップダウンメニューから microsummary を選んでください。

microsummary に関する詳細な情報は Microsummaries home page を参照してください。

ドキュメントのタグと貢献者

タグ: 
 このページの貢献者: ethertank, FredB, Mgjbot, Level, Planche, The RedBurn
 最終更新者: ethertank,