A5サイズのPDFを無理矢理iPhoneアプリにする方法　その２: DTP-Sブログ-ひねもすデジタルビヘイビア

<< 根が共通だった２つのマーフィの法則 | TOP | 売れないiPhoneブックアプリを売る方法はあるか #denshi >>

2011年04月12日

A5サイズのPDFを無理矢理iPhoneアプリにする方法　その２

　A5サイズのドキュメントをiPhoneアプリ化する場合、解像度に制限がある。PDFのままPDFビューワーで閲覧すれば、ディテールはピンチアウトしてそのまま拡大すればいいが、Xcodeに貼り込んだ場合は、画像のままになってしまうからだ。そこで部分を拡大したいとき用に画像を別処理することにした。

　iPhoneアプリ作成ツールにはPDFを貼り込んで使うものは少なくない。たとえば

moviliboSTUDIO

はそうだ。iPhoneアプリの「西原理恵子のバラマガvol.0」はコンテンツ情報に「POWERD BY moviliboSTUDIO」と書かれている。サムネイルが画面センターに表示されてスクロールしたり、リンク部分がハイライトするような工夫がある。ただし、ピンチアウトすると、そのまま画像として拡大されるので、moviliboSTUDIOもPDFを使いながらも、画像化して表示していると考えられる。

　本当はiPhoneアプリにしてもPDFをそのまま拡大して表示することができればいうことはないが、実際に簡単ではないのかもしれない。XcodeにPDFを貼り込む場合は、画像化して表示するほうが扱いやすいのかもれない。

　SakuttoBookもPDFを画像化して表示している。ただしそのままiPhoneの画面に合わせて画像化すると、解像度が十分ではないことがある。そこで、まず解像度をRetina（レティーナ）に対応した。このことで、実は3GS以前の機種ではページめくりが遅くなる。しかし、いずれ機種の置き換えは進むだろうから、解像度を優先させたのである。

　書籍をiPhoneアプリにする場合、イラストや図版を入れる場合もある。簡単なものであれば、Retina（レティーナ）の640×960ピクセルあれば、たいてい対応できる。小さな文字で読みにくいところもビンチアウトして拡大して対応可能だからだ。

　しかしそれだけでは対応できない場合もある。スクリーンショットを小さくレイアウトしていると、640×960ピクセルでも文字が判別できない。そこで、さらに大きくしたいときは、別画像を用意して、特定場所からリンクさせて画像をピクセル等倍でも表示できるようにした。

　使い方は簡単でページ番号とリンク位置の座標値とボックスサイズ、そして画像ファイル名をカンマ区切りでCSVのファイルに入力するだけである。画像ファイルはXcodeで取り込んでおくだけでよい。取り込んだ画像ファイル名とCSVの画像ファイル名が同じであればよい。いったん画面の横に合わせて全体表示し、そこからピンチイン・ピンチアウト、スクロールが可能だ。

　　↓

　　↓

＊InDesign上で定規をポイントにして、タップ位置を算出する。ボックスを作成して変形パネルから数値を拾う。タップするだけなので数値は概算でかまわない。下はiPadで表示したもの。

　面倒なのは別表示する画像を作成する方法であった。最初は、オリジナルの貼り込み画像を取り込んでいたが、この方法だと画像上にある矢印や囲みが反映されない。また、複数の画像で図示している場合は逆にわかりにくくなってしまう。

　そこで、InDesign上に貼り込んだ図版をもう一度スクリーンショット化することにした。そのときの問題はピクセル等倍でショットをとりたいということであった。画面表示がピクセル等倍でない場合は、ショットが美しくないからである。

　InDesignに貼り込んであるスクリーンショットはPhotoshop形式で350 ppiで貼り込んである。そしてそこから変倍している。倍率は画像によって異なるが、同じ図版内の画像はたいていは倍率を統一しているので、倍率に合わせInDesignの表示倍率を変えることにした。たとえば「140％」に拡大しているときは

350÷1.4÷72＝347.2

となる。ウィンドウバーでダイレクトに表示倍率を指定して撮影する。こうすれば矢印や囲みも画像化できてみやすくなる。図版ごとに倍率が異なるので、倍率をメモ書きしておき、それを入力して撮影した。最初は手順で戸惑ったが慣れればけっこう素早くできるようになった。

　リンク位置の計測は簡単で、SakuttoBookに貼り込むPDFのサイズに関わらず、実寸のピクセル値をとればいいのである。InDesignの環境設定で定規の単位をピクセルにし、リンク位置をボックスで囲むのだ。ボックスのXY座標値とボックスサイズをメモして、ボックスを削除しておく。

　こうして画像ファイルを用意し、CSVデータを作成するとあとはXcodeに貼り込むだけである。再撮影したスクリーンショットは126枚となった。最初はPNGで保存していたが、ファイルサイズが大きくなるので、JPEG圧縮した。しかしそれでも20MBを超えてしまった。機会があれば、作り直したいものだ。

＊popoverScrollImageDefine.csvというファイルにCSV形式でページ番号、座標位置、ボックスサイズ、ファイル名を指定するだけ。

　『InDesignからEPUBの電子書籍を作成する方法』と同じように『Illustrator CS/CS2/CS3/CS4入稿データ作成講座』もiPhoneアプリにした。こちらは20MG以下なので、3G回線でもダウンロード可能。