【GAS】スプレッドシートを画像保存できない壁を乗り越える（Googleスライド利用）

7486 ワード
GoogleSlides GoogleSpreadSheet gas gas テキストリンク

サマリ

このページについて

  • スプレッドシートの画像保存はAPIが提供されていないようなので試行錯誤の結果を備忘録的に

結論

  • GoogleスプレッドシートのデータをGoogleスライドにリンクさせて、画像で保存を行えば画像保存が可能！
  • Slackで送信したり、その後の活用可能性は高まると思います！

準備するもの

  • Googleスプレッドシート
    • 保存したいデータなどがあるシート
    • 以降、こちらがある前提で進めます
  • Googleスライド
    • 画像保存用のスライド
    • 保存したいサイズに設定しておく必要あり

解説

１：画像保存したいデータのグラフ化

  • スプレッドシートのデータのうち、画像保存していものをグラフにします
  • 表や個別の数値などは「表グラフ」「スコアカードグラフ」などを使うとよいです
  • ※GASでGoogleSlideに転記する方法もありますが、今回はこの手法で説明します

２：スライドへグラフのリンク作成

  • スプレッドシートに作成したグラフをコピーして、貼り付ける
  • この際に、「スプレッドシートにリンク」を選択する
  • 複数グラフがある場合は、保存したいイメージに合せてレイアウトを行っていく

３．GAS記述

  • 今回はスプレッドシート側にGASを記述していきます
  • エラー処理などは割愛していますので、よしなに。
  • 「保存先のフォルダID」は
    • Googleドライブの「drive.google.com/drive/folders/★ここ★」←「ここ」に書いている文字列です
  • 「保存するスライドのID」は
    • Googleスライドの「docs.google.com/presentation/d/★ここ★/edit#slide=id.p」←「ここ」に書いている文字列です
gas
/***
 * 対象スライドのリンクしているグラフを全部更新して、指定のGoogleドライブへ保存
 * 
 * @param fileName 保存したいファイル名
 */
function exportSlideToPNG(fileName){

  const folderId = '保存先のフォルダID';
  const format = 'png';

  const slideId = "保存するスライドのID";
  const presentation = SlidesApp.openById(slideId);
  const slides = presentation.getSlides();

  const slide = slides[0];
  const sheetCharts = slide.getSheetsCharts();

  // update
  for (var i = 0; i<sheetCharts.length; i++){
    sheetCharts[i].refresh();
  }

  // flush
  presentation.saveAndClose();

  // output
  const url = "https://docs.google.com/presentation/d/" + slideId + "/export/" + format;
  const options = {
    method: "get",
    headers: {"Authorization": "Bearer " + ScriptApp.getOAuthToken()},
    muteHttpExceptions: true
  };

  const res = UrlFetchApp.fetch(url, options);
  if (res.getResponseCode() === 200) {
    const folder = DriveApp.getFolderById(folderId);
    folder.createFile(res.getBlob()).setName(fileName + "." + format);  
  }
}

参考