Contact Form 7で添付したファイルをLINE Notifyで送信する方法です。※画像送付はセキュリティの問題もあるので個人情報の運用などは特にご注意ください。
Contact Form 7の添付ファイルは保存される？
Contact Form 7の添付ファイルは、テンプレート（一次保存）ディレクトリに保存されたあと、メール送信後に削除されるようになっていました。
Contact Form 7でファイル添付して送信した場合に、一時フォルダとしてwp-content/uploads/wpcf7_uploads の中にファイルが作られます。
画像が送信されたタイミングで、添付画像はサーバー上から消えて、届いたメールの添付画像のみが存在する、という流れになります。ですので、送信の際にその画像の情報を取得して、別の方法で呼び出す必要があります。
①送信のタイミングで添付画像の情報を取得
②サーバーサイド側に情報を送信する
③そのURLをLINE Notifyのパラメータ（payload）に指定する
…といった感じで、画像が送信できるはずです（理論上は）。
Contact Form7の送信時に画像情報を送信する
まずは画像情報をどこかに取得・保存して送信する方法が考えられます。
注意点として、WordPressディレクトリ内への保存…といった方法は、避けた方がよいです。画像が公開URLになってしまうので誰でも見れてしまいます（誰でも見られてもよい画像ならよいかもしれませんが…）。
そこで、サーバーサイド側（GAS側）に画像情報を送信して、データを保存せずにそのままLINE Notify側に渡す…といった方法を試してみます。
フォームを作成する
まずは、フォームを作成します。下記のような感じのフォームを準備してみます。
テキスト
[text* your-text]
ファイル
[file* file01 filetypes:jpg limit:1mb]
[submit "送信"]テキストと画像添付のみの、シンプルなフォームができました。
今回、テキストのinput要素は特に使用しませんが、なにかメッセージなどを送る場合も考え、一応準備をしています。
JavaScript側で添付ファイルのデータをリクエストとして送信する
JavaScript側のコードで、フォームデータに添付ファイルのデータを追加し、それをリクエストとして送信、JavaScript側からGAS側に添付ファイルのデータを送信し、GAS側で受け取らせます。
フォーム側のJavaScriptはこのような感じになりました。
[text* your-text]
[file* file01 filetypes:jpg limit:1mb]
[submit "送信"]
<script>
document.addEventListener('wpcf7submit', function(event) {
var fileInput = document.querySelector('[name="file01"]');
var file = fileInput.files[0];
var yourtext = document.querySelector('[name="your-text"]').value;
var formData = new FormData();
var reader = new FileReader();
reader.onload = function(event) {
var filedata = event.target.result;
formData.append('filedata', filedata);
formData.append('yourtext', yourtext);
fetch('https://script.google.com/macros/s/XXXXXXXXXXXX/exec', {
method: 'POST',
body: formData
})
.then(response => {
if (response.ok) {
return response.text();
} else {
throw new Error('リクエストが失敗しました。ステータスコード:' + response.status);
}
})
.then(data => {
console.log('レスポンス:', data);
})
.catch(error => {
console.log('リクエストが失敗しました。エラー:', error);
});
};
reader.readAsDataURL(file);
});
</script>
これで、画像データの送信ができます（今の時点ではデータを受け取る場所が無いので、ただ送信するだけです）。
コードの内容について
まず「file01」という名前のファイルフィールドから添付されたファイル情報を取得します。配列になっているので、0番目のファイルを取得します。画像データがfile変数に格納されます。
var fileInput = document.querySelector('[name="file01"]');
var file = fileInput.files[0];
your-textという名前のテキスト入力フィールドでは、フォームに入力されたテキストを取得します。
var yourtext = document.querySelector('[name="your-text"]').value;FormDataオブジェクトを作成します。FormDataオブジェクトを使うと入力データなどをサーバーに送信できます。
var formData = new FormData();FileReaderオブジェクトを使用して、選択されたファイルを非同期的に読み込みます。FileReaderオブジェクトは、ブラウザがファイルの内容を非同期に読み込むためのAPIです。
var reader = new FileReader();
reader.onload = function(event) {
var filedata= event.target.result;
formData.append('filedata', filedata);
formData.append('yourtext ', yourtext );event.target.resultは、FileReaderオブジェクトが読み込んだファイルのデータを表します。var filedata = event.target.result;という行は、読み込んだファイルデータをfiledata変数に保存しています。formData.append('filedata', filedata);は、FormDataオブジェクトにfiledata変数の値を追加しています。filedataはフォームデータのキーであり、filedata変数の値がその値として追加されます。- 同様に、
formData.append('yourtext', yourtext);は、yourtext変数の値を'yourtext'というキーでフォームデータに追加しています。
あとは、fetchでGASのURLを指定して、送信します。
fetch('https://script.google.com/macros/s/XXXXXXXXXXXX/exec', {
method: 'POST',
body: formData
})送信した後、送信の結果によって、JavaScript側で表示される内容をそれぞれ分けています。これにより、送信がうまく行ったのかどうかが分かります。
.then(response => {
if (response.ok) {
return response.text();
} else {
throw new Error('リクエストが失敗しました。ステータスコード:' + response.status);
}
})
.then(data => {
console.log('レスポンス:', data);
})
.catch(error => {
console.log('リクエストが失敗しました。エラー:', error);
});reader.readAsDataURL(file)は、FileReaderオブジェクトを使用して指定されたファイルを読み込み、そのデータをデータURLとして取得するためのメソッドです。
reader.readAsDataURL(file);下記のような感じになります。
reader.readAsDataURL(file)が無い場合は、filedataが作られず空の状態になってしまいますので、入れておきます。
data:imageとは？
“data:image”は、インターネット上で画像データを表現するための特殊なURI（Uniform Resource Identifier）スキームです。
通常、画像ファイルは特定のファイル形式（JPEG、PNG、GIFなど）で保存され、URL（Uniform Resource Locator）を介してウェブページに表示されます。
しかし、”data:image”スキームを使用すると、画像データを直接URIに埋め込むことができます。
“data:image” URIスキームは、実際の画像データを文字列として表現し、そのままHTMLやCSSのコードに埋め込むことができます。一般的な形式は次のようになります。
"data:image/[ファイル形式];base64,[画像データのBase64エンコード]"ここで、[ファイル形式]は画像の実際のファイル形式を指定し、[画像データのBase64エンコード]は画像データをBase64エンコードした文字列を指定します。Base64エンコードは、バイナリデータ（画像など）をテキスト形式に変換するためのエンコーディング方式です。
“data:image”スキームを使用すると、画像ファイルを外部ファイルとしてホストする必要がなくなり、HTMLやCSS内に画像データを直接埋め込むことができます。
ただし、大きな画像や複数の画像を埋め込む場合は、ページの読み込み時間やパフォーマンスの問題に注意する必要があります。
まとめ
これらのコードでは、フォームデータにファイルデータとテキストデータを追加するための準備を行っています。次に、フォームデータを使用してサーバーにデータを送信する処理が続きます。
※今回の方法はセキュリティの問題もあるので個人情報の送信などでは注意して使用ください。その上で…という場合に使える方法です。また、添付ありなしに関わらず、スパム送信を防止するため、スパム対策のreCAPTCHAはできるだけ設定しておきましょう。
つづく。
