スマホで見るGoogleカレンダーを曜日別に色分けしたりイベントタイトルを折り返したりするの巻

はじめに

日本人ならカレンダーの土曜日は青色、日曜日は赤色と相場が決まっているのです。

でもGoogleカレンダーの土日には色がありませぬ。

Web版のGoogleカレンダーであれば土日祝日（というか指定の曜日と祝日）を色分けできるブラウザ拡張機能があるのよね。なのでそちらは別にOK、と。

一方、スマホのGoogleカレンダーアプリは土日祝日に色分けする機能はありませんし、スマホではブラウザ拡張機能が基本的に使えない模様なのでブラウザ拡張機能でっていうのも難しい（2021年9月現在）。

何とかなりませんか、という話です。

ちなみにスマホのGoogleカレンダーアプリ（iOS版）はこういう画面で（予定は架空のものですよ）。。。

とまあこんな感じで、iPhoneのGoogleカレンダーアプリでチームのスケジュールを（自分の予定も入れ込んで）月表示メインで確認しているのですが、

・やっぱり土日（できれば祝日も）が色分けされているほうが好き

それから、

・タイトルの右側が見切れすぎてて確認できん

ということになっているわけです。

うーん何かいい方法がないかなあ。

と思案したあげく、

Googleカレンダーで土日祝日（というか曜日ごと）に色をつけたりイベントタイトルを折り返したりした状態でスマホから見れるようにしました

というお話です。

結局、スマホのブラウザからweb版のGoogleカレンダーを見に行って、そこでお気に入り（ブックマーク）に登録したブックマークレットをポチッと押す形で見た目を変えてやることにしました（スマホアプリをカスタムしたのではないです）。こんな感じに。

iPhoneのSafariにて。

土日祝日の色付けと、イベントタイトルの折り返しをできるようにしています。

OSがダークモード （Dark mode）設定の時は、なんちゃってダークモードになって表示されます。

イベントタイトルを折り返した弊害として、今度はセルの下側で見切れちゃうようになってしまいましたので、スクロールで対応するようにしています。（動画は祝日未対応版のものです）。

PCのブラウザからもできます。これはMacOS版Chromeにて。

こちらもちゃんと土日祝日の色分けができて、折り返しもできます。ちょっとわかりにくいですが。

なんちゃってダークモード。

曜日ごとの色分けもできます。

なお、Bookmarkletでページの見た目を変えているだけなので、ページを再読み込みすれば全部クリアされて何事もなかったように元の画面に戻ります。

やり方

概要は

1. Googleカレンダーの共有URLを取得しておきます
2. ブックマークレットをポチッと作成してブラウザのお気に入りに登録します（Webページをお気に入りに登録する時と同様にできます）
3. ブラウザで先ほどの共有URLにアクセスしてカレンダーを開きます
4. ブラウザのお気に入りからブックマークレットをポチッと使います

これだけです。以下で詳しくみてみます。

1. Googleカレンダーの共有URLを取得しておきます

共有URLをこちらのページのやり方に準じて取得します；Googleカレンダーを公開URLで共有したときにも好みの色で複数のカレンダーを表示するの巻

＊「タイトル」のチェックボックスも外しておきます。そうすれば画面をより広く使えるようになります。

＊「他のカレンダー」>>>「関心のあるカレンダーを探す」から「日本の祝日」をカレンダーに追加しておくと祝日の確認に役立ちます。

＊取得したURLのWebページへのショートカットをスマホのホーム画面に追加しておくのがおすすめです。

2. ブックマークレットをポチッと作成してブラウザのお気に入りに登録します

この下にあるブックマークレットジェネレーター（Djangoを使って作りました。）でブックマークレットのコードをぽちっと生成して、ブラウザのお気に入り（ブックマーク）に登録します。

具体的には、ライトモードとダークモードにおける、各曜日と祝日の「日付のテキスト」と「背景」の色セットをお好みでポチポチして選択します（初期値の色でよければそのままで）。（なお、初期値に戻したい場合はページを再読み込みしてください。）

で、<Generate Bookmarklet!>ボタンを押すと該当するブックマークレット のコードが生成されますので、

<Copy to clipboad>ボタンを押してクリップボードにコピーしておきます。

＊うまく表示されない場合はAMP対応ではないURL（こちら）に行ってみてください。ブックマークレット ジェネレーターが正しく表示されるはずです。

コードはMITライセンスとしました。ご自由にご利用ください。

このブックマークレット で、

・土日（というか各曜日）と祝日の「日付のテキスト」と「背景」を設定した色で表示する

・OSの設定に従ってダークモード/ライトモードで表示する色のセットを切り替える

・イベントタイトルを折り返す

・週の行を縦スクロールする

ということができるようになります。

なお、対応しているのは月曜始まりと日曜始まりのカレンダーです。

コードのコピーができたらブラウザのお気に入り（ブックマーク）に登録します。

こちらの方法に準じて登録すれば良いです；ウェブページにある表をクリップボードにポチッとコピーするブックマークレットの巻

以下ではiOS版Safariでのブックマークレットの登録から使用するところまでの方法を記載してみます。

iOS版Safariでブックマークレットを登録する

Safariでブックマークレットを登録する場合は、どのウェブページでもいいので適当なページのお気に入りを作っておいてから、それを書き換える形で登録します。

それでは、適当なページをお気に入り（ブックマーク）に登録するところから。

あらかじめブックマークレットのコードをコピーしてクリップボードに保持しておきます。

適当なページを表示して、画面下側のアイコンから、

「お気に入りに追加」します。

好きに名前を変更して、保存します。

お気に入りを見ると、追加されていますので、「編集」

で、さっき作ったお気に入り（ブックマーク）を選んで、、、

元々入っているURLを消してから、あらかじめコピーしておいたブックマークレット のコードを入れてやります。で、「done」で登録完了です。

ついでに場所を上の方に持っていってやれば（右側の３本線のところを押しながら動かすと移動できます。）アクセスしやすいです（好みで）。

で、「完了」

3.ブラウザで先ほどの共有URLにアクセスしてカレンダーを開きます

で、取得しておいた共有URLからカレンダーにアクセスします。

今回はホーム画面にショートカットを追加しておいたので、そこからいきます。

＊カレンダーが公開設定になっていないのであれば、カレンダーの閲覧権限があるGoogleアカウントでGoogleにログインしておく必要があります。

アクセスしたら、、、

4.ブラウザのお気に入りからブックマークレットをポチッと使います

iOSのSafariの場合、アドレスバーをタップすればお気に入りが出てきますので、、、

先ほど作ったブックマークレットをポチッとして発動させます。

できました。

毎回ブックマークレットをポチッとやる手間はありますが、これで月の予定を眺めやすくなりました。

めでたしめでたし。

いろいろメモや to do

・共有URLですのでアドレスを知っていて閲覧権限があるユーザーはカレンダーを見ることができます。なお、カレンダーを公開設定にしていないのであれば、他の人はアクセス権がありませんのでアドレスを知っていても見ることはできません。ただし、閲覧権限のないカレンダー以外の、公開設定になっているカレンダーだけが表示されたページは見ることができます（今回の場合は日本の祝日とアメリカの祝日だけが表示されます）。

・このブックマークレットで色分けできる祝日については、Googleカレンダーの「日本の祝日」に登録されている全祝日データから取得したものになっています（2021年9月21日時点においては2020年1月1日から2022年11月23日までの祝日データです）。

・このブックマークレット だけでは祝日データを更新できませんので、それ以降の祝日を色分けするためにはどこかのタイミングで登録したブックマークレットを更新する必要があります。ブックマークレット ジェネレーターのほうでGoogleカレンダーの「日本の祝日」データを毎月取得し更新していく予定ですので、半年に一回くらいの頻度でブックマークレットを更新すれば良いのかなと思います。

・ブックマークレットが使えるブラウザだったらOKだと思いますが、このブックマークレットを使えないブラウザもあるかもしれません。一応、ちゃんと動くことを確認済みのブラウザはiPhoneとPC(Mac)のSafariとChromeです。

・閲覧用なので、イベントの追加などは直接できませんが、イベントをタップしたときに出てくるポップアップの「詳細表示」から、または右下のGoogleのロゴのところからGoogleカレンダーアプリに飛べます（スマホでアプリを使っている場合は。PCの時はweb版に飛べます）のでそこからイベントの追加等ができます。

・右下のGoogleのロゴ部分は、今見ているカレンダーを自分のGoogleカレンダーに追加するボタンになっていまして、ここから行こうとすると「追加できんわ」というアラートが出ますが、そりゃそうなので別に気にしなくて良いと思います。

・Googleカレンダーやブラウザの仕様が変わっちゃうと機能しなくなると思います。Googleさんが曜日ごとの色分けなどを実装してくれるまではブックマークレット を作り直して対応するかも。

・使いにくいところとして、例えばタスクごとの色分けをするために、そのカレンダーIDに設定されている色とは違う色を選択して登録したイベントについては、タスクごとの色分けが反映されません（伝わるでしょうか？）。対処療法として、タスクごとのカレンダーを別途新規に作成してから今回の共用URLを取得すれば、色違いのイベント群として見なすことができます（本記事の画像ではそうやっています）。面倒くさいけど。

・ブックマークレット という性質上、Webページを開いた後にお気に入り（ブックマーク）から選択して使用するという手間が発生します。もう慣れましたけど。できるだけ手数をかけずにアクセスできるようにブックマークレットの置き場所などを工夫すれば少しましになります。

・共有カレンダーにアクセスしたときの画面はもちろんオリジナルの画面構成です。でもこれはブックマークレット の性質上どうしようもないみたいですので我慢です今のところ。

・1日のイベント数が多かったり、イベントのタイトルが長いとセルの下側に埋もれて見えなくなってしまうものがあるかもしれません。スクロールできるようにはしてありますが、見過ごす可能性もありますので気をつける必要があります。見過ごしたら本末転倒ですからね。

・iOSであれば「ショートカット」アプリを使えばホーム画面のアイコンを変更できます。起動時に余計な通知が出てきますが（すぐ引っ込むけど）カレンダーページへのショートカットアイコンをアプリらしき外観に変更してみてもいいかも。

・印刷しようとするとどうも背景がちゃんと反映されません。月表示で印刷したい場合はこちらのやり方の方がいいかも；グーグルカレンダーを見やすくカスタマイズしてA4に印刷するの巻

・都度改善していけたら。

・祝日の背景色はつけられません。なので、Googleが提供している「日本の祝日」カレンダーを取り込んで、その背景を赤系統にして区別するのがいいのかなと思います。祝日の背景色についてはブックマークレット でやるにはちょっと面倒くさそうなので手をつけませんでしたが、やる気が出たら入れ込んでみるかもしれません。　対応済み

・今のところライトモード用とダークモード用が別々のブックマークレットになっているので使い分けが面倒です。なんちゃってダークモードしか使わんけど。スマホの設定に合わせてダークモードに切り替えて表示できるようにしようかと。対応済み

・曜日ごとに好きな色分けを指定できる形でブックマークレットのコードを生成できるようにしてみようかしらと思っています。祝日の色分けもつけれればモアベター。　対応済み

・作ってるどっかの段階でiOS版のChrome（version93.0.457739）で動かなってしまった。。。どこがいかんのじゃー。o(｀ω´ )o　できた。CSSの”height”の指定が%だとだめでpx指定にしたら動いた。なんで？( ´ ▽ ` )

＊このブックマークレットは個人の趣味で作成したものです。下手くそなのはご容赦ください。もしご興味がありましたらご自身の責任においてお試しください。万が一何か問題が起こってもおそらく何もお助けできないと思いますので。。。そのあたりどうかご理解をお願いします。

おしまい

アップデート記録

ver.1.0.20210907 　2021.09.07 　
　・つくってみた。

ver.1.1.20210910　2021.09.10　
　・OSの設定に従ってダークモード/ライトモードが切り替わって表示できるようにしました。
　・月曜始まりと日曜始まりのカレンダーに合わせた形で土日の色分けができるようにしました。
　　　*共有URLをこちらのページのやり方に準じて取得しておく必要があります；
　　　Googleカレンダーを公開URLで共有したときにも好みの色で複数のカレンダーを表示するの巻

ver.1.2.20210911　2021.09.11

　・iOS版Chromeでも動くようにしました。

ver.2.0.20210921　2021.09.21

　・祝日も色分けできるようにしました。ブログの記事タイトルもちょっと変更しました。

　・曜日ごとの色分けができるようにしました。

　・ブックマークレットの生成工程をウェブアプリ 化しました。

動作確認したブラウザ

Safari　iOS版 バージョン604.1

Chrome iOS版（version93.0.457739）

Safari macOS版　バージョン14.1.2 (15611.3.10.1.5, 15611)

Chrome　macOS版　バージョン: 92.0.4515.159（Official Build） （x86_64）