連番画像を
見開きで
表示する漫画などの連番画像を
見開きで表示

『大量画像を一元管理』でご紹介したソフトsearch galleryに連番画像を見開きで表示する機能を追加しました。
私は漫画をデジタルで良く読むんですが、商品として販売されている電子書籍は専用ビュアーがあり、見開き表示は当然ですね。しかし個人でデジタル化した書籍は印刷物からスキャンするため、見開きページは面倒なので、ほとんどがバラバラの単ページだと思います。
しかし、それだと見開きのシーンがバラバラで表示されてしまい作者の意図が分かりにくかったり、迫力がなくなったりし残念な気持ちになりますよねえ。
それがいやでこれまでは面倒だけど見開きページはフォトショップで一つに合成したりしていました。しかしこれがめちゃくちゃ面倒なんですよ。なんとかならんかと考えた末にできたのがこの見開き機能です。

これまでの『Search Gallery』では画像フォルダを選択すると下記のように設定ページ数に分割されて展開表示されます。
デフォルトでは12ページづつ表示します。※『display』メニューで変更可能です。

しかしこれまでは拡大しても、バラバラに表示されていました。見づらいですね。

それをこのように見開きで表示できるようにしました。見開きだとより迫力も作者の意図もはっきりします。

操作メニューは上部に追加しました。
画面左右の矢印ボタンをクリックか、キーボードの左右矢印キーでも次・前に移動します。

当たり前なんですが、画像を見開きで表示したいのはPC使ってるときなので、スマホは対応していません。
縦型のスマホで見開きは意味がありませんので。
スマホを横にすれば可能ですが、それだと文字が読めません。
文字が読める大きさであればタブレットでも可能です。

サンプルはファイル収集にperlを使っているためサーバー内でないと起動しません。
そのためxamppなどのローカルサーバー内で展開すれば起動します。
サンプル内のお試し画像を表示するには下記左のように『select directry』メニューから『1.right-to-left』を選択すると、画像が展開されます。
上記の解説の通りに見開きボタンをクリックします。
見開きの頭にしたい画像をマウスオーバーして拡大メニューをクリックすると見開きで表示されます。

技術的には見開き部分はCSSだけで表示させてます。簡単なので下記のサンプルを見てください。
自動で表示させるためにはJSも使用しています。
簡単に説明しますと、背景画像で二つの画像を表示させ、背景画像を表示させる要素の横幅のみを二倍に設定します。
そして最初の画像を右にピッタリくっつけ、次の画像を左へピッタリくつけます。
これで二つの画像がピッタリくっついているように表示されます。

/*categoryはcomicとcomicRの2種類*/

const readDirect= {
	comic: 'left',
	comicR: 'right',
};
const readDirect2= {
	comic: 'right',
	comicR: 'left',
};

{/*右から左へ展開*/
	'top': '50%',
	'left': '50%',
	'margin-left': -1*w + 'px',
	'margin-top': -1*h/2 + 'px',
	'width': w*2 +'px',
	'height': h + 'px',
	'background': 
		'url('+v+')  ' + readDirect2[this._category] + ' center / contain no-repeat, 
		url('+ pairImg +')  ' + readDirect[this._category] + ' center / contain no-repeat',
		'transform': 'scale( '+ scale +')',
}

{/*左から右へ展開*/
	'top': '50%',
	'left': '50%',
	'margin-left': -1*w/2 + 'px',
	'margin-top': -1*h/2 + 'px',
	'width': w +'px',
	'height': h + 'px',
	'background': 'url('+v+')  center center / contain no-repeat',
	'transform': 'scale( '+ scale +')',
}

例えばプログラムのあるドライブ以外のドライブに漫画データがあった場合、プログラムのあるドライブへ移動するとコピーされてしますので、そういう場合は下記のようにシンボリックリンクを作成するといいです。
下記の場合だと、Lドライブの_viewer_に漫画データを放り込むとビュアーの_viewer_で表示されます。

mklink /D "D:\xampp8\htdocs\labo\comicViewer\thumb\_viewer_" "L:\_viewer_"

無許可・無断での配布・公開などは行わないでください。
ダウンロードファイルに使用している3つのperlファイルは環境に合わせてパスを正しく記述しなおしてください。
※　#!/xampp8/perl/bin/perl　などのように
サンプルページ：https://labo.studio-happyvalley.com/comicViewer/
ダウンロード用ファイル：https://studio-happyvalley.com/wp/dl/comicViewer.zip