画面サイズごとに電子書籍の余白サイズがイメージできるツールを作ってみた

3年以上前になりますが、「タブレットにとって最適な縦横比を考える」と題して、16:10や4:3等、いくつかのタブレットサイズで、漫画を見開き／単ページ表示した際、余白はどのくらい出るのか、サンプルを掲載しました。

そしてつい先日ありがたいことに、コメント欄でご指摘を頂き、青年誌(128x182mm)と少年誌(112x174mm)のサイズを勘違いしていたことがわかりました。

記事中の文言は修正済ですが、鳥頭なぼくは3歩歩いたらまた忘れるだろう、という自覚があります。

そこで、どうせなら画面のサイズ（縦横比）や、コミックの判型を自由に設定して、その余白の見え方がイメージできるツールを作っておけば、サイズとか忘れても大丈夫じゃないか！？

…とそんなふうに思いついたのでJavaScriptでツールを作ってみました。

画面比率と電子書籍の判型を指定して余白をイメージするツール

2時間くらいでちゃちゃっと作ったツールなので、バグがあったらごめんなさい😌

JavaScriptのソース

以下はプログラマー向けですので、興味のない方はスルーしてください。

HTMLタグまで解説していると長すぎるため、JavaScriptのみ掲載します。

<script>
function viewComic() {
 	let screen_ratio_w = parseInt(document.getElementById('screen_ratio_w').value);
	let screen_ratio_h = parseInt(document.getElementById('screen_ratio_h').value);
	let comic_ratio_h = document.getElementById('comic_ratio_h').value;
	let comic_ratio_w = document.getElementById('comic_ratio_w').value;
	let screen = document.getElementById('preview_screen');

	let screen_w, screen_h, comic_h;
	if (screen_ratio_w >= screen_ratio_h) {
		//横長
		screen_w = document.getElementById('preview_wrapper').clientWidth;
		screen_h = Math.floor(screen_w * screen_ratio_h / screen_ratio_w);
	} else {
		//縦長
		screen_h = document.getElementById('preview_wrapper').clientWidth;
		screen_w = Math.floor(screen_h * screen_ratio_w / screen_ratio_h);
	}

	if (document.getElementById('double_page').checked) {
		//見開きの場合、幅を2倍にする
		comic_ratio_w *= 2;
	}

	if ((screen_ratio_w / screen_ratio_h) >= ((comic_ratio_w ) / comic_ratio_h)) {
		//画面の横長比率がコミックより大きい場合は画面の高さを基準とする
		comic_h = screen_h;
		comic_w = Math.floor(comic_h * (comic_ratio_w / comic_ratio_h));
	} else {
		//画面の横長比率がコミックより小さい場合は画面の横幅を基準とする
		comic_w = screen_w;
		comic_h = Math.floor(comic_w * (comic_ratio_h / comic_ratio_w));
	}

	//画面を描画
	screen.style.width = screen_w+'px';
	screen.style.height = screen_h+'px';

	//コミックを描画
	let comic = document.getElementById('preview_comic');
	comic.style.width = comic_w + 'px';
	comic.style.height = comic_h + 'px';

	if (document.getElementById('double_page').checked) {
		//見開きの場合
		preview_comic.className = 'center_line';
	} else {
		//単ページの場合
		preview_comic.className = '';
	}
	//サイズ情報を表示
	document.getElementById('info').innerHTML = '画面サイズ:'+screen_w+'x'+screen_h+'px'+' コミック:'+comic_w+'x'+comic_h+'px';
}
window.addEventListener('load', function () {
	document.getElementById('preset_screen').onchange = function () {
		if (this.value == "") {
			return;
		}
		let temp = this.value.split(':');
		document.getElementById('screen_ratio_w').value = temp[0];
		document.getElementById('screen_ratio_h').value = temp[1];
		viewComic();
	
	};
	document.getElementById('preset_comic').onchange = function () {
		if (this.value == "") {
			return;
		}
		let temp = this.value.split('x');
		document.getElementById('comic_ratio_w').value = temp[0];
		document.getElementById('comic_ratio_h').value = temp[1];
		viewComic();
	
	};
	document.getElementById('double_page').onchange = function () {
		viewComic();
	};
	viewComic();
});
</script>

解説

縦横比計算とかあまりやったことがなくて、思いつきで書いたので、おかしかったら鼻で笑っていってください。

プレビューしている画面（黒い背景）のサイズについては横長だったら横幅を最大で500px、スマホ表示等でそれ以下の場合は横幅一杯にしています。

そして横長の場合は画面の高さを「　画面の横幅　×　縦横比の高さ　÷　縦横比の幅　」で算出。

こうして書くとややこしいですが、16:9の1920x1080pxの画面を思い浮かべれば 1920×9÷16 で 1080 が算出できることがわかるかと思います。

要するに縦横比を保ったまま画面サイズを縮小する計算式なわけですが、具体的にはJavaScriptの↓この部分で使われています。

if (screen_ratio_w >= screen_ratio_h) {
	//横長
	screen_w = document.getElementById('preview_wrapper').clientWidth;
	screen_h = Math.floor(screen_w * screen_ratio_h / screen_ratio_w);
} else {
	//縦長
	screen_h = document.getElementById('preview_wrapper').clientWidth;
	screen_w = Math.floor(screen_h * screen_ratio_w / screen_ratio_h);
}

この考え方は漫画の判型の縦横比を保ったまま、画面いっぱいに表示するための計算でも使われます。

但し、縦長か横長かで縦一杯にするか横一杯にするかを判断するわけにはいきません。画面サイズの縦横比が漫画の縦横比と異なるためです。

具体例として、16:10の画面を縦に持ったときを考えてみます。10:16、つまり、1:1.6です。

少年誌は112x174mmなので、112:174。つまり、1:1.55357....略。

このとき、画面サイズのほうが1.6で縦方向に余白ができることがわかるため、コミックの横幅を画面の横幅と一致させます。

一方で、2:3の画面サイズの場合、いわゆるSurfaceとかの縦持ちです。これは画面比率が1:1.5。

少年誌の1:1.55に比べると横が小さく、先ほどとは逆に横方向に余白ができることがわかるため、コミックの高さを画面の高さと一致させます。

この判定をしているのがJavaScriptの↓この部分。

if ((screen_ratio_w / screen_ratio_h) >= (comic_ratio_w / comic_ratio_h)) {
	//画面の横長比率がコミックより大きい場合は画面の高さを基準とする
	comic_h = screen_h;
	comic_w = Math.floor(comic_h * (comic_ratio_w / comic_ratio_h));
} else {
	//画面の横長比率がコミックより小さい場合は画面の横幅を基準とする
	comic_w = screen_w;
	comic_h = Math.floor(comic_w * (comic_ratio_h / comic_ratio_w));
}

以上、画面サイズとコミックのサイズの算出方法で多少ややこしいかな？と感じた部分を簡単に解説してみました。

まとめ

久しぶりにタブレットに電子書籍を表示する際の余白の話題が出たものの、書籍のサイズとかすぐに忘れる自信があったので、JavaScriptで縦横比計算ツールを作ってみました。

ついでに、当ブログにはプログラマー向けの記事が多いため、ソースコードと解説も掲載しておきました。いつもどおり、コードはご自由にお使いください。