Gmail差し込み一斉送信ツール（装飾・画像対応版）

const spreadSheet = SpreadsheetApp.getActiveSpreadsheet();
const mainSheet = spreadSheet.getSheetByName('メイン');
const recipientsSheet = spreadSheet.getSheetByName('宛先リスト');
const ui = SpreadsheetApp.getUi();

/**
 * メールを一括送信する
 */
function sendEmails() {
  // メール雛形および宛先リストデータを取得
  const draftId = mainSheet.getRange('C3').getValue();
  const baseContents = getBaseContents(draftId);
  const eachContentsList = getEachContentsList();

  // 実行確認ダイアログ
  const result = ui.alert('確認', `${eachContentsList.length}件のメールを一括送信してよろしいですか？`, ui.ButtonSet.YES_NO);
  if (result == ui.Button.NO) return;

  // 送信結果欄のクリア
  recipientsSheet.getRange('R2:R').clear();

  // メール一括送信
  eachContentsList.forEach((eachContents, index) => {
    try {
      const mail = createMail(baseContents, eachContents);
      GmailApp.sendEmail(mail.to, mail.subject, mail.body, mail.options);
      recipientsSheet.getRange(index + 2, 18)
        .setValue(`${Utilities.formatDate(new Date(), "JST", "yyyy-MM-dd HH:mm:ss")}: 送信成功`);
    } catch(error) {
      recipientsSheet.getRange(index + 2, 18)
        .setValue(`${Utilities.formatDate(new Date(), "JST", "yyyy-MM-dd HH:mm:ss")}: 送信失敗（${error}）`);
    }
  });

  // 終了メッセージ表示、宛先リストシート表示
  ui.alert('処理終了', '一括送信処理が終了しました。\n宛先リストシートの処理結果欄を確認してください。', ui.ButtonSet.OK);
  recipientsSheet.getRange("R2").activate();
}

/**
 * 下書きを一括作成する
 */
function createDrafts() {
  // メール雛形および宛先リストデータを取得
  const draftId = mainSheet.getRange('C3').getValue();
  const baseContents = getBaseContents(draftId);
  const eachContentsList = getEachContentsList();

  // 実行確認ダイアログ
  const result = ui.alert('確認', `${eachContentsList.length}件の下書きを一括作成してよろしいですか？`, ui.ButtonSet.YES_NO);
  if (result == ui.Button.NO) return;

  // 送信結果欄のクリア
  recipientsSheet.getRange('R2:R').clear();

  // 下書き一括作成
  eachContentsList.forEach((eachContents, index) => {
    try {
      const mail = createMail(baseContents, eachContents);
      GmailApp.createDraft(mail.to, mail.subject, mail.body, mail.options);
      recipientsSheet.getRange(index + 2, 18)
        .setValue(`${Utilities.formatDate(new Date(), "JST", "yyyy-MM-dd HH:mm:ss")}: 作成成功`);
    } catch(error) {
      recipientsSheet.getRange(index + 2, 18)
        .setValue(`${Utilities.formatDate(new Date(), "JST", "yyyy-MM-dd HH:mm:ss")}: 作成失敗（${error}）`);
    }
  });

  // 終了メッセージ表示、宛先リストシート表示
  ui.alert('処理終了', '一括下書き作成処理が終了しました。\n宛先リストシートの処理結果欄を確認してください。', ui.ButtonSet.OK);
  recipientsSheet.getRange("R2").activate();
}

/**
 * メール雛形を取得する
 */
function getBaseContents(messageId) {
  const draft = GmailApp.getMessageById(messageId);
  return {
    subject: draft.getSubject(),
    body: draft.getBody(),
    plainBody: draft.getPlainBody(),
    from: mainSheet.getRange('C6').getValue(),
    name: mainSheet.getRange('C7').getValue(),
    attachments: draft.getAttachments({ includeInlineImages: false }),
    inlineImages: getInlineImages(draft),
  }
}

/**
 * 下書きメール内のインライン画像を取得し、メールのオプション（inlineImages）を返す
 */
function getInlineImages(draft) {
  // 下書きメールに添付されているインライン画像を取得
  const inlineAttachments = draft.getAttachments({ includeAttachments: false })
  if (!inlineAttachments.length) return {};

  // 下書きメール本文からインラインイメージのimgタグ情報を取得
  const imageTags = (() => {
    const tags = draft.getBody().match(/\<img.*?cid.*?\>/g);    // "cid"を含むimgタグ全体を取得
    return tags.map(tag => {
      return {
        tag: tag,                               // imgタグ全体
        cid: tag.match(/src="cid:(.*?)"/)[1],   // imgタグ内のcid
        alt: tag.match(/alt="(.*?)"/)[1]        // imgタグ内のalt(=ファイル名)
      }
    })
  })();
  
  // Gmail用のinlineImagesオブジェクト { cid1: blob1, cid2: blob2, ... } を返す
  return inlineAttachments.reduce((acc, attachment) => {
    const fileName = attachment.getName();
    const cid = imageTags.find(imageTag => imageTag.alt === fileName).cid;
    return cid
      ? { ...acc, [cid]: attachment.copyBlob() }
      : acc
  }, {});
}

/**
 * 宛先リストの情報を取得する
 */
function getEachContentsList() {
  const [keys, ...records] = recipientsSheet.getDataRange().getDisplayValues();
  return records.map(record => {
    return {
      to: record[0],
      cc: record[1],
      bcc: record[2],
      replaceInstructions: getReplaceInstructions(keys.slice(3, 13), record.slice(3, 13)),
      attachmentFolderId: record[13],
      attachmentNames: record.slice(14, 17).filter(cell => cell !== '')
    };
  });
}

/**
 * 置換内容(before,after)の配列を返す
 */
function getReplaceInstructions(keys, values) {
  const instructions =  keys.map((key, index) => {
    return { before: key, after: values[index] }
  });
  return instructions.filter(instruction => instruction.before !== '');
}

/**
 * 雛形および宛先リストのレコードからGmail送信用のデータを作成する
 */
function createMail(baseContents, eachContents) {
  // 差込反映後の件名・本文を取得
  const subject = getReplacedString(baseContents.subject, eachContents.replaceInstructions);
  const htmlBody = getReplacedString(baseContents.body, eachContents.replaceInstructions);
  const body = getReplacedString(baseContents.plainBody, eachContents.replaceInstructions);
  
  // 個別添付ファイルの取得
  const eachAttachments = eachContents.attachmentNames.map(attachementName => 
    getAttachment(eachContents.attachmentFolderId, attachementName)
  );
  
  // オプションの設定
  const options = { htmlBody: htmlBody }
  if (baseContents.from) options.from = baseContents.from;
  if (baseContents.name) options.name = baseContents.name;
  if (eachContents.cc) options.cc = eachContents.cc;
  if (eachContents.bcc) options.bcc = eachContents.bcc;
  if (baseContents.attachments.length || eachAttachments.length) {
    options.attachments = [...baseContents.attachments, ...eachAttachments];
  }
  if (Object.keys(baseContents.inlineImages).length) options.inlineImages = baseContents.inlineImages;
  console.log(options)
  return { 
    to: eachContents.to, 
    subject: subject, 
    body: body, 
    options: options
  }
}

/**
 * 差込（置換）を反映したテキストを返す
 */
function getReplacedString(string, instructions) {
  return instructions.reduce((acc, instruction) => {
    const re = new RegExp(`\{\{ *${instruction.before} *\}\}`, "g");
    return acc.replace(re, instruction.after);
  }, string)
}

/**
 * フォルダID,ファイル名から添付ファイルを取得する
 */
function getAttachment(folderId, fileName) {
  const folder = (() => {
    try {
      return DriveApp.getFolderById(folderId);
    } catch {
      throw new Error(`添付ファイル格納フォルダが存在しない、または、アクセス権がありません。(フォルダID: ${folderId})`); 
    }
  })();

  const files = folder.getFilesByName(fileName);
  if (!files.hasNext()) throw new Error(`フォルダ内に「${fileName}」 が存在しません。`); 
  const file = files.next();
  if (files.hasNext()) throw new Error(`フォルダ内に「${fileName}」 が複数存在します。`);
  return file;
}

/**
 * 下書き選択ダイアログを表示する
 */
function showSelectDraftDialog() {
  const htmlOutput = HtmlService
    .createHtmlOutputFromFile('selectDraftDialog')
    .setWidth(700)
    .setHeight(500);
  SpreadsheetApp.getUi().showModalDialog(htmlOutput, '下書きメール選択');
}

/**
 * ユーザーの下書きメールを取得する
 */
function getDrafts() {
  const drafts = GmailApp.getDraftMessages();
  if (!drafts.length) throw new Error(`下書きのメールが存在しません。`); 
  return drafts.map(draft => {
    const subject = draft.getSubject();
    return {
      id: draft.getId(),
      subject: subject ? subject : '（件名なし）',
      attachmentCount: draft.getAttachments().length,
      createdAt: Utilities.formatDate(draft.getDate(), 'JST', 'yyyy-MM-dd HH:mm'),
      body: draft.getPlainBody()
    }
  })
}

/**
 * 選択した下書きメールの情報をシートに反映する
 */
function setSelectedDraft(draft) {
  mainSheet.getRange('C3').setValue(draft.id);
}

/**
 * プレビューダイアログを表示する
 */
function showPreviewDialog() {
  const htmlOutput = HtmlService
    .createHtmlOutputFromFile('previewDialog')
    .setWidth(800)
    .setHeight(600);
  SpreadsheetApp.getUi().showModalDialog(htmlOutput, 'プレビュー');
}

/**
 * プレビュー表示用のメール雛形と宛先リストデータを返す
 */
function getPreviewData() {
  // メール雛形および宛先リストデータを取得
  const draftId = mainSheet.getRange('C3').getValue();
  const baseContents = getBaseContents(draftId);
  const eachContentsList = getEachContentsList();

  // インライン画像をプレビュー表示用に変換
  baseContents.inlineImages = Object.keys(baseContents.inlineImages).map(cid => {
    const inlineImage = baseContents.inlineImages[cid];
    return {
      cid: cid,
      contentType: inlineImage.getContentType(),
      base64: Utilities.base64Encode(inlineImage.getBytes())
    }
  })

  // プレビュー表示用に添付ファイル名を取得
  baseContents.attachments = baseContents.attachments.map(attachment => attachment.getName());  

  return { baseContents, eachContentsList }
}

<!DOCTYPE html>
<html>
  <head>
    <style>
      .list {
        padding: 10px;
      }

      .listItem {
        padding: 10px;
        border-bottom: 1px solid lightgrey;
        height: 65px;
      }

      .listItem:hover {
        background: #f3f3f3;
        cursor: pointer;
      }

      .listItemHeader {
        display: flex;
        justify-content: space-between;
        color: grey;
        font-size: 0.8em;
      }

      .body {
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden; 
        color: grey;
        font-size: 0.9em;
      }
    </style>
  </head>
  <body>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <div id="app">
      
      <!-- 下書きメール一覧 -->
      <div class="list" v-if="drafts.length">
        <div class="listItem" @click="handleClickDraft(draft)" v-for="draft in drafts">
          <div class="listItemHeader">
            <div style="flex-grow: 1;">ID: {{ draft.id }}</div>
            <div v-show="draft.attachmentCount">（添付ファイルあり）</div>
            <div>{{ draft.createdAt }}</div>
          </div>
          <div>{{ draft.subject }}</div>
          <div class="body">{{ draft.body }}</div>
        </div>
      </div>

      <!-- データ取得中のみ表示 -->
      <div v-else>Loading ...</div>
    </div>
    <script>
      const { createApp } = Vue;

      createApp({
        data() {
          return {
            drafts: [],
          }
        },
        mounted() {
          google.script.run.withSuccessHandler((result) => {
            this.drafts = result;
          }).withFailureHandler((error) => {
            alert(error.message);
            google.script.host.close();
          }).getDrafts();
        },
        methods: {
          handleClickDraft(draft) {
            google.script.run.setSelectedDraft(draft);
            google.script.host.close();
          }
        }
      }).mount('#app');
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <style>
      label {
        white-space: nowrap;
        margin-right: 0.5em;
      }

      .email-chips {
        display: flex;
        gap: 5px;
        flex-wrap: wrap;
      }

      .email-chip {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 2px;
        border: 1px solid lightgrey;
        border-radius: 50vh;
        font-size: 0.9em;
      }

      .email-chip-icon {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: lavender;
      }

      .email-chip-address {
        margin: 0 5px;
      }

      .attachment {
        width: 500px;
        margin-block: 7px;
        padding: 7px;
        background: whitesmoke;
      }

      .pagination {
        position: fixed;
        bottom: 0;
        width: 100%;
        padding-block: 10px;
        display: flex;
        justify-content: center;
        gap: 30px;
        background: white;
        border-top: 1px solid lightgrey;
        user-select: none;
      }

      .page-input {
        width: 4em;
        text-align: center;
      }

      .prev-btn:hover,
      .next-btn:hover {
        cursor: pointer;
        text-decoration: underline;
      }
    </style>
  </head>
  <body>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <div id="app">
      <div v-if="eachContentsList.length">

        <!-- 差出人 -->
        <div style="padding-block: 7px;">
          <label>差出人</label>
          <span v-if="!selectedEmail.options.name && !selectedEmail.options.from">あなた（変更なし）</span>
          <span v-if="selectedEmail.options.name">{{ selectedEmail.options.name }}</span>
          <span v-if="selectedEmail.options.from"> <{{ selectedEmail.options.from }}></span>
        </div>

        <!-- 宛先 -->
        <div style="padding-block: 7px; display: flex;">
          <label>宛先</label>
          <div class="email-chips">
            <div class="email-chip" v-for="address in csvToArray(selectedEmail.to)">
              <div class="email-chip-icon">{{ address.slice(0 ,1) }}</div>
              <div class="email-chip-address">{{ address }}</div>
            </div>
          </div>
        </div>

        <!-- ｃｃ -->
        <div style="padding-block: 7px; display: flex;" v-if="selectedEmail.options.hasOwnProperty('cc')">
          <label>cc</label>
          <div class="email-chips">
            <div class="email-chip" v-for="address in csvToArray(selectedEmail.options.cc)">
              <div class="email-chip-icon">{{ address.slice(0 ,1) }}</div>
              <div class="email-chip-address">{{ address }}</div>
            </div>
          </div>
        </div>

        <!-- bｃｃ -->
        <div style="padding-block: 7px; display: flex;" v-if="selectedEmail.options.hasOwnProperty('bcc')">
          <label>bcc</label>
          <div class="email-chips">
            <div class="email-chip" v-for="address in csvToArray(selectedEmail.options.bcc)">
              <div class="email-chip-icon">{{ address.slice(0 ,1) }}</div>
              <div class="email-chip-address">{{ address }}</div>
            </div>
          </div>
        </div>

        <!-- 件名 -->
        <div style="padding-block: 7px; display: flex; align-items: center; border-top: 1px solid lightgrey; ">
          <div>{{ selectedEmail.subject }}</div>
        </div>

        <!-- 本文 -->
        <div style="padding-block: 7px; border-top: 1px solid lightgrey" v-html="selectedEmail.options.htmlBody"></div>

        <!-- 添付ファイル名 -->
        <div style="margin-bottom: 40px; padding-block: 7px;">
          <template v-if="selectedEmail.options.hasOwnProperty('attachments')">
            <div class="attachment" v-for="attachment in selectedEmail.options.attachments">{{ attachment }}</div>
          </template>
        </div>

        <!-- ページ選択 -->
        <div class="pagination">
          <div class="prev-btn" @click="() => { if(page > 1) page -= 1 }">< prev</div>
          <input type="number" min="1" :max="eachContentsList.length" class="page-input" v-model="page"></input>
          of {{ eachContentsList.length }}
          <div class="next-btn" @click="() => { if(page < eachContentsList.length) page += 1 }">next ></div>
        </div>
      </div>

      <!-- データ取得中のみ表示 -->
      <div v-else>Loading ...</div>
    </div>
    <script>
      const { createApp } = Vue;

      createApp({
        data() {
          return {
            baseContents: {},
            eachContentsList: [],
            page: 1,
          }
        },
        computed: {
          /**
           * 現在選択されているメール
           */
          selectedEmail() {
            const eachContents = this.eachContentsList[this.page - 1];
            // 差込反映後の件名・本文を取得
            const subject = this.getReplacedString(this.baseContents.subject, eachContents.replaceInstructions);
            const htmlBody = this.getReplacedString(this.baseContents.body, eachContents.replaceInstructions);
            const body = this.getReplacedString(this.baseContents.plainBody, eachContents.replaceInstructions);
                        
            // オプションの設定
            const options = { htmlBody: htmlBody };
            if (this.baseContents.from) options.from = this.baseContents.from;
            if (this.baseContents.name) options.name = this.baseContents.name;
            if (eachContents.cc) options.cc = eachContents.cc;
            if (eachContents.bcc) options.bcc = eachContents.bcc;
            if (this.baseContents.attachments.length || eachContents.attachmentNames.length) {
              options.attachments = [...this.baseContents.attachments, ...eachContents.attachmentNames];
            }

            return { 
              to: eachContents.to, 
              subject: subject, 
              body: body, 
              options: options
            };
          },
        },
        mounted() {
          /**
           * プレビューに使用するデータ（下書きメールおよび宛先リスト）を取得する
           */
          google.script.run.withSuccessHandler((result) => {
            this.baseContents = result.baseContents;
            this.baseContents.body = this.getEmbeddedBody(this.baseContents.body, this.baseContents.inlineImages);
            this.eachContentsList = result.eachContentsList;
          }).withFailureHandler((error) => {
            alert(error.message);
            google.script.host.close();
          }).getPreviewData();
        },
        methods: {
          /**
           * imageタグのsrcをcidからbase64に書き換えたbodyを返す
           */
          getEmbeddedBody(body, inlineImages) {
            return inlineImages.reduce((acc, image) => {
              const re = new RegExp(`src="cid:${image.cid}"`, 'g');
              return acc.replace(re, `src=data:${image.contentType};base64,${image.base64}` )
            }, body);
          },
          /**
           * カンマ区切り文字列を配列に変換する
           */
          csvToArray(csv) {
            return csv.replace(/ /g, '').split(',');
          },
          /**
           * 差込（置換）を反映したテキストを返す
           */
          getReplacedString(string, instructions) {
            return instructions.reduce((acc, instruction) => {
              const re = new RegExp(`\{\{ *${instruction.before} *\}\}`, "g");
              return acc.replace(re, instruction.after);
            }, string);
          },
        },          
      }).mount('#app');
    </script>
  </body>
</html>