広告

WordPressの予約システムMTS Simple Bookingで予約時にGoogleカレンダーに予定を自動で追加

FTPで確認 WEB
この記事は約18分で読めます。

2020年12月4日 Googleカレンダーに入れ込む場所を変更。

2024年9月17日 テスト用phpを変更

こんにちは よろず屋ありみちです。

WordPressで予約サイトを運用しているのですが、予約時にGoogleカレンダーに自動追記したいとずっと思っていて、Google Calendar APIを使って、この度実装したぞ〜〜〜。

なお、MTS Simple Bookingはビジネス版ですが、無料版でも頑張ればいけるかと思います。・・・無料版も!っていうのは体力的に無理っだって。ゴメンね。

まずは、使っているレンタルサーバーを確認しましょう。

  1. 公開ディレクトリだけのレンタルサーバーでは実装できません
    1. MixHostならOKなので、ここはパス!
    2. カラフルボックス、エックスサーバーは多分大丈夫。ロリポップはだめかも・・・
    3. 非公開ディレクトリがあるかチェック!
  2. Macでいうターミナル Windows10でいうプロンプトのような設定画面をサーバーで表示できる?
    1. MixHostならOKなので、ここはパス!
    2. カラフルボックス、エックスサーバーは多分大丈夫。ロリポップはだめかも・・・
    3. cPanelのレンタルサーバーなら、ココ
  3. レンタルサーバーにライブラリをcomposerがインストールされているか確認
    1. ターミナルを起動する
      1. cPanelなら
    2. composerがインストールされているか確認
  4. ライブラリをサーバーに入れ込む
    1. ターミナルが起動できて、composerがインストールされているのなら
    2. FTPでライブラリを入れ込む方法
  5. Google Calendar API
    1. プロジェクト作成
    2. Google Calendar APIを有効化
    3. 認証情報を取得
  6. Googleカレンダーの設定
    1. 入力するメールアドレス
    2. メールアドレスを入力
  7. テスト用php作成
    1. テスト用phpの編集
      1. ライブラリをcomposerでインストールした場合は、4行目を使用
      2. ライブラリをFTPでアップロードした場合は7行目を使用します
      3. 25行目を編集
      4. 44行目をご自身のGoogleカレンダーIDにしてください
      5. 39行目、43行目を任意の時間に変更してください
    2. テスト用phpをアップロード
    3. ブラウザでtest.phpを開く
    4. Googleカレンダーをチェック
  8. MTS Simple Bookingプラグインをカスタマイズ
    1. mtssb-booking-form.phpをカスタマイズ
      1. 追加部分の下記の/..の数をチェックしましょう。2箇所あります
      2. カレンダーIDの設定も忘れずに!
      3. ついでに、678行目も変更しちゃえ!・・・サンクスページに表示
      4. 追記する前687行目だったところも変更しちゃえ!・・・サンクスページに表示
  9. MTS Simple Bookingの設定を変更
  10. テストしてみましょう
  11. 参考にしたサイト

公開ディレクトリだけのレンタルサーバーでは実装できません

MixHostならOKなので、ここはパス!

MixHostをお使いでしたら、大丈夫なので、確認しなくてOK!

カラフルボックス、エックスサーバーは多分大丈夫。ロリポップはだめかも・・・

ロリポップやエックスサーバー、カラフルボックスをお使いの方は、次を確認します。

ちょっと難しいのですが、非公開ディレクトリを使わないとセキュリティ的によろしくないので、お使いのレンタルサーバーの仕様を確認しましょう。

サーバーにFileZillaやFFFTPなどのFTPソフトを使って、アクセスします。

FTPで確認

レンタルサーバー会社によって、ディレクトリ(フォルダ)名が違います。

非公開ディレクトリがあるかチェック!

非公開ディレクトリがあるかチェックしましょう。

もし、非公開ディレクトリが無ければ、ごめんなさい。実現できません。

というか、非公開ディレクトリが無いなら、絶対にやらないでください。危ないです。

Macでいうターミナル Windows10でいうプロンプトのような設定画面をサーバーで表示できる?

Composerという道具(ツール)を使って、ライブラリというものをサーバーにインストールすると簡単なので、Composerを使うための画面を表示できるか確認します。

なお、表示できなくても、大丈夫です。

Composer(コンポーザー)とは、英語で作曲家や構成者、作成者などの意味があります。

PHPではパッケージ依存管理ツールのことで、簡単にいうと「コードを短くすることができる道具」です。

ライブラリとは、英語で図書館の意味があります。

今回は、使用したいコードを簡単に記載するための「カンニングペーパー」のような補助してくれる道具だと思ってください。

・・・カンニングペーパーじゃなくて辞書でもいいですけど・・・

Composerでライブラリをインストールせずに、サーバーにFileZillaやFFFTPなどのFTPソフトを使って、FTPでライブラリを入れ込むこともできます。・・・下に書いてあります

MixHostならOKなので、ここはパス!

MixHostをお使いでしたら、大丈夫なので、確認しなくてOK!

カラフルボックス、エックスサーバーは多分大丈夫。ロリポップはだめかも・・・

ロリポップやエックスサーバー、カラフルボックスをお使いの方は、Macでいうターミナル Windows10でいうプロンプトのような設定画面が出るか探してみてください。

cPanelのレンタルサーバーなら、ココ

ミックスホスト(MixHost)やカラフルボックスは、cPanelを使っているので

詳細>Terminal

から、ターミナル(Terminal)を起動できます。

cPanel

cPanelとは、コントロールパネルのことです。

どのレンタルサーバーにもコントロールパネルがあります。

契約時にレンタルサーバーから送信されたメールを確認してみましょう。

レンタルサーバーにライブラリをcomposerがインストールされているか確認

ターミナルを起動する

cPanelなら

詳細>Terminal

でターミナル(黒い画面)を起動します。

composerがインストールされているか確認

ターミナルが起動したら「composer」と入力してenterキーを押します。

$ composer

下記のように表示されたら、composerがサーバーにインストールされています。

composer

Composerがインストールされていなかったら、2通りの方法があります。

  1. FTPソフトを使って、ライブラリを入れ込む
  2. composerをインストールする

私の場合、既にcomposerがインストールされていたので、Composerをインストールする場合を割愛します。ゴメンね。

ライブラリをサーバーに入れ込む

ターミナルが起動できて、composerがインストールされているのなら

ターミナルに、下記のコマンドを入力して、Google Calendar APIを使うためのライブラリをインストールします。

$ composer require google/apiclient:^2.0

Composerでインストールが完了すると 【vendor】フォルダが自動的に作成されます。

FTPソフトで確認しましょう。

非公開のところにあるので、公開ディレクトリよりも上の階層を探してください。

FTPでライブラリを入れ込む方法

Releases · googleapis/google-api-php-client
A PHP client library for accessing Google APIs. Contribute to googleapis/google-api-php-client development by creating a...

ここから、最新版をダウンロードして、zipファイルを展開して、サーバーにFTPソフトを使ってアップロードします。

google-api-php-client

最新版で、google-api-php-client-~~~~~.zip がない場合があります。

「Assets」をクリック(↑の画像で赤矢印のところ)すると、そのバージョンのものが表示されます。

phpのバージョンでいくつかありますので、使いたいものをダウンロードします。

ダウンロードしたら、解凍します。

google-api-php-client解凍後

解凍した「google-api-php-client-~~~~~」のフォルダを開くと、↑のようになっています。

これを全部アップロードします。

「google-api-php-client-~~~~~」のフォルダをまるごと、アップロードしてください。

アップロードする場所は非公開の部分です。

公開ディレクトリの名前がwwwで、/var/www/だとしたら、varのディレクトリに入れます。

公開ディレクトリの名前が、public_htmlなら、public_htmlと同じ階層に入れます。

入れる場所

なお、2020年1月18日現在の最新版はPHP 5.4.0以上に対応しています。

PHPのバージョンが低い場合は、v1を使ってくださいね。

詳しくは、https://github.com/googleapis/google-api-php-client

Google Calendar API

Google Cloud Platformにアクセス

Google Cloud Platform
Google Cloud Platform lets you build, deploy, and scale applications, websites, and services on the same infrastructure ...

プロジェクト作成

Google Cloud Platformと記載されている部分の右隣をクリック。

注意:今回は既にプロジェクトを作成済みの画面です。

プロジェクト作成

新しいプロジェクト」をクリック

新しいプロジェクト

プロジェクト名(任意の文字)を入力。今回は「Project Calender」にしました。

作成をクリック。

作成!

Google Calendar APIを有効化

APIとサービス > ライブラリ を選択。

ライブラリ

APIとサービスを検索の部分に Calendar と入力。

検索

Google Calendar API を選択。

Google Calendar API

有効にする を選択。

既に有効になっている場合は「管理」と表示されます。

有効化

認証情報を取得

2020年7月8日現在、下記の方法と違っているようです。

サービスアカウントキーを作るところまでは同じです。

JSONファイルを作成、ダウンロードするところが違っています。

APIとサービス > 認証情報 を選択。

認証情報

認証情報を作成 を選択し、サービス アカウント キー を選択。

サービスアカウントキー

新しいサービス アカウント を選択。

サービスアカウント名を入力(任意の文字)。

自動的にサービスアカウントIDが設定されます。

2020年7月8日現在

ここからちょっと違うかも

キータイプJSONを選択。

作成をクリック。

サービスアカウントキー作成

下記の画面が表示されるので、役割なしで作成を選択。

役割なし

作成が終了すると、jsonファイルが自動的にダウンロードされます。

2020年7月8日現在の方法

認証情報 > サービスアカウントのメールアドレスの部分をクリック。

認証情報

キーの部分にある「鍵を追加」 > 「新しい鍵を作成」 で新規作成 > JSON とすると、作成できます。

キーを新規作成

ここからは同じです

ダウンロードされたjsonファイルは、サーバーにFTPソフトを使ってアップロードします。

アップロードする先は、【vendor】ディレクトリと同じ階層の非公開ディレクトリに【key】というディレクトリを作成して、【key】ディレクトリの中にアップロードしましょう。

入れる場所

くれぐれも、公開ディレクトリに入れないでくださいね。

高速道路を居眠り運転するくらい危ないから!

Googleカレンダーの設定

歯車アイコン > 設定 を開く。

設定

マイカレンダーの設定 で自動入力するカレンダーを選択。

特定のユーザーとの共有 を探して、ユーザーを追加 をクリック。

ユーザーを追加

入力するメールアドレス

先ほどダウンロードしてサーバーにアップロードしたjsonファイルの中に記載されています。

また、Google Cloud Platformの IAMと管理 > サービスアカウント を開いて確認することもできます。

メアド確認

メアドが表示されます。

メアド確認

メールアドレスを入力

調べたメールアドレスをGoogleカレンダー 設定 特定のユーザーとの共有 ユーザーを追加するところに入力します。

権限は「変更および共有の管理権限」にします。

メールアドレス追加

入力が終わったら、送信をクリック。

テスト用php作成

まずは、動作確認をしましょう。

WordPressをドメイン直下にインストールしているときは、テスト用phpをパスしてください。

コピペするときは、gitからコピペしてください。

コピペしたら、最後に改行を入れてtest.phpというような名前で保存しましょう。

※2024年9月修正しました。

Googleカレンダー自動入力テスト用php
GitHub Gist: instantly share code, notes, and snippets.
<?php

// composerでインストールしたライブラリを読み込む
require_once(__DIR__ . '/../../../../vendor/autoload.php');

// fptでアップロードした場合は、
require_once(__DIR__ . '/../../../../google-api-php-client/vendor/autoload.php');

use Google\Client;

/**
* ログ用の関数を作成
*
* @param string $message ログ記録メッセージ
* @return void
*/
function log_message($message)
{
// ログをファイルに書き込む (パスは適宜変更してください)
$logfile = __DIR__ . '/logfile.log'; // ログファイルのパスを指定
error_log(date('Y-m-d H:i:s') . ' - ' . $message . PHP_EOL, 3, $logfile);
}

// サービスアカウント作成時にダウンロードしたjsonファイル
$aimJsonPath = __DIR__ . '/../../../../key/project-calendar-******.json';

// サービスオブジェクトを作成
$client = new Google\Client();
// このアプリケーション名
$client->setApplicationName('googleカレンダー追加テストapi');
// ※ 注意ポイント: 権限の指定
// 予定を取得する時は Google_Service_Calendar::CALENDAR_READONLY
// 予定を追加する時は Google_Service_Calendar::CALENDAR_EVENTS
$client->setScopes(Google_Service_Calendar::CALENDAR_EVENTS);
// ユーザーアカウントのjsonを指定
$client->setAuthConfig($aimJsonPath);

// リクエストの詳細をログに出力
log_message("Google API Request: " . json_encode($client->getHttpClient()->getConfig()));

// サービスオブジェクトの用意
$service = new Google\Service\Calendar($client);
// カレンダーID
$calendarId = '******@gmail.com';
// 開始時刻 日時は ISO 8601 形式で指定
$start_time = "2024-09-17T10:00:00+09:00";
// 終了時刻 日時は ISO 8601 形式で指定
$end_time = "2024-09-17T12:00:00+09:00";
// サマリー(件名)
$summary = 'Googleカレンダーphpから追加';
// descriptionの改行は<br>
$description = 'テスト<br><br>テスト';
// 書き込み設定
$event = new Google\Service\Calendar\Event(array(
'summary' => $summary,
'description' => $description,
'start' => array(
'dateTime' => $start_time, // 開始日時
'timeZone' => 'Asia/Tokyo',
),
'end' => array(
'dateTime' => $end_time, // 終了日時
'timeZone' => 'Asia/Tokyo',
),
));

try {
$event = $service->events->insert($calendarId, $event);
log_message("Google Calendar Event Created: " . $event->getId()); // イベント作成の成功をログに出力
} catch (Exception $e) {
log_message("Error creating Google Calendar Event: " . $e->getMessage()); // エラーログを出力
echo 'Caught exception: ', $e->getMessage(), "\n";
}

テスト用phpの編集

ライブラリをcomposerでインストールした場合は、4行目を使用

require_once __DIR__.'/../../../../../../vendor/autoload.php';

ライブラリをFTPでアップロードした場合は7行目を使用します

require_once __DIR__.'/../../../../../../google-api-php-client/vendor/autoload.php';

※FTPでアップロードした場合、「google-api-php-client」の部分をフォルダの名前に合わせるか、アップロードしたフォルダの名前を変更してください。

どちらを使用しても、/../../となっている部分の数を確認する必要があります。

(公開ディレクトリ 例:public_html) > (ドメインのディレクトリ 例:aw1) > wp(WordPressのインストールディレクトリ)> wp-content > plugins > mst-simple-booking

という階層で、公開ディレクトリと同じところに、vendorディレクトリがあれば、そのままでOKです。

25行目を編集

$aimJsonPath = __DIR__ . '/../../../../../../key/Project calendar-xxxxxxxxxxxxxxxx.json';

最後の「Project calendar-xxxxxxxxxxxxxxxx.json」というファイル名を上でダウンロードしてサーバーにアップロードしたjsonファイルの名前に変更します。

/../../となっている部分の数を確認してください。

(公開ディレクトリ 例:public_html) > (ドメインのディレクトリ 例:aw1) > wp(WordPressのインストールディレクトリ)> wp-content > plugins > mst-simple-booking

という階層で、公開ディレクトリと同じところに、keyディレクトリがあれば、そのままでOKです。

44行目をご自身のGoogleカレンダーIDにしてください

$calendarId = '〇〇●●●〇〇@gmail.com';

Googleカレンダー歯車アイコン > 設定 > マイカレンダーの設定 から確認したいカレンダーを選択し、カレンダーの統合の部分に記載されているカレンダー IDです。

39行目、43行目を任意の時間に変更してください

'dateTime' => 2019-02-01T10:00:00+09:00,// 開始日時

現在、設定されているのは、開始が2020年2月1日10時00分で終了が2時間後です。

テスト用phpをアップロード

FTPソフトで、新しいディレクトリを作ります。

(公開ディレクトリ 例:public_html) > (ドメインのディレクトリ 例:aw1) > test(新規作成)> w(新規作成) > p(新規作成) > m(新規作成)

作成したmディレクトリにテスト用php(test.php)をアップロードします。

ブラウザでtest.phpを開く

ブラウザで、(ドメイン)/test/w/p/m/test.php を開いてください。

ドメインはご自身のものに変更してくださいね〜〜。

Googleカレンダーをチェック

問題なければ、Googleカレンダーに設定した予定が自動で入力されます。

MTS Simple Bookingプラグインをカスタマイズ

まだまだですよ==がんば〜〜〜

バックアップしてから、カスタマイズしてね。

mtssb-booking-form.phpをカスタマイズ

mtssb-booking-from.phpをATOMなどのエディタで開いて、679行目に下記のgistにあるデータを追加します。

mtssb-booking-form.phpに入れ込むと、2重登録になることがあります。

mtssb-mail.phpの232行~にすることをおすすめします。下図を参照してください。(下図は下のコード部分を省略しているのですが、全部入れてくださいね)

入れ込む場所
mtssb-mail.php

無料版の場合は、予約完了エレメントの出力の近くにあるprotected function _out_completed() {の下あたりに入れてみてください。動作確認はしていませんが、たぶんこの辺でいいと思います。

WordPress MTS Simple Booking Googleカレンダー自動追加
GitHub Gist: instantly share code, notes, and snippets.

先ほど、テストのとき作ったtest.phpファイルと同じように修正します。

追加部分の下記の/..の数をチェックしましょう。2箇所あります

1箇所目

require_once __DIR__.'/../../../../../../vendor/autoload.php';

FTPでアップロードした場合は、下記にしてくださいね。

require_once DIR.'/../../../../../../google-api-php-client/vendor/autoload.php'; 

「google-api-php-client」の部分をフォルダの名前に合わせるか、アップロードしたフォルダの名前を変更してくださいね。

2箇所目

$aimJsonPath = __DIR__ . '/../../../../../../key/Project calendar-xxxxxxxxxxxxxxxx.json';

(公開ディレクトリ 例:public_html) > (ドメインのディレクトリ 例:aw1) > wp(WordPressのインストールディレクトリ)> wp-content > plugins > mst-simple-booking

であれば、そのままでOKですよ。多分。私はこれで上手くいっているので。

そうそう。ここも忘れずに!

「Project calendar-xxxxxxxxxxxxxxxx.json」というファイル名を上でダウンロードしてサーバーにアップロードしたjsonファイルの名前に変更します。

カレンダーIDの設定も忘れずに!

// カレンダーID
$calendarId = '〇〇●●●〇〇@gmail.com';

ついでに、678行目も変更しちゃえ!・・・サンクスページに表示

$reserve_id = apply_filters('mtssb_thanks_reserve_id', esc_html($booking['client']['name']) .'さま<br>ご予約を' . date_i18n('Y年n月j日 H時i分', $booking['booking_time']) . 'から承りました。');

追記する前687行目だったところも変更しちゃえ!・・・サンクスページに表示

変更前

return $content . $tracking;

変更後

return $tracking . $content;

実は、こうすると、サンクスページに「〇〇様ご予約を〇〇から承りました。」と表示できるようになります!

MTS Simple Bookingの設定を変更

予約品目 > 予約品目編集のページ の一番下に「挿入トラッキングコード」というところがあります。

ここに、「%RESERVE_ID%」と入力します!

無料版にはありません

また、mtssb-mail.phpに追記した場合も不要ですが・・・サンクスページに「〇〇様ご予約を〇〇から承りました。」と表示したい場合は追記しましょう。

トラッキングコード

テストしてみましょう

テストしてみて、上手くいったら終了です!

予約テスト

参考にしたサイト

https://developers.google.com/calendar/quickstart/php
https://github.com/googleapis/google-api-php-client/releases
https://github.com/googleapis/google-api-php-client/blob/master/docs/install.md
https://developers.google.com/calendar/v3/reference
https://qiita.com/shin1kt/items/8da153ff4d8e25196459
https://liginc.co.jp/474321