ここ数日、Googleカレンダーをホームページに表示するのにハマってる。
ようやく脱出できそうだが、結構な時間を費やしてしまった。
当初、WordPressのプラグインを使って速攻で終わらせる予定で、バッファ・検証込みで半人日の工数想定だったのだけど、、、
はい。UI含めてがっつり3人日かかってしまいました。
与件はこんな感じ。
・レスポンシブ対応
・同一ページ内で複数のGoogleカレンダーの切替を行う（Googleカレンダー内の表示切替は使わない）
・最大20つくらいのGoogleカレンダーを使う
デザイン問題。
・スマホでの見え方（リスト？月表？ハイブリット？）
仕様問題。
・iframeの配置場所によって、ページスクロールするたびに、カレンダーを再読み込みするという謎仕様（iPhone iOS10.3 で発覚。これに相当ハマった）
・プラグインを利用するとレスポンシブをケアし、ひとつのカレンダーにつき2つの見せ方をする必要があるため煩雑になる。またバージョンアップやGoogleカレンダーの仕様変更時にプラグインが使えなくなるリスクはつきまとう
・プラグインを使う場合、Ajaxで使用する場合の仕組みを考える
考えたこと。
・レスポンシブかつUXに配慮しつつもプレーンのiframeだけでどうにかする
・表示したいカレンダーを選択したときだけ、そのiframeを呼び出す
・同カレンダーは2回目以降はすでに呼び出したiframeを再利用する
Yes！コーダーズ・ハイ！