使ってみよう! Windows Live SDK/API

第31回 Live Labs Pivot(1/2)

この記事を読むのに必要な時間:およそ 4.5 分

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

ここからは,開発者向けの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⁠。

図6 アーキテクチャー

図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のようになります。

図7 解像度別に保存された画像ファイル

図7 解像度別に保存された画像ファイル

図8 タイル状に分割された画像ファイル

図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⁠。

図9 Deep Zoom Collection 画像ファイル

図9 Deep Zoom Collection 画像ファイル

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形式のファイルを作成するアプリケーションも公開されています。

著者プロフィール

松江祐輔(まつえゆうすけ)

日本システムウエア株式会社 勤務。現在,ハードウェア設計・検証業務を担当。大学生・大学院生時代はベンチャー企業 有限会社ミレニアムシステムズにプログラマーとして従事。趣味はプログラミング。好きな言語はVisual Basic。Microsoft MVP for Windows Live Platform(Jul 2010 - Jun 2011),Windows Live(Jul 2011 - Jun 2013)。

URL:http://katamari.jp