【GASで曼荼羅チャートのフォーマット作成】オオタニサン!!大谷翔平も使っていたマンダラチャート

この記事を読むことによって、GAS(Google Apps Script)でマンダラチャートのフォーマットの作成に必要な、

・スプレッドシートに太枠の罫線を引く

・セルの色を塗りつぶす

・剰余演算子%で割り算の余りを使用

・二重ループの使い方

の概要が掴めます。

今回の具体例として野球界のビッグスター、二刀流でお馴染みの大谷翔平さんが、高校時代に愛用していた目標シートの1つである曼荼羅(マンダラ)チャートのフォーマットをスプレッドシートに自動で作成出来る様にGASでプログラミングしました。

「オオタニサン」こと大谷翔平選手が高校時代にドラフト1位で8球団から指名されることを目標にして作ったマンダラチャートがこちらになります。

大谷翔平選手が使っていた目標達成シート(マンダラチャート)とは? 作り方、目標達成シートを作る場合の注意点について

私の場合ですが、2026年(令和8年)の曼荼羅チャートはこの様になりました。

※ フォントの種類やサイズ、位置は入力時に設定しました。

スプレッドシートのメニューの「拡張機能」→「Apps Script」でエディターが表示されるので、そこに書いて行きます。

2026年1月現在、この様な画面になっております。

グローバル関数(どこからでも参照できる関数)は、SpreadSheetAppから辿ってアクティブドシートにアクセスするコードを書きました。

//グローバル関数でSpreadsheetAppからアクティブシートにアクセスする
const ss=SpreadsheetApp.getActiveSheet();

以降はローカル関数になります。


まず、こちらの図をご覧下さいませ。

上のシートを見ると、セルA1「1行目の1列目」、セルD1「1行目の4列目」、セルG1「1行目の7列目」、以下セル番地のみでA4,D4,G4,A7,D7,G7といった、3で割って1余るセルを起点として、そこから3行3列分の太枠が描かれています。
太枠はThick Borderなので、それにちなんだ関数名「thickBorder」を付けています。

また、この曼荼羅チャートの行の高さを変える為には、1行目から9行目まで高さを定数heightに好きな数値を代入して(今回は高さheightに120を代入しました。)

ss.setRowHeights(1,9,height);

と高さを指定します。

幅については定数widthに代入して(幅widthに50を代入しました。)

ss.setRowHeights(1,9,width);

定数の数値を変えることで、読者様のお好きなサイズに簡単に調整出来る様に致しました。

太線を引くには、

ss.setBorder(左,下,右,上,垂直,水平,色,種類)

を指定しています。
この関数を先ほどのグローバル関数の下に書きます。

//太枠線を引いて行の高さを指定する関数
function thickBorder() {

  //曼荼羅チャートの作成範囲の9行分の高さと幅を指定
  const height=50; //お好きな高さを指定
  const width=120; //お好きな幅を指定

  ss.setRowHeights(1,9,height);
  ss.setColumnWidths(1,9,width);

  /*枠線は、
  1行目の1列目、4列目、7列目、
  4行目の1列目、4列目、7列目、
  7行目の1列目、4列目、7列目
  といった、3で割って1余るセルを基点として、3行3列分設定されている
  */

  //二重ループで太枠線を引いている
  for(let i=1;i<=9;i++){
    for (let j=1;j<=9;j++){
      if(i%3==1 && j%3==1){
        let cell=ss.getRange(i,j,3,3);
        cell.setBorder(true,true,true,true,null,null,'black',SpreadsheetApp.BorderStyle.SOLID_THICK);
      }
    }
  }

}

こちらが実行結果です。

ループが二重になってくるとコードが複雑になってくるので、エディターのコードの部分を選択して右クリックして、「選択範囲のフォーマット」をクリックするとコードが整形できます。


次は、曼荼羅チャートの真ん中に黄色の塗りつぶしをするコードを書いて行きます。
この様なシートを作ります。

上図の様に濃い黄色に塗り潰す対象は、

2行目の2列目、5列目、8列目、
5行目の2列目、8列目、
8行目の2列目、5列目、8列目


です。
(5行目の5列目はど真ん中で別の色に指定するので、今回は対象外)

今回塗りつぶしの色として指定する濃い黄色は、「#ffee00」と設定します。
これはRGB形式なので、最初のffで赤を最強、次のeeで緑を割と強め、最後の00で青を最弱、という設定にしています。
因みに白が#ffffffで、黒が#000000です。

濃い黄色はDark Yellowなので、それにちなんだ関数名「darkYellow」にしています。
このコードを先ほどの関数thickBorderの下に書きます。

ローカル関数darkYellowのコードです。

//ど真ん中を除く各太枠の中央を濃い黄色に塗り潰す関数
function darkYellow() {

  /*
  濃い黄色(#ffee00)に塗り潰す対象は、
  2行目の2列目、5列目、8列目、
  5行目の2列目、      8列目、
  8行目の2列目、5列目、8列目です。
  */

  for (let i = 1; i <= 9; i++) {
    for (let j = 1; j <= 9; j++) {
      if (i != 5 || j != 5) {
        if (i % 3 == 2 && j % 3 == 2) {
          ss.getRange(i, j).setBackground('#ffee00');
        }
      }
    }
  }

}


今度はど真ん中の太枠セル範囲内を薄い黄色に塗りつぶしをして、更にその中央をオレンジ色にします。
薄い黄色を「#ffff88」、オレンジを「#ffd400」としました。
このローカル関数を「centerArea」にします。

完成形のシートとコードです。

//ど真ん中の太枠を薄黄色に塗りつぶしてから、その中央を濃いオレンジに塗りつぶす
function centerArea(){
  ss.getRange(4,4,3,3).setBackground('#ffff88');
  ss.getRange(5,5).setBackground('#ffd400');
}

ここまでのコードをまとめます。

//グローバル関数でSpreadsheetAppからアクティブシートにアクセスする
const ss=SpreadsheetApp.getActiveSheet();

//太枠線を引いて行の高さを指定する関数
function thickBorder() {

  //曼荼羅チャートの作成範囲の9行分の高さと幅を指定
  const height=50; //お好きな高さを指定
  const width=120; //お好きな幅を指定

  ss.setRowHeights(1,9,height);
  ss.setColumnWidths(1,9,width);

  /*枠線は、
  1行目の1列目、4列目、7列目、
  4行目の1列目、4列目、7列目、
  7行目の1列目、4列目、7列目
  といった、3で割って1余るセルを基点として、3行3列分設定されている
  */

  //二重ループで太枠線を引いている
  for(let i=1;i<=9;i++){
    for (let j=1;j<=9;j++){
      if(i%3==1 && j%3==1){
        let cell=ss.getRange(i,j,3,3);
        cell.setBorder(true,true,true,true,null,null,'black',SpreadsheetApp.BorderStyle.SOLID_THICK);
      }
    }
  }

}


//ど真ん中を除く各太枠の中央を濃い黄色に塗り潰す関数
function darkYellow() {

  /*
  濃い黄色(#ffee00)に塗り潰す対象は、
  2行目の2列目、5列目、8列目、
  5行目の2列目、      8列目、
  8行目の2列目、5列目、8列目です。
  */

  for (let i = 1; i <= 9; i++) {
    for (let j = 1; j <= 9; j++) {
      if (i != 5 || j != 5) {
        if (i % 3 == 2 && j % 3 == 2) {
          ss.getRange(i, j).setBackground('#ffee00');
        }
      }
    }
  }

}

//ど真ん中の太枠を薄黄色に塗りつぶしてから、その中央を濃いオレンジに塗りつぶす
function centerArea(){
  ss.getRange(4,4,3,3).setBackground('#ffff88');
  ss.getRange(5,5).setBackground('#ffd400');
}

お疲れ様でした。ブレイクタイムPhotoは、

オオタニサンのプリントの入った、JALの飛行機です。
羽田空港第二ターミナルで撮影しました。

ご精読有難うございました。

■ GASの入門書の紹介です ■

詳解! Google Apps Script完全入門 [第3版]
単行本
Kindle版(電子書籍)

初めてのGoogle Apps Scriptに戻る
写真クリエイターとしての活動

自己紹介

モバイルバージョンを終了