言語ゲーム

とあるエンジニアが嘘ばかり書く日記

Twitter: @propella

論文読み Adaptive Grid-Based Document Layout

http://delivery.acm.org/10.1145/890000/882353/p838-jacobs.pdf?key1=882353&key2=7814421711&coll=&dl=ACM&CFID=15151515&CFTOKEN=6184618

概要 (p 838)

画面上のレイアウトは紙に比べて劣っているのでこれを直したい。ページの大きさや色々な条件を知っている格子テンプレートで紙と画面のギャップを埋める。テンプレートは内容とビュー情報の関数として働く。

導入 (p 838 - 839)

格子レイアウトはモンドリアンコルビジェを起源とする。デザイン上の大変な利点があるが、問題はディスプレイの大きさに変化してデザインしなおすことが出来ないという事だ。我々が文書をオンラインで読む時、特定のサイズ用に注意深くレイアウトされた物か、画面上をただ流れるだけの物かという選択肢しか無い。

格子デザインは動的な再描画が出来ない。再描画が出来るシステム(HTML, TeX, MS-Word)は一次元の流れとして文書を扱う。この論文では、格子レイアウトの再描画を可能にする。難しい所は

  • テンプレートの表現
  • レイアウトエンジン
  • ページ検出(見た目と文書内容の位置を合わせる)
  • テンプレート作成ツール

関連研究 (p 839 - 841)

  • テキストを線上に並べる方法
  • 内容とフォーマットの分離
    • XSL, CSS, CCSS (A constraints-based extension to CSS)
  • 内容を見てグリッドを作る
    • Feiner, Weitzman
  • 制約解決
    • Sutherland, Heydon, Borning, Badros
  • ページ決定

表現 (p 841 - p 842)

ドキュメントと見た目は区別される。また、見た目はテンプレートとスタイルシートに分かれる。

  • ドキュメント
    • 別々のメディア型の複数のストリームから構成される。
    • 例えば、本文、写真、横書き、引用、写真解説等
    • ストリームは を使って入れ子状に出来る。
    • 要素に特別な印をつけて、大きめに表示するようテンプレートに指示出来る。
    • 指定で、大きな紙や小さな紙の事を考えて、条件によって表示するか決める
  • テンプレート
    • ページテンプレートは、表示する内容の位置を決める。
    • テンプレートを集めてレイアウトセットを作る。
    • テンプレートは要素、制約、条件で構成される。
    • 要素
      • 要素はページ内の矩形領域
      • ストリームを指定する。同じストリームを二回指定すると流し込みになる。
      • z-order によって重なり合い(テキストは回り込む)の指定が出来る。
      • 要素はテンプレートを指定出来る。つまり、テンプレートをネスト出来る。
    • 制約
      • 要素の大きさを数式で決める物。
    • 条件
      • レイアウトセットから一つのテンプレートを選ぶ方法。
      • 文字の量、写真の量などから、適切なページレイアウトを選択する。
  • スタイルシート
    • 今は独自形式だが、CSS か XSL-FO を使う予定。

レイアウト (p 843)

  • 適当なテンプレートの候補を探す
  • 候補の条件を評価
    • テンプレートと文書の適合具合を得点で表す。
    • 得点が一番よくなるように候補からテンプレートが選ばれる。
  • 制約を計算
    • 画像はテンプレートの枠に沿って表示
    • テキストは程よく行に分ける。
    • 残りは流す
    • 画像の縦横比は保たれる。
    • テキストも出来るだけ高さを合わせる(意味不明)

ページ決め (p 843 - 845)

ページ決めとは、テキストの順序やページの容量、文字と画像の参照関係に応じて内容をページに分割する事。テキストだけならば孤立した行にならないよう上下をあける。複雑な例では適切な得点を元に決める。例えば文章が画像を参照している際に、ページをめくらなければいけない回数「全めくり数」を使う。

  • 最初の手法
    • n ページの最適解を求めるのに n-1 ページの部分解を求める。
    • それぞれの部分解を表にする。
    • 部分解 S は、部分解の部分解S'から導かれる可能性の最適解になる。
    • この方法はコストがかかる。
  • 我々の手法
    • 最初の手法では不適切な解が含まれるのでそう言うのを排除する。
    • どうやって排除するか書いてあるのだが難しくて分からなかった。
  • 分析
    • テストの為にサンプル文書を生成した。
    • 文書は貪欲適合でページ分けして、その後最適解を求めた。
    • 期待通り「全めくり数」指数が向上した。
    • 貪欲適合では、5000 - 20000 語と10 - 45 画像を含む50文書の平均全めくり数は 3.2 だった。
    • 最適解では、全めくり数は1.4になった。
    • もっと柔軟にすると、ページ数は増えるが全めくり数は 0.1 減った。
    • 図が沢山ある文書では、全めくり数が 6.0 だったのが 1.7 になった。
    • Pentium IV で 3 秒以下で実行可能。
    • ページ分けはテンプレートに依存する。
      • SIGGRAPH と リッチな SIGGRAPH 形式でテストした。
      • 5000 語と 10000 語の二つの文書でテストした。
      • 異なる図形密度、1.2枚/ページと 2.5枚/ページでテストした。
      • 単純なテンプレートでは貪欲適合のめくり数は 4.4、最適解で 1.6
      • リッチなテンプレートでは、貪欲適合のめくり数は 2.7、最適解で 0.45
      • 孤立行は貪欲適合で 1.2/1000語、最適解で 0.4/1000語
    • 実行時間を減らす為、楽天的最適化を使う。
      • 5000 語で 6 図形で 21秒
      • 5000 語で 6 図形で 43秒
      • 10000 語 12 図形で 94秒
      • 10000 語 25 図形で 472秒

(p 842 Figure 5 より) 貪欲適合と最適解を比較する。貪欲適合では、文書の参照と画像が別のページにまたがってしまっている。また、孤立した行が生まれている。最適解により、参照と画像は同じページにレイアウトされ、孤立行も生まれない。また、適切な代替イメージも使われる。このレイアウト(四枚の SIGGRAPH 形式論文)に Pentium IV で 4 秒かかる。

創作環境 (p 845 - p 846)

  • 要素を並べる為のグリッドはページ相対%またはオフセットで指定出来る。
  • コンテンツに含まれる情報(例えば図形の縦横比)を使う事も出来る。
  • 局所伝達(LP: local propagation) で双方向制約が満たされる。
    • 例えばページ全体や要素をリサイズすると画面が適切に書き変わる。
    • LP はコストが安いが複数の制約がある場合正確では無い。
  • テンプレート
    • あるテンプレートに適切なサイズを指定出来る。
    • 特別重要な画像を指定出来る。

結論 (p 846 - p 847)

コンピュータのディスプレイは紙に近づきつつある。もしも紙のように表示できたらディスプレイの方が凄いだろう。しかし、この何十年来のペーパレス世界は単純な二次元画像とインタフェースの問題を偽ってきた。

どんな条件にも適用出来る格子レイアウトをどうやったら実現出来るだろうか?

この論文は、その最初の第一歩なので是非参加して欲しい。こんな面白い問題がある。

  • どんなエディタが良いか?二つのモードを楽に移れるか。
  • どのように複数バージョンのコンテンツを編集するか。
  • テンプレートの集合となる高レベルの全体スタイルをどうやって作るか。
  • 表のデザインの方法
  • 手書きの注釈を付けるスタイルをどう作るか
  • 上手にページを分割するための小さな部品による画像のスケールなど、ニュアンスをどうやって最適化するか。
  • 構成バランスなどメトリクスを追加する方法。
  • スキャンした文書からテンプレートやスタイルを推測する事は可能か?

私の感想。

まず、この文書自体の「全めくり数」が全然良くないのはどういう事だ?論文を読む為に何回もページをめくりました。やはり機械でやるのは限界があるのかな?

どんな文書でも格子レイアウトをするという事自体は、とても面白いテーマです。あと格子レイアウトが必要なのは紙に印刷するからで、スクロールする画面に適切な格子レイアウトについて知りたいと思いました。もしくは格子レイアウトとフローを組み合わせた仕組みかな。今のウェブは何となくそういうのを指向しているので、だんだんウェブデザインが洗練されてくると必要な要素が分かるかも知れません。あと、こういうガチガチに手間のかかる奴じゃなくて、適当にだだっと書くだけでかっこよくレイアウトしてくれる仕組みが欲しいです。

Yahoo pipes で遊ぶ。

なんか、知らんうちに流行ってるみたいなので Yahoo pipes http://pipes.yahoo.com/ で遊ぶ。ブログ(?) をアグリゲート(?) 出来るツールらしい。

Yahoo のアカウントを作ってログインしてみる。左の窓に部品が現れて右にドラッグするという Visio みたいなインタフェース。それぞれの部品にサンプルがついているのが素晴らしい!まずは単純にこのページの RSS を取得してみる。

  • Sources - Fetch と取り出す。
  • http://d.hatena.ne.jp/propella/rss をコピー
  • Fetch の下のピンを Pipe Output にくっつける。
  • Pipe Output をクリックして、実際にデータが取れるかテスト
  • save を押して左上にパイプの名前「propella nikki」を書いて save ボタンを押す。
  • my pipes のページに作ったパイプが出来ている
  • Publish を押すと公開できるらしい。
  • Run this Pipe で実行
  • でけた! http://pipes.yahoo.com/pipes/rjZnHW262xGsIPKIfOgC8A/

これでは面白く無いし、化けてるではないか!もうちょっと生産的な事に挑戦。

  • New pipe で 新しいパイプを作る。
  • My pipes にさっき作った propella nikki が部品として登録されているので取り出す(この辺は素晴らしい)。
  • Operators - Babel Fish を取り出す。
  • Japanese to English を選択
  • propella nikki - Babel Fish - Pipe Output の順に繋げる
  • 名前をつけて保存
  • http://pipes.yahoo.com/pipes/ogZ2S3a62xGAfAIZJzBjOg/

本当は日記の内容に合わせた写真を Flicr から取って来て挿絵みたいにして表示。みたいな事がしたかったんだけど、いまはまだそういう事が出来ないみたいだった。期待させる画面だけにかなり残念。サンプルもショボイのばっかり。でもこれは未来を想像して喜ぶべきなのだろう。

しかし、これってゼッツさんが作ろうとしてた物そのまんまだな。。。