Wedataのiview用データベースSITEINFO仕様

ベータバージョンのiviewでAutoPagerizeみたいにsiteinfoを書けばどんなサイトでもiviewでから見られるようになりました。

そのデータベース: iview – wedataの今のところの仕様です。

はじめに

iviewはAutoPagerizeやLDRizeがやっているのと同じように、HTMLページを読み込んで、その中にある写真や説明文をXPathで取り出して表示しています。そのページの写真を全部表示し終えると、AutoPagerizeのようにXPathで表された次のページへのリンクをたどり、そのページの中にある写真を表示していきます。

サイト構造の分類と定義

データベースの各項目の意味を説明する前に、一般的な写真サイトのHTML構造について3種類分類します。多くのサイトは、以下で述べる3種類の構造のどれかに当てはまります。

たいていの写真サイトは、写真に限らず大量のコンテンツを管理しているサイトがそうしているように、ひとつのページにすべての写真を表示したりはせず、それらをたくさんのページに分割して表示しています。たいていは、ひとつひとつのページはリンクで接続されていて、リンクをたどっていくことですべての写真を見ることができます。このひとつのHTTPリクエストで取得できるHTMLを”ページ”と呼びます。

ひとつのページの中には、通常10程度のコンテンツが含まれています。コンテンツは多くの場合、文章と写真の組み合わせです。ブログであれば各エントリがコンテンツにあたります。ここではLDRizeに倣ってこのコンテンツを”paragraph”と呼びます。

Flat

ひとつのparagraphには、ひとつ以上の写真が含まれていることがあります。FFFFOUND!やFlickrはひとつのparagraphに写真がひとつずつ含まれています。この構造になっているものを便宜的にflatと呼びます。

Split&Flatten

ひとつのparagraphに複数の写真が含まれているものにはAsian Photography BlogやFace Hunterがあります。ふつうのブログを主に写真を紹介するために使っているものには、この構造になっているものが多く見られます。この構造になっているものはiview内で各paragraphの中で写真を取り出してそれを並べていることからsplit&flattenと呼びます。

ReadMore&Split&Flatten

paragraphには写真が含まれておらず、paragraphに入っているリンクをたどった先に写真が含まれているものもあります。リンクをたどった先のページ同士にはリンクがないので次のページに進むには元のページのリンクを使う必要があるものです。Behance Network :: Galleryやlastnightspartyがこの構造になっています。この構造はreadMore&split&flattenと呼びます。

多くのサイトはこの3つの構造のどれかに当てはまります。
iviewのSITEINFOは、この3つの構造を表現するためのものになっています。

データベースの各項目の意味

iviewのSITEINFOには以下の項目があります。先頭に*がついているものは必須の項目です。subParagraphから始まるものはsplit&flattenのサイトを定義する時に使います。subRequestから始まるものはReadMore&Split&Flattenのサイトを定義する時に使います。
flatのサイトは、先頭に何もついていないurl, paragraph, nextLink, caption, permalink, imageSourceで定義することができます。

*url
*paragraph
nextLink

caption
permalink
imageSource
imageSourceForReblog

subParagraph.paragraph
subParagraph.cdata
subParagraph.caption
subParagraph.permalink
subParagraph.imageSource
subParagraph.imageSourceForReblog

subRequest.paragraph
subRequest.caption
subRequest.permalink
subRequest.imageSource
subRequest.imageSourceForReblog 	

url

urlは最初に読み込むページのURLです。iviewはurlに指定されたページをロードしてきます。ページはHTMLまたはXMLで記述されている必要があります。

nextLink

nextLinkは次にロードするべきページのURLを表すXPathです。XPathがa要素またはlinkにマッチする場合、iviewはそのhref属性をURLとして利用します。逆に言えばaかlinkのときには@hrefを省略することができます。

paragraph

paragraphはページの中にある繰り返しの要素ひとつひとつを表すXPathです。ほかの項目(caption, permalink, imageSource, imageSourceForReblog)はこのparagraphのXPathにマッチした要素それぞれからの相対的なXPathとして表現します(LDRizeと同じかんじです)。

permalink

permalinkは写真の存在しているページのURLを表すXPathです。このURLにアクセスすれば、そのページのどこかに目的の写真が存在しているべきURLを表します。subRequest.paragraphが存在するときには、読み込むべきページのURLを示します。

このXPathはparagraphにマッチした要素をコンテキストとして表現されています。
XPathがa要素にマッチする場合、iviewはそのhref属性をpermalinkのURLとして利用します。
SITEINFOにsubParagraph.paragraph, subRequest.paragraphの両方が存在しない時(サイトの構造がflatのとき)に参照され、その場合必須の項目になります。

caption

captionは写真の説明となるテキストを表すXPathです。

このXPathはparagraphにマッチした要素をコンテキストとして表現されています。
SITEINFOにsubParagraph.paragraph, subRequest.paragraphの両方が存在しない時(サイトの構造がflatのとき)に参照されます。

imageSource

imageSourceは写真のURLを表すXPathです。imageSourceで表されたURLは画面に写真を表示する時に用いられます。

このXPathはparagraphにマッチした要素をコンテキストとして表現されています。
XPathがimg要素にマッチする場合、iviewはそのsrc属性をimageSourceのURLとして利用します。
SITEINFOにsubParagraph.paragraph, subRequest.paragraphの両方が存在しない時(サイトの構造がflatのとき)に参照され、その場合必須の項目になります。

imageSourceForReblog

imageSourceForReblogは写真をshareするときに使うURLを表すXPathです。iview for iPhoneのように画面の小さいデバイスでは、ピクセル数の少ないサムネイルでも十分な表示結果が得られる場合があります。しかしshareするときには可能な限りピクセル数の多い写真をshareするべきです。デバイスに表示するよりも高い品質の写真を利用できる場合にはそのURLをimageSourceForReblogで表現することで、デバイスに表示する写真のURLとは別にshareする写真のURLを指定することができます。

このXPathはparagraphにマッチした要素をコンテキストとして表現されています。
XPathがimg要素にマッチする場合、iviewはそのsrc属性をimageSourceForReblogのURLとして利用します。
SITEINFOにsubParagraph.paragraph, subRequest.paragraphの両方が存在しない時(サイトの構造がflatのとき)に参照され、その場合必須の項目になります。

subParagraph.paragraph

subParagraph.paragraphはサイトの構造がSplit&Flattenのときに、ひとつのparagraphの中に含まれている繰り返しの要素ひとつひとつを表すXPathです。ほかのsubParagraph.で始まる項目はすべてsubParagraph.paragraphにマッチした要素をコンテキストとして表現します。

subParagraph.cdata

subParagraph.cdataはAtomやRSSのようなXMLに含まれているCDATAの中身をHTMLとしてパースしたいときに、そのパースしたいCDATAの親要素をXPathで表します。

SITEINFOにsubParagraph.cdataがある場合、subParagraph.で始まる項目はsubParagraph.paragraphにマッチした要素ではなく、subParagraph.cdataにマッチした要素の小要素のCDATAをHTMLとしてパースした時のルートノードがコンテキストになります。

subParagraph.*

subParagraph.で始まるその他の項目は、XPathのコンテキストがsubParagraph.paragpraphにマッチした要素になること以外、subParagraph.のつかない項目と同じ意味を持っています。

subRequest.paragraph

subRequest.paragraphはサイトの構造がReadMore&Split&Flattenのときに、
permalinkで指定されたURLのページのドキュメントの中の繰り返しの要素ひとつひとつを表すXPathです。

ほかのsubRequest.で始まる項目はすべてsubRequest.paragraphにマッチした要素をコンテキストとして表現します。

subRequest.*

subRequest.で始まるその他の項目は、XPathのコンテキストがsubRequest.paragpraphにマッチした要素になること以外、subRequest.のつかない項目と同じ意味を持っています。

ようするに

表現したいサイトの構造ごとになにを定義すればいいのかを下に示します。*をつけたものは必ず定義する必要があるものです。

Flat

*url
nextLink
*paragraph
  *permalink
  caption
  *imageSource
  imageSourceForReblog

Split&Flatten

*url
nextLink
*paragraph
  *subParagraph.paragraph
    *subParagraph.permalink
    subParagraph.caption
    *subParagraph.imageSource
    subParagraph.imageSourceForReblog

subParagraph.permalink, subParagraph.captionのふたつは、各subParagraph.paragraphで変化しないことが多いため、かわりにpermalink, captionで指定することも可能です。その場合

*url
nextLink
*paragraph
  *permalink
  caption
  *subParagraph.paragraph
    *subParagraph.imageSource
    subParagraph.imageSourceForReblog

を定義すればokです。

ReadMore&Split&Flaten

*url
nextLink
*paragraph
  permalink
  *subRequest.paragraph
    *subRequest.caption
    subRequest.permalink
    *subRequest.imageSource
    subRequest.imageSourceForReblog

subRequest.permalinkは省略可能です。省略した場合permalinkのURLが利用されます(注: iview for Tomblooで正しく機能しないかもしれません)。

謝辞

なにもドキュメントのない状態で一畳プラレールとなおとくんの自由研究のSITEINFOを書いてくださったdotimpactさんありがとうございます。

途中まで書いて放置していたこのpostを書く力となりました。