広告

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

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

こんにちは

よろず屋ありみちです。

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でインストールした場合は、6行目を使用
      2. ライブラリをFTPでアップロードした場合は8行目を使用します
      3. 11行目を編集
      4. 34行目をご自身の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でライブラリを入れ込む方法

googleapis/google-api-php-client
A PHP client library for accessing Google APIs. Contribute to googleapis/google-api-php-client development by creating an account on GitHub.

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

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

公開ディレクトリの名前が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 では、Google と同じインフラストラクチャでアプリケーション、ウェブサイト、サービスを構築、導入、拡大することができます。

プロジェクト作成

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

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

プロジェクト作成

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

新しいプロジェクト

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

作成をクリック。

作成!

Google Calendar APIを有効化

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

ライブラリ

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

検索

Google Calendar API を選択。

Google Calendar API

有効にする を選択。

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

有効化

認証情報を取得

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

認証情報

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

サービスアカウントキー

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

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

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

キータイプJSONを選択。

作成をクリック。

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

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

役割なし

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

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

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

入れる場所

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

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

Googleカレンダーの設定

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

設定

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

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

ユーザーを追加

入力するメールアドレス

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

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

メアド確認

メアドが表示されます。

メアド確認

メールアドレスを入力

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

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

メールアドレス追加

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

テスト用php作成

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

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

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

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

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'; 

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

 // サービスオブジェクトを作成
 $client = new Google_Client();

 // このアプリケーション名
 $client->setApplicationName('カレンダー操作テスト イベントの取得');

 // ※ 注意ポイント: 権限の指定
 // 予定を取得する時は Google_Service_Calendar::CALENDAR_READONLY
 // 予定を追加する時は Google_Service_Calendar::CALENDAR_EVENTS
 $client->setScopes(Google_Service_Calendar::CALENDAR_EVENTS);

 // ユーザーアカウントのjsonを指定
 $client->setAuthConfig($aimJsonPath);

 // サービスオブジェクトの用意
 $service = new Google_Service_Calendar($client);

 /*
 予定の追加
 /
$event = new Google_Service_Calendar_Event(array(
     'summary' => 予約テスト, //予定のタイトル
     'start' => array(
       'dateTime' => 2019-02-01T10:00:00+09:00,// 開始日時
       'timeZone' => 'Asia/Tokyo',
     ),
     'end' => array(
         'dateTime' => 2019-02-01T12:00:00+09:00, // 終了日時
         'timeZone' => 'Asia/Tokyo',
     ),
 ));

 $event = $service->events->insert($calendarId, $event);
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>予定サンプル</title>
</head>
<body>
<h1>予定の追加</h1>
</body>
</html>

テスト用phpの編集

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

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

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

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

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

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

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

11行目を編集

$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です。

34行目をご自身の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にあるデータを追加します。

無料版の場合は、予約完了エレメントの出力の近くにある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';

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%」と入力します!

無料版にはありません

トラッキングコード

テストしてみましょう

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

予約テスト

参考にしたサイト

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

この記事を書いた人

企業向けWordPressテーマ作成、コーディングなどをしています。
2019年イベント専用サクサク動くWordPressテーマ(カスタム投稿が10、カスタムフィールドは約20,000)を作成しました。

よろず屋ありみちをフォローする
WEB WordPress
広告
よろず屋ありみちをフォローする
よろず屋ありみち