この記事を読むことによって、GAS(Google Apps Script)でマンダラチャートのフォーマットの作成に必要な、
・スプレッドシートに太枠の罫線を引く
・セルの色を塗りつぶす
・剰余演算子%で割り算の余りを使用
・二重ループの使い方
の概要が掴めます。
今回の具体例として野球界のビッグスター、二刀流でお馴染みの大谷翔平さんが、高校時代に愛用していた目標シートの1つである曼荼羅(マンダラ)チャートのフォーマットをスプレッドシートに自動で作成出来る様にGASでプログラミングしました。
「オオタニサン」こと大谷翔平選手が高校時代にドラフト1位で8球団から指名されることを目標にして作ったマンダラチャートがこちらになります。
大谷翔平選手が使っていた目標達成シート(マンダラチャート)とは? 作り方、目標達成シートを作る場合の注意点について
私の場合ですが、2026年(令和8年)の曼荼羅チャートはこの様になりました。
※ フォントの種類やサイズ、位置は入力時に設定しました。
スプレッドシートのメニューの「拡張機能」→「Apps Script」でエディターが表示されるので、そこに書いて行きます。
2026年1月現在、この様な画面になっております。
グローバル関数(どこからでも参照できる関数)は、SpreadSheetAppから辿ってアクティブドシートにアクセスするコードを書きました。
//グローバル関数でSpreadsheetAppからアクティブシートにアクセスする
const ss=SpreadsheetApp.getActiveSheet();以降はローカル関数になります。
ローカル関数1つ目:太枠線を囲う
まず、こちらの図をご覧下さいませ。
上のシートを見ると、セル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行目の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');
}
}
}
}
}ローカル関数3つ目:ど真ん中のエリアの塗りつぶし
今度はど真ん中の太枠セル範囲内を薄い黄色に塗りつぶしをして、更にその中央をオレンジ色にします。
薄い黄色を「#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版(電子書籍)
■ 関連記事 ■
