新聞は見開きで組まれています。広告がノドをまたぎ、特集は4面で始まって5面で終わり、読者の目は2ページが並んでいることを期待します。私たちの電子版リーダーは、当初1ページずつ表示していました。Inkfold 1.1では見開きを表示できるようになりましたが、きちんと実現するには想像以上に多くの部分に手を入れる必要がありました。
どのページを組にするか
紙の新聞は1面が単独で始まり、その後2–3面、4–5面と続き、総ページ数が偶数なら最終面は単独になります。リーダーは現在のページからまったく同じ規則で表示ページを決めるので、5面に移動すると4–5面の見開きが開き、アドレスバーには組の最初のページが表示されます。以後は見開き単位で移動し、ページ表示は「4–5面」となります。
2ページを同じ高さに
同じ号でもページの大きさがそろっているとは限りません。ブランケット判の中にタブロイド判の別刷りが入ることもあります。そこで各ページを最初に表示されるページの高さに合わせて拡大縮小し、見開き全体を4ピクセルのノドを挟んだ1つのflexコンテナに配置します。拡大や移動はページ単位ではなくコンテナにかかるので、2ページは常に一緒に動き、パーセントで位置指定した記事エリアも印刷された記事の上にぴったり重なったままです。
意味のある画面でだけ
スマートフォンで見開きを表示しても、読めない切手が2枚並ぶだけです。リーダーは表示領域の幅が760ピクセル以上のときだけ見開きを使い、1200ピクセル以上では既定でオンにし、読者の選択をローカルストレージに記憶します。それより狭い画面では、同じボタンが短いヒントを表示するだけで、2ページを無理に詰め込みません。
ほかの機能もすべて合わせる
- 記事一覧：サイドパネルに両ページの記事をページごとの見出しの下に表示します。
- ロックされたページ：有料号では見開きの片方が無料、もう片方がロックされていることがあります。各ページが自分の購読案内を表示し、そのサイズはページに比例するので拡大にも追従します。
- 先読み：次の見開きの中サイズ画像を事前に読み込みます。詳しくは紙面画像の最適化についての記事をご覧ください。
- 右から左：アラビア語では画面のレイアウトが反転しますが、ページの順番は印刷どおりのままです。新聞はそのように作られているからです。
ポイント
- 表示ページは1つの規則で決める：1面は単独、その後は偶数–奇数の組。
- 各ページを共通の高さにそろえ、ページではなくコンテナを変形する。
- 見開きは広い画面でだけ提供し、読者の好みを記憶する。
- 「1ページ」を前提にしていた機能を総点検する：一覧、ロック、先読み、読み方向。
見開き表示は Inkfoldのライブデモ で確認できます。ソフトウェアは Charming Theme で入手できます。
自社媒体の電子版を計画中ですか？ご相談ください — ArtinTech Solution はこのような読書体験をつくっています。