무슨 북마크릿?

트위터에서, 어떤 문자열을 포함한 트윗을 추출하거나 좋아하는 숫자로 정렬하여 놀고 있어 떠올랐다.
트위터를 모 게시판의 쓰레드 형식으로 하면 읽기 쉬워지는 것이 아닐까.

트위터를 스크래핑하여 별도의 창을 만들어 스레드 형식으로 출력하는 북마크릿을 만들어 보았다.
읽기 쉽게 할 생각으로 만들었지만 정말 읽기 쉬워졌는지는 사용해 보지 않으면 모른다.

왜냐하면 만들었기 때문이다.
1년이나 사용하면 읽기 쉬워졌는지 알지만 1년 후에는 Qiita에 투고하는 열의가 잊혀지고 있다.

트위터는 백그라운드에서 XHR을 던지고 있다.
이것은 사용자의 편리성을 향상시키고 있지만 조금 무거운 느낌이 든다.
쓰레드 형식은 아무런 처리도 움직이지 않기 때문에 매우 가볍다.



GitHub에서 공개 중.
htps : // 기주 b. 이 m / 쿠에 ry 곰 / s 니페 ts / b ぉ b / 뭐 r / 라 r / ぃ r2 thre d. js

운영 환경

Chrome에서 작동합니다.
Firefox에서도 작동하지만 about : config로 가서 security.csp.enable의 값을 false로 설정하여 Firefox를 다시 시작해야합니다.

궁리한 점

눈에 띄게

텍스트가 눈에 띄도록 텍스트 이외는 문자를 작고 문자색도 얇게 했다.

일련번호

쓰레드 형식은 트윗에 일련 번호가 흔들리는 덕분에 읽기 쉽다.

HTML 분석

트위터의 매우 복잡한 HTML을 분석했다.
그 결과, 트위터의 링크를 클릭했을 때 중앙에 오버레이로 트윗이 겹쳐서 표시되는 경우와 오버레이가 없는 경우의 2개의 패턴으로 나누어지는 것을 알 수 있었다.

오버레이 처리

  function caseOuter() {
    document.querySelectorAll(".tweet").forEach(t => {
      writeTweet(t);
    });
  }

  function caseOverlay(po) {
    po.querySelectorAll(".tweet").forEach(t => {
      writeTweet(t);
    });
  }

  po = document.getElementById("permalink-overlay");
  if (po.style.display !== "none" && po.querySelector(".tweet")) {
    caseOverlay(po);
  } else {
    caseOuter();
  }

오버레이일 때 caseOverlay() 를 부르고, 그렇지 않을 때 caseOuter() 를 부르고 있다.

다음과 같이 caseOverlay() 와 caseOuter() 를 하나로 정리하는 것이 가능.

처리 요약

  po = document.getElementById("permalink-overlay");
  if (po.style.display === "none" || !po.querySelector(".tweet")) po = document;
  po.querySelectorAll(".tweet").forEach(t => {
    writeTweet(t);
  });

암호 같은 스크립트가 되어 버렸다.
이것은 스크립트에서 원래 아이디어를 추출하기가 어렵습니다.
처리를 정리하지 않는 스크립트 쪽이 읽기 쉽다.

회신

오버레이일 때 쓰레드 형식에서의 회신을 들여쓰기하여 읽기 쉽게 했다.

다른 창으로 내보내기

다른 창을 만들어 스레드 형식의 HTML을 내보냅니다.
이 기술을 사용하면 트위터 측에 영향이 없도록 할 수 있다.

새 탭 만들기

  wdoc = window.open().document;
  wdoc.write(html_head);
  wdoc.close();

window.open('','_blank').document 쪽이 좋을지도 모른다.

시간대 처리

PC에서 트위터의 시간을 보면 시차로 시간이 어긋나 있다.
new Date("日時 PDT") 그리고 시차를 고쳤다.

리트윗 숨기기

리트윗을 보고 싶지 않을 때가 있다.

리트윗 스타일 시트

.retweet {
    display: none;
    display: inline-block;
}

개발 도구를 열고 display: inline-block;의 체크를 해제하면 리트윗을 숨길 수 있도록 했다.

동영상

동영상이 있다는 정보가 없어져 동영상이 있을 때 video와 문자를 내도록 했다.

대응할 수 없었던 점 1

동영상 URL을 알 수 없어 동영상 재생을 재현할 수 없습니다.

Chrome은 about:blank 페이지를 이름을 붙여 저장에서 저장할 수 없었다.

htps //w w. 쿠오라. 코 m / HO W-kan-I-Sa-A-Bob-T-K-Page s-on-Ch Rome

Quora의 질문에 있는 것처럼 개발 툴을 열어 Elements를 카피하는 수고를 걸어야 하는 것 같다.

Firefox는 about:blank 페이지를 저장할 수 있었다.

따옴표 기사의 트윗은 XHR을 던져 지연 로딩하는 것 같아 인용 기사가 표시되지 않는다.
대신 URL을 표시하도록했습니다.
지연 로드된 후에는 인용 기사도 표시한다.

mobile의 페이지가 미대응.



혹은 대응하지 않았던 점. ↩