記事に「user:user tag:記事のタグ」への検索リンクを追加するユーザースクリプト

気になる記事を書いた人の他の記事を調べやすくする活動その2。
前回はQiitaのユーザー画面からそのユーザー記事のフリーワード検索へ移動するでユーザーページに追加しましたが、

ユースーケースとして考えなおしてみると、

ある記事Aを見てユーザーBのほかの投稿に興味が出たとき、読者が求めるのはAと共通項を持つ記事
「user:B tag:(Aに設定されているタグ)」
なのではないかと思いました。

「user:B」(+ フリーワード検索)でもまあまあ見たいものは探せるのですが、
結局手入力が面倒なのとフリーワードで絞るよりタグで絞ったほうが投稿記事の一覧性、ザッピング性能は上なんじゃないかなと使っていて思ったので、表題にあるようにスタートを記事にしてみました。

前回の

動機

良い記事を見つけて、そのユーザーのその分野の記事をもっと見たい！と思ってユーザーの記事画面 https://qiita.com/Qiita/items (itemsはもうないのですが)　に飛ぶものの、時系列で並ぶだけで投稿数とジャンルが多彩な方の場合は目的の記事を探すことが難しいです。

最初からフリーワード検索をすればいいのですが、
どうしてもそのユーザーの記事を探したいときの行動がユーザーページ訪問、と身についてしまっていることと、
ユニークなユーザー名の入力が苦手なので入力補助的な意味合いで作成。

の

そのユーザーのその分野の記事をもっと見たい！

ならやっぱり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がちょっと気持ち悪いけど許容しておきます。