WordPressを使ったホームページの作り方/プラグインの使い方/ノーコード構築ブログ
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】>【設定】
【Integration】で設定を行います。
googleカレンダー設定・動画詳細
googleカレンダー同期設定（図解）
【Googleカレンダー】を設定します
- Cllient ID/Client Srcret
- イベントのタイトル
- イベントの詳細
を設定します。
１．Cllient ID/Client Srcret
GoogleカレンダーAPIキーを設定します。
まずはGoogleディベロッパーコンソールへアクセスします。
GoogleAPIのプロジェクトを新規作成
赤線の箇所にある▼をクリックします。
【新しいプロジェクトを作成】
GoogleAPIのプロジェクトの作成
- プロジェクト名ー好きな名前をつけます
- 場所ー組織なし
【作成】ボタンをクリックします。
GoogleAPIプロジェクトを開く
作成をすると通知が右上に表示されるので【表示】をクリックをするか
赤下線の箇所に作成済プロジェクト一覧があるので、▼をクリックして
作成したプロジェクト名をクリックします。
OAuth同意画面
左サイドバーにある【OAuth同意画面】をクリックします。
外部
を選択して【作成】ボタンをクリックします。
OAuth同意画面設定
作成ボタンをクリックすると画面が移行されます。こちらで設定する箇所は
- アプリケーション名
- 認証済みドメイン
１．アプリケーション名
こちらはAmeliaというアプリケーションを利用するので、【Amelia】と入力します。
２．認証済みドメイン
こちらには使用するドメインを入力します。例えば、私の場合はhanami-web.tokyo.jp
http://やhttps://や最後の/は不要です。また、入力後に【エンター】を必ず押してください。入力したドメインが設定されません。
GoogleAPIライブラリの設定をします
【ライブラリ】をクリックします。
ライブラリを検索
【Google Calendar API】を検索します。
【有効にする】をクリックします。
Google Calendar API認証情報を作成
【承認情報を作成】をクリックします。
万が一、こちらの画面から移行してしまった場合は、もう一度【ライブラリ】をクリックしてアプリケーションAPI画面で【Google Calendar API】を検索します。
【管理】ボタンをクリックする元の画面に戻ることができます。
Google Calendar API承認情報を設定
１．必要な認証情報の種類を調べる
Google Calendar AIP
を選択します。
APIを呼び出す場所
ウェブブラウザ(JavaScript)を選択します。
アクセスするデータの種類
ユーザーデータ
を選択します。最後に【必要な認証情報】ボタンをクリックします。
OAuth 2.0 クライアント ID を作成する
設定する項目は
- 名前
- 認証済のリダイレクトURI
１．名前
好きな名前をつけます。
２．承認済みのリダイレクト URI
ここに入力をする値は、wordpressダッシュボード内【Amelia】>【設定】>【Integration】>【Googleカレンダー】に記載のあるURLをコピーします。
貼り付けます。
OAuthクライアントIDを作成
【完了】ボタンをクリックします。
クライアントIDとシークレットキーの確認
ダッシュボード内の【認証情報】>【OAuth2.0クライアントID】に追加されます。
鉛筆アイコンをクリックして、クライアントIDとシークレットキーを確認します。
クライアントIDとシークレットキーを設定
GoogleAPIで確認したクライアントIDとシークレットキーをwordpress管理画面【Amelia】>【設定】>【Integration】
Cliant IDにクライアントID、Client Secretにクライアントシークレットを入力します。
以上でGoogle Calendar APIとの連携作業は終了です。
【2020年12月追記】アプリを公開
2020年12月、複数名の方よりgoogle APIとAmeliaが連携取れないとご連絡を頂き調査を行った所、API登録した後はテストモードになっている事が判明しました。
【OAuth同意画面】で【アプリを公開】ボタンをクリックしてください。これで無事接続できるようになります。
イベントのタイトル
Googleカレンダーへ予約を自動登録される際のイベントタイトルを設定します。
【Amelia】>【通知】の中にある【Show Email Placeholders】の中に入っている文字列を使用することができます。
イベントの詳細
Googleカレンダーに自動登録される際に入力する詳細になります。
こちらも【Show Email Placeholders】から選びます。
承認待ち予約を組み入れる
お客様がオンラインから予約を行ったときに、【承認待ち】ステータスを選択している場合でも、Googleカレンダーに予約として自動登録するのかの設定です。
ONにしておかないと、仮予約の状況でダブルブッキングしてしまう可能性があります。
イベントの参加者を追加
イベントに参加するお客様を従業員がカレンダー上で確認とれるようにする場合ONにします。
ONにすると、従業員とお客様一覧がgoogleカレンダー上に表示されます。
Allow customer to see other attendees
お客様が他の参加者を出席者リストとして確認することができるようにする場合、ONにします。
ここでONにすると、自分以外の参加者が誰なのかgoogleカレンダー上に表示されます。
Send Event inbitation Email
【イベントの参加者を追加】ボタンがONになっている場合、お客様へイベント招待メールを送ることができます。
以下の画像は返事待ちになっています。招待中という事になります。
お客様にはこのような招待メールが届いています。このメールで【はい】をクリックするとお客様のgoogleカレンダーにスケジュールが入ります。
Googleカレンダーの予約あるの時間枠を除く
こちらの設定をONにしておかないと、カレンダーに予約が入っている時間帯でもお客様は予約をする事が可能になってしまいます。
カレンダーとの同期
Googleカレンダーの予定ありの時間帯を除くをONにした場合、同期する予定の最大数を設定できます。
複数の従業員で運用している場合、デフォルトの50では数が足りない場合があります。特定日以降の予定が同期がされてていないと思ったら、こちらの同期数を少し増やすようにしてください。
ただ、増やし過ぎるとサーバーに負担がかかるので、少しずつ増やして調整をしてくださいね！
従業員のGoogleカレンダー登録
Googleカレンダーとの連携が取れたら、従業員ごとにGoogleカレンダーを登録します。
従業員の編集
【Amelia】>【従業員】をクリックして、Googleカレンダーを登録したい従業員をクリックします。
Sign in with Google
同期したいGoogleカレンダーを管理しているGoogleのアカウントでサインインします。
ログインするアカウントをクリック
以下のような表示が出たら、【安全ではないページへ移動】をクリックします。
許可をする
同期するカレンダーを選択
Googleカレンダーの中でも、同期したいカレンダーを選択して最後に【保存】をクリックして終了となります。
【エラー解決】カレンダーに接続できませんでした
従業員設定からGoogleログインを行ったものの、最後にカレンダーに接続できませんでしたとなる場合、過去に接続をしたカレンダー情報がデータベースに残っていて不具合を引き起こす事があるそうです。
その場合はデータベースへアクセスをして【wp_amelia_providers_to_google_calendar】の中の対象の従業員のデータを削除して接続しなおすと解決します。
【エラー解決】インスタベースにAmeliaの予約が反映されない
レンタルスペースの予約でAmeliaを使っている方より、インスタベースにAmeliaからの予約が反映されないというお問合せをよく頂くので解決方法を追加しました！
→【解決済】Ameliaの予約がインスタベースに反映されない
zoomアプリ設定・動画詳細
zoomアプリ設定(図解)
引き続き、zoomアプリの設定をご紹介します。
まずはZoom App Marketplaceへアクセスします。
【Sign In】します
zoomアプリのBuldを行う
【Develop】>【Build App】をクリックします。
JWTをcreate
一度zoomアプリの連携を取ってしまっているので表示が異なりますが、【JWT】の【create】ボタンをクリックして名前を登録して作成してください。
必要事項の入力
- App Nameー先ほど登録した名前が表示されていると思います
- Company Nameー会社名
- Nameー担当者名
- Email Addressー担当者メールアドレス
以上で【Continue】ボタンをクリックします。
APIキーとシークレットキーの登録
【App Credentials】をクリックしてAPI KeyとAPI SecretをAmeliaに入力します。
AIPキーとシークレットキーの入力
【Amelia】>【設定】>【Integrations】>【Zoom】
以下の箇所に、Client KyeとClient Secretを入力します。
Meeting Title
Googleカレンダー同様、【通知】の中にある【メールプレースホルダー】にあるものを設定できます。
Meeting Agenda
予約の詳細の事です。こちらも【通知】の中にある【メールプレースホルダー】から選択して設定をします。
Create Meeting For Pending Appotintments
保留中の予約についても会議URLを発行するかの設定です。
以上でzoomアプリとの同期は終了です。
従業員ごとにzoomと接続させる方法
従業員がそれぞれのzoomに接続させるにはzoom Appで追加の設定が必要になります。
zoom App Marketplaceへ再度アクセス
上記URLがユーザー管理のページなのでログインしてアクセスしてください。
まずは、必要情報を入力します。
認証が完了するとユーザー一覧ページへ移行するので、ユーザー追加をクリックします。
ユーザー追加
ユーザーを追加します。
ユーザーの追加が完了したら、Ameliaの従業員設定でzoomアカウントの連携を行っていきます。
Ameliaでzoomアカウント連携
従業員ごとにzoomを接続します。【Amelia】>【従業員】設定をする従業員をクリックします。
zoomユーザーを選択
Zoom Userという個所のドロップダウンリスト内にユーザーがいるので、選択して【保存】します。
メールでzoomURLを通知
自動で生成されたzoomURLをメール本文へ出力することで、zoom会議URLの発行からお知らせまでを自動化できます。
【Amelia】>【通知】の【</> Show Email Placeholders】という個所に以下のように
- %zoom_host_url%ーホスト用URL
- %zoom_join_url%ーお客様用URL
があります。
メール本文に以下のように貼り付けることで、自動でzoomURLをお知らせする事が出来ます。
サービスやイベントにzoomを設定
サービスやイベントでzoomのオプションを有効化する必要があります。
サービスの場合
サービスの編集画面へ行き、【設定】の中にあるIntegrationの中のzoomをONにします。
Eventの場合
イベントの新規作成、または編集画面で【zoom User】のドロップダウンリストを展開して、発行するzoomユーザーを選択します。
以上でzoomの設定は完了です！
Googleカレンダーに比べたらzoomの設定は簡単だと思います。
ホームページのリスキリングはお任せください！
2019年よりWordPressやホームページに関するスキルシェアを行ってきました。事例やノウハウが蓄積され、スピーディーかつ的確にお悩みを解決へと導く事を得意としています。ホームページに関するお悩みがございましたら、LINE公式アカウントよりお気軽にご相談ください！
↑クリックするとLINE公式が開きます
新着記事
