古籏一浩のJavaScriptラボ ― 第9回

Illustrator×JavaScriptで百ます計算を自動生成

2009年08月31日 15時00分更新

文● 古籏一浩

百ます計算表を完成させる

　前編／後編に渡って長い説明となりましたが、これで百ます計算表を表示する準備ができました。最後に、百ます計算の問題を生成して仕上げましょう。

　縦と横の数値を入れる配列と、加算した結果を入れる配列を用意します。縦と横の数値を入れる配列にはそれぞれ0〜9までの数値を入れた後、数値をシャッフルします。シャッフルは、0〜9までの乱数を2つ発生させ、その値を配列番号として指定し、2つの配列内容を入れ替えます。これを数回繰り返せば配列内容がシャッフルされます。なお、単純にMath.floor(Math.random() * 10) とすると精度的な問題で最初の行と列が数値の0になってしまうことがあるため、サンプル06では Math.floor((Math.random() * 100)/10)としています。

　問題の答えは加算するだけなので以下のようになります。


for (j=0; j<10; j++) for (i=0; i<10; i++) matrix[j][i] = wNum[i] + hNum[j];

　足し算ではなく、かけ算にしたい場合は以下のようにします。


for (j=0; j<10; j++) for (i=0; i<10; i++) matrix[j][i] = wNum[i] * hNum[j];

　引き算なら以下のようにします。解答はマイナス値になることもあります。


for (j=0; j<10; j++) for (i=0; i<10; i++) matrix[j][i] = wNum[i] - hNum[j];

　これで各配列に値が入ったので、あとは配列内容を読み出して四角形と数値を描いていきます。百ます計算表は、答えが表示されている解答シートと、答えが表示されていない問題シートの2種類を作成するため、output関数を作成し、渡された引数に応じて回答の表示・非表示を決めています。また、表を出力する位置もoutput関数の引数で指定できるようにしました。サンプル06では、output(70, 740, true)として、横70ピクセル、下から（原点から）740ピクセルの位置を起点にして表を描いています。値を変更すれば好みの位置に表を作成できます。

　これで、百ます計算表を作成するスクリプトが完成しました。


百ます計算表が完成

●サンプル06のソースコード


wNum = new Array();   // 横の数字
hNum = new Array();   // 縦の数字
matrix = new Array(); // かけ算の結果を入れる配列
masuSize = 50;  // マス目のサイズ (50pt)
for (j=0; j<10; j++) {
    matrix[j] = new Array();
    wNum[j] = j;
    hNum[j] = j;
}
// シャッフルする(15回)
for (i=0; i<15; i++){
    var point1 = Math.floor((Math.random() * 100)/10);
    var point2 = Math.floor((Math.random() * 100)/10);
    var temp = wNum[point1];
    wNum[point1] = wNum[point2];
    wNum[point2] = temp;
    point1 = Math.floor((Math.random() * 100)/10);
    point2 = Math.floor((Math.random() * 100)/10);
    temp = hNum[point1];
    hNum[point1] = hNum[point2];
    hNum[point2] = temp;
}
// for (j=0; j<10; j++) for (i=0; i<10; i++) matrix[j][i] = wNum[i] * hNum[j];  // かけ算の場合
for (j=0; j<10; j++) for (i=0; i<10; i++) matrix[j][i] = wNum[i] + hNum[j];   // 足し算の場合
// 新規ドキュメントを作成してマス目や答えを生成
function output(baseX, baseY, flag){
    // A4縦のドキュメントを作成
    var doc = app.documents.add(DocumentColorSpace.RGB, 595.28, 841.89);
    for (var j=0; j<10; j++){
        if (j==0){  // 最初の一行の処理
            for (k=0; k<10; k++) {
                drawBox(baseX + k*masuSize, baseY - j*masuSize, masuSize, masuSize, setRGBColor(255, 240, 160));
                drawText(baseX + k*masuSize+24, baseY - j*masuSize-40, wNum[k], 36);
            }
            baseY = baseY - masuSize;
        }
        for (var i=0; i<10; i++){
            if (i==0){  // 左端のマス目の処理
                drawBox(baseX-masuSize, baseY - j*masuSize, masuSize, masuSize, setRGBColor(255, 240, 160));
                drawText(baseX-masuSize+24, baseY - j*masuSize-40, hNum[j], 36);
            }
            drawBox(baseX + i*masuSize, baseY - j*masuSize, masuSize, masuSize, setRGBColor(255, 255, 255));
            if (flag){  // flagがtrueなら答えも出力する
                drawText(baseX + i*masuSize+24, baseY - j*masuSize-35, matrix[j][i], 24);
            }
        }
    }
}
// RGBカラー設定
function setRGBColor(r,g,b){
    var tmpColor = new RGBColor();
    tmpColor.red = r;
    tmpColor.green = g;
    tmpColor.blue = b;
    return tmpColor;
}
// 任意の色の四角形を描く
function drawBox(x,y,w,h, bgColor){
    var layerObj = app.activeDocument.activeLayer;
    pObj = layerObj.pathItems.rectangle(y, x, w, h);
    pObj.filled = true; //　塗りあり
    pObj.stroked = true; //　線あり
    pObj.strokeWidth = 1; //　線幅1ポイント
    pObj.fillColor = bgColor; //　塗りの色を指定
    pObj.strokeColor = setRGBColor(0,0,0); //　線の色を指定（黒色）
}
// 任意の座標に文字を表示する
function drawText(x,y, text, textSize){
    var textFrameObj = activeDocument.textFrames.add();
    textFrameObj.contents = text;
    textFrameObj.paragraphs[0].size = textSize;
    textFrameObj.paragraphs[0].paragraphAttributes.justification = Justification.CENTER;
    textFrameObj.translate(x,y);
}
// ドキュメントに出力
output(70, 740, false);
output(70, 740, true);

◆

　前回から2回に渡って、JavaScriptでIllustratorを制御する方法を紹介してきました。ほとんどの方には馴染みの薄い内容だったかと思いますが、いかがだったでしょうか。魅力を感じていただけたでしょうか。アイデア次第でいろいろな図を作成できますので、これをきっかけにIllustratorのJavaScriptを試してみましょう。