BloggerのサイドガジェットにGoogleカレンダーを埋め込む

前回Blueskyの埋め込み方法の記事を書いたのですが、今回はGoogleカレンダーの埋め込み方法を残そうと思います。実は、Blueskyの埋め込みはレスポンスが悪くて（Bluesky自体が重い...）ブログの表示速度評価があまりにも悪かったため、取りやめてしまいました笑表示速度を気にしなければ特に問題ないとは思いますけれどね。

気になる方は下記の記事も併せて参考にしてください。

BloggerのサイドガジェットにBlueskyのタイムラインを埋め込む | ともゆきの独り言（雑記ブログ）

いまいちブログが稼働してるのかしてないのか分かりづらい部分がありましたので、SNSのタイムラインをブログに埋め込むガジェットを導入してみました。

www.tomoyuki0.com

表示イメージ

実際に埋め込んだGoogleカレンダーの表示は画像の通りです。祝日や予定の文字が見切れてしまっているのが少し残念ですが...。フォントのサイズは変更できないようです。一応、予定をクリックすれば詳細は確認できます。

公開可能なGoogleカレンダーを作成する

まずは全員が見れるよう公開可能なカレンダーを作成します。

Googleカレンダーアプリを開き、トップメニューにある「他のカレンダー」の「＋」をクリックします。

リストから「新しいカレンダーを作成」をクリックします。

「名前」と「タイムゾーン」（日本標準時）を指定して、「カレンダーを作成」をクリックします。

左側のメニューに作成したカレンダーが追加されるので、「予定のアクセス権限」をクリックして、該当の項目に飛びます。「一般公開して誰でも利用できるようにする」のチェックボックスにチェックを入れます。

次に、左側のメニューから「カレンダーの統合」をクリックして、該当の項目に飛びます。「カスタマイズ」のボタンをクリックします。

埋め込み時のレイアウトをカスタマイズしてください。カスタマイズが終わったら埋め込みコードの右側にある「コピー」ボタンから埋め込みコードをコピーします。

なお、カレンダーに祝日や他の予定を反映する場合は、「表示するカレンダー」にそれぞれチェックを入れます。

因みに、画像のように祝日や楽天イーグルスの予定を追加するには、トップメニューにある「他のカレンダー」の「＋」から「関心のあるカレンダーを探す」で追加できます。

Bloggerに貼り付ける

さて、ここからBlogger側の設定方法です。

Blueskyの埋め込みと同様です。ガジェット追加して、コード貼り付けるだけです。

Bloggerのメニュー画面から「レイアウト」を選択します。

設置したい場所で「ガジェットを追加」を選択します。

一覧から「HTML / JavaScript」を選択します。

適当なタイトルを入れ、「コンテンツ」に先ほどコピーした埋め込み用コードを貼り付けて、保存します。

補足

デザインやレイアウトを端末ごとの画面に合わせて自動的に最適表示させてくれる「レスポンシブ」対応については以下のタグを前後に追加する必要があるようです。divタグを追加することでスマホにも綺麗に表示されるとのこと。

<div class="googleCalender">

<iframe src="～"></iframe>

</div>

注意事項

あくまで公開可能なカレンダーですので、スケジュールに個人情報や機密情報は記入しないように気を付けましょう。

まぁ別にカレンダーに限った話じゃありませんけども...SNSとかでも位置情報をかなり具体的に書いてる人とかもいらっしゃいますしねぇ...(￣▽￣;)いや、バレても問題なかったり日記程度の事後報告なら全然構わないと思いますが。

なので、ライブ配信とかイベント系など事前に人を呼び込みたい時など、お仕事系で使うのが良いかもしれませんね。

以上！