Googleカレンダーを公開URLで共有したときにも好みの色で複数のカレンダーを表示するの巻
- 2021.09.03
- google calendar 使いかた備忘録
- googleカレンダー

はじめに
Googleカレンダーを便利に使わせてもらってます。
スケジュールを確認する環境が人によってバラバラであるワタシたちのチーム。。。
公開URLを使うことによって、各自が慣れ親しんだウェブブラウザからチームスケジュールを確認するってことでうまくいってます。こんな感じで(PCで見た画面です。予定は架空のものですよ)。

公開URLを使うとGoogleにログインしなくてもカレンダーを見ることができます(一般に公開する設定をしてあれば)。
なので、Googleカレンダーを使ってないよっていう人や、そもそもGoogleアカウント持ってないよっていう人であってもウェブページにアクセスさえできればPCだろうがスマホだろうがスケジュールを確認することができます。
チームの予定表の為だけに「新しくこのアプリを入れてユーザー登録をしてくださいねー」っていうのもないのでとっても気が楽です。また、カレンダーの管理を継承する労力も少ないです。そもそも無料で使えますし、なんともありがたいことです。
でもね。
ちょっと不満があるのです
公開URLだと、色がブルー(コバルト?)にしかならないのです。それに1つのカレンダーしか表示できないですし。。。
どういうことかというと、
まず、もともとのGoogleカレンダーのウェブ版の表示はこうなのです。

オレンジ系で色を指定していて、複数のカレンダーを追加表示していたやつなのです。
これを公開URLを使用して共有すると、先に示した通りになるのです。
なんか残念でしょう?わがままかも知れませんが。
関連記事;スマホで見るGoogleカレンダーを曜日別に色分けしたりイベントタイトルを折り返したりするの巻
グーグルカレンダーを見やすくカスタマイズしてA4に印刷するの巻
ここでちょっと公開URLの取得から表示までの手順をみてみます。
「マイカレンダー」にあるカレンダーのところにマウスオーバーすると出てくる3点ポッチをクリックして、
「設定と共有」を開いた「カレンダーの統合」のところにある、「このカレンダーの公開URL」を取得します。

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

はい、せっかくカレンダーに好きな色を設定していてもブルー(コバルト?)に変わっちゃうのです。
また、1つのカレンダーしか表示できていないことがわかります(今回のケースだと「日本の祝日」と「月の位相」が入っていない)。
これらが不満。むふー。
まあチームの予定だけ見れたらそれでいいっちゃいいんですけど、ちょっとぐらいカラフルにしてみたいし、祝日の情報とかも一緒に入れたいやん。
iframeでは好きな色で複数のカレンダーを表示できるのに。。。
さて、先ほどの設定の画面で、公開URLが表示されている下にはiframe用の埋め込みコードがあります。ここには「カスタマイズ」っていう項目があって、

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

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

このiframeのやつみたいな感じにできればいいんですが。。。
iframeだとどっかのウェブページに埋め込まにゃならんので、チームのホームページなどを持っていないワタシらは使えない。このブログを提供するわけにもいかんし。うーん。
。。。はい、今回その悩みを解決できましたっていうお話です。
えらく前置きが長くなってしまいました。
公開URLで共有したときにも好みの色で複数のカレンダーを表示する
やり方は、
iframeのコードの「src」の中身を公開URLとして使う
だけです。
そうすると、iframeのときと同じような見た目でweb上で表示できることが分かったのでした。
なお、この方法は2021年9月3日時点で有効です。
それでは具体的に見てみましょう。
再び設定のiframeの埋め込みコードのところの「カスタマイズ」に行きます。

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

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

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

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

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

おお、できた。iframeのときと同じように、色合いを保持したままで複数のカレンダーの表示ができました。
いや〜知らなんだ。
しかしウェブ版とは微妙に色が変わっちゃうのはどういうわけなんでしょう。。。まあいいけど。
ここから見た目をもうちょい整えられるともっと良いんですけどね。
ちなみにウェブブラウザでGoogleにログインしておけば、非公開設定にしてある自分のカレンダーも公開URLを使って見ることができます。逆に言うと、誰でも公開URLのページにはアクセスできますが、非公開設定のカレンダーについてはその閲覧権限を持っていなければ見ることができません。
。。。よもや最後まで読んでくださるとは。。。ありがとうございました。
おしまい。
https://business.xserver.ne.jp/

https://www.xdomain.ne.jp/

★LOLIPOP★

.tokyo

MuuMuu Domain!
