【GASの最初の一歩】HUNTER×HUNTERの自作サンプル

この記事のシリーズを読むことで、アニメHUNTER×HUNTER(ハンターハンター)を通してGAS(Google Apps Script)の最初の一歩が学べます。

キャラクターと一緒に冒険している感覚で自作サンプルのコードを動かして頂けたらきっと楽しいと思います♪


episode1 「セル操作で入力と消去」

episode2 「文字入力と消去をボタン操作で行う」

episode3 「範囲を指定してまとめて入力(二次元配列は団地だ!)」

episode4 「ヒソカチェックで、IFとループを一気に習得」

episode5 「指定したセル範囲のフォントを変える」

episode6 「指定したセル範囲に色を付ける」

episode7 「キャラの身長で演算(平均・条件に該当する数のカウント)」

episode8 (最終回)「キャラの身長をシンプルなグラフ化する」

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

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

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

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

自己紹介

初めてのGoogle Workspace 〜スプレッドシートやChrome、Googleカレンダーなど〜

この連載記事では、スプレッドシートやフォーム、ChromeといったGoogle Workspaceについて、忙しい方向けにオススメの動画と本を紹介しております。

また、スプレッドシートに関しては、オリジナル関数の自作サンプルの記事も書いていて、図と文書を用いて解説しております。

ツール別に書籍や動画といった教材を掲載致しましたので、

・就活準備の学生の方

・新卒でPCスキルを付けたい方


・既に社会人として働いて、業務の生産性を向上させたい方


・中高年の学び直しや社会復帰を目標とされる方



にとって、「学びのハードルを極限まで下げるお手伝い」をしております。

■ Google Workshapce の各ツール ■

スプレッドシート

フォーム


カレンダー

Chrome

Gmail

Drive

ドキュメント

スライド

Map

GAS

■ 関連記事 ■


とりあえず事務職で働きたいから手っ取り早くExcel教えてくれ!

急にプレゼンすることになったから手っ取り早くパワポ教えてくれ!

Wordのポイントを手っ取り早く教えてくれ!



メインメニュー

写真クリエイターとしての活動
自己紹介

【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に戻る
写真クリエイターとしての活動

自己紹介

episode8 GAS【棒グラフ】キャラの身長をグラフ化「HUNTER×HUNTERで覚えるGoogle Apps Script」

この記事のシリーズを読むことで、アニメHUNTER×HUNTER(ハンターハンター)を通してGAS(Google Apps Script)の最初の一歩が学べます。

この記事では、

・キャラの身長を棒グラフにする

についての概要が掴めます。

今回は、「キャラクター名」と「身長」の最も簡単な縦棒グラフを作ります。
この様なシートを用意します。


グラフを作成する名前〜身長までの範囲をセルA1からB5までの5行2列分取得して、定数cellに格納します。

const cell=ss.getRange(1,1,5,2);

グラフを縦棒グラフを作成するに当たって、

var chart = sheet.newChart()

の後に

・グラフの種類…縦棒はasColumnChart()

・グラフにしたい範囲(定数cell)

・グラフの配置をセルA7から10行10列分にする

・グラフの高さと幅を指定する

・buildでグラフを作成

・insertChartでグラフをシートに組み込む

と設定します。

グラフの位置をセルA7から縦横に10ドット下と右に移動した位置に配置し、高さ300、幅400の大きさのグラフに指定します。

下記がそのコードになります。

//アクティブなスプレッドシートを選択するグローバル領域(共通の処理)
const ss=SpreadsheetApp.getActiveSheet();

//身長の縦棒グラフを作成する
function hightChart(){

  const cell=ss.getRange(1,1,5,2);
  let chart =ss.newChart()
    .asColumnChart()
    .addRange(cell)
    .setPosition(7,1,10,10)
    .setOption('height',300)
    .setOption('width',400)
    .build();
  ss.insertChart(chart);
};

このコードを実行すると、キャラクターと身長のシンプルな縦棒グラフが出来上がりました。


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

みなとみらいのクルーズ船です。

←episode7

←GAS自作サンプル集へ戻る

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

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

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

HUNTER×HUNTERのGAS自作サンプル集のページに戻る
初めてのGASに戻る


自己紹介

episode7 GAS【平均・カウント・昇順と降順の並び替え】キャラ身長で演算「HUNTER×HUNTERで覚えるGoogle Apps Script」

この記事のシリーズを読むことで、アニメHUNTER×HUNTER(ハンターハンター)を通してGAS(Google Apps Script)の最初の一歩が学べます。

この記事では、

・キャラクターの身長の平均

・身長170cm以上のキャラクターの人数をカウント


・カスタム数値形式で身長のcmや人数の人を表示する方法

・念系統を昇順、身長を降順で並び替え

・演算結果と並び替えのクリア

についての概要が掴めます。

今回はキャラの平均身長を求めるAVERAGE関数と、身長170cm以上という条件に該当する人数を数えるCOUNTIF関数を使いますので、Excelの関数に慣れている方でしたら馴染みやすいかもしれません。

それでは早速コードを書いて行きたいと思います。


まず、この様な簡易的なスプレッドシートを用意します。

ボタンの作り方とスクリプトの登録方法につきましては、episode2の記事 をご参照下さいませ。

最初に、キャラクターの身長を求めてセルG2(2,7)に入力するコードを書いて行きます。

//アクティブなスプレッドシートを選択するグローバル領域(共通の処理)
const ss=SpreadsheetApp.getActiveSheet();

//身長の平均を求める
function hightcm(){
  ss.getRange(2,7).setFormula('=AVERAGE(D1:D5)');
}

このスクリプト名の「hightcm」をコピーして、オレンジのボタンの右端の3点リーダーから「スクリプトを割り当て」を選んで登録します。

ボタンを押すとこの様に実行されました。

単位の「cm」は、メニューの「表示形式」→「123数字」→「カスタム数値形式」のダイアログボックスにこの様に入力します。cmはダブルクォーテーションで囲っています。


次に、身長170cm以上のキャラクターの人数を求めてセルG6(6,7)に入力するスクリプトを掲載致します。
先ほどのコードの下にこの様に付け加えます。

COUNTIF関数を用いております。

//身長170cm以上の人数を求める
function cm170over(){
  ss.getRange(6,7).setFormula('=COUNTIF(D1:D5,">=170")');
}

緑のボタンに「cm170over」を登録して実行致します。

この様に求まりました。

人数の単位の「人」は、先ほどのカスタム数値形式で「0人」とそのままダブルクォーテーションを付けずに指定します。


次に並び替えを行います。

・念を昇順
・念が同じ場合は身長の降順

になる様に動作するスクリプトを掲載致します。
念は3列目、身長は4列目になっております。

並び替えをするのに、sortメソッド、ascendingがtrueで昇順、falseで降順(背の高い順)を使用しております。

また、下にこのコードを追記します。

//念を昇順、身長を降順で並び替え
function sortNenHight(){

  //並び替えの範囲と並べ替え種類の指定
  ss.getRange(1,1,5,4).sort([
    {column: 3,ascending: true},
    {column: 4,ascending: false},
  ])

}

ピンクのボタンに「sortNenHight」を割り当ててボタンを押します。

実行結果です。
同じ変化系のヒソカとキルアでは、身長が高い方が上になっております。


最後に、並び替えを戻して計算結果を消去するスクリプトを掲載します。
順番を元に戻す処理も考えて、A列に予め番号を割り振っておきましたので、A列である「column: 1」を「ascending: true」で昇順にします。

//計算結果のクリアと順番を元に戻す(キャラクター順)
function sortClear(){

  //並び替えの範囲と並べ替え種類の指定
  ss.getRange(1,1,5,4).sort([
    {column: 1,ascending: true}
  ])

  //計算結果のクリア
  ss.getRange(2,7).clear();
  ss.getRange(6,7).clear();

}

このスクリプト「sortClear」を灰色のボタンに割り当てて実行します。

元の順番に戻って、計算結果もクリア出来ました。
ここまでのコードをまとめます。

//アクティブなスプレッドシートを選択するグローバル領域(共通の処理)
const ss=SpreadsheetApp.getActiveSheet();

//身長の平均を求める
function hightcm(){
  ss.getRange(2,7).setFormula('=AVERAGE(D1:D5)');
}


//身長170cm以上の人数を求める
function cm170over(){
  ss.getRange(6,7).setFormula('=COUNTIF(D1:D5,">=170")');
}



//念を昇順、身長を降順で並び替え
function sortNenHight(){

  //並び替えの範囲と並べ替え種類の指定
  ss.getRange(1,1,5,4).sort([
    {column: 3,ascending: true},
    {column: 4,ascending: false},
  ])

}


//計算結果のクリアと順番を元に戻す(キャラクター順)
function sortClear(){

  //並び替えの範囲と並べ替え種類の指定
  ss.getRange(1,1,5,4).sort([
    {column: 1,ascending: true}
  ])

  //計算結果のクリア
  ss.getRange(2,7).clear();
  ss.getRange(6,7).clear();

}

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

みなとみらいの夜景、コスモクロック21です。

←episode6               episode8(最終回)→

←GAS自作集サンプルへ戻る

HUNTER×HUNTERのGAS自作サンプル集のページに戻る
初めてのGASに戻る


自己紹介

episode6 GAS【指定セル範囲に色付け】「HUNTER×HUNTERで覚えるGoogle Apps Script」

この記事のシリーズを読むことで、アニメHUNTER×HUNTER(ハンターハンター)を通してGAS(Google Apps Script)の最初の一歩が学べます。

この記事では、

・色を付けたい範囲の指定方法

・文字の色とセルの塗り潰しの色を指定

・色の英語名と16進数を使用

についての概要を掴めます。


今回は、この表に色を付けます。
完成形のイメージは、この様な厨二病っぽい感じにしたいと思います。

各キャラクターの名前(列A)と念系統(列B)を黒背景に白文字に、
ヒソカチェックの列(列C)は、紫にします。

列ABの4行2列分の範囲をcharaNenと定義します。

//A列B列の名前と念系統が入っているセル範囲をcharaNenと定義
const charaNen=ss.getRange(1,1,4,2);

背景色を黒にしています。
色は英語名で指定出来ます。

charaNen.setBackground('black');

文字の色を白にしています。

charaNen.setFontColor('white');

列Cの4行1列分の範囲をhisokaCheckという名前にします。
1列分の場合は、列は略せますので、(1,3,4)として、(1,3)でセルC1,4で4行を取得しております。

//C列のヒソカチェックのセル範囲をhisokaCheckと定義
const hisokaCheck=ss.getRange(1,3,4);

色は英語名の他に、16進数で更に細かく指定出来ます。
ヒソカチェックの所は16進数で色を指定するので、ここで、16進数を用いての色の表し方について触れさせて頂きます。

・白… ffffff

・黒…000000

・最初の2桁が赤、次が緑、最後が青

以上より薄紫を[#eeddee]で表しました。
このコードでは、赤と青を強めにしていて、薄い紫になります。

cellHISOKA.setBackground('#eeddee');

参考までに色見本です。

ここまでのコードです。

//アクティブなスプレッドシートを選択するグローバル領域(共通の処理)
const ss=SpreadsheetApp.getActiveSheet();

//セルの背景とフォントを変える
function rookieColor() {

  //A列のキャラ名とB列の念の入っている範囲をcharaNenとする
  const charaNen=ss.getRange(1,1,4,2);

  //背景色を黒にする
  charaNen.setBackground('black');

  //文字色を白にする
  charaNen.setFontColor('white');

  //C列のヒソカチェックの範囲をhisokaCheckとする
  const hisokaCheck=ss.getRange(1,3,4);

  //背景を薄紫にする
  hisokaCheck.setBackground('#eeddee');

}

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

横浜ランドマークタワーとクルーズ船のみなとみらいの夜景です。

←episode5               episode7→

←GAS自作集サンプルへ戻る

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

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

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

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

自己紹介

episode5 GAS【指定セル範囲のフォント変更】「HUNTER×HUNTERで覚えるGoogle Apps Script」

この記事のシリーズを読むことで、アニメHUNTER×HUNTER(ハンターハンター)を通してGAS(Google Apps Script)の最初の一歩が学べます。

今回の記事では、

・指定の範囲の文字を太字

・フォントサイズの変更

・最終行のgetLastRow()の復習

についての概要が掴めます。


今回は、この様なシートを用意しました。
この表のA列にある「ゴン〜レオリオ」までのキャラのフォントを変えます。

キャラの名前が掲載されている範囲は、セルA1からA4までになります。
この範囲を太字で12ptにします。

キャラクターの人数をN(人)として、getLastRowで取得します。

const N=ss.getLastRow();

範囲に「cellROOKIE(ルーキー)」と名前を付けて、大きさを変える範囲を確保します。

let cellROOKIE=ss.getRange(1,1,N);

(1,1,N)は、セルA1(1,1)からN行分の範囲という意味です。
これで、キャラクターが増えても対応可能です。

この範囲にフォントの大きさを12ptで太字にする設定を下記のコードに施します。

cellROOKIE.setFontSize(12).setFontWeight(‘bold’);

ここまでのコードです。

//アクティブなスプレッドシートを選択するグローバル領域(共通の処理)
const ss=SpreadsheetApp.getActiveSheet();

//行数(人数)を取得する
const N=ss.getLastRow();

//キャラクターの名前を12ptの太字にする
function bold12pt(){

  let cellROOKIE=ss.getRange(1,1,N);
  cellROOKIE.setFontSize(12).setFontWeight('bold');
  
}

ここでボタンに関数「bold12pt」をスクリプトを割り当てで割り当てます。
実行すると、

この様に、キャラクターの名前がフォント12の太字になりました。



5行目の

const N=ss.getLastRow();

で、最終行を取得しているので、キャラクターの名前が増えても対応可能です。
この様に少し増やしてみます。

「新人潰しのトンパさん〜アモリ三兄弟」まで追加しました。
再度実行してみます。

これで全員の名前が太字になりました。

←episode4               episode6→

←GAS自作サンプル集へ戻る

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

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

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

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

横浜みなとみらいの夜景です。
コスモクロック21と、ヨコハマ グランド インターコンチネンタル ホテルです。

HUNTER×HUNTERのGAS自作サンプル集のページに戻る
初めてのGASに戻る


自己紹介

episode4 GAS【IFとループ】ヒソカの念チェック「HUNTER×HUNTERで覚えるGoogle Apps Script」

この記事のシリーズを読むことで、アニメHUNTER×HUNTER(ハンターハンター)を通してGAS(Google Apps Script)の最初の一歩が学べます。

この記事では、

・GASによるIF分岐とループでヒソカと同じ念系統か調べる

・配列で処理時間を短縮

・最後の行をgetLastRow()で求める

SpreadSheetApp→アクティブシート→アクティブセルと階層を辿ることによって処理時間がかかってしまうことを空の配列を用意することで解決する方法を掲載しています。

GASでは配列の扱いがとても重要になります。

ますは、前回(episode3)の復習をします。

・セルA1からB4にキャラクター名を入力する関数と消去する関数を作り、それぞれをボタンに登録しました。

//アクティブなスプレッドシートを選択するグローバル領域
const ss=SpreadsheetApp.getActiveSheet();


//スプレッドシートにキャラクターの名前と念系統の入った配列を出力する
function nenArray(){

  //二次元配列hhにキャラクターの名前と念系統を格納
  const hh = [
      ['ゴン','強化系'],
      ['キルア','変化系'],
      ['クラピカ','具現化系'],
      ['レオリオ','放出系']
    ];
  
  //配列hhをログに出力
  console.log(hh);

  //行の長さを調べる
  console.log(hh.length);

  //列の長さを調べる
  console.log(hh[0].length);

  //二次元配列hhを格納するために、スプレッドシートの4行2列を確保して出力する
  ss.getRange(1,1,hh.length,hh[0].length).setValues(hh);

}


//出力した配列を消去する
function myClear() {

  //出力した配列をgetDataRangeを使って取得して消去する
  ss.getDataRange().clear();

}

実行するとこの様になっていると思います。

ヒソカの念は「変化系」でキルアと一緒です。


今回はIF文を使って、ゴンからレオリオまでのキャラの念が、ヒソカと同じ変化系かどうか調べます。

ゴンは「強化系」なので「変化系」とは異なる為、条件が当てはまらないelseへと分岐します。

ゴンの念が入力されているセル「B1」は「1行目の2列目」ですので、(行,列)で書くと(1,2)と書くことも出来ます。

処理はelseになる為、隣のセルである「C1 (1,3)」には「XXX」と入力されます。

//アクティブなスプレッドシートを選択するグローバル領域(共通の処理)
const ss=SpreadsheetApp.getActiveSheet();


//【ゴン】がヒソカと同じ念系統か判定する関数
function Hisoka() {
  let nen = ss.getRange(1,2).getValue(); //ゴンの念を取得
  console.log(nen);
  
  //【ゴン】の念はヒソカと同じ「変化系」か?
  if(nen=='変化系'){
    ss.getRange(1,3).setValue('ヒソカと一緒');
  }else{
    ss.getRange(1,3).setValue('XXX'); //違うからこっちに分岐
  }
}

ログ出力です。
ゴンの念系統「強化系」が出力されました。

スプレッドシートです。
C1に「XXX」と入りました。


次に、「キルア」を調べます。

キルアは「変化系」なので、「ヒソカ」と同じという条件が当てはまり「ヒソカと一緒」と表示されます。

//アクティブなスプレッドシートを選択するグローバル領域(共通の処理)
const ss=SpreadsheetApp.getActiveSheet();


//【キルア】がヒソカと同じ念系統か判定する関数
function Hisoka() {
  let nen = ss.getRange(2,2).getValue(); //キルアの念を取得
  console.log(nen);
  
  //【キルア】の念はヒソカと同じ「変化系」か?
  if(nen=='変化系'){
    ss.getRange(2,3).setValue('ヒソカと一緒'); //同じだからこっちに分岐
  }else{
    ss.getRange(2,3).setValue('XXX'); 
  }
}

ログ出力です。

スプレッドシートです。
キルアの念はヒソカと同じなので、セルC2に「ヒソカと一緒」と入力されました。


次に、「クラピカ」を調べます。

クラピカは「具現化系」なので、「変化系」とは異なる為、条件が当てはまらないelseへと分岐します。

//アクティブなスプレッドシートを選択するグローバル領域(共通の処理)
const ss=SpreadsheetApp.getActiveSheet();


//【クラピカ】がヒソカと同じ念系統か判定する関数
function Hisoka() {
  let nen = ss.getRange(3,2).getValue(); //クラピカの念を取得
  console.log(nen);
  
  //【クラピカ】の念はヒソカと同じ「変化系」か?
  if(nen=='変化系'){
    ss.getRange(3,3).setValue('ヒソカと一緒'); 
  }else{
    ss.getRange(3,3).setValue('XXX'); //違うからこっちに分岐
  }
}

ログ出力です。

スプレッドシートです。
ヒソカとは念が異なるので、C3に「XXX」と入力されました。


最後に、「レオリオ」を調べます。
レオリオは「放出系」なので、ヒソカの「変化系」とは異なる為、条件が当てはまらないelseへと分岐します。

//アクティブなスプレッドシートを選択するグローバル(共通の処理)
const ss=SpreadsheetApp.getActiveSheet();


//【レオリオ】がヒソカと同じ念系統か判定
function Hisoka(){
  let nen=ss.getRange(4,2).getValue();  //レオリオの念を取得
  
  //【レオリオ】の念はヒソカと同じ「変化系」か?
  if(nen=='変化系'){                      
    ss.getRange(4,3).setValue('ヒソカと一緒');
    }else{
    ss.getRange(4,3).setValue('XXX'); //違うからこっちに分岐
  }
}

ログ出力です。
レオリオの「放出系」が出力されました。

スプレッドシートではC4に「XXX」と出力してelseの処理を実行しました。


ここまでで、「なんだか同じような処理をしていて、それで一部だけを変更している」と言う感覚になられたと思います。

上記のコードで「i」の部分のみを変えています。
そこで、ゴンからレオリオまでを繰り返して調べられる、Forによるループを使います。

getRange(i,2)getValue(); //キャラの念を取得 
getRange(i,3)setValue(‘ヒソカと同じか違うか’)      

実はここまでの記事で、ループのトレースを行えておりました。

追加としては、

ゴン・・・i=1
キルア・・・i=2
クラピカ・・・i=3
レオリオ・・・i=4

と、変数が出てくるぐらいです。

なぜ「i」なのか、それは、ループで慣習的に使う変数として、「i、j、k」がよく使われるからです。

このことについては、「なぜ、新人つぶしのトンパさんは、トンパさんという名前なのか」と突き詰めてしまうことの様なものなので、ループではiとかを使うんだな、程度に捉えておりましたが、やはり気になって調べた所、分かりやすい記事を見つけました。

「i, j, k」ってなに?知っておきたいfor文の変数名の由来


ゴン〜レオリオまでメンバーは4人ですので、その人数を調べるために、変数Nに「getLastRow()」(最後の行)を調べて格納します。

最後の行…getLastRow();

以上を踏まえてループとIFを使ったコードを書くと、下記の様になります。

//アクティブなスプレッドシートを選択するグローバル領域(共通の処理)
const ss=SpreadsheetApp.getActiveSheet();


//【メンバー】がヒソカと同じ念系統か判定する関数
function Hisoka() {

  const N = ss.getLastRow(); //人数は変数Nに格納。この場合は4人
  console.log(N);

  for(i=1;i<=N;i++){
    let nen = ss.getRange(i,2).getValue(); //メンバーの念を取得
    console.log(nen);
  
    //【メンバー】の念はヒソカと同じ「変化系」か?
    if(nen=='変化系'){
      ss.getRange(i,3).setValue('ヒソカと一緒'); //キルアの場合
    }else{
      ss.getRange(i,3).setValue('XXX'); //キルア以外
    }
  }
}

ログ出力です。
スプレッドシートには同様に出力されております。

この「Hisoka」をボタンの「スクリプトを割り当て」でボタンに登録します。
ボタンを右クリックして3点リーダーから登録します。


また、下記のコードで、ヒソカと念が同じかどうか調べた範囲の判定結果を削除します。

//ヒソカチェックのクリア
function HisokaClear(){
  
  //行数を取得して変数Nに人数を格納
  const N=ss.getLastRow();

  ss.getRange(1,3,N).clear();
}

一旦ここまでのコードをまとめます。
人数の行数をは判定もクリアも同じ4人でNですので、グローバル領域に移動しました。

//アクティブなスプレッドシートを選択するグローバル領域(共通の処理)
const ss=SpreadsheetApp.getActiveSheet();

//行数(人数)を取得する
const N=ss.getLastRow();
// console.log(N); 確認済みなのでコメントアウトしました。


//【メンバー】がヒソカと同じ念系統か判定する関数
function Hisoka() {

  for(i=1;i<=N;i++){
    let nen = ss.getRange(i,2).getValue(); //メンバーの念を取得
    // console.log(nen); 確認済みなのでコメントアウトしました。
  
    //【メンバー】の念はヒソカと同じ「変化系」か?
    if(nen=='変化系'){
      ss.getRange(i,3).setValue('ヒソカと一緒'); //キルアの場合
    }else{
      ss.getRange(i,3).setValue('XXX'); //キルア以外
    }
  }
}

//ヒソカチェックのクリア
function HisokaClear(){
  
  ss.getRange(1,3,N).clear();
}

紫のボタン「ヒソカチェック」に関数「Hisoka」を、灰色のボタン「ヒソ消し」に関数「HisokaClear」それぞれスクリプトを割り当てます。

これで、ボタンを使って、判定したり消したりが出来る様になりました。
現在、ヒソ消しを押して、判定の列は削除してあります。


このままでも良いのですが、GASでループを使う場合、1回1回SpreadsheetAppからアクティブシートを辿ってしまうので処理に時間がかかってしまいます。

そこで、一旦B列4行分の各メンバーの念系統を配列arrayに格納します。
配列arrayには[[‘強化系’],[‘変化系’],[‘具現化系’],[‘放出系’]]が入ります。

また、そのメンバーの念系統がヒソカの変化系と等しいかどうかの判定結果を格納する配列judgeを用意します。
配列arrayには[[‘XXX’],[‘ヒソカと一緒’],[‘XXX’],[‘XXX’]]が入ります。

それぞれの空の配列を用意しております。

//【メンバー】の念を格納する配列を宣言
  let array=[];

//変化系と等しいか判定結果を入れる配列
  let judge=[];

配列arrayを使って、念系統がヒソカと同じ変化系かどうか調べて、その判定結果を配列judgeに格納する処理にループを用います。
また、judgeに格納するときにpushを使います。

この配列を使うことによって、スプレッドシートからアクティブシートに階層を辿って行く処理時間を短縮できます。

ここまでの処理について、ログ出力のところまでのコードを掲載致しました。
配列は0から始まるので、ループの条件部分を修正しました。

i=0、i<Nと変更してあります。

また、配列judgeに入れる際、スプレッドシートに出力するのに二次元配列の形にするので、と[ ]を付けて配列に追加しております。

judge.push([‘ヒソカと一緒’]) → ifでキルアの念系統の場合

judge.push([‘XXX’]) → elseでキルア以外のメンバーの念系統の場合


その部分のコードの抜粋です。

//【メンバー】の念はヒソカと同じ「変化系」か?
    if(array[[i]]=='変化系'){
      judge.push(['ヒソカと一緒']); //キルアの場合
    }else{
      judge.push(['XXX']); //キルア以外
    }

ここまでのログ出力までのコードです。

//アクティブなスプレッドシートを選択するグローバル領域(共通の処理)
const ss=SpreadsheetApp.getActiveSheet();

//行数(人数)を取得する
const N=ss.getLastRow();


//【メンバー】がヒソカと同じ念系統か判定する関数
function Hisoka() {

  let array= [];
  let judge = [];

  //B列の各メンバーの念を配列arrayに格納
  array=ss.getRange(1,2,N).getValues();
  console.log(array);

  for(i=0;i<N;i++){
   
    //【メンバー】の念はヒソカと同じ「変化系」か?
    if(array[[i]]=='変化系'){
      judge.push(['ヒソカと一緒']); //キルアの場合
    }else{
      judge.push(['XXX']); //キルア以外
    }
  }
  console.log(judge);

}

配列arrayとヒソカの念との比較のログを出力しました。

【配列array】


【配列judge】

この後、配列judgeをスプレッドシートのC列に4行分書き出します。
関数Hisokaにこの2行を加えたのみです。

//スプレッドシートC列4行分に判定結果の入った配列judgeごと入力する。
  ss.getRange(1,3,N).setValues(judge);

ここまでのコードをまとめました。

//アクティブなスプレッドシートを選択するグローバル領域(共通の処理)
const ss=SpreadsheetApp.getActiveSheet();

//行数(人数)を取得する
const N=ss.getLastRow();


//【メンバー】がヒソカと同じ念系統か判定する関数
function Hisoka() {

  let array= [];
  let judge = [];

  //B列の各メンバーの念を配列arrayに格納
  array=ss.getRange(1,2,N).getValues();
  console.log(array);

  for(i=0;i<N;i++){
   
    //【メンバー】の念はヒソカと同じ「変化系」か?
    if(array[[i]]=='変化系'){
      judge.push(['ヒソカと一緒']); //キルアの場合
    }else{
      judge.push(['XXX']); //キルア以外
    }
  }
  console.log(judge);

  //スプレッドシートC列4行分に判定結果の入った配列judgeごと入力する。
  ss.getRange(1,3,N).setValues(judge);
}

//ヒソカチェックのクリア
function HisokaClear(){
  
  ss.getRange(1,3,N).clear();
}

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

横浜の夜景です。
思わずこの歌を歌いたくなりました。

←episode3               episode5→

←GAS自作サンプル集へ戻る

HUNTER×HUNTERのGAS自作サンプル集のページに戻る
初めてのGASに戻る


自己紹介

episode3 GAS【二次元配列は団地!!】範囲指定でまとめて入力「HUNTER×HUNTERで覚えるGoogle Apps Script」

この記事のシリーズを読むことで、アニメHUNTER×HUNTER(ハンターハンター)を通してGAS(Google Apps Script)の最初の一歩が学べます。

この記事では、

・配列は「0:ゴン」、「1:キルア」、「2:クラピカ」、「3:レオリオ」のイメージ

・配列を団地に例えて「キャラクター」と「念能力」の二次元配列を作成

・配列の長さをlengthを使って求め、同じ長さ分の行と列をスプレットシートに確保して配列を出力

についての概要を掴めます。

この記事で作成する配列は、キャラクター4人分の「キャラ名」と「念能力」を格納する4行2列の配列です。

シートに出力する関数、消去する関数の2つを作って、それぞれボタンに割り当て(登録)します。

また、シートに入力されている範囲をgetDataRangeで配列として扱えます。

まずは前回(episode2)の復習をします。

・セルA1に「ハンターハンター」と入力する関数と消去する関数を作り、それぞれをボタンに登録しました。

//アクティブなスプレッドシートを選択するグローバル(キャラ共通の処理)
const ss=SpreadsheetApp.getActiveSheet();


//入力とログ出力をする関数(ゴンさんの家)
function myInput() {
  
  //セル入力
  ss.getRange(1,1).setValue('ハンターハンター');

  //ログ出力
  console.log(ss.getRange(1,1).getValue());

}


//消去する関数(キルアさんの家)
function myClear() {

  //セルA1を消去
  ss.getRange(1,1).clear();

}

それでは、ここから配列にキャラクターの名前と念能力を格納していきます。

二次元配列に格納するするデータは、

「ゴン」「強化系」
「キルア」「変化系」
「クラピカ」「具現化系」
「レオリオ」「放出系」

です。

スプレッドシートはExcelの様に行と列の二次元ですので、二次元配列を使って入力します。

二次元配列や配列と聞くと難しそうですが、イメージは「団地(マンションでも)」です。

配列は添字0から始まります。

0階・・・ゴン(00号室に「ゴンの名前」 、01号室に「ゴンの強化系」)

1階・・・キルア(10号室に「キルアの名前」 、11号室に「キルアの変化系」)

2階・・・クラピカ(20号室に「クラピカの名前」 、21号室に「クラピカの具現化系」)

3階・・・レオリオ(30号室に「レオリオの名前」 、31号室に「レオリオの放出系」)

というイメージで二次元配列を「団地」と捉えると、掴みやすくなるのかも知れません。

以上を踏まえてコードを書いていきます。

まずは、キャラクターの名前と念の系統を入力する関数であるnenArray(配列は英語でarray)から解説します。

キャラクター名と念系統の二次元配列をこのように作成します。

//アクティブなスプレッドシートを選択するグローバル領域
const ss=SpreadsheetApp.getActiveSheet();

//スプレッドシートにキャラクターの名前と念系統の入った配列を出力する
function nenArray(){

  //二次元配列hhにキャラクターの名前と念系統を格納
  const hh = [
      ['ゴン','強化系'],
      ['キルア','変化系'],
      ['クラピカ','具現化系'],
      ['レオリオ','放出系']
    ];
  
  //配列hhをログに出力
  console.log(hh);
}

実行すると、配列がログに出力されました。

次に、上記の二次元配列は4行2列ですので、スプレッドシートのA1を起点に4行2列分のデータを確保するプログラムを書いていきます。

まず、行と列が4行2列になっていることをログ出力で確認します。
長さを調べるのにlengthを使います。

//アクティブなスプレッドシートを選択するグローバル領域
const ss=SpreadsheetApp.getActiveSheet();

//スプレッドシートにキャラクターの名前と念系統の入った配列を出力する
function nenArray(){

  //二次元配列hhにキャラクターの名前と念系統を格納
  const hh = [
      ['ゴン','強化系'],
      ['キルア','変化系'],
      ['クラピカ','具現化系'],
      ['レオリオ','放出系']
    ];
  
  //配列hhをログに出力
  console.log(hh);

  //行の長さを調べる
  console.log(hh.length);

  //列の長さを調べる
  console.log(hh[0].length);

}

行が4人分のhh.lengthが4になることはイメージしやすいと思います。

その下のhh[0].lengthですが、これは[‘ゴン’,’強化系’]の長さを調べていて、2列分なので2と返しています。


キルアのhh[1].lengthにしても同じ結果になりますが、全てのキャラクター(行)に対して2列になるので、代表してゴンのhh[0].lengthを用いております。

この行と列の長さは、スプレッドシートにキャラクターの配列hhを出力する時に、出力範囲を一致させる必要があるので調べました。

それではスプレッドシートに出力致します。
末尾にこの部分を追加します。

//二次元配列hhを格納するために、スプレッドシートの4行2列を確保して出力する
  ss.getRange(1,1,hh.length,hh[0].length).setValues(hh);

ここまでのコードの全てです。

//スプレッドシートにキャラクターの名前と念系統の入った配列を出力する
function nenArray(){

  //二次元配列hhにキャラクターの名前と念系統を格納
  const hh = [
      ['ゴン','強化系'],
      ['キルア','変化系'],
      ['クラピカ','具現化系'],
      ['レオリオ','放出系']
    ];
  
  //配列hhをログに出力
  console.log(hh);

  //行の長さを調べる
  console.log(hh.length);

  //列の長さを調べる
  console.log(hh[0].length);

  //二次元配列hhを格納するために、スプレッドシートの4行2列を確保して出力する
  ss.getRange(1,1,hh.length,hh[0].length).setValues(hh);

}

次に、データを消去に関するmyClear関数を作成します。
消去する範囲を、スプレットシート上のデータが存在する範囲として捉えることの出来るgetDataRangeを使っています。

シートオブジェクト.getDataRange()

以下、myClear関数のコードです。

//出力した配列を消去する
function myClear() {

  //出力した配列をgetDataRangeを使って取得して消去する
  ss.getDataRange().clear();

}

この書式でシート上のデータを配列として取得できました。
その下のclearメソッドで入力範囲を削除できます。

ここまでのコード全体を記述します。

//アクティブなスプレッドシートを選択するグローバル領域
const ss=SpreadsheetApp.getActiveSheet();


//スプレッドシートにキャラクターの名前と念系統の入った配列を出力する
function nenArray(){

  //二次元配列hhにキャラクターの名前と念系統を格納
  const hh = [
      ['ゴン','強化系'],
      ['キルア','変化系'],
      ['クラピカ','具現化系'],
      ['レオリオ','放出系']
    ];
  
  //配列hhをログに出力
  console.log(hh);

  //行の長さを調べる
  console.log(hh.length);

  //列の長さを調べる
  console.log(hh[0].length);

  //二次元配列hhを格納するために、スプレッドシートの4行2列を確保して出力する
  ss.getRange(1,1,hh.length,hh[0].length).setValues(hh);

}


//出力した配列を消去する
function myClear() {

  //出力した配列をgetDataRangeを使って取得して消去する
  ss.getDataRange().clear();

}

シートのボタンにそれぞれのスクリプトを割り当てて実行します。

ボタンを右クリックで選択して、右上の「・・・」から「入力」ボタンに「nenArray」、消去ボタンに「myClear」のスプリクトを割り当てます。

これで、キャラの名前と念の入った配列をボタンを押すことで手軽に実行出来る様になりました。


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

横浜のクルーズ船です。

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

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

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

←episode2               episode4→

←GAS自作サンプル集HUNTER×HUNTERへ戻る

HUNTER×HUNTERのGAS自作サンプル集のページに戻る
初めてのGASに戻る


自己紹介

episode1 GAS【セル操作で入力と消去】「HUNTER×HUNTERで覚えるGoogle Apps Script」

この記事を読むことで、

・GASを動かす準備を画像つきで解説

・今日初めてGASを使う方がセルA1に好きな文字を入れるコードを書ける

・文字の消去のコードも書ける

についての概要が掴めます。

GASは環境設定不要ですぐ始められますが、

・Googleアカウント
・「マイドライブ」などから「新規」でスプレッドシートを追加

・スプレッドシートの上記メニュー「拡張機能」→ 「Apps Script(エディタ)」

この3点の準備は必要です。
「Apps Script(エディタ)」にコードを書いて行きます。

エディタには「無題のプロジェクト」から「HHepisode1」という名前を付けて変更しました。

準備が整ったところで、まず最初に、スプレッドシートのセルA1に「ハンターハンター」と入力するスクリプトを書いてみます。

「こんにちは」や好きな言葉、他の作品で例えば「鬼滅の刃」、「SPY×FAMILY」、「呪術廻戦」などでも楽しければ何でもOKです!

getRange(‘セル番地’)でセルを指定して、setValue(‘入力する値’)で指定したセルに値を入力します。

初期状態のまっさらなスプレッドシートです。

エディターに下記のコードを書いて行きます。

function hh1no1() {

  //アクティブなシートにアクセスしている
  const ss=SpreadsheetApp.getActiveSheet();

  //セルA1をgetRangeで捕まえて文字列「ハンターハンター」を入力
  ss.getRange('A1').setValue('ハンターハンター');
  
}

こんな感じに書けました。
エディターは[Ctrl]+[S]で保存します。

Macの方は、「Command」と読み替えて下さい。

[Ctrl]+[R]で実行しようとすると・・・。

「承認が必要です」とメッセージが出るので、「権限を確認」で、

自分のアカウントを選ぶと、

この様なアラート画面が出ます。

なぬ!!

でも大丈夫。

「詳細」をクリックして。

「安全ではないページ」に移動して、

パソコンが爆発とか無いので、大丈夫です(=^x^=)

少し下にスクロールして「続行」を押します。

実行ログです。

されたことが分かり、スプレッドシートを見てみると、

この様に無事に入力されていました。

次に、セルA1に入力された「ハンターハンター」の文字を、実行ログに出力してみます。

//ここを追加してセルA1の内容を表示する
console.log(ss.getRange(1,1).getValue());

を追加します。

function hh1no2() {

  const ss=SpreadsheetApp.getActiveSheet();

  ss.getRange('A1').setValue('ハンターハンター');

  //ここを追加してセルA1の内容をログに表示する
  console.log(ss.getRange(1,1).getValue());
  
}

最後に、このセルA1の文字を消します。

setValue(‘入力する値’)のところを、clear()と書き換えます。

//セルA1を消去
ss.getRange(1,1).clear();

function hh1no3() {

  const ss=SpreadsheetApp.getActiveSheet();

  //セルA1を消去
  ss.getRange(1,1).clear();

}

実行すると・・・

無事に消去できました。

今回は、セルをA1を(1,1)と記述しましたが、(‘A1’)と書いても同様に処理できます。
また、セルB1は(1,2)で、セルA2は(2,1)です。
後に範囲を取得する場合に備えて今回は(1,1)と記述しました。


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

横浜ランドマークタワーのジンジャエールです。
美味しかったです。

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

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

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

← HUNTER×HUNTERのGAS自作サンプル集のページに戻る     

episode2へGO→

HUNTER×HUNTERのGAS自作サンプル集のページに戻る
初めてのGASに戻る


自己紹介