TOLOTクライアントアプリでのレイアウト計算のしくみ / 似たような構成のPDFの差分確認を簡単にする方法

おつかれさまです こやちです。今回はTOLOTのしくみの一部であるクライアントアプリでの写真・テキストの自動レイアウト機能についてと、自動レイアウト結果の確認作業の簡略化について紹介します。

TOLOTの本で自由に写真もしくはテキストを入れられるページは62ページあります。62ページもあるとページ構成を考えるだけでも時間がかかるので、写真やテキストのレイアウトについてはアプリが自動的に計算することでユーザの負担を減らしています。 この処理はクライアントアプリ(Android版、iPhone版、パソコン版)で行われています。計算処理をクライアントで担当することでサーバ負荷を減らすこともできています。これについては以前のスタッフブログで簡単に触れられていますね。

TOLOTを支える技術(3)
TOLOT のアプリはその夢のリソースを有効利用するために、フォトブック編集時点ではアプリだけにデータを保持しています。写真を配置する位置やテキスト位置の計算もアプリ側で行っています。サーバはクライアントに指示された情報を保存し、実際の印刷データ生成時にはそのままの値を利用しています。 

特に表紙や奥付文字のレイアウトは、表紙デザインとその表紙に合ったフォントの組み合わせやタイトル・サブタイトルの文字数も考慮した上でキレイに見えるように、弊社デザイナーが仕様を決めています。


この仕様をプラットフォームの異なる3つのクライアントアプリ(Android版、iPhone版、パソコン版)が実装しています。各プラットフォームで写真やフォントから取得できる値の精度が微妙にズレていたり、そもそも参照できる値の種類が異なったりする点をいい感じに吸収して計算します。 最初の段階ではノウハウ不足の為にプラットフォーム間の差をうまく吸収することが難しく、アプリで位置調整・サーバでPDFファイルを作成・目視で確認、という作業を繰り返しました。 PDFファイルの目視確認は、パソコン上のプレビューアプリで以前のPDFと新しいPDFを並べて見比べたり、片方のPDFの透明度を変えたものを上下に重ねたりして確認しました。

上下に重ねて比較法を拡張し、以下の様な手順を自動化したdiff_pdf_imageというプログラムを作ることで差分確認を簡単にできました。

  1. 比較する2つのPDF内の全てのページをページ単位で画像化
  2. 片方のPDFページ画像をグレースケール化し、赤系の色に変更したものをAとする
  3. もう片方のPDFページ画像をグレースケール化し、青系の色に変更したものをBとする
  4. AとBを重ねた画像を作る。レイアウト計算に誤りがある場合、青や赤がはみ出て表示される

奥付レイアウト処理に問題があったときにdiff_pdf_imageで生成した差分画像の一部は以下のような感じでした:


表紙・背表紙・裏表紙部分を見ると、タイトル部分以外はほぼ紫になっています。ズレがない場合、赤と青がキレイに重なるので紫になります。 奥付部分を見ると、「作成者」以降の位置は重なって紫です。タイトル・サブタイトル部分の位置は一行分程度ズレて赤と青の文字が見えています。

実際に奥付のレイアウト処理問題に対処したときは、diff_pdf_imageのおかげで簡単に確認作業ができました。短縮された確認作業時間で浮いた時間を他のことに充てられてよかったですね。
Update:2013/07/16

TOLOTをご存知ですか?

スマホやパソコンでオリジナルのフォトブックを作れるアプリです。。