中綴じ製本（Javascript）

中綴じ

10ページくらいの資料を自前で製本したいということはないでしょうか。その際、冊子にして、中央をホッチキスで止める製本である「中綴じ」にすると、コンパクトで美しくまとまるかと思います。

ただ、中綴じにするにはページ順番を適切に並べ替える必要があります。両面印刷ができるプリンターならば、おそらく中綴じ印刷に対応していると思いますが、片面印刷のみのプリンターの場合、自分でページ順番を考えて、印刷ページに手入力する必要があると思います。 Javascriptでこれを出力できないかと思って、いろいろといじってみたら、はてなブログでも Javascriptが動くことがわかりましたので、以下の通り、実装してみました。

実行

表面のページ番号：
裏面のページ番号：

まず、表面のページ番号をコピーし、プリンターのプロパティから2ページ割付を選択し、印刷ページの入力欄にコピーしてください。その後、プリンターに裏返して用紙をセットし、裏面のページ番号をコピーして、表面と同様に進めてください。

注意

ページ数は4の倍数である必要があるので、4の倍数以外を入力するとエラーが出ます。また、負の数もエラーです。さらに、100ページを超える場合もエラーとしていますが、これは上限を決めないとサーバーへの負荷がかかってしまうのではないかという点と、そもそも100ページを超えるような中綴じ印刷はホチキスが家庭用としては多すぎるという点を考慮したものです。

ソースコード

参考までにソースコードも載せておきます。プログラミングはPythonやVBAをかじったくらいで、 Javascriptは初めてだったので、なかなか苦労しましたが、形になってよかったです。ニーズがあれば解説なども入れていきたいと思います。

<script>
    function onClick(){
           //1つ目の入力ボックスの値を取得する
           let value1 = document.getElementById("num1").value;

           switch(true){
               case value1 > 100:
                   document.querySelector('.result').innerHTML = "100以下を入力してください";
                   document.querySelector('.result1').innerHTML = "";
                   break;
               case value1 <= 0:
                   document.querySelector('.result').innerHTML = "正の数を入力してください";
                   document.querySelector('.result1').innerHTML = "";
                   break;
               case value1 % 4 != 0 :
                   document.querySelector('.result').innerHTML = "4の倍数を入力してください";
                   document.querySelector('.result1').innerHTML = "";
                   break;
               default:
                    const arr = Array.from({length: value1}, (_, i) => i + 1);
                    const arr3= arr
            
                    for (let i = 0; i<value1; i++){
                        let j =Math.floor(i/4) +1 ;
                        if(arr[i] % 4 == 0){
                            arr3[i]=value1-2*j+1 ;    
                        }else if (arr[i] % 4 == 1){
                            arr3[i]=value1-2*j+2 ;
                        }else if (arr[i] % 4 == 2){
                            arr3[i]=2*j-1 ;
                        }else{
                            arr3[i]=2*j ;
                        }
                    }

                    const b1=[];
                    const b2=[];

                    for (let i = 0; i<value1; i++){
                        if(i % 4 == 0){
                            b1.push(arr3[i]) ;    
                        }else if (i % 4 == 1){
                            b1.push(arr3[i]) ;
                        }else if (i % 4 == 2){
                            b2.push(arr3[i]) ;
                        }else{
                            b2.push(arr3[i]) ;
                        }
                    }           
                   
                    document.querySelector('.result').innerHTML = "表面のページ番号：" + b1 ;
                    document.querySelector('.result1').innerHTML = "裏面のページ番号：" + b2 ;
                    console.log(b1)
                    console.log(b2)
            }
       }
</script>