今回はWordPress上のサイトのフォームから、Googleスプレッドシートに情報を書き込む実装についてご紹介します。
本記事では任意のメッセージと、メッセージが送信された時間のふたつの情報をスプレッドシートに記録してゆきます。
１．Googleスプレッドシートを作成
２．Google Apps Scriptにコードを設置
次にPHPから送信される情報を受け取り、スプレッドシートに入力する部分のスクリプトを設置します。ここでスプレッドシート内のどの列にどの情報を入れるかの制御をすることになります。
上部メニューの「拡張機能＞Apps Script」からプロジェクトを開くと、下図のような画面が開きますのでこちらに指定のコードをコピペしましょう。
function doPost(e) {
// POSTした内容を取得
var message = e.parameter.message;
var date = e.parameter.date;
// スプレッドシートへの書き込み
var spread = SpreadsheetApp.getActiveSpreadsheet();
var lastRow = spread.getSheets()[0].getLastRow();
spread.getSheets()[0].getRange((lastRow + 1), 1).setValue(message);
spread.getSheets()[0].getRange((lastRow + 1), 2).setValue(date);
// returnの設定
var jsonData = {
message: message,
date: date,
result: 'ok'
}
return ContentService.createTextOutput(JSON.stringify(jsonData))
.setMimeType(ContentService.MimeType.JSON);
}スクリプトを設定したら「新しいデプロイ」をしましょう。
デプロイ完了後にWebアプリのURLが発行されますので、そちらを控えておきましょう。送信側のPHP内で記載が必要になります。
※スクリプトを変更する場合は再度「新しいデプロイ」を行って発行されたURLも変更するようにしてください。
この状態でスクリプトが動かない場合、一度スクリプトの「実行」を押してみてください。
３．WordPressテーマフォルダにファイル一式を格納
ajax-spreadsheets.php
JSファイルからAjaxで情報を受け取り、Google Apps Scriptに送信するまでの制御をするPHPプログラムです。項目を追加したり、識別名が変わったりする場合は調整が必要です。
<?php
if (isset($_POST['message'])){
/* Googleスプレッドシートに送信 */
date_default_timezone_set('Asia/Tokyo');
$url = 'https://script.google.com/macros/s/.../exec';
$data = array(
'message' => $_POST['message'],
'date' => date("Y-m-d H:i:s"),
);
$context = array(
'http' => array(
'method' => 'POST',
'header' => implode("\r\n", array('Content-Type: application/x-www-form-urlencoded',)),
'content' => http_build_query($data)
)
);
$response_json = file_get_contents($url, false, stream_context_create($context));
$response_data = json_decode($response_json);
} else {
echo 'false';
}
?>ajax-spreadsheets.js
HTMLのフォームから情報を受け取り、入力状況をチェック、問題なければajax-spreadsheets.phpに情報を送る制御をしています。項目が増えたり、識別名が変わる場合は調整が必要です。
jQuery(function() {
/* 送信ボタン押下 */
$('#spreadsheets-send').click(function() {
let message = document.getElementById('spreadsheets-message').value;
if(message==''){
alert('メッセージを入力してください。');
} else {
send_opinion(message);
}
return false;
});
/* APIへの情報送信 */
function send_opinion(message){
jQuery.ajax({
type: "POST",
url: 'https://.../wp-content/themes/.../ajax-spreadsheets.php',
data: {
message: message
},
success: function(response) {
alert('メッセージを送信しました。');
}
});
}
});page-spreadsheets.php
WordPressの固定ページテンプレートです。テンプレート化することで、固定ページで使用することが可能になります。ここではajax-spreadsheets.jsの読み込みんで、フォームの内容をJSに伝えるようにしています。
<?php
/**
* Template Name: PageSpreadsheets
*/
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta name="robots" content="noindex">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
<title>Googleスプレッドシート連携</title>
<meta name="keywords" content="">
<meta name="description" content="">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script type="application/javascript" src="https://.../wp-content/themes/.../ajax-spreadsheets.js"></script>
</head>
<body>
<form>
<textarea id="spreadsheets-message" rows="1" placeholder="メッセージを入力してください。"></textarea>
<button id="spreadsheets-send">送信する</button>
</form>
</body>
</html>４．WordPress固定ページでフォームのテンプレートファイルを設定
page-spreadsheets.phpをテーマフォルダに格納すると、自動的に固定ページのテンプレート内で該当テンプレートを選択できるようになりますので、そちらを設定した固定ページを作ればフォームの完成です。
