googleカレンダーとメールフォームで、予約受付ってできるの？iframeレスポンシブに気をつけて

まずはgoogleカレンダーの設定をしよう

新しいカレンダーを追加（ページ用）

googleカレンダーのページにアクセスしましょう。（googleアカウントがない方は、事前に登録してください） 上のほうにある、ねじみたいなアイコンをクリック。

『カレンダーを追加』というのがあるので、ここで新しいものをつくります。プライベート用すでに使っていて、それとは別にしたい場合は。

タイトルは合うものをつけます。管理人の場合は『wpサイトコンサル予約』としました。『一般公開して利用できるようにする』にチェックをつけることで、サイト上に公開してユーザーが見ることができるようになります。 この場合『個人情報は書かない（○○さまご予約など）』『まちがってプライベート用などにチェックをつけない（公開されます）』という点に気をつけます。

googleカレンダーをサイトに貼り付けるときのコードは？

上記のページを下にスクロールしていくと『iframe src』で始まるコードが出ています。このコードを表示したい場所に貼り付けると、カレンダーがサイト上で表示されます。

しかし、このコードが曲者なんですよかなり。詳細は後のほうで。

あとは受付できる日を書いていく！○△×を使うと見やすいよ

表示されたとき大丈夫なように、受付できる日をカレンダーに書いていきます。スマホの小さい画面でも分かりやすいよう『○△×』を使ってもokです。定休日には×をつけておくのも忘れずに！

googleカレンダーのレスポンシブ対応について（ＣＳＳ）

レスポンシブ対応しないと？？

iframeの枠だけデバイスにあわせて、中身はレイアウトにあわせないというのが発生しました。その場合、写真のようにカレンダーがつぶれて、文字が見えなくなります。これではどこをタップしてよいかわかりません。

また、この場合はiframeの枠だけレスポンシブでしたが、iframeの指定がなんもない場合は『カレンダーがそのままの大きさで表示されて、スマホだと火曜日あたりまでしか見れない』というのもあるようです。

googleカレンダーのレスポンシブ対応するCSSはある

検索してみたところ、3061.jp @FUJIDENKIさんという方のサイトで、カレンダーをレスポンシブにするCSSがありました。 https://3061.jp/google-calender-responsive-code/

検索するといろいろCSSが出てくるので『キーワード：googleカレンダーレスポンシブ』状況に応じて、使いやすいものを選んでください。

上記のCSSを入れても、googleカレンダーのレスポンシブがエラーになる場合

管理人の環境では、上記のようなCSSをいれても、googleカレンダーのレスポンシブがエラーになりました（縦サイズはつぶれたまま）。 理由はワードプレスのテーマで『iframe（youtubeなど）指定している部分が既にあり、干渉していた』という点です。

上記の干渉しているCSSをカットすることにより、スマートフォンでタップして表示できる広さになりました。

この場合youtubeは、『埋め込むときは320サイズ固定にする』『カレンダー・youtube個別にCSS指定』『問い合わせのページだけ、対応できるCSSを出力』などの対策が考えられます。

googleカレンダーとメールフォームでつくった予約ページ例

ＰＣ版予約受付ページ

メールフォームを埋め込んで、同じページ内でカレンダーを見ながら問い合わせメールが送れるようにしたページです。文面とかは工夫の余地があります。

スマートフォン版予約受付ページ

ちょっと文字が小さいですが、レスポンシブ対応をかけたので、文字がタップできるようになります。左側に『○△×』があったほうが、お客さんが選びやすいでしょう。ホットペッパーグルメとかも、予約ページに行くとカレンダーに○×が出るので、この形式に慣れている人は多いと思われます。

メールフォームは、カレンダーと同じページにおいたほうが良いの？

メールフォームは、ワードプレスのショートコードをつかって、『カレンダーと同じページ内』に入れました。カレンダーとメールフォームが別々だと、ＰＣタブブラウザならあまり気になりませんが、スマホで確認するたびにページ移動が発生するので、非常に操作が大変になります。

このやり方でおこなう場合は、『同じページ内に埋め込める』メールフォームがあると、非常に有利です。しかし、デフォルトでは、『メールフォームの内容をカレンダーが受け取れない』という難点があるため、ガッツリやりたい人はプログラム組む羽目になります（涙）

googleカレンダーとメールフォームのメリット・デメリットは？

メリットは、制限がなく、コストもかからない

通常、予約フォームASPですと、『無制限受付＆管理機能　月20000円』『無料プランは、月5～10通まで受け付け可能』のように、制限がかかっているところが多いです。しかしこの方法だと、googleアカウント・フォーム＆カレンダーを載せるスペースさえあれば無制限受付可能です。

デメリットは予約・顧客管理など

デフォルトだと『フォーム入力した値が、カレンダーに渡らない』ので、予約・顧客管理は手作業になりそう。予約件数が多い場合は、この点がデメリットになります。 スクリプトを組んで値をわたすほか、一からそういう予約システムを作るのも大変（発注しても高い）なので、WordPress＆予約・顧客管理プラグイン（場合によっては独自フィールドなどカスタマイズ）あたりは、選択肢に入りそうです。

あとがき・まとめ

とりあえず、レスポンシブさえどうにかすれば、そこそこ形にはなります。カレンダーを埋めるときも、スマホでgoogleカレンダーにアクセスして行えるので、新しく難しいツールを覚えたりしなくてよいのはメリットかと思いました。

キャパが小さめな『スクール/教室/出張コンサル・サロン・飲食店』などまでは、活用しだいで対応できます。宿泊施設などは、複数の部屋から選ばなければならないので、このシステムでは対応できません。また、データベースと連動したりするわけでないので、数が増えてくると管理が大変になるかもしれません。

後ほど、ワードプレスプラグインでの予約システムもやってみたいと思います。