부제

이 기사는 기술적으로는 「특정의 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