ここ数日、Googleカレンダーをホームページに表示するのにハマってる。
ようやく脱出できそうだが、結構な時間を費やしてしまった。

当初、WordPressのプラグインを使って速攻で終わらせる予定で、バッファ・検証込みで半人日の工数想定だったのだけど、、、
はい。UI含めてがっつり3人日かかってしまいました。

与件はこんな感じ。
・レスポンシブ対応
・同一ページ内で複数のGoogleカレンダーの切替を行う（Googleカレンダー内の表示切替は使わない）
・最大20つくらいのGoogleカレンダーを使う

デザイン問題。
・スマホでの見え方（リスト？月表？ハイブリット？）

仕様問題。
・iframeの配置場所によって、ページスクロールするたびに、カレンダーを再読み込みするという謎仕様（iPhone iOS10.3 で発覚。これに相当ハマった）
・プラグインを利用するとレスポンシブをケアし、ひとつのカレンダーにつき2つの見せ方をする必要があるため煩雑になる。またバージョンアップやGoogleカレンダーの仕様変更時にプラグインが使えなくなるリスクはつきまとう
・プラグインを使う場合、Ajaxで使用する場合の仕組みを考える

考えたこと。
・レスポンシブかつUXに配慮しつつもプレーンのiframeだけでどうにかする
・表示したいカレンダーを選択したときだけ、そのiframeを呼び出す
・同カレンダーは2回目以降はすでに呼び出したiframeを再利用する

Yes！コーダーズ・ハイ！