기사에 "user : user tag : 기사 태그"에 대한 검색 링크를 추가하는 사용자 스크립트





신경이 쓰이는 기사를 쓴 사람의 다른 기사를 알아내기 쉽게 하는 활동 그 2.
이전에는 Qiita 사용자 화면에서 사용자 기사의 프리워드 검색으로 이동에서 사용자 페이지에 추가했지만,

유스 케이스로 다시 생각하면,

한 기사 A를 보고 사용자 B의 다른 게시물에 관심이 있을 때, 독자가 요구하는 것은 A와 공통항을 가진 기사
"user : B tag : (A로 설정된 태그)"
아닐까 생각했습니다.

「user:B」(+ 프리워드 검색)에서도 뭐 보고 싶은 것은 찾을 수 있습니다만,
결국 손 입력이 번거로운 것과 프리워드로 짜는 것보다 태그로 짜내는 쪽이 투고 기사의 일람성, 자핑 성능은 위가 아닐까라고 사용하고 있어 생각했으므로, 표제에 있도록 스타트를 기사로 해 보자 네.

마지막

동기

좋은 기사를 찾아서 해당 사용자의 해당 분야에 대한 기사를 더 보고 싶습니다! 라고 생각해 사용자의 기사 화면

처음부터 프리워드 검색을 하면 됩니다만,
아무래도 그 유저의 기사를 찾고 싶을 때의 행동이 유저 페이지 방문, 라고 몸에 대해서 버리고 있는 것,
독특한 유저명의 입력이 약하기 때문에 입력 보조적인 의미로 작성.



그 사용자의 해당 분야에 대한 기사를 더보고 싶어!

그렇다면 역시 tag로 짜내는 것이 좋을까.

코드


// ==UserScript==
// @name         Qiita add links to search for user and tag
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  投稿者かつ記事のいちタグの検索リンクを追加する
// @author       khsk
// @match        https://qiita.com/*/items/*
// @grant        none
// ==/UserScript==

(function() {
  'use strict';
  const tagClass = 'it-Tags_item'

  // 表示名の変更は反映されてないはず
  const id = document.querySelector('.it-Header_authorName').textContent.slice(1)

  const icon = document.querySelector('.it-Header_authorImage').cloneNode()
  icon.style.height = '16px'
  icon.style.width = '16px'
  const link = document.createElement('a')
  link.className = tagClass
  link.style.paddingLeft = 0
  link.style.paddingRight = 0
  link.appendChild(icon)

  document.querySelectorAll('.' + tagClass).forEach(tag => {
    tag.style.marginRight = 0
    link.href = 'https://qiita.com/search?q=user%3A' + id + '%20tag%3A' + tag.textContent + '%20'
    tag.parentNode.insertBefore(link.cloneNode(true), tag.nextSibling)
  })

})();

링크의 설치 장소는 태그 옆에 사용자 아이콘 이미지로 설치했습니다.
왠지 그리운 기분에. 옛날에는 태그 이름의 왼쪽에 아이콘이었다…

radius가 조금 기분 나쁘지만 허용해 둡니다.

좋은 웹페이지 즐겨찾기