東京都の新型コロナウイルス感染症対策サイトの最新感染動向の各グラフの横幅を簡単に拡大(50%から100%)する方法

5621 ワード
COVID-19 COVID-19 テキストリンク

副題

この記事は技術的には「特定のclassを持つ要素に対して処理を行うワンライナー(1行)javascript とも言えます。

背景

Code for Japanさんによる東京都の新型コロナウイルス感染症対策サイトの最新感染動向には都がモニタリングしている情報がグラフ化されて掲載されており、傾向の分析に有用です。

ただグラフ幅が狭いので感染の影響が長びくにつれて過去データ(特に前回の感染拡大期を参照したい)を参照するには横スクロールが必要になってきました。

これを以下のように全幅表示に変えたいと思いました。

対策

調査してみたところグラフ領域の幅を指定しているのはcol-md-6というクラスです。このクラスのスタイル定義は以下のとおりです。

@media (min-width: 960px)
.col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
}

col-md-6を除去したり、50%になっているところを100%にすればOKです。ここでは100%にしてみます。

手動でやってもいいのですが、若干面倒なので、各ブラウザの拡張機能のでスクリプトを実行して変更できるようにしたいと思います。
で、作成したのが以下です。

ワンライナー版

Array.prototype.forEach.call(document.getElementsByClassName('col-md-6'),function(elem,idx){if(elem){elem.style.maxWidth='100%';elem.style.flex = '0 0 100%';}})

整形した版

Array.prototype.forEach.call(
  document.getElementsByClassName('col-md-6'), function (elem, idx)
  {
    if (elem)
    {
        elem.style.maxWidth = '100%';
        elem.style.flex = '0 0 100%';
    }
  }
)

これを当該サイトを開いた状態から開発者ツール(ChromeでもFirefoxでもF12キー押下で表示されます)を起動してconsoleタブで貼り付けて実行(Enterキー押下)すればOKです。

Chrome 84.0.4147.89 / WIndows10

Firefox 78.0.2 / WIndows10