☰

Greasy Fork is available in English.

Hinatazaka46 Posting on "X"

Hinatazaka46. Set “X” (post) button on ‘News’ detail page. Post in Japanese regardless of the language setting status.

// ==UserScript==
// @name            Hinatazaka46 Posting on "X"
// @name:ja         日向坂46 ニュース詳細「X」ボタン追加
// @namespace.      naoqv.hinatazaka
// @description     Hinatazaka46. Set “X” (post) button on ‘News’ detail page. Post in Japanese regardless of the language setting status.
// @description:ja  日向坂46サイト「ニュース」の詳細ページに「X」(ポスト)ボタンを配置 言語設定状態に拠らず日本語でポスト
// @version	        1.14
// @match           https://www.hinatazaka46.com/s/official/news/detail/*
// @require         https://update.greasyfork.org/scripts/509934/1480445/HinatazakaExceptionHandlingWrapper.js
// @icon      	    https://cdn.hinatazaka46.com/files/14/hinata/img/favicons/favicon-32x32.png
// @grant	          none
// @compatible      chrome
// @compatible      firefox
// @license	        MIT
// @namespace naoqv.hinatazaka
// ==/UserScript==

const SCRIPT_NAME = "日向坂46 ニュース詳細「X」ボタン追加";

handleException(()=> {

  const MEMBER_NAMES
  = ["井口眞緒", "潮紗理菜", "柿崎芽実", "影山優佳", "加藤史帆", "齊藤京子", "佐々木久美", "佐々木美玲", "高瀬愛奈", "高本彩花", "東村芽依",
     "金村美玖", "河田陽菜", "小坂菜緒", "富田鈴花", "丹生明里", "濱岸ひより", "松田好花", "宮田愛萌", "渡邉美穂",
     "上村ひなの", "髙橋未来虹", "森本茉莉", "山口陽世",
     "石塚瑶季", "岸帆夏", "小西夏菜実", "清水理央", "正源司陽子", "竹内希来里", "平尾帆夏", "平岡海月", "藤嶌果歩", "宮地すみれ", "山下葉留花", "渡辺莉奈"];

  const styleElem = document.createElement("style");
      styleElem.setAttribute("rel", "stylesheet");

  const styleText = `.sns-box {
      display: flex; gap: 0.5rem;
    }
    .btn-x {
      background-color: #111319;
    }
    .btn-sns {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 3rem;
      height: 3rem;
      box-sizing: border-box;
      border-radius: 50%;
      color: white;
      font-size: 1.5rem;
      text-align: center;
      text-decoration: none;
      transition: 0.3s;
    }
    .btn-sns svg {
      fill: #fff;
    }

  /* Tooltip container */
  .tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
  }

  /* Tooltip text */
  .tooltip .tooltiptext {
    visibility: hidden;
    width: 80px;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;

    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
    top: -5px;
    left: 105%; 
  }

  .tooltip .tooltiptext::after {
    content: " ";
    position: absolute;
    top: 50%;
    right: 100%; /* To the left of the tooltip */
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent black transparent transparent;
  }

  /* Show the tooltip text when you mouse over the tooltip container */
  .tooltip:hover .tooltiptext {
    visibility: visible;
  }`;

  styleElem.textContent = styleText;
  document.head.appendChild(styleElem);

  let text = ((x) => {return x === null ? "" : x.innerText;})(document.querySelector('.c-article__title'));

  const regDate = new Date(document.querySelector('.c-news__date').innerText);
  const datestring = "'" + regDate.toLocaleDateString('ja', {year:"2-digit", month:"numeric", day:"numeric"}).replaceAll('/', '.');
  text += "%20" + datestring;

  // ハッシュタグ生成 (hashtag=に設定するとメッセージ上部に出力されるので自前で生成)
  const members = document.querySelectorAll('div.c-article__tag a');

  // 改行+パウンドにメンバー名を連結
  members.forEach((m) => text += "%0D%0A%23" + m.innerText.replace(' ', ''));
  
  const pattern = new RegExp("(" + MEMBER_NAMES.join('|') + ")", "g");

  if (members.length === 0) {
    	// 対象メンバーが未設定の場合 見出しに登場するメンバー名をハッシュタグ化
    	text = text.replace(pattern, "%20%23$1%20");
  }

  text += "%0D%0A%23日向坂46%0D%0A";

  const url = ((x) => {return x !== null ? x.href : location.href;})(document.querySelector('.p-article__text a'))

  const divX = document.createElement('div');

  divX.innerHTML = `<div class="sns-box tooltip">
    <span class="tooltiptext">ポスト</span>
    <a class="btn-sns btn-x"
    target="_blank"
    href="https://twitter.com/intent/tweet?text=${text}&url=${url}"
    data-show-count="false">
      <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512">
          <!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
          <path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"></path>
      </svg>
    </a></div>
  <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>`;

  const divText = document.querySelector('.p-article__text');
  divText.before(divX);

}, SCRIPT_NAME);