Web上で100ます計算用紙を自動生成してくれるプログラムをJavaScriptで作成

こんばんは！

前回のJavaScriptでPDFを出力する方法の記事で紹介した「jsPDF」を使って、100ます計算を自動生成してくれるプログラムを作成したので共有したいと思います。

今回作成したものはこちらで使用することができます。
※今回のプログラムのみで作成されたものではありません。

プログラム

       <script type="text/javascript" src="jspdf.min.js"></script>
        <script type="text/javascript">
            function generatePDFMultiply() {
	var doc = new jsPDF();
doc.text(10,10,'100-cell calculation');
doc.setFontSize(17);
                //horizontal line                
                for(var i = 0; i < 12; i++){
                    var a = 30+10.5*i;
                   doc.line(20,a,190.5,a);
                }
                //vertical line
                for(var i = 0; i < 12; i++){
                    var a = 20+15.5*i;
                   doc.line(a,30,a,145.5);
                }
                //2 horizontal line
                for(var i = 0; i < 12; i++){
                    var a = 153+10.5*i;
                   doc.line(20,a,190.5,a);
                }
                // 2 vertical line
                for(var i = 0; i < 12; i++){
                    var a = 20+15.5*i;
                   doc.line(a,153,a,268.5);
                }
                //vertical number
                var verticalarray = [10];
                for(var i = 0; i < 10; i++){
                    var a = 47.5+10.5*i;
                    while(true){
                          var randomNum = Math.floor( Math.random() * 10);
                        if(!verticalarray.includes(randomNum)){
                           verticalarray[i] = randomNum;
                            break;
                           }
                          }
                    var randomStr = String(verticalarray[i]);
                   doc.text(26.5,a,randomStr);
                }
                //horizontal number
                 var horizontalarray = [10];
                for(var i = 0; i < 10; i++){
                    var a = 41.5+15.5*i;
                    while(true){
                          var randomNum = Math.floor( Math.random() * 10);
                        if(!horizontalarray.includes(randomNum)){
                           horizontalarray[i] = randomNum;
                            break;
                           }
                          }
                    var randomStr = String(horizontalarray[i]);
                   doc.text(a,37.5,randomStr);
                }
                //vertical number2
                var verticalarray2 = [10];
                for(var i = 0; i < 10; i++){
                    var a = 170.5+10.5*i;
                    while(true){
                          var randomNum = Math.floor( Math.random() * 10);
                        if(!verticalarray2.includes(randomNum)){
                           verticalarray2[i] = randomNum;
                            break;
                           }
                          }
                    var randomStr = String(verticalarray2[i]);
                   doc.text(26.5,a,randomStr);
                }
                //horizontal number2
                var horizontalarray2 = [10];
                for(var i = 0; i < 10; i++){
                    var a = 41.5+15.5*i;
                    while(true){
                          var randomNum = Math.floor( Math.random() * 10);
                        if(!horizontalarray2.includes(randomNum)){
                           horizontalarray2[i] = randomNum;
                            break;
                           }
                          }
                    var randomStr = String(horizontalarray2[i]);
                   doc.text(a,160.5,randomStr);
                }
                //×記号表示
                doc.text(26,37.5,'×');
                doc.text(26,160.5,'×');
doc.save('100-cell calculation.pdf');
}
            function generatePDFPlus() {
	var doc = new jsPDF();
doc.text(10,10,'100-cell calculation');
doc.setFontSize(17);
                //horizontal line                
                for(var i = 0; i < 12; i++){
                    var a = 30+10.5*i;
                   doc.line(20,a,190.5,a);
                }
                //vertical line
                for(var i = 0; i < 12; i++){
                    var a = 20+15.5*i;
                   doc.line(a,30,a,145.5);
                }
                //2 horizontal line
                for(var i = 0; i < 12; i++){
                    var a = 153+10.5*i;
                   doc.line(20,a,190.5,a);
                }
                // 2 vertical line
                for(var i = 0; i < 12; i++){
                    var a = 20+15.5*i;
                   doc.line(a,153,a,268.5);
                }
                //vertical number
                var verticalarray = [10];
                for(var i = 0; i < 10; i++){
                    var a = 47.5+10.5*i;
                    while(true){
                          var randomNum = Math.floor( Math.random() * 10);
                        if(!verticalarray.includes(randomNum)){
                           verticalarray[i] = randomNum;
                            break;
                           }
                          }
                    var randomStr = String(verticalarray[i]);
                   doc.text(26.5,a,randomStr);
                }
                //horizontal number
                 var horizontalarray = [10];
                for(var i = 0; i < 10; i++){
                    var a = 41.5+15.5*i;
                    while(true){
                          var randomNum = Math.floor( Math.random() * 10);
                        if(!horizontalarray.includes(randomNum)){
                           horizontalarray[i] = randomNum;
                            break;
                           }
                          }
                    var randomStr = String(horizontalarray[i]);
                   doc.text(a,37.5,randomStr);
                }
                //vertical number2
                var verticalarray2 = [10];
                for(var i = 0; i < 10; i++){
                    var a = 170.5+10.5*i;
                    while(true){
                          var randomNum = Math.floor( Math.random() * 10);
                        if(!verticalarray2.includes(randomNum)){
                           verticalarray2[i] = randomNum;
                            break;
                           }
                          }
                    var randomStr = String(verticalarray2[i]);
                   doc.text(26.5,a,randomStr);
                }
                //horizontal number2
                var horizontalarray2 = [10];
                for(var i = 0; i < 10; i++){
                    var a = 41.5+15.5*i;
                    while(true){
                          var randomNum = Math.floor( Math.random() * 10);
                        if(!horizontalarray2.includes(randomNum)){
                           horizontalarray2[i] = randomNum;
                            break;
                           }
                          }
                    var randomStr = String(horizontalarray2[i]);
                   doc.text(a,160.5,randomStr);
                }
                //+記号表示
                doc.text(26,37.5,'+');
                doc.text(26,160.5,'+');
doc.save('100-cell calculation.pdf');
}
        </script>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

function generatePDFMultiply() {

var doc = new jsPDF();

doc.text(10,10,'100-cell calculation');

doc.setFontSize(17);

//horizontal line

for(var i = 0; i < 12; i++){

var a = 30+10.5*i;

doc.line(20,a,190.5,a);

}

//vertical line

for(var i = 0; i < 12; i++){

var a = 20+15.5*i;

doc.line(a,30,a,145.5);

}

//2 horizontal line

for(var i = 0; i < 12; i++){

var a = 153+10.5*i;

doc.line(20,a,190.5,a);

}

// 2 vertical line

for(var i = 0; i < 12; i++){

var a = 20+15.5*i;

doc.line(a,153,a,268.5);

}

//vertical number

var verticalarray = [10];

for(var i = 0; i < 10; i++){

var a = 47.5+10.5*i;

while(true){

var randomNum = Math.floor( Math.random() * 10);

if(!verticalarray.includes(randomNum)){

verticalarray[i] = randomNum;

break;

}

var randomStr = String(verticalarray[i]);

doc.text(26.5,a,randomStr);

}

//horizontal number

var horizontalarray = [10];

for(var i = 0; i < 10; i++){

var a = 41.5+15.5*i;

while(true){

var randomNum = Math.floor( Math.random() * 10);

if(!horizontalarray.includes(randomNum)){

horizontalarray[i] = randomNum;

break;

}

var randomStr = String(horizontalarray[i]);

doc.text(a,37.5,randomStr);

}

//vertical number2

var verticalarray2 = [10];

for(var i = 0; i < 10; i++){

var a = 170.5+10.5*i;

while(true){

var randomNum = Math.floor( Math.random() * 10);

if(!verticalarray2.includes(randomNum)){

verticalarray2[i] = randomNum;

break;

}

var randomStr = String(verticalarray2[i]);

doc.text(26.5,a,randomStr);

}

//horizontal number2

var horizontalarray2 = [10];

for(var i = 0; i < 10; i++){

var a = 41.5+15.5*i;

while(true){

var randomNum = Math.floor( Math.random() * 10);

if(!horizontalarray2.includes(randomNum)){

horizontalarray2[i] = randomNum;

break;

}

var randomStr = String(horizontalarray2[i]);

doc.text(a,160.5,randomStr);

}

//×記号表示

doc.text(26,37.5,'×');

doc.text(26,160.5,'×');

doc.save('100-cell calculation.pdf');

}

function generatePDFPlus() {

var doc = new jsPDF();

doc.text(10,10,'100-cell calculation');

doc.setFontSize(17);

//horizontal line

for(var i = 0; i < 12; i++){

var a = 30+10.5*i;

doc.line(20,a,190.5,a);

}

//vertical line

for(var i = 0; i < 12; i++){

var a = 20+15.5*i;

doc.line(a,30,a,145.5);

}

//2 horizontal line

for(var i = 0; i < 12; i++){

var a = 153+10.5*i;

doc.line(20,a,190.5,a);

}

// 2 vertical line

for(var i = 0; i < 12; i++){

var a = 20+15.5*i;

doc.line(a,153,a,268.5);

}

//vertical number

var verticalarray = [10];

for(var i = 0; i < 10; i++){

var a = 47.5+10.5*i;

while(true){

var randomNum = Math.floor( Math.random() * 10);

if(!verticalarray.includes(randomNum)){

verticalarray[i] = randomNum;

break;

}

var randomStr = String(verticalarray[i]);

doc.text(26.5,a,randomStr);

}

//horizontal number

var horizontalarray = [10];

for(var i = 0; i < 10; i++){

var a = 41.5+15.5*i;

while(true){

var randomNum = Math.floor( Math.random() * 10);

if(!horizontalarray.includes(randomNum)){

horizontalarray[i] = randomNum;

break;

}

var randomStr = String(horizontalarray[i]);

doc.text(a,37.5,randomStr);

}

//vertical number2

var verticalarray2 = [10];

for(var i = 0; i < 10; i++){

var a = 170.5+10.5*i;

while(true){

var randomNum = Math.floor( Math.random() * 10);

if(!verticalarray2.includes(randomNum)){

verticalarray2[i] = randomNum;

break;

}

var randomStr = String(verticalarray2[i]);

doc.text(26.5,a,randomStr);

}

//horizontal number2

var horizontalarray2 = [10];

for(var i = 0; i < 10; i++){

var a = 41.5+15.5*i;

while(true){

var randomNum = Math.floor( Math.random() * 10);

if(!horizontalarray2.includes(randomNum)){

horizontalarray2[i] = randomNum;

break;

}

var randomStr = String(horizontalarray2[i]);

doc.text(a,160.5,randomStr);

}

//+記号表示

doc.text(26,37.5,'+');

doc.text(26,160.5,'+');

doc.save('100-cell calculation.pdf');

}

</script>

全体の流れ

「jspdf.min.js」をhtml内で読み込んでjsPDFライブラリを使用することができます。

new jsPDFでjsPDFクラスのインスタンスを生成、textメソッドで文字を書いています。

textメソッドの第一、第二引数は文字の書き始めの場所を指定しています(x,y)。

setFontSizeメソッドで文字サイズを指定。

lineメソッドで線を引いています。第一、第二引数は線を書き始める場所、第三、第四引数は線の書き終わりの場所を指定しています。

saveメソッドでPDFを保存します。

0から9までの数字を重複なしでランダムに並べる

これが一番のポイントです。

var horizontalarray2 = [10];
for(var i = 0; i < 10; i++){
var a = 41.5+15.5*i;
while(true){
var randomNum = Math.floor( Math.random() * 10);
if(!horizontalarray2.includes(randomNum)){
horizontalarray2[i] = randomNum;
break;
}
}
var randomStr = String(horizontalarray2[i]);
doc.text(a,160.5,randomStr);
}

var horizontalarray2 = [10];

for(var i = 0; i < 10; i++){

var a = 41.5+15.5*i;

while(true){

var randomNum = Math.floor( Math.random() * 10);

if(!horizontalarray2.includes(randomNum)){

horizontalarray2[i] = randomNum;

break;

}

var randomStr = String(horizontalarray2[i]);

doc.text(a,160.5,randomStr);

}

まずvar horizontalarray2 = [10];で10個の要素を持つ配列を用意します、この要素の数だけforループを回します。

次にvar randomNum = Math.floor( Math.random() * 10);で変数randomNumに0～9の数字をランダムで入れます。

Math.floor()メソッドは与えた引数の整数部分だけを返す関数で、Math.random()は0以上1未満のランダムな浮動小数点の乱数を返す関数です。

if文の条件式!horizontalarray2.includes(randomNum)は、配列の中に変数randomNumと同じものがあるかどうかを調べています。感嘆符「!」が付いているので配列の中に変数randomNumと同じものがない場合にtrueになります。
同じものがない場合には配列に変数を加え、break;によりwhile文から抜け出します。同じものが含まれている場合はもう一度変数randomNumに乱数を入れ、また確認します。

最後にtextメソッドでPDF内で数字を書いています。

これにより0～9までの整数を重複なしでランダムに並べることができます。

おまけ

Youtube上でPDF作成の様子の動画をアップロードしました。

また、記事の冒頭にも載せましたが、100ます計算用のプリントが欲しい方は、以下のリンクから使用することができるのでぜひ！

http://monowebapp.com/100cellPDF.html