Greasy Fork is available in English.

Add Nicopedia Menu

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

// ==UserScript==
// @name            Add Nicopedia Menu
// @namespace       Add Nicopedia Menu
// @description     ニコニコ大百科の記事右側にメニューを追加します
// @author          sotoba
// @match           https://dic.nicovideo.jp/*
// @version         1.0.1-20181103
// @homepageURL     https://github.com/SotobatoNihu/AddNicopediaMenu
// @license         MIT License
// @grant           GM.getResourceUrl
// @resource        nicoIcon   https://dic.nicovideo.jp/oekaki/22690.png
// @resource        googleIcon   https://dic.nicovideo.jp/oekaki/15633.png
// @resource        wikiIcon   https://dic.nicovideo.jp/oekaki/17668.png
// @resource        yahooIcon   https://dic.nicovideo.jp/oekaki/17680.png
// @resource        seigaIcon   https://dic.nicovideo.jp/oekaki/122809.png
// @resource        ch2Icon   https://dic.nicovideo.jp/oekaki/167179.png
// @resource        pixivIcon   https://dic.nicovideo.jp/oekaki/109891.png
// @resource        ichibaIcon   https://dic.nicovideo.jp/oekaki/30296.png
// @resource        communityIcon   https://dic.nicovideo.jp/oekaki/9203.png
// @resource        commonsIcon   https://dic.nicovideo.jp/oekaki/16255.png
// ==/UserScript==

const MENUID = 'nicopedia-menu'

const drowMenu = async (word, width) => {

    const menuElem = document.getElementById(MENUID)

    //単語の空白をアンダーバーに
    const modifyWord = word.replace(' ', '_')

    //アイコンの描画に Greasemonkeyのキャッシュ機能を使用
    Promise.all([
        await GM.getResourceUrl("nicoIcon"),
        await GM.getResourceUrl("googleIcon"),
        await GM.getResourceUrl("wikiIcon"),
        await GM.getResourceUrl("yahooIcon"),
        await GM.getResourceUrl("seigaIcon"),
        await GM.getResourceUrl("ch2Icon"),
        await GM.getResourceUrl("pixivIcon"),
        await GM.getResourceUrl("ichibaIcon"),
        await GM.getResourceUrl("communityIcon"),
        await GM.getResourceUrl("commonsIcon")
    ]).then(Icons => {
        const nicoIcon = Icons[0]
        const googleIcon = Icons[1]
        const wikiIcon = Icons[2]
        const yahooIcon = Icons[3]
        const seigaIcon = Icons[4]
        const ch2Icon = Icons[5]
        const pixivIcon = Icons[6]
        const ichibaIcon = Icons[7]
        const communityIcon = Icons[8]
        const commonsIcon = Icons[9]

        // HTMLをベタ書き（アイコンデータは埋め込み）
        menuElem.innerHTML = `
<img src="/img/l_box_t.gif" class="border" style="width: ${width}px">
<ul>
    <li>
        <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>
        <a href="https://www.nicovideo.jp/tag/${modifyWord}">「${modifyWord}」でタグ検索 <img title="タグ検索" style="vertical-align: middle;" alt="niconico" src="${nicoIcon}" width="15" height="15"></a>
    <li>外部サイトで検索</br>
        <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> 
        <a href="http://ja.wikipedia.org/wiki/${word}"><img title="Wikipedia" style="vertical-align: middle;" alt="Wikipedia" src="${wikiIcon}"width="15" height="15"></a>  
        <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>  
        <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>   /
        <a href="http://seiga.nicovideo.jp/search/illust/tag/${word}"><img title="静画" style="vertical-align: middle;" alt="ニコニコ静画" src="${seigaIcon}"width="15" height="15"></a> 
        <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> 
        <a href="http://search.pipa.jp/?KWD=${word}">2じげん</a> /
        </br>
        <a href="http://ichiba.nicovideo.jp/search/az/${word}"><img title="ニコニコ市場" style="vertical-align: middle;" alt="ニコニコ市場" src="${ichibaIcon}" width="15" height="15"></a> 
        <a href="http://com.nicovideo.jp/search/${word}?mode=s"><img title="ニコニココミュニティ" style="vertical-align: middle;" alt="ニコニココミュニティ" src="${communityIcon}" width="15" height="15"></a> 
        <a href="http://www.niconicommons.jp/search/${word}"><img title="ニコニ・コモンズ" style="vertical-align: middle;" alt="ニコニ・コモンズ" src="${commonsIcon}" width="15" height="15"></a>  /
    </li>
    <li>50音全記事 
         <a href="https://dic.nicovideo.jp/m/a/a"> 単語記事 </a> / <a href="https://dic.nicovideo.jp/m/a/l"> 生放送記事 </a> 
    </li>
    <li>最近更新された 
        <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>  /  
        </br>
        <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>  / 
        </br> 
        <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>  /  
    </li>
    <li>
         <a id="backgroud_default" style="display: none;" href="" onClick="maincss('/nd2.css');return false;">背景をデフォルトに戻す</a>
         <a id="backgroud_mokume" style="" href="" onClick="maincss('/ndx.css');return false;">背景を木目にする</a>
     </li>
     <li>
         <a id="use_flashpico" style="display: none;" href="" onClick="pikoplayer('flash');return false;">古いピコカキコ(flash版)を使う</a>
         <a id="use_htmlpico" style="" href="" onClick="pikoplayer('html5');return false;">新しいピコカキコ(html5版)を使う</a>
     </li>
    <li>
        <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> 
    </li>
</ul>
 <img src="/img/r_box_b2.gif" class="menu-border">
    `

        /**
         * pikoplayerIsは大百科で通常読み込まれる関数
         * pikoplayerIsを元に「ピコカキコ××を使う」の最初の表示を切り替える
         */
        if (pikoplayerIs('flash')) {
            document.getElementById('use_flashpico').style.display = 'none'
            document.getElementById('use_htmlpico').style.display = 'block'
        } else {
            document.getElementById('use_flashpico').style.display = 'block'
            document.getElementById('use_htmlpico').style.display = 'none'
        }

        /**
         * 現在のレイアウトを元に「背景を××にする」の最初の表示を切り替える
         */
        if (document.getElementById('header').style.backgroundRepeat === null) {
            document.getElementById('backgroud_mokume').style.display = 'none'
            document.getElementById('backgroud_default').style.display = 'block'
        } else {
            document.getElementById('backgroud_mokume').style.display = 'block'
            document.getElementById('backgroud_default').style.display = 'none'
        }

        /**
         * CSSの変更を監視し
         * ヘッダーのメニューにある「背景を××にする」の表示と連動する
         */
        const target = document.getElementById("maincss_ndx");
        const observeOption = {
            attributes: true,
            attributeFilter: ['style']
        };
        const observer = new MutationObserver(mutations => {
            if (mutations[0].target.style.cssText.length > 0) {
                document.getElementById('backgroud_mokume').style.display = 'none'
                document.getElementById('backgroud_default').style.display = 'block'
            } else {
                document.getElementById('backgroud_mokume').style.display = 'block'
                document.getElementById('backgroud_default').style.display = 'none'
            }
        });
        observer.observe(target, observeOption);
    })
}


// document.addEventListener('DOMContentLoaded', function () {
window.onload = function () {
    //もしメニューがない場合は作成
    if (document.getElementById(MENUID) === null) {
        const elm = document.createElement('div')
        elm.id = MENUID
        //右ペインの他メニューにクラスを合わせる
        elm.className = 'box'
        elm.style.height = 'auto'
        //空の要素を挿入
        document.getElementById('right-column').insertAdjacentElement('afterbegin', elm)
    }
    //記事名を取得
    const word = document.getElementById('search-box').value
    //横幅を取得
    const width = document.getElementById('right-column').offsetWidth
    //メニューを表示
    drowMenu(word, width)
}
// })