Googleカレンダーを公開URLで共有したときにも好みの色で複数のカレンダーを表示するの巻

Googleカレンダーを公開URLで共有したときにも好みの色で複数のカレンダーを表示するの巻

はじめに

Googleカレンダーを便利に使わせてもらってます。

スケジュールを確認する環境が人によってバラバラであるワタシたちのチーム。。。

公開URLを使うことによって、各自が慣れ親しんだウェブブラウザからチームスケジュールを確認するってことでうまくいってます。こんな感じで(PCで見た画面です。予定は架空のものですよ)。

google_calendar_multi_share02

公開URLを使うとGoogleにログインしなくてもカレンダーを見ることができます(一般に公開する設定をしてあれば)。

なので、Googleカレンダーを使ってないよっていう人や、そもそもGoogleアカウント持ってないよっていう人であってもウェブページにアクセスさえできればPCだろうがスマホだろうがスケジュールを確認することができます。

チームの予定表の為だけに「新しくこのアプリを入れてユーザー登録をしてくださいねー」っていうのもないのでとっても気が楽です。また、カレンダーの管理を継承する労力も少ないです。そもそも無料で使えますし、なんともありがたいことです。

でもね。

ちょっと不満があるのです

公開URLだと、色がブルー(コバルト?)にしかならないのです。それに1つのカレンダーしか表示できないですし。。。

どういうことかというと、

まず、もともとのGoogleカレンダーのウェブ版の表示はこうなのです。

google_calendar_multi_share01

オレンジ系で色を指定していて、複数のカレンダーを追加表示していたやつなのです。

これを公開URLを使用して共有すると、先に示した通りになるのです。

なんか残念でしょう?わがままかも知れませんが。

ここでちょっと公開URLの取得から表示までの手順をみてみます。

「マイカレンダー」にあるカレンダーのところにマウスオーバーすると出てくる3点ポッチをクリックして、

「設定と共有」を開いた「カレンダーの統合」のところにある、「このカレンダーの公開URL」を取得します。

google_calendar_multi_share04

で、このリンクをチームメイトで共有して、ブラウザで見るというわけです。

URLのページを開いてみると、、、

google_calendar_multi_share02

はい、せっかくカレンダーに好きな色を設定していてもブルー(コバルト?)に変わっちゃうのです。

また、1つのカレンダーしか表示できていないことがわかります(今回のケースだと「日本の祝日」と「月の位相」が入っていない)。

これらが不満。むふー。

まあチームの予定だけ見れたらそれでいいっちゃいいんですけど、ちょっとぐらいカラフルにしてみたいし、祝日の情報とかも一緒に入れたいやん。

iframeでは好きな色で複数のカレンダーを表示できるのに。。。

さて、先ほどの設定の画面で、公開URLが表示されている下にはiframe用の埋め込みコードがあります。ここには「カスタマイズ」っていう項目があって、

google_calendar_multi_share05

複数の他のカレンダーと一緒に表示したり、見た目をちょっとカスタマイズした状態でウェブページに埋め込むことができるようになっています。この埋め込みコードをウェブページに張ると、、、

google_calendar_multi_share07

こんな感じで埋め込むことができます。おお、カラフル。祝日も表示されています。月の位相は絵になるのね。。。

google_calendar_multi_share08

このiframeのやつみたいな感じにできればいいんですが。。。

iframeだとどっかのウェブページに埋め込まにゃならんので、チームのホームページなどを持っていないワタシらは使えない。このブログを提供するわけにもいかんし。うーん。

。。。はい、今回その悩みを解決できましたっていうお話です。

えらく前置きが長くなってしまいました。

公開URLで共有したときにも好みの色で複数のカレンダーを表示する

やり方は、

iframeのコードの「src」の中身を公開URLとして使う

だけです。

そうすると、iframeのときと同じような見た目でweb上で表示できることが分かったのでした。

なお、この方法は2021年9月3日時点で有効です。

それでは具体的に見てみましょう。

再び設定のiframeの埋め込みコードのところの「カスタマイズ」に行きます。

google_calendar_multi_share05

ついでにポチポチやって、見た目をちょっとカスタマイズしてみます。

google_calendar_multi_share09

カスタマイズが終わったら、埋め込みコードの、、、

google_calendar_multi_share10

src=” ”の中身だけをコピーします。

ここから

google_calendar_multi_share11

ここまで(「style」の手前までになります)をコピー。

google_calendar_multi_share12

で、これをブラウザのアドレスバーに張り付けて表示してみると、、、

google_calendar_multi_share13

おお、できた。iframeのときと同じように、色合いを保持したままで複数のカレンダーの表示ができました。

いや〜知らなんだ。

しかしウェブ版とは微妙に色が変わっちゃうのはどういうわけなんでしょう。。。まあいいけど。

ここから見た目をもうちょい整えられるともっと良いんですけどね。

ちなみにウェブブラウザでGoogleにログインしておけば、非公開設定にしてある自分のカレンダーも公開URLを使って見ることができます。逆に言うと、誰でも公開URLのページにはアクセスできますが、非公開設定のカレンダーについてはその閲覧権限を持っていなければ見ることができません。

。。。よもや最後まで読んでくださるとは。。。ありがとうございました。

おしまい。


このブログはエックスサーバー で運営しております。


Word Press専用クラウド型レンタルサーバーwpX Speed

WordPressを使うならロリポップ!
簡単インストール完備で楽々スタート!


世界にたった一つ、あなただけのドメインを登録しよう!

格安ドメイン取得サービス─ムームードメイン─

こんなものが欲しい、あんなものを試してみたいを実現します!「海外直送」

たまには自分をいたわろ、ねぎらお。ご帰宅途中にお気軽に。
全国630店舗以上!もみほぐし・足つぼ・ハンドリフレ・クイックヘッドのリラクゼーション店【りらくる】