【コピペで完了】スプレッドシートからメール送信！スクリプトでグラフデータも送れるよ！

スプレッドシートから直接グラフデータがメール送信出来たら...

PDCAの報告や確認が超絶捗りますよね！

もし自由自在にそんなメールを作ることが出来たら、クリティカルな業務の半分は終わったようなものではないでしょうか？

あひる

それは言い過ぎじゃないか？w

というわけで今回は前回記事 [icon name="external-link" class="" unprefixed_class=""]に続く応用編、スプレッドシートをメール送信！ スクリプトでグラフデータを送る方法！についてご紹介いたします。

スプレッドシートをメール送信！スクリプトを使ってグラフも自動レポート！

通常スプレッドシートはメール添付は出来ないので、URLを本文に貼付して宛先に送信します。

でもどうせならURLを開かずにグラフや実績データを参照したいですよね。

あひる

ただ外でデータをダウンロードするとパケット代がかさむし、電波も繋がらない時があって不便なんだよな〜

そ・こ・で！

「グラフデータ」自体をスクリプトを使って、メールに埋め込んじゃおうぜ！というのが今回の狙いなわけです。

スプレッドシートからメール送信するスクリプト

ではいきなり本記事のスクリプトの答えはコチラ↓

function iPhone8chart() {

//グラフにしたいシートを指定//
  var mySheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("iPhone8X比較");
  var range1 = mySheet.getRange("A1:C4");//グラフにする範囲1

  //chart1を作成
  var chart1 = mySheet.newChart()
              .addRange(range1)　//getrangeで取得したデータ範囲を指定する
              .setPosition(6,1,0,0)　//グラフ表示位置（行、列、Xpx、Ypx)
              .asColumnChart()　　//棒グラフを挿入
              .setOption('title','iPhone比較画面')　//タイトルを表示
              .setOption('titleTextStyle' ,{color: '#002777', fontSize: 20})　//タイトルのテキストを変更
              .setOption('legend', {position: 'top', textStyle: {color: '#004d91', fontSize: 16}})//凡例の色テキスト設定
              .setColors(["darkblue", "darkgray"])//グラフの色を設定
              .build();//グラフを作成

 mySheet.insertChart(chart1);//グラフをシートに挿入

  //グラフの画像を取得
  var imageBlob = chart1.getBlob().getAs('image/png').setName("chart1_image.png");
　　

//GMailAppにsendEmailメソッドを実行してメールを送信する//
  GmailApp.sendEmail(
        '＊＊＊＊＊＊@gmail.com',//宛先を記入
        'iPhone8の比較表',//件名を入力
        'iPhone8・Xのスペック比較表です。ご確認下さい。', //メール本文
        {attachments: [imageBlob]}
        );
}

とはいってもこれでは意味が分からないので、解説していきます。

先ずはメール送信で埋め込みたいグラフのデータを準備していきましょう。

スプレッドシートでグラフ用のデータを準備する

今回はサンプルとしてiPhone8Xスペック比較データを作成しました。

次にスクリプトエディタを使う準備を行います。スプレッドシートのメニューから「ツール ＞ スクリプトエディタ」を選択。

スクリプトエディタの画面を開いたら...

タイトルを分かりやすく書き換えおきましょう。

スプレッドシートのシート名を"iPhone8X比較"に変更しておきます。（お好きなシート名に変更してください）

これでスクリプトエディタを使う準備は完了です。

スクリプトエディタにグラフ挿入するコードをコピペ

準備したデータをスクリプトでグラフ挿入していきます。下記コードをコピペしてください。

function iPhone8chart() {
  var mySheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("iPhone8比較");
  var range = mySheet.getRange("A1:C4");//グラフ範囲を設定
  var chart = mySheet.newChart()//グラフを作成
              .addRange(range)//グラフ範囲を取得
              .setPosition(5,1,0,0)//グラフの挿入位置(行,列,Xpx,Ypx)
              .asColumnChart()　//棒グラフを挿入
              .setOption('title','iPhone比較')//タイトル
              .setOption('titleTextStyle' ,{color: '#002777', fontSize: 20})//タイトルのテキスト設定
              .setOption('legend', {position: 'top', textStyle: {color: '#004d91', fontSize: 16}})
              .setColors(["darkblue","darkgray"])//グラフの色
              .build();//グラフ作成
  mySheet.insertChart(chart);//シートにグラフを挿入
 //グラフの画像を取得
 var imageBlob = chart1.getBlob().getAs('image/png').setName("chart1_image.png");
}

コピペしたら、スクリプトとGmailアカウントの関連付けの設定を行っていきます。

上書きすると「承認が必要です」というアラートが出るので「許可を確認」をクリック。

スプレッドシートを開いているGmailアカウントを選択します。

このアプリは確認されていません画面で「詳細」をクリック。

画面が下に拡張されるので「iphone8比較表（任意のスクリプトタイトル名）に移動」をクリック。

下記画面が出るので...

”次へ”と入力して「次へ」をクリック。

ようこそ画面になるので「許可」をクリック。

これでスクリプトとアカウントの関連付けは完了です。早速スクリプトを実行してみましょう。

スプレッドシートからグラフのTESTデータを送信してみる

スクリプトエディタの画面メニューバーの実行ボタンをクリック。

黄色ボックスのメッセージが出るので消えるのを確認したら、スプレッドシートに戻ります。

以下画像のように、スプレッドシートのデータの下に「グラフ」が挿入されていればカンペキです(^^)

スプレッドシートにグラフを作成するスクリプトの内訳

かなり大雑把ですが、スクリプトの説明をしておきます。完全に自分用...

グラフ範囲を変更する

下記()内のRange範囲を変更してください↓

グラフの挿入場所を変更する

setPositionメソッド(行、列、Xpx、Ypx）の（）内の値を適宜修正してください↓

グラフ挿入位置を変更するとこうなります↓

例えば「.setPosition(1,1,0,0)」とすることで、1行目の1列目からグラフが表示されるのでデータを隠してグラフだけを通知することが出来ます。

グラフの種類を変更する

asColumnChart()を他のプロパティに変更してください↓

変更結果するとこうなります↓

データの用途でグラフ変更した方が分かりやすくなります。

分かりやすいように折れ線に変更してみましたが、このデータの内容だと合わないっすね...

変更可能なグラフのプロパティ↓

参照元：https://developers.google.com

グラフのタイトルを変更する

下記setOption()の'iPhone比較'の部分を書き換えてください↓

タイトルを変更するとこうなります↓

あんまり分からないかな...

タイトルの書式を変更する

下記{color: '#002777', fontsize: 20}の#の数値、fontsize：の数値を変更してください↓

グラフの凡例の色やテキストを変更する

下記{color: '#004d91', fontSize: 16}の中の#の数値、fontsizeの数値を変更してください↓

グラフの色を変更する

下記["darkblue","darkgray"]の色を変更してください↓

変更するとこんな感じになります↓

OYAKUN

グラフの色を変更するだけでグッと見やすさが変わってくるので、色々と試してみることをオススメします

次のページでは、作成したグラフをメールに埋め込んでいきます(^^)

オススメスプレッドシートでキレイなアンケートフォームが5分で作れる！