第31回　Live Labs Pivot（1/2）

Live Labs Pivot

先月開催された開発者向けイベント「Microsoft PDC 09」にて、PivotというLive Labsの新しい研究プロジェクトが発表されました。今回から2回に渡りこのLive Labs Pivotを紹介します。

Pivotは、Web上の大量の情報を閲覧・探索する新しい方法であり、これまでのWebブラウザや検索エンジンとは異なった、新しいアプリケーションとしています。また、情報の集合を視覚化し、情報の中に隠れているパターンが見え、本質の発見にも作用するとしています。

使ってみようPivot

Pivotの入手

Pivotは現在、Technical Previewバージョンとしてダウンロードページからダウンロードができますが、制限がいろいろとあります。

推奨環境はWindows Aeroが有効なWindows 7、2GHz以上のx86 CPU、2GB以上のメモリとなっています。これ以外に対応する環境はWindows Aeroが有効なWindows Vistaです。また、公式には英語版Windowsのみ対応ですが、筆者の日本語環境では動作しています。

さらに、256MB以上のビデオメモリ搭載のビデオカードを必要とし（Intelのグラフィック統合チップセットによる動作は非サポート⁠）⁠、.NET Framework 3.5 SP1とInternet Explorer 8がインストールされている必要があります。

そして、インストール時にインストール用のコードが必要になります。このコードは同じページの「NEED AN INVITE?」ボタンをクリックし、電子メールアドレスを通知することで入手できます。すぐに送られてくるものではありませんが、筆者の場合1日以内にメールが送られてきました。

Pivot Collection Gallery

インストールできる環境にある方は、ぜひ実際に試してみてください[1]⁠。動作環境のない方や、すぐに確認したい方は、PivotのWebサイトに動画による紹介がありますので、これを見るのが手っ取り早いでしょう。

図1がPivotの画面です。Pivot用のサンプルコンテンツがあらかじめいろいろと用意されています。Pivot Collection Galleryから適当なものを選択すると閲覧できます。

実際に操作するか動画を見ないことには、おもしろさやユーザーエクスペリエンスがほとんど伝えられないのですが、どのように使用するのか図を使って紹介します。

アイテムビューとグラフビュー

図2がサンプルのコンテンツのひとつを閲覧したところです。ある集合を図のように画像の集合として一覧できます。Pivotで扱うデータは今のところ画像として表示できるものに特化しています。Pivotでは、このように一覧できる特定の集合をコレクションと呼びます。

右上のボタンをクリックすることで表示方法を切り替えられます（図3⁠）⁠。また、並び順は左上の「Sort」から選択でき、グラフビューのときは図のように分類されて表示されます。

フィルターパネル

ウィンドウ左側のパネルを使用して、表示するアイテムをフィルタリングが可能です（図4⁠）⁠。キーワードの入力や、フィルタリングする項目によってチェックボックスやスライダーなどを使い、表示するアイテムを選択できます。

このフィルタリングできるグループは、並び順の項目と一致していることがわかります。

インフォパネル

マウスのホイール操作や画像をクリックすることによって、自由にズームができ、特定のアイテムを選択できます（図5⁠）⁠。アイテムを選択した状態では右側にさらに詳細な情報が表示されます。

アイテムの関連するWebページがある場合、そのWebページへの移動もできます。現バージョンのPivotは多くの制限がありますがWebブラウザとして働き、Pivot用のコンテンツがあるWebサイトでは、上記で紹介した操作ができるように作られています。

以上のようにPivotを使用すると多くの情報を一覧したり、フィルタリングしたり、そして、ひとつをピックアップしたりすることができます。静止画ではまったくわかりませんが、各種操作時には画像がなめらかにズームや移動をしています。この動作も新しいユーザーエクスペリエンスの一要素を担っているといえるでしょう。

コレクションとアーキテクチャー

ここからは、開発者向けのPivotの情報を紹介します。

コレクション

Pivotで扱うコレクションは次のふたつの要素から成っています。

画像ファイル群
- Deep Zoom Image（DZI）
- Deep Zoom Collection（DZC）
XMLファイル
- Collection XML（CXML）

ひとつめは、各アイテムの画像ファイルです。単純な画像ファイルではなく、Deep Zoom形式のファイルである必要があります。これは、さらにDeep Zoom ImageとDeep Zoom Collectionとに分類できます。内容については後で紹介します。

もうひとつは、コレクション内の各アイテムの情報を記述したXMLファイルです。Collection XMLと呼び、コレクション内のアイテムの情報を記述します。こちらも後でその中身を見てみましょう。

Pivotはこれらにアクセスし、コレクションの表示処理を行っています。これらのファイルを用意さえすれば、オリジナルのPivotコンテンツも作れます。

アーキテクチャー

コレクションを表すCXMLなどの各ファイルは、Webサーバーやファイルサーバー、DBサーバーに配置されていることを想定しています。PivotはHTTP GETメソッドを使用してファイルにアクセスし、XMLファイルや画像ファイルを取得しています（図6⁠）⁠。

Pivotを実際に使用してみるとわかりますが、非常になめらかに移動やズームが行われています。これはLive Labsの別プロジェクト Seadragonの技術が使用されています。SeadragonはDeep Zoomという名前で既にリリースされており、Silverlightの機能として使えます。PivotではさらにWebサイトの描画のためInternet ExplorerのHTMLレンダリングエンジンTridentを使用しています。また、Pivot自体は.NET Frameworkにより作成されています。

Deep Zoom ImageとDeep Zoom Collection

Pivotで使用しているDeep Zoom形式のファイルはどのようなものなのでしょうか。その内容を確認してみましょう。

Deep Zoomでは、巨大なサイズの画像をなめらかに拡大・縮小表示するために、あらかじめ多数の解像度の異なる画像ファイルを用意しています。

Deep Zoom Image（DZI）

Deep Zoom Imageは、ひとつの画像が解像度別にフォルダに配置され、さらにタイル状に分割した画像ファイル群と、ひとつのXMLファイル（拡張子は.dziまたは.xml）で表されたものです。実際のDeep Zoom Imageのフォルダ構成と画像ファイルは図7と図8のようになります。

この画像のXMLファイルは以下のようになります。

<?xml version="1.0" encoding="utf-8"?>
<Image TileSize="254" Overlap="1" Format="jpg" 
       ServerFormat="Default" xmlns="http://schemas.microsoft.com/deepzoom/2009">
    <Size Width="1024" Height="768" />
</Image>

XMLは単純な内容ですね。このDeep Zoom Imageは、Pivotで表示するコレクション内のアイテム数だけ用意する必要があります。

Deep Zoom Collection（DZC）

Deep Zoomはひとつの画像を表示するだけの技術ではありません。一度に多くの画像を表示することも可能です。一度に表示する複数のDeep Zoom Imageを表したものがDeep Zoom Collectionです。

Deep Zoom Collectionも、解像度別のフォルダとタイル状の画像ファイル群と、ひとつのXMLファイル（拡張子は.dzcまたは.xml）から成ります。ただし、画像ファイルは、表示する複数の画像を1枚の画像に収めたものをタイル状に分割したものです（図9⁠）⁠。

XMLファイルの内容は、次のようになります。Deep Zoom Collectionに含まれるDeep Zoom ImageのXMLファイル場所などが記述されています。

<?xml version="1.0" encoding="utf-8"?>
<Collection MaxLevel="7" TileSize="256" Format="jpg" 
            NextItemId="8" ServerFormat="Default" xmlns="http://schemas.microsoft.com/deepzoom/2009">
  <Items>
    <I Id="0" N="0" Source="images/Chrysanthemum.xml">
      <Size Width="1024" Height="768" />
    </I>
    <I Id="1" N="1" Source="images/Desert.xml">
      <Size Width="1024" Height="768" />
    </I>
    <I Id="2" N="2" Source="images/Hydrangeas.xml">
      <Size Width="1024" Height="768" />
    </I>
    <I Id="3" N="3" Source="images/Jellyfish.xml">
      <Size Width="1024" Height="768" />
    </I>
    <I Id="4" N="4" Source="images/Koala.xml">
      <Size Width="1024" Height="768" />
    </I>
    …
  </Items>
</Collection>

Pivotは、Deep Zoom Collectionを参照することで、表示に必要な画像ファイルを得ています。これらのDeep Zoom形式の詳細はSeadragonのWebサイトを参照してください。Deep Zoom形式のファイルを示す上記よりも直観的な図も載っています。また、Deep Zoom形式のファイルを作成するアプリケーションも公開されています。

Collection XML

Pivotのコレクションを表すもうひとつの要素であるCollection XML（CXML）についても見てみましょう。Pivotは最初にこのCXMLにアクセスし、DCZファイルの情報やアイテム情報を得ます。

図10は、Windows 7のサンプルピクチャをPivotで表示できるようにした単純なコレクションです。これを元に説明します。コレクション内のアイテムは、アイテムの持つ情報は、アイテムの名前とRating（評価）とその値（0.3など）しかありません。

CXMLの拡張子は.cxmlを使用します。その内容は次のようになっています。

<?xml version="1.0" encoding="utf-8"?>
<Collection xmlns:p="http://schemas.microsoft.com/livelabs/pivot/collection/2009" 
            SchemaVersion="1.0" Name="My Pictures" 
            xmlns="http://schemas.microsoft.com/collection/metadata/2009">
  <FacetCategories>
    <FacetCategory Name="Rating" Type="String" p:IsFilterVisible="true" p:IsWordWheelVisible="true" p:IsMetaDataVisible="true" />
  </FacetCategories>
  <Items ImgBase="MyPictures_files\collection.xml">
    <Item Id="0" Img="#0" Name="菊">
      <Facets>
        <Facet Name="Rating">
          <String Value="0.8" />
        </Facet>
      </Facets>
    </Item>
    <Item Id="1" Img="#1" Name="砂漠">
      <Facets>
        <Facet Name="Rating">
          <String Value="0.5" />
        </Facet>
      </Facets>
    </Item>
    ...
  </Items>
</Collection>

ここで重要なキーワードがあります。それが

Facet Category と
Facet

です。

Facet Categoryとはアイテムの持つ情報のカテゴリーに相当します。今回の場合「Rating」です。Facet Categoryは、フィルタリングのグループや並び順の指定で使用されます。

Facetはアイテムの実際の値、Ratingの場合は0.3や0.5になります。この値はフィルタリング時の選択項目として利用されます。図10の左側のフィルターパネル部分とXMLの内容を見比べてみてください。

Ratingの値はString（文字列）型になっていますが、Facetとして指定できる型にはString以外にもLongString（複数行の文字列⁠）⁠、Number（数値⁠）⁠、DateTime（日時⁠）⁠、Link（Webページや別のコレクションへのリンク）型が使用でき、型によってPivot上での表示も異なります。

CXMLの中には、Facet Categoryの集合（今回の例では1個のみ）と、コレクション内のアイテムの集合があり、アイテム内にはFacetの集合（同じく例では1個のみ）が含まれています。この内容を増やしていくことでアイテムに多くの情報を付加できることになります。また、CXML内にあるか各アイテムは、DZCファイル内のDZIと関連していることもわかります。

コレクションの種類

CXMLに含めるアイテム数を多くすると、CXMLファイルサイズが肥大化し、またPivotで一覧できる限界もでてきます。そこでPivotではコレクションの種類を次の3種類に分類し、アイテム数などコレクションの特徴に応じて使い分ける方法が述べられています。

シンプルコレクション: もっとも基本的なコレクションです。ひとつのコレクションは最大3000個程度のアイテムを持ち、CXMLおよびDZCファイルは静的に1個ずつ存在します。Pivotが一度にダウンロードする基準にもなります。
リンクコレクション: シンプルコレクションよりも多くのアイテムを扱いたい場合に、シンプルコレクションを複数組み合わせたコレクションです。アイテムのFacetにそのアイテムの関連するコレクションへのリンクを指定することでコレクション同士を関連付けています。複数のCXMLおよびDZCファイルから成ります。
ダイナミックコレクション: さらに膨大なアイテム数を扱いたい場合、ユーザーのクエリーによって動的にCXMLとDZCファイルを生成して実現するコレクションです。ただし、この場合もアイテム数分のDZIファイルはあらかじめ生成しておくことが想定されています。

いかがでしたでしょうか。今回はここまでです。次回は実際にオリジナルのPivot用コレクションを作りたいと思います。