'}}

wordpress予約システムプラグインamelia有料版googleカレンダー同期方法とzoomアプリ連動方法の動画解説!

HanamiWEBオンラインスクールでは

●バーチャル自習室でのリアルタイム質問!

●チャットで質問し放題!

●24時間学び放題のEラーニング教材!

全部ついて 2,500円/月!

wordpress予約システムプラグインamelia(amelia公式サイトへリンクしています)有料版で、googleカレンダー同期方法とzoomアプリ連動方法を動画解説しています。

ネット予約~zoomURL発行まで完全自動化!



wordpress予約システムプラグインamelia有料版googleカレンダー同期・zoomアプリ同期設定方法を動画解説!

googleカレンダー同期・zoomアプリ連動設定方法(図解)

googleのカレンダーと同期をして、予約管理システムからの予約を自動でカレンダーへ追加したり、すでに予定の入っているカレンダーの時間帯には予約を受け付けない設定にする事が出来ます。また、zoomアプリと連動することで、自動でzoomURLを発行してくれます。

Integration設定

【Amelia】>【設定】

予約管理システムでgoogleカレンダーAPIを設定して、予約を同期

【Integration】で設定を行います。

予約管理システムでgoogleカレンダーAPIを設定して、予約を同期

googleカレンダー設定・動画詳細

googleカレンダー同期設定(図解)

【Googleカレンダー】を設定します

  1. Cllient ID/Client Srcret
  2. イベントのタイトル
  3. イベントの詳細

を設定します。

予約管理システムでgoogleカレンダーAPIを設定して、予約を同期

1.Cllient ID/Client Srcret

GoogleカレンダーAPIキーを設定します。

まずはGoogleディベロッパーコンソールへアクセスします。

GoogleAPIのプロジェクトを新規作成

赤線の箇所にある▼をクリックします。

予約管理システムでgoogleカレンダーAPIを設定して、予約を同期

【新しいプロジェクトを作成】

GoogleAPIのプロジェクトの作成

  • プロジェクト名ー好きな名前をつけます
  • 場所ー組織なし

【作成】ボタンをクリックします。

予約管理システムでgoogleカレンダーAPIを設定して、予約を同期

GoogleAPIプロジェクトを開く

作成をすると通知が右上に表示されるので【表示】をクリックをするか

赤下線の箇所に作成済プロジェクト一覧があるので、▼をクリックして

予約管理システムでgoogleカレンダーAPIを設定して、予約を同期

作成したプロジェクト名をクリックします。

予約管理システムでgoogleカレンダーAPIを設定して、予約を同期

OAuth同意画面

左サイドバーにある【OAuth同意画面】をクリックします。

外部

を選択して【作成】ボタンをクリックします。

予約管理システムでgoogleカレンダーAPIを設定して、予約を同期

OAuth同意画面設定

作成ボタンをクリックすると画面が移行されます。こちらで設定する箇所は

  1. アプリケーション名
  2. 認証済みドメイン
予約管理システムでgoogleカレンダーAPIを設定して、予約を同期
1.アプリケーション名

こちらはAmeliaというアプリケーションを利用するので、【Amelia】と入力します。

2.認証済みドメイン

こちらには使用するドメインを入力します。例えば、私の場合はhanami-web.tokyo.jp

http://やhttps://や最後の/は不要です。また、入力後に【エンター】を必ず押してください。入力したドメインが設定されません。

GoogleAPIライブラリの設定をします

【ライブラリ】をクリックします。

予約管理システムでgoogleカレンダーAPIを設定して、予約を同期
ライブラリを検索

【Google Calendar API】を検索します。

予約管理システムでgoogleカレンダーAPIを設定して、予約を同期

【有効にする】をクリックします。

予約管理システムでgoogleカレンダーAPIを設定して、予約を同期

Google Calendar API認証情報を作成

【承認情報を作成】をクリックします。

予約管理システムでgoogleカレンダーAPIを設定して、予約を同期

万が一、こちらの画面から移行してしまった場合は、もう一度【ライブラリ】をクリックしてアプリケーションAPI画面で【Google Calendar API】を検索します。

予約管理システムでgoogleカレンダーAPIを設定して、予約を同期

【管理】ボタンをクリックする元の画面に戻ることができます。

予約管理システムでgoogleカレンダーAPIを設定して、予約を同期

Google Calendar API承認情報を設定

1.必要な認証情報の種類を調べる

Google Calendar AIP

を選択します。

予約管理システムでgoogleカレンダーAPIを設定して、予約を同期
APIを呼び出す場所

ウェブブラウザ(JavaScript)を選択します。

予約管理システムでgoogleカレンダーAPIを設定して、予約を同期
アクセスするデータの種類

ユーザーデータ

を選択します。最後に【必要な認証情報】ボタンをクリックします。

予約管理システムでgoogleカレンダーAPIを設定して、予約を同期

OAuth 2.0 クライアント ID を作成する

設定する項目は

  1. 名前
  2. 認証済のリダイレクトURI
予約管理システムでgoogleカレンダーAPIを設定して、予約を同期
1.名前

好きな名前をつけます。

2.承認済みのリダイレクト URI

ここに入力をする値は、wordpressダッシュボード内【Amelia】>【設定】>【Integration】>【Googleカレンダー】に記載のあるURLをコピーします。

予約管理システムでgoogleカレンダーAPIを設定して、予約を同期

貼り付けます。

予約管理システムでgoogleカレンダーAPIを設定して、予約を同期
OAuthクライアントIDを作成

【完了】ボタンをクリックします。

予約管理システムでgoogleカレンダーAPIを設定して、予約を同期

クライアントIDとシークレットキーの確認

ダッシュボード内の【認証情報】>【OAuth2.0クライアントID】に追加されます。

鉛筆アイコンをクリックして、クライアントIDとシークレットキーを確認します。

予約管理システムでgoogleカレンダーAPIを設定して、予約を同期

クライアントIDとシークレットキーを設定

GoogleAPIで確認したクライアントIDとシークレットキーをwordpress管理画面【Amelia】>【設定】>【Integration】

予約管理システムでgoogleカレンダーAPIを設定して、予約を同期

Cliant IDにクライアントID、Client Secretにクライアントシークレットを入力します。

予約管理システムでgoogleカレンダーAPIを設定して、予約を同期

以上でGoogle Calendar APIとの連携作業は終了です。

【2020年12月追記】アプリを公開

2020年12月、複数名の方よりgoogle APIとAmeliaが連携取れないとご連絡を頂き調査を行った所、API登録した後はテストモードになっている事が判明しました。

【OAuth同意画面】で【アプリを公開】ボタンをクリックしてください。これで無事接続できるようになります。

イベントのタイトル

Googleカレンダーへ予約を自動登録される際のイベントタイトルを設定します。

予約管理システムでgoogleカレンダーAPIを設定して、予約を同期

【Amelia】>【通知】の中にある【Show Email Placeholders】の中に入っている文字列を使用することができます。

予約管理システムでgoogleカレンダーAPIを設定して、予約を同期

イベントの詳細

Googleカレンダーに自動登録される際に入力する詳細になります。

こちらも【Show Email Placeholders】から選びます。

予約管理システムでgoogleカレンダーAPIを設定して、予約を同期

承認待ち予約を組み入れる

お客様がオンラインから予約を行ったときに、【承認待ち】ステータスを選択している場合でも、Googleカレンダーに予約として自動登録するのかの設定です。

ONにしておかないと、仮予約の状況でダブルブッキングしてしまう可能性があります。

予約管理システムでgoogleカレンダーAPIを設定して、予約を同期

イベントの参加者を追加

イベントに参加するお客様を従業員がカレンダー上で確認とれるようにする場合ONにします。

予約管理システムでgoogleカレンダーAPIを設定して、予約を同期

ONにすると、従業員とお客様一覧がgoogleカレンダー上に表示されます。

Allow customer to see other attendees

お客様が他の参加者を出席者リストとして確認することができるようにする場合、ONにします。

ここでONにすると、自分以外の参加者が誰なのかgoogleカレンダー上に表示されます。

予約管理システムでgoogleカレンダーAPIを設定して、予約を同期

Send Event inbitation Email

【イベントの参加者を追加】ボタンがONになっている場合、お客様へイベント招待メールを送ることができます。

予約管理システムでgoogleカレンダーAPIを設定して、予約を同期

以下の画像は返事待ちになっています。招待中という事になります。

お客様にはこのような招待メールが届いています。このメールで【はい】をクリックするとお客様のgoogleカレンダーにスケジュールが入ります。

Googleカレンダーの予約あるの時間枠を除く

こちらの設定をONにしておかないと、カレンダーに予約が入っている時間帯でもお客様は予約をする事が可能になってしまいます。

予約管理システムでgoogleカレンダーAPIを設定して、予約を同期

カレンダーとの同期

Googleカレンダーの予定ありの時間帯を除くをONにした場合、同期する予定の最大数を設定できます。

予約管理システムでgoogleカレンダーAPIを設定して、予約を同期

複数の従業員で運用している場合、デフォルトの50では数が足りない場合があります。特定日以降の予定が同期がされてていないと思ったら、こちらの同期数を少し増やすようにしてください。
ただ、増やし過ぎるとサーバーに負担がかかるので、少しずつ増やして調整をしてくださいね!

従業員のGoogleカレンダー登録

Googleカレンダーとの連携が取れたら、従業員ごとにGoogleカレンダーを登録します。

従業員の編集

【Amelia】>【従業員】をクリックして、Googleカレンダーを登録したい従業員をクリックします。

予約管理システムでgoogleカレンダーAPIを設定して、予約を同期

Sign in with Google

同期したいGoogleカレンダーを管理しているGoogleのアカウントでサインインします。

予約管理システムでgoogleカレンダーAPIを設定して、予約を同期

ログインするアカウントをクリック

予約管理システムでgoogleカレンダーAPIを設定して、予約を同期

以下のような表示が出たら、【安全ではないページへ移動】をクリックします。

予約管理システムでgoogleカレンダーAPIを設定して、予約を同期

許可をする

予約管理システムでgoogleカレンダーAPIを設定して、予約を同期

同期するカレンダーを選択

Googleカレンダーの中でも、同期したいカレンダーを選択して最後に【保存】をクリックして終了となります。

予約管理システムでgoogleカレンダーAPIを設定して、予約を同期

【エラー解決】カレンダーに接続できませんでした

従業員設定からGoogleログインを行ったものの、最後にカレンダーに接続できませんでしたとなる場合、過去に接続をしたカレンダー情報がデータベースに残っていて不具合を引き起こす事があるそうです。

その場合はデータベースへアクセスをして【wp_amelia_providers_to_google_calendar】の中の対象の従業員のデータを削除して接続しなおすと解決します。

【エラー解決】インスタベースにAmeliaの予約が反映されない

レンタルスペースの予約でAmeliaを使っている方より、インスタベースにAmeliaからの予約が反映されないというお問合せをよく頂くので解決方法を追加しました!
→【解決済】Ameliaの予約がインスタベースに反映されない

zoomアプリ設定・動画詳細

2023年9月以降、JTW設定が廃止となりました。

以下の解説記事を参照ください。

zoomURL自動発行 Server to Server 設定解説

zoomアプリ設定(図解)

引き続き、zoomアプリの設定をご紹介します。

まずはZoom App Marketplaceへアクセスします。

【Sign In】します

予約管理システムでgoogleカレンダーAPIを設定して、予約を同期

zoomアプリのBuldを行う

【Develop】>【Build App】をクリックします。

予約管理システムからzoomオンライン会議室自動発行

JWTをcreate

一度zoomアプリの連携を取ってしまっているので表示が異なりますが、【JWT】の【create】ボタンをクリックして名前を登録して作成してください。

予約管理システムからzoomオンライン会議室自動発行

必要事項の入力

  1. App Nameー先ほど登録した名前が表示されていると思います
  2. Company Nameー会社名
  3. Nameー担当者名
  4. Email Addressー担当者メールアドレス

以上で【Continue】ボタンをクリックします。

予約管理システムからzoomオンライン会議室自動発行

APIキーとシークレットキーの登録

【App Credentials】をクリックしてAPI KeyとAPI SecretをAmeliaに入力します。

予約管理システムからzoomオンライン会議室自動発行

AIPキーとシークレットキーの入力

【Amelia】>【設定】>【Integrations】>【Zoom】

以下の箇所に、Client KyeとClient Secretを入力します。

予約管理システムからzoomオンライン会議室自動発行

Meeting Title

Googleカレンダー同様、【通知】の中にある【メールプレースホルダー】にあるものを設定できます。

予約管理システムからzoomオンライン会議室自動発行

Meeting Agenda

予約の詳細の事です。こちらも【通知】の中にある【メールプレースホルダー】から選択して設定をします。

予約管理システムからzoomオンライン会議室自動発行

Create Meeting For Pending Appotintments

保留中の予約についても会議URLを発行するかの設定です。

予約管理システムからzoomオンライン会議室自動発行

以上でzoomアプリとの同期は終了です。

従業員ごとにzoomと接続させる方法

従業員がそれぞれのzoomに接続させるにはzoom Appで追加の設定が必要になります。

zoom App Marketplaceへ再度アクセス

https://zoom.us/account/user

上記URLがユーザー管理のページなのでログインしてアクセスしてください。

まずは、必要情報を入力します。

クレジットカードの登録かpaypalの認証が必要となります

認証が完了するとユーザー一覧ページへ移行するので、ユーザー追加をクリックします。

ユーザー追加

ユーザーを追加します。

ユーザーの追加が完了したら、Ameliaの従業員設定でzoomアカウントの連携を行っていきます。

Ameliaでzoomアカウント連携

従業員ごとにzoomを接続します。【Amelia】>【従業員】設定をする従業員をクリックします。

予約管理システムからzoomオンライン会議室自動発行

zoomユーザーを選択

Zoom Userという個所のドロップダウンリスト内にユーザーがいるので、選択して【保存】します。

予約管理システムからzoomオンライン会議室自動発行

メールでzoomURLを通知

自動で生成されたzoomURLをメール本文へ出力することで、zoom会議URLの発行からお知らせまでを自動化できます。

【Amelia】>【通知】の【</> Show Email Placeholders】という個所に以下のように

  • %zoom_host_url%ーホスト用URL
  • %zoom_join_url%ーお客様用URL

があります。

予約管理システムからzoomオンライン会議室自動発行

メール本文に以下のように貼り付けることで、自動でzoomURLをお知らせする事が出来ます。

サービスやイベントにzoomを設定

サービスやイベントでzoomのオプションを有効化する必要があります。

サービスの場合

サービスの編集画面へ行き、【設定】の中にあるIntegrationの中のzoomをONにします。

予約管理システムからzoomオンライン会議室自動発行

Eventの場合

イベントの新規作成、または編集画面で【zoom User】のドロップダウンリストを展開して、発行するzoomユーザーを選択します。

予約管理システムからzoomオンライン会議室自動発行

以上でzoomの設定は完了です!

Googleカレンダーに比べたらzoomの設定は簡単だと思います。

ホームページのリスキリングはお任せください!

2019年よりWordPressやホームページに関するスキルシェアを行ってきました。事例やノウハウが蓄積され、スピーディーかつ的確にお悩みを解決へと導く事を得意としています。ホームページに関するお悩みがございましたら、LINE公式アカウントよりお気軽にご相談ください!

↑クリックするとLINE公式が開きます

新着記事

'}}
LifterLMSのシステム自動出力ページのカスタマイズ方法を解説
'}}
LifterLMS 銀行振り込みなどで登録日とアクティブ日が異なる場合のカスタマイズ例
'}}
(解決済)WordPressから送信されるGmail宛のメールだけ送られない【ロリポップ】
'}}
WordPress予約システムAmeliaのパッケージ(回数券)設定を解説
WP Rocket - WordPress Caching Plugin
ja日本語