見出し画像

DDV(Deep Dive View)表現

坂本先生はフルデジタルで描画されている
それ自体はイマドキ珍しくない。
しかしその書き込みが信じられないほど緻密。

B6判のコミックの表紙絵、口絵の原画(元データ)の解像度がおかしい。
長編で10,000ピクセル越えている絵も多々含まれている。
計算しても印刷の解像度を超えている。
つまり絶対に印刷で潰れる、インクの向こう側までみっちり書かれている。
ファンの中には虫眼鏡片手に漫画を読んでいる人も居るらしい。
A0で印刷した物を見たときは比喩でなく鳥肌が立った。「おお、これが本物か」と言ってしまったが、デジタルデータのプリントアウトで"本物"ってなんだ。

この魅力、というより迫力をどうやって電子書籍に込めようか。
bookには縮小表示し、ピンチインアウトでドットバイドットまで拡大できるようにしよう。

Books(旧iBooks)の仕様(というよりiBookStoreの仕様)で、400万ピクセル以上の画像は含められない。

画像サイズ(EPUB 内)は 400 万ピクセル以内にする必要があります。想定される表示サイズの 1.5 倍以上で、最大 400 万ピクセルの画像が推奨されます。ブック内の画像が 400 万ピクセル以内に収まるかどうかは、画像の高さと幅を掛け合わせることで計算できます。

iBooks アセットガイド 5.2.8
https://help.apple.com/itc/booksassetguide/ja.lproj/static.html

つまりiPadProのフルスクリーンでドットバイドットの画像を表示できない、という不思議な仕様。
この仕様ができたころのiPadの解像度はXVGAだったので問題なかったが、いつの間にかハードウエアの解像度が仕様を超えてしまっておかしいことになっている。なぜこの仕様が更新されないのか分からないが、いずれにせよこれでは私の鳥肌体験を伝えられない。

ということでtilingをすることにした。
絵を細かく切ってHTMLとCSSで並べるあれだ。
Webでやったことがある。
元絵を200ピクセル四方に切り出して並べてHTMLで並べ、ほぼフルスクリーンになるように縮小表示する。

実装して実機で表示してみると、表示が遅い。
40M近いPNGを一挙に並べて表示するんだからしょうがないか。
そこで、縮小した画像(これもtilingする)も用意して、拡大率によって切り替えることにした。
リサンプリング(縮小)のアルゴリズムもいろいろ調べながら実装。
モアレがでないように、といって鮮やかさもなるべく保つようにいろいろ調整。

google mapのように、画面に表示するところだけ画像を読み出すようにしてなんとかなった。しかし実装は複雑に。
このUIが、DDV(Deep Dive View)と名付けられた。

これがtouch UIと相性が良くて気持ちよい。
ぐりぐりと拡大していくと狂気のグラフィックが見えてくる。
なんなんだ透過光だからこそのこの美しさは。

DDVはサンプルにもカラー、モノクロ1枚ずつ含まれているので、良かったら試してみて頂きたい。
できれば12.9インチのiPad Proで。


この記事が気に入ったらサポートをしてみませんか?