5chのアフィロンダチェック ver0.0.2

// ==UserScript==
// @name        5chのアフィロンダチェック
// @namespace   User Scripts
// @match       https://*.5ch.net/**
// @grant       none
// @version     0.0.2
// @author      -
// @description 5chのスレから転載されているサイトを調査するためのスクリプト
// ==/UserScript==
class HTMLGenerator {
  /**
   * ナビゲーションバーの生成
   * @returns
   */
  createNav() {
    const nav = document.createElement('nav')
    nav.style.position = 'fixed'
    nav.style.bottom = '120px'
    nav.style.zIndex = '9999999'
    nav.style.width = '80%'
    return nav
  }

  /**
   * 全体用の枠の生成
   * @returns
   */
  createAllObjects() {
    const allObjects = document.createElement('div')
    allObjects.className = 'allAddObjects'
    return allObjects
  }

  /**
   * 一発検索用の枠生成
   * @returns
   */
  createAllSearchBox() {
    const allSearchBox = document.createElement('div')
    allSearchBox.className = 'allSearchBox'
    return allSearchBox
  }

  /**
   * 個々の検索欄のセットの枠生成
   * @param {*} topの位置
   * @returns
   */
  createSearchInputDiv(top) {
    const searchInput = document.createElement('div')
    searchInput.className = 'search-input'
    searchInput.style.position = 'relative'
    searchInput.style.top = top + 'px' // 位置を調整する
    searchInput.style.width = '100%'
    searchInput.style.left = '0px'
    return searchInput
  }

  /**
   * 検索欄をまとめる枠
   * いらないんじゃないかなこれ
   * @returns
   */
  createInputGroup() {
    const inputGroup = document.createElement('div')
    inputGroup.className = 'input-group'
    return inputGroup
  }

  /**
   * 個々の検索欄のテキストボックス生成
   * @param {*} id タグのid
   * @param {*} placeholder 予め入れてるテキスト
   * @returns
   */
  createInputTextBox(id, placeholder) {
    const input = document.createElement('input')
    input.id = id
    input.type = 'text'
    input.placeholder = placeholder
    input.className = 'form-control'
    input.resize = 'both'
    return input
  }

  /**
   * 検索するボタンの分離
   * @param {*} id ボタンのID
   * @returns
   */
  createInputSearchButton(id) {
    const button = document.createElement('button')
    button.id = id + '検索'
    button.className = 'btn 検索'
    button.type = 'button'
    return button
  }

  /**
   * 検索欄用のアイコン用imgタグ生成
   * @returns
   */
  createInputSearchIcon() {
    const img = document.createElement('img')
    img.src = '//penguin.5ch.net/images/magni.png'
    img.className = 'magni'
    return img
  }

  /**
   * 個々の検索用のタグ生成
   * @param {*} idの名前
   * @param {*} placeholder のテキスト
   * @param {*} topの位置
   * @returns
   */
  createSearchInput(id, placeholder, top) {
    // 個々の検索用の枠
    const searchInput = this.createSearchInputDiv(top)
    // 個々の検索用のタグまとめる用
    const inputGroup = this.createInputGroup()
    // 検索用のテキストボックス
    const input = this.createInputTextBox(id, placeholder)
    // メガネアイコンと検索まとめる用の枠
    const span = document.createElement('span')
    span.className = 'input-group-btn'
    // 検索用のボタン
    const button = this.createInputSearchButton(id)
    // 検索用のボタンのアイコン
    const img = this.createInputSearchIcon()
    // 生成
    button.appendChild(img)
    span.appendChild(button)
    inputGroup.appendChild(input)
    inputGroup.appendChild(span)
    searchInput.appendChild(inputGroup)

    return searchInput
  }

  /**
   * 一発検索用の枠生成
   * @returns
   */
  createSearchAllButtonDiv() {
    const searchAllDiv = document.createElement('div')
    searchAllDiv.className = 'megane'
    searchAllDiv.style.position = 'fixed'
    searchAllDiv.style.right = '0px'
    searchAllDiv.style.width = '20%'
    searchAllDiv.style.paddingLeft = '30px'
    return searchAllDiv
  }

  /**
   * HTMLを生成する
   * @returns
   */
  generateHTML() {
    // ナビゲーションバーの生成
    const nav = this.createNav()
    // 全体用の枠
    const allObjects = this.createAllObjects()
    // 一発検索用枠
    const allSearchBox = this.createAllSearchBox()

    // 個々の検索を生成
    const searchBarTopPosition = 35
    const searchInput1 = this.createSearchInput(
      'スレタイ',
      'スレタイ',
      searchBarTopPosition * 0,
    )
    const searchInput2 = this.createSearchInput(
      '検索するID',
      '検索するIDをクリック',
      searchBarTopPosition,
    )
    const searchInput3 = this.createSearchInput(
      'レス本文',
      'レスをクリック',
      searchBarTopPosition * 2,
    )
    // 全体検索用
    const searchAllDiv = this.createSearchAllButtonDiv()

    const megane = document.createTextNode('全部検索')

    //  構造に従って生成
    nav.appendChild(allObjects)
    allObjects.appendChild(allSearchBox)
    allObjects.appendChild(searchAllDiv)
    searchAllDiv.appendChild(megane)

    allSearchBox.appendChild(searchInput2)
    allSearchBox.appendChild(searchInput1)
    allSearchBox.appendChild(searchInput3)

    return nav
  }
}
// HTMLを生成してbodyに追加する
const generator = new HTMLGenerator()
document.body.appendChild(generator.generateHTML())

// ボタンにクリックイベントを追加する
const buttons = document.querySelectorAll('.検索')
buttons.forEach((button) => {
  button.addEventListener('click', () => {
    const input = button.parentElement.parentElement.querySelector('input')
    const searchText = input.value
    searchElementText(searchText)
  })
})

/**
 * ボタンを押したら直前のテキストボックスのテキストを読み込みその文字列で検索
 * @param {*} 検索する文字列
 */
function searchElementText(str) {
  // 要素のテキストを検索エンジンで検索する関数を定義する
  const searchEngines = [
    'https://www.google.com/search?q=',
    'https://www.bing.com/search?q=',
  ] // 文字列の配列として定義する
  const query = encodeURI(str)
  for (const searchEngine of searchEngines) {
    window.open(searchEngine + query + '_blank')
  }
}

// 検索が入ってるやつを全部変更
document.querySelectorAll('.検索').forEach((button) => {
  button.addEventListener('click', () => {
    // 直前のテキストボックスの内容を取得するコード
    const input = button.previousElementSibling.querySelector('input')
    const str = input.value
    searchElementText(str)
  })
})

// スレの要素を取得
// xpath 定義
const xpaths = {
  thread_title: '//title',
  first_id: " //div[@id='1']/div/span[@class='uid']",
  first_res: "//div[@id='1']/div/span[@class='escaped']",
}
/**
 * xpathをデータに変換
 * @param {*} 取得するxpathの並列
 * @returns
 */
function getThreadData(xpaths) {
  const threadData = {
    thread_title: getXpathData(xpaths.thread_title),
    first_id: getXpathData(xpaths.first_id),
    first_res: getXpathData(xpaths.first_res),
  }
  return threadData
}

/**
 * xpathで取得
 * @param {*} xpath
 * @returns
 */
function getXpathData(xpath) {
  const element = document.evaluate(
    xpath,
    document,
    null,
    XPathResult.FIRST_ORDERED_NODE_TYPE,
    null,
  ).singleNodeValue
  return element
}

const threadData = getThreadData(xpaths)

/**
 * 検索するデータ（配列）をテキストボックスに入れる
 * @param {*} threadData
 */
function setSearchTextBox(threadData) {
  document.getElementById('スレタイ').value =
    threadData.thread_title.textContent
  document.getElementById('検索するID').value = threadData.first_id.textContent
  document.getElementById('レス本文').value = threadData.first_res.textContent
}

setSearchTextBox(threadData)

// クリックしたものをテキストボックスに入れ替え
document.addEventListener('click', function (e) {
  // get the clicked element
  const target = e.target
  // get the text of the clicked element
  const text = target.textContent.trim()

  // classがuidならIDに代入
  if (target.classList.contains('uid')) {
    document.getElementById('検索するID').value = text
  }

  // class がmessageまたはescapedならレスに代入
  if (
    target.classList.contains('message') ||
    target.classList.contains('escaped')
  ) {
    document.getElementById('レス本文').value = text
  }
})