【GAS】Contact Form 7で添付したファイルをLINE Notifyで送信する（Part2）

前回の続きです。Contact Form 7で添付したファイルをLINE Notifyで送信します。

前回までの内容はこちら▼

全体の流れ
全体のコード
それぞれの変数について
LINE Notifyに送信する
まとめ

全体の流れ

JavaScript側のコードで、フォームデータに添付ファイルのデータを追加し、それをリクエストとして送信できるような状態まで前回作りました。

JavaScript側：

フォームデータに添付ファイルのデータ（Blob）を追加
fetchを使用してリクエストを送信

GAS側：

doPost(e) 関数内で、リクエストを受ける
e.parameter オブジェクトから添付ファイルのデータ（Blob）を取得
添付ファイルのデータを変換して送信する

以上の手順に従って実装することで、JavaScript側からGAS側に添付フイルのデータを送信し、GAS側で受け取ることができる…はずです。

全体のコード

GAS側はこのような感じになりました。

function doPost(e) {
  var params = e.parameter;
  var filedata = params.filedata;
  var yourtext = params.yourtext;
  var base64 = filedata.split("base64,")[1];
  var content_type = filedata.split("data:")[1].split(";base64")[0];
  var decoded = Utilities.base64Decode(base64);
  var file_name = "imageFile";
  var blob = Utilities.newBlob(decoded, content_type, file_name);

  // LINE Notifyに送信するリクエストパラメータを設定
  var token = "XXXXXXXXXXXXXXXXXXX";
  var message = "こんにちは！画像を送信します。";

  var payload = {
    "message": message,
    "imageFile": blob
  };

  // LINE Notifyにリクエストを送信
  var options = {
    "method": "post",
    "headers": {
      "Authorization": "Bearer " + token
    },
    "payload": payload
  };
  var response = UrlFetchApp.fetch(
    "https://notify-api.line.me/api/notify",
    options
  );

var status_massage = "";
  // レスポンスのステータスコードを確認
  if (response.getResponseCode() == 200) {
    status_massage = "画像を送信しました。";
  } else {
    status_massage = "画像の送信に失敗しました。";
  }
  // レスポンスを返す
  return ContentService.createTextOutput(JSON.stringify(status_massage))
    .setMimeType(ContentService.MimeType.JSON);
}

doPost関数は、HTTPのPOSTリクエストが発生した際に自動的に呼び出される特別な関数です。

token は、LINE Notifyのトークンをセットします。

それぞれの変数について

e.parameterから、リクエストパラメータを取得し、params変数に代入します。リクエストパラメータから、filedataとyourtextを取得します。

filedataには画像データがBase64エンコードされた文字列が含まれ、yourtextにはテキストが含まれます。

var params = e.parameter;
var filedata = params.filedata;
var yourtext = params.yourtext;

filedataから、Base64エンコードされた画像データとコンテンツタイプを抽出します。base64にはエンコードされたデータが、content_typeには画像のコンテンツタイプが格納されます。

var base64 = filedata.split("base64,")[1];
var content_type = filedata.split("data:")[1].split(";base64")[0];

base64をデコードしてバイナリデータに変換し、file_nameとともにblobオブジェクトを作成します。blobは、Google Apps Script内でファイルを扱うためのオブジェクトです。

var decoded = Utilities.base64Decode(base64);
var file_name = "imageFile";
var blob = Utilities.newBlob(decoded, content_type, file_name);

難しそうな処理をしていますが、filedata（画像データ）からそれぞれ必要な情報を抽出しているといったイメージで良いかと思います。

画像のファイル名を変更したい場合は、file_nameの値を書き換えましょう。

LINE Notifyに送信する

あとは、LINE Notifyに送信します。LINE Notifyに送信するための認証トークンとメッセージを設定して、payloadオブジェクトにメッセージとblobを含めます。

optionsオブジェクトを作成し、LINE Notifyに対してPOSTリクエストを送信します。ヘッダー（headers）に認証トークンを含め、payloadをリクエストのペイロードとして設定します。responseでは、レスポンスのステータスコードを確認し、成功したかどうかをログに出力します。

var token = "XXXXXXXXXXXXXXXXXXX";
var message = "こんにちは！画像を送信します。";
var payload = {
  "message": message,
  "imageFile": blob
};
var options = {
  "method": "post",
  "headers": {
    "Authorization": "Bearer " + token
  },
  "payload": payload
};
var response = UrlFetchApp.fetch(
  "https://notify-api.line.me/api/notify",
  options
);

レスポンスのステータスコードを確認し、送信が成功したかどうかの結果が分かるようにしておきます。

 // レスポンスのステータスコードを確認
  if (response.getResponseCode() == 200) {
    status_massage = "画像を送信しました。";
  } else {
    status_massage = "画像の送信に失敗しました。";
  }

}

レスポンスとして返すために、ContentService.createTextOutput()を使用してテキストの出力を作成します。JSON.stringify(url)は、urlをJSON形式の文字列に変換します。.setMimeType(ContentService.MimeType.JSON)は、レスポンスのMIMEタイプをJSONに設定します。

  // レスポンスを返す
  return ContentService.createTextOutput(JSON.stringify(status_massage))
    .setMimeType(ContentService.MimeType.JSON);

これで、JavaScript側に「画像を送信しました。」「画像の送信に失敗しました。」のどちらかが送信されるので、画像の送信に成功したか、または失敗したか、の結果が分かります。

まとめ

このスクリプトは、POSTリクエストに含まれる画像データをデコードしLINE Notifyを使用してメッセージと画像を送信します。

つづく。