Help us understand the problem. What is going on with this article?

Twitter Web版からトレンドを消し去りGoogleカレンダーを召喚する(Chrome/Edge向け)

はじめに

近頃のTwitterでは、政治や性差別、人権問題などの激しい議論を招きやすい話題がトレンドにピックアップされることが多く、これを経由して過激な言動をするアカウントが目に入る場面が増えました。

そこで、トレンド表示をオフにするChrome拡張機能の導入が選択肢として挙がります。
しかし、これを使うとページの右側が空白になってしまいちょっと寂しいです。

そこで本記事では、以下の画像のようにトレンド・おすすめユーザーを非表示化し、空いたスペースにGoogleカレンダーを召喚する方法を紹介します。これで、Twitterを見ているだけで日頃の予定管理はバッチリです!

なお、本記事の方法は基本的にChromeおよび新Edge向けに書いています。
Firefoxでも可能であることは確認できましたが、セキュリティ上の観点であまりお勧めできません(後述するContent-Security-Policyの回避を特定サイト内の特定サイトへのiframeのみに対して安全に設定できるアドオンが現状見当たらないため)。

手順の概要

今回は、JavaScriptを実行してWebサイトの書き換えなどを行うGreasemonkeyを使用してTwitterページにGoogleカレンダーのHTMLタグを挿入します。

大まかに、以下の手順で行います。
1. Greasemonkeyを動かすためのプラグインを入れる
2. Greasemonkeyスクリプトを追加する
3. Googleカレンダーの設定から埋め込み用HTMLタグを取得して、Greasemonkeyスクリプト内に書き込む
4. Twitterサイト上でiframeタグを許可するためのプラグインを入れる

具体的なやり方

1. Greasemonkeyを動かすためのプラグインを入れる

Chrome・Edgeに以下の拡張機能を導入してください。

これでGreasemonkeyが使えるようになり、特定のWebサイト上でJavaScriptを自動で走らせたりできるようになります。

2. Greasemonkeyスクリプトを追加する

Tampermonkeyに新しいスクリプトを追加します。

①「新規スクリプトを追加」を押す

image.png

②以下のスクリプトを貼り付ける

// ==UserScript==
// @name         Twitterサイドバーへカレンダー召喚
// @namespace    https://qiita.com/m4saka
// @version      0.1
// @author       masaka
// @match        https://*.twitter.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Googleカレンダーの埋め込み用HTMLタグをここへ貼り付け
    const calendarHtml = '※※※※※※※※';

    setInterval(
        function() {
            // おすすめユーザーやトレンドを全てカレンダーに置き換える
            const elements = document.getElementsByClassName('css-1dbjc4n r-1ylenci r-1phboty r-rs99b7 r-ku1wi2 r-1udh08x');
            for (let i = 0; i < elements.length; i++) {
                if (i == 0) elements[i].outerHTML = calendarHtml;
                else elements[i].outerHTML = '';
            }

            // カレンダーが2個以上できた場合は1個にする
            const calendars = document.getElementsByClassName("calendar");
            for (let i = 1; i < calendars.length; i++) {
                calendars[i].outerHTML = '';
            }
        }, 10
    );
})();

このスクリプトのうち、const calendarHtml = '※※※※※※※※';となっている部分は、後の手順で取得する埋め込み用HTMLタグを入力します。

3. Googleカレンダーの設定から埋め込み用HTMLタグを取得して、Greasemonkeyスクリプト内に書き込む

①以下のURLからGoogleカレンダーへアクセス

②ページ右上の歯車ボタンから「設定」をクリック

 image.png

③左側メニューから表示したいカレンダーを選択し、「カレンダーの統合」をクリック

 image.png

④「埋め込みコード」をコピーし、Greasemonkeyスクリプト中に貼り付け

以下の部分からコピーできます。
 image.png
(必須ではないですが、下の「カスタマイズ」ボタンを押すと若干見た目をいじることもできます。記事の最初にあった画面例はカレンダー名や日/週/月メニューをカスタマイズで非表示にしています。)

スクリプト中の「※※※※※※※※」の部分にペーストします。
ペーストすると以下のようになります。

// Googleカレンダーの埋め込み用HTMLタグをここへ貼り付け
const calendarHtml = '<iframe src="https://calendar.google.com/calendar/embed?src=...........';

⑤iframeタグ中に「class="calendar"」を追記

以下のように「class="calendar"」を追記してください。
(これはGreasemonkeyスクリプト中から要素を参照するために使用しています)

const calendarHtml = '<iframe class="calendar" src="https://calendar.google.com/calendar/embed?src=...........';

⑥iframeタグ中の「width="800"」を削除

そのままだとカレンダーがサイドバーの横幅をはみ出してしまうので、以下のwidth="800"の部分を削除します。

const calendarHtml = '<iframe ... style="border: 0" width="800" height="600" frameborder=...';
                                                    ^^^^^^^^^^^

終わったら、Ctrl+Sキーを押してスクリプトを保存します。

4. Twitterサイト上でiframeタグを許可するためのプラグインを入れる

この状態でTwitterを開くと、以下のようにサイドバーに何かは表示されます。
image.png

コンテンツがブロックされた旨が表示されてしまっています。これは、Twitterがセキュリティ上の理由でページ内のiframeの使用を制限しているためです。
(HTTPレスポンスヘッダ内のContent-Security-Policyで特定のホストのみに制限されています。)

そこで、拡張機能を入れてTwitter上でのGoogleカレンダーの埋め込みのみを許可するルールを記述します。
(このほかにContent-Security-Policyヘッダを全サイトで無効化する拡張機能を入れる方法もありますが、これを入れるとセキュリティ上危険な状態となるのであまりお勧めできません。)

Chrome・Edgeに以下の拡張機能を導入してください。

拡張機能のオプションを開くと入力欄が出てくるので、書かれている内容を以下のものに置き換えます。

[
    ["https://.*\\.?twitter\\.com", [
        ["frame-src", "frame-src https://calendar.google.com"]
    ]]
]

以下のように貼り付け、×ボタンで閉じます。
image.png

これにより、twitter.com内でのcalender.google.comへのiframeのみ例外的に認めることができました。
Twitterに再度アクセスすると、以下のようにきちんと表示されるようになっています。

image.png

もし上手く反映されない場合は、Ctrl+F5を押してページを更新してみてください。
また、OSの再起動で治る場合もあります(Chromeでは初回に毎回Ctrl+F5を押さないとカレンダーが表示されない現象が生じましたが、その場合はOSの再起動で治りました。何らかのキャッシュの影響?)。

もしどうしても上手く行かない場合は、拡張機能「Ignore X-Frame headers」をインストールし、サイトデータの読み取りをtwitter.comのみにすることで、Twitter上のContent-Security-Policyをすべて無効化してカレンダーを表示できるようにできます(セキュリティ上あまりお勧めできません)。

色味を調整する

この状態でも使えるのですが、カレンダーの配色が鮮やかすぎて、タイムラインを見ているとつい視線がそっちに向いてしまいます。

Greasemonkeyスクリプトに記述したiframeタグに以下のように「style="filter:grayscale(0.75)"」という記述を追加することで、彩度を下げることができます。
(※古いブラウザの場合はfilter:~-webkit-filter:~に書き換える必要があるかも知れません。)

const calendarHtml = '<iframe style="filter:grayscale(0.75)" class="calendar" src=...........';

image.png

これで目障りではなくなりました。

Twitterのテーマをブラックやダークブルーにしている場合は、style="filter:grayscale(0.75) invert(1) hue-rotate(180deg)"にすると良い感じです。

image.png

お疲れ様でした。
それでは、良いTwitterライフを!

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした