【範囲自在】スプレッドシートを表のままメールで送信する【GAS】【Googleスプレッドシート】 【Gmail】

前回の記事で、「２×２」の表をメールで送信するスクリプトを作成しました。このnoteのコンセプトを守って、配列（value[0][2]とかこんな表現）は使っておらず、getRangeとgetValueが基本での記載内容です。

今回は実用度を上げてみて、もっと大きな範囲に対応できるようにしてみます。

CSSやスタイルもつかっていない原始的な記法ですので、コピペ後の手直しもやりやすいと思います。

前回の記事のコードです。

function mailHTML_hyou3 ( ) { //表を送信
  var sheet=SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
   var word1= sheet.getRange(2,2,1,1).getValue();
   var word2=sheet.getRange(2,3,1,1).getValue();
   var word3=sheet.getRange(3,2,1,1).getValue();
   var word4=sheet.getRange(3,3,1,1).getValue();
  
  var body=  "<table border ><tr><td>"+word1+"</td><td>"+word2+"</td>　</tr><tr><td>"+word3+"</td><td>"+word4+"</td></tr></table>"
   GmailApp.sendEmail( ' aaa@bbb.com　' , 'タイトル',　body,  { htmlBody:body}  );
}

ポイントとなる、HTML本文の構造を限定して記載しました。
"<table border ><tr><td>"+word1+"</td><td>"+word2+"</td>　</tr><tr><td>"+word3+"</td><td>"+word4+"</td></tr></table>"
「""」で区切ったタグと、取得したいセルの値を順序だてて並べています。

HTMLの表の記載は繰り返しで作成できる。

改行して記載するとこのように記載することができます。
"<table border >
<tr>
　　<td>"+word1+"</td><td>"+word2+"</td>
</tr>
<tr>
　　<td>"+word3+"</td><td>"+word4+"</td>
</tr>
</table>"

2列2行の表なら全文記載が可能です。今回は、行も列も増やした表を作成したいので、繰り返しの記法で作成します。

構文の整理

さきほどの構文のルールを読み解くと
１．一番外枠を<table>で囲む
２．行ごとに、<tr>で囲む
３．一行に対して、セルごとに<td>で囲む
となります。
それぞれを繰り返して作成するイメージは次のようになります。

１．まずは、一行に対してセルを<td>で囲むスクリプト

  var body=  "<table border='1' cellspacing='0' >"
 for(x=2;x<=5;x++) { //TDを４つ
   var word= sheet.getRange(2,x,1,1).getValue();
   var body=body + "<td>" +word+ "</td>" 
 }
　　var body = body + "</table>"

body がどうなるか記載してみます。
ゼロ回目：初期設定
<table border='1' cellspacing='0' >
2回目：x=2
<table border='1' cellspacing='0' ><td> +word(x=2)+ </td>
3回目：x=3
<table border='1' cellspacing='0' ><td> +word(x=2)+ </td><td> +word(x=3)+ </td>
4回目：x=4
<table border='1' cellspacing='0' ><td> +word(x=2)+ </td><td> +word(x=3)+ </td><td> +word(x=4)+ </td>
5回目：x=5
<table border='1' cellspacing='0' ><td> +word(x=2)+ </td><td> +word(x=3)+ </td><td> +word(x=4)+ </td><td> +word(x=5)+ </td>
5回終わると最後に</table>を書き加える
<table border='1' cellspacing='0' ><td> +word(x=2)+ </td><td> +word(x=3)+ </td><td> +word(x=4)+ </td><td> +word(x=5)+ </td></table>
これで、1行5列の表示するHTMLができました。

２．行を繰り返し作成するスクリプト

var body=  "<table border='1' cellspacing='0' >"
 
 for(y=2;y<=8;y++){
    var body = body +"<tr>"
 for(x=2;x<=5;x++){//TDを４つ
   var word= sheet.getRange(2,x,1,1).getValue();//あえて「２」
   var body=body + "<td>" +word+ "</td>" 
 }
    var body=body +"</tr>"
 }
 　var body = body + "</table>"

ちょっと複雑さが上がりました。
まずは構文確認のため、一行の中身は同じ列が、8列増えるというコードです。
for(y=2;y<=8;y++){ 
　 var body = body +"<tr>"
for(x=2;x<=5;x++){【さっきの列を増やしていくfor文】}
var body=body +"</tr>"
}
さきほどのforを8回繰り返して列を8列にする構文の中に入れています。
形が整いましたので、最後に定数を変数にします。

行数を変数にして完成：getRange(y,x,1,1)←getRange(2,x,1,1)

var body=  "<table border='1' cellspacing='0' >"
 
 for(y=2;y<=8;y++){
    var body = body +"<tr>"
 for(x=2;x<=5;x++){//TDを４つ
   var word= sheet.getRange(y,x,1,1).getValue();//yに変更
   var body=body + "<td>" +word+ "</td>" 
 }
    var body=body +"</tr>"
 }
　　var body = body + "</table>"

全体表示

function mailHTML_mat3 ( ) { //表を送信

  var sheet=SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
 
  var body=  "<table border='1' cellspacing='0' >"
 
 for(y=2;y<=8;y++){
    var body = body +"<tr>"
 for(x=2;x<=5;x++){//TDを４つ
   var word= sheet.getRange(y,x,1,1).getValue();//yに変更
   var body=body + "<td>" +word+ "</td>" 
 }
    var body=body +"</tr>"
 }
　　var body = body + "</table>"
  Logger.log(body)

   GmailApp.sendEmail( ' aaa@bbb.com　' , 'タイトル',　body,  { htmlBody:body}  );
}

ちょこっと範囲を変えれるようにスプレッドシート内で範囲を指定できるようにする

先ほどまでは、
列：２～５
行：２～８
の表に対応できるように限定化した書き方でした。
for(y=〇;y<=〇;y++) 
for(x=〇;x<=〇;x++)
この〇を変更するのに、スクリプトを書き直すのではなく、スプレッドシート内で指定するという方法です。
セルを指定して、そこに記載するだけですね。range1,range2,range3,range4を設定して記載しています。

function mailHTML_mat4 ( ) { //範囲指定

  var sheet=SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
 
　var renge1=sheet.getRange(2,8,1,1).getValue()//起点の行 2
 var renge2=sheet.getRange(2,9,1,1).getValue()//起点の列 2
var renge3=sheet.getRange(3,8,1,1).getValue()//終点の行
var renge4=sheet.getRange(3,9,1,1).getValue()//終点の列

  var body=  "<table border='1' cellspacing='0' >"
 
 for(y=renge2;y<=renge3;y++){
    var body = body +"<tr>"
 for(x=renge1;x<=renge4;x++){//TDを４つ
   var word= sheet.getRange(y,x,1,1).getValue();//yに変更
   var body=body + "<td>" +word+ "</td>" 
 }
    var body=body +"</tr>"
 }
　　var body = body + "</table>"
  Logger.log(body)

   GmailApp.sendEmail( ' aaa@bbb.com　' , 'タイトル',　body,  { htmlBody:body}  );
}

こちらで完成です。

最後に、表だけではなく、テキスト・URLリンクも記載できるようにフォームを設定しました。

function mailHTML_mat5 ( ) { //範囲指定

  var sheet=SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
 
　var renge1=sheet.getRange(2,8,1,1).getValue()//起点の行 2
 var renge2=sheet.getRange(2,9,1,1).getValue()//起点の列 2
var renge3=sheet.getRange(3,8,1,1).getValue()//終点の行
var renge4=sheet.getRange(3,9,1,1).getValue()//終点の列



  var body=  "<table border='1' cellspacing='0' >"
 
 for(y=renge2;y<=renge3;y++){
    var body = body +"<tr>"
 for(x=renge1;x<=renge4;x++){//TDを４つ
   var word= sheet.getRange(y,x,1,1).getValue();//yに変更
   var body=body + "<td>" +word+ "</td>" 
 }
    var body=body +"</tr>"
 }
　　var body = body + "</table>"
 　 var body = body + "<h1>テキストもついかする</h1>";
 　var body=body + "<a href='https://note.com/gas_keiri'>keirigas</a>";
 
 　 Logger.log(body)

   GmailApp.sendEmail( ' aaa@bbb.com　' , 'タイトル',　body,  { htmlBody:body}  );
}

まとめ

メールの宛先もよく変更するようであれば、スプレッドシート内の変数で指定してもいいかもしれません。タイトルもですね。
こちらの記事で、図形やメニューからの起動ができれば実用性は高くなるのではないでしょうか。

今回のシートです。
https://docs.google.com/spreadsheets/d/1DIJi2i45gcEpMz3HwMe0OcaQ9M5fQhl2h4Rl243rpqg/edit#gid=1804832009