Add Nicopedia Menu

ニコニコ大百科の記事右側にメニューを追加します

  1. // ==UserScript==
  2. // @name Add Nicopedia Menu
  3. // @namespace Add Nicopedia Menu
  4. // @description ニコニコ大百科の記事右側にメニューを追加します
  5. // @author sotoba
  6. // @match https://dic.nicovideo.jp/*
  7. // @version 1.0.1-20181103
  8. // @homepageURL https://github.com/SotobatoNihu/AddNicopediaMenu
  9. // @license MIT License
  10. // @grant GM.getResourceUrl
  11. // @resource nicoIcon https://dic.nicovideo.jp/oekaki/22690.png
  12. // @resource googleIcon https://dic.nicovideo.jp/oekaki/15633.png
  13. // @resource wikiIcon https://dic.nicovideo.jp/oekaki/17668.png
  14. // @resource yahooIcon https://dic.nicovideo.jp/oekaki/17680.png
  15. // @resource seigaIcon https://dic.nicovideo.jp/oekaki/122809.png
  16. // @resource ch2Icon https://dic.nicovideo.jp/oekaki/167179.png
  17. // @resource pixivIcon https://dic.nicovideo.jp/oekaki/109891.png
  18. // @resource ichibaIcon https://dic.nicovideo.jp/oekaki/30296.png
  19. // @resource communityIcon https://dic.nicovideo.jp/oekaki/9203.png
  20. // @resource commonsIcon https://dic.nicovideo.jp/oekaki/16255.png
  21. // ==/UserScript==
  22.  
  23. const MENUID = 'nicopedia-menu'
  24.  
  25. const drowMenu = async (word, width) => {
  26.  
  27. const menuElem = document.getElementById(MENUID)
  28.  
  29. //単語の空白をアンダーバーに
  30. const modifyWord = word.replace(' ', '_')
  31.  
  32. //アイコンの描画に Greasemonkeyのキャッシュ機能を使用
  33. Promise.all([
  34. await GM.getResourceUrl("nicoIcon"),
  35. await GM.getResourceUrl("googleIcon"),
  36. await GM.getResourceUrl("wikiIcon"),
  37. await GM.getResourceUrl("yahooIcon"),
  38. await GM.getResourceUrl("seigaIcon"),
  39. await GM.getResourceUrl("ch2Icon"),
  40. await GM.getResourceUrl("pixivIcon"),
  41. await GM.getResourceUrl("ichibaIcon"),
  42. await GM.getResourceUrl("communityIcon"),
  43. await GM.getResourceUrl("commonsIcon")
  44. ]).then(Icons => {
  45. const nicoIcon = Icons[0]
  46. const googleIcon = Icons[1]
  47. const wikiIcon = Icons[2]
  48. const yahooIcon = Icons[3]
  49. const seigaIcon = Icons[4]
  50. const ch2Icon = Icons[5]
  51. const pixivIcon = Icons[6]
  52. const ichibaIcon = Icons[7]
  53. const communityIcon = Icons[8]
  54. const commonsIcon = Icons[9]
  55.  
  56. // HTMLをベタ書き(アイコンデータは埋め込み)
  57. menuElem.innerHTML = `
  58. <img src="/img/l_box_t.gif" class="border" style="width: ${width}px">
  59. <ul>
  60. <li>
  61. <a href="https://www.nicovideo.jp/search/${modifyWord}">「${modifyWord}」でキーワード検索 <img title="キーワード検索" style="vertical-align: middle;" alt="niconico" src="${nicoIcon}" width="15" height="15"></a></br>
  62. <a href="https://www.nicovideo.jp/tag/${modifyWord}">「${modifyWord}」でタグ検索 <img title="タグ検索" style="vertical-align: middle;" alt="niconico" src="${nicoIcon}" width="15" height="15"></a>
  63. <li>外部サイトで検索</br>
  64. <a href="http://www.google.co.jp/search?hl=ja&q=${word}"><img title="Google" style="vertical-align: middle;" alt="google" src="${googleIcon}" width="15" height="15"></a>
  65. <a href="http://ja.wikipedia.org/wiki/${word}"><img title="Wikipedia" style="vertical-align: middle;" alt="Wikipedia" src="${wikiIcon}"width="15" height="15"></a>
  66. <a href="http://search.yahoo.co.jp/search?ei=UTF-8&p=${word}"><img title="Yahoo! Japan" style="vertical-align: middle;" alt="Yahoo!Japan"src="${yahooIcon}"width="17" height="15"></a>
  67. <a href="http://find.2ch.net/?BBS=2ch&IE=UTF-8&TYPE=TITLE&STR=${word}"> <img title="2ch" style="vertical-align: middle;" alt="2ch"src="${ch2Icon}"width="15" height="15"></a> /
  68. <a href="http://seiga.nicovideo.jp/search/illust/tag/${word}"><img title="静画" style="vertical-align: middle;" alt="ニコニコ静画" src="${seigaIcon}"width="15" height="15"></a>
  69. <a href="http://www.pixiv.net/search.php?s_mode=s_tag&word=${word}"><img title="pixiv" style="vertical-align: middle;" alt="Pixiv" src="${pixivIcon}" width="15" height="15"></a>
  70. <a href="http://search.pipa.jp/?KWD=${word}">2じげん</a> /
  71. </br>
  72. <a href="http://ichiba.nicovideo.jp/search/az/${word}"><img title="ニコニコ市場" style="vertical-align: middle;" alt="ニコニコ市場" src="${ichibaIcon}" width="15" height="15"></a>
  73. <a href="http://com.nicovideo.jp/search/${word}?mode=s"><img title="ニコニココミュニティ" style="vertical-align: middle;" alt="ニコニココミュニティ" src="${communityIcon}" width="15" height="15"></a>
  74. <a href="http://www.niconicommons.jp/search/${word}"><img title="ニコニ・コモンズ" style="vertical-align: middle;" alt="ニコニ・コモンズ" src="${commonsIcon}" width="15" height="15"></a> /
  75. </li>
  76. <li>50音全記事
  77. <a href="https://dic.nicovideo.jp/m/a/a"> 単語記事 </a> / <a href="https://dic.nicovideo.jp/m/a/l"> 生放送記事 </a>
  78. </li>
  79. <li>最近更新された
  80. <a href="https://dic.nicovideo.jp/m/u/a/1-"> 単語記事 </a> / <a href="https://dic.nicovideo.jp/m/u/v/1-"> 動画記事 </a> / <a href="https://dic.nicovideo.jp/m/u/i/1-"> 商品記事 </a> /
  81. </br>
  82. <a href="https://dic.nicovideo.jp/m/u/u/1-"> ユーザ記事 </a> / <a href="https://dic.nicovideo.jp/m/u/c/1-"> コミュ記事 </a> / <a href="https://dic.nicovideo.jp/m/u/l/1-"> 生放送記事 </a> /
  83. </br>
  84. <a href="https://dic.nicovideo.jp/m/n/res/1-"> 書き込み </a> / <a href="https://dic.nicovideo.jp/m/n/oekaki/1-"> お絵カキコ </a> / <a href="https://dic.nicovideo.jp/m/n/mml/1-"> ピコカキコ </a> /
  85. </li>
  86. <li>
  87. <a id="backgroud_default" style="display: none;" href="" onClick="maincss('/nd2.css');return false;">背景をデフォルトに戻す</a>
  88. <a id="backgroud_mokume" style="" href="" onClick="maincss('/ndx.css');return false;">背景を木目にする</a>
  89. </li>
  90. <li>
  91. <a id="use_flashpico" style="display: none;" href="" onClick="pikoplayer('flash');return false;">古いピコカキコ(flash版)を使う</a>
  92. <a id="use_htmlpico" style="" href="" onClick="pikoplayer('html5');return false;">新しいピコカキコ(html5版)を使う</a>
  93. </li>
  94. <li>
  95. <a href="https://dic.nicovideo.jp/">トップ</a> / <a href="https://dic.nicovideo.jp/p/my/">マイページ</a> / <a href="https://dic.nicovideo.jp/p/logout/">ログアウト</a>
  96. </li>
  97. </ul>
  98. <img src="/img/r_box_b2.gif" class="menu-border">
  99. `
  100.  
  101. /**
  102. * pikoplayerIsは大百科で通常読み込まれる関数
  103. * pikoplayerIsを元に「ピコカキコ××を使う」の最初の表示を切り替える
  104. */
  105. if (pikoplayerIs('flash')) {
  106. document.getElementById('use_flashpico').style.display = 'none'
  107. document.getElementById('use_htmlpico').style.display = 'block'
  108. } else {
  109. document.getElementById('use_flashpico').style.display = 'block'
  110. document.getElementById('use_htmlpico').style.display = 'none'
  111. }
  112.  
  113. /**
  114. * 現在のレイアウトを元に「背景を××にする」の最初の表示を切り替える
  115. */
  116. if (document.getElementById('header').style.backgroundRepeat === null) {
  117. document.getElementById('backgroud_mokume').style.display = 'none'
  118. document.getElementById('backgroud_default').style.display = 'block'
  119. } else {
  120. document.getElementById('backgroud_mokume').style.display = 'block'
  121. document.getElementById('backgroud_default').style.display = 'none'
  122. }
  123.  
  124. /**
  125. * CSSの変更を監視し
  126. * ヘッダーのメニューにある「背景を××にする」の表示と連動する
  127. */
  128. const target = document.getElementById("maincss_ndx");
  129. const observeOption = {
  130. attributes: true,
  131. attributeFilter: ['style']
  132. };
  133. const observer = new MutationObserver(mutations => {
  134. if (mutations[0].target.style.cssText.length > 0) {
  135. document.getElementById('backgroud_mokume').style.display = 'none'
  136. document.getElementById('backgroud_default').style.display = 'block'
  137. } else {
  138. document.getElementById('backgroud_mokume').style.display = 'block'
  139. document.getElementById('backgroud_default').style.display = 'none'
  140. }
  141. });
  142. observer.observe(target, observeOption);
  143. })
  144. }
  145.  
  146.  
  147. // document.addEventListener('DOMContentLoaded', function () {
  148. window.onload = function () {
  149. //もしメニューがない場合は作成
  150. if (document.getElementById(MENUID) === null) {
  151. const elm = document.createElement('div')
  152. elm.id = MENUID
  153. //右ペインの他メニューにクラスを合わせる
  154. elm.className = 'box'
  155. elm.style.height = 'auto'
  156. //空の要素を挿入
  157. document.getElementById('right-column').insertAdjacentElement('afterbegin', elm)
  158. }
  159. //記事名を取得
  160. const word = document.getElementById('search-box').value
  161. //横幅を取得
  162. const width = document.getElementById('right-column').offsetWidth
  163. //メニューを表示
  164. drowMenu(word, width)
  165. }
  166. // })
  167.  

QingJ © 2025

镜像随时可能失效,请加Q群300939539或关注我们的公众号极客氢云获取最新地址