UserScript | estampie

スマホ版Twitter(現X)をカスタマイズ

ちょっとアプリだと色々不便なことが増えてしまったので、スマホでブラウザ版Twitterを使用し、不要なものをUserCSSで消していきます。

Misskeyに記事のURLをPocketへ追加するボタンを付けるUserScript

Misskeyの記事のURLをPocketサービスへ送信するボタンを付けるUserScriptです。

Google KeepはAPI非公開、EvernoteはAPIがありますがあまりUserScript向きではないようでした。

仮想DOM生成時に実行されるため、少し重くなるかもしれません。

正常に送信が行われると緑色になります。（API送信時に確認のため色を変えているため、Pocketへ保存されている記事の色が変わるわけではありません。）

準備

Pocketに登録し、API利用のためカスタマーキーとアクセストークンを取得します。

Pocket API を使ってアイテムの追加・編集・取得を行う

上記サイトを参考にして取得しました。

UserScriptコード

PCブラウザ, Android, iOSでのそれぞれの導入方法はこちらの記事を参照ください。
下記のうち@matchのURLを利用するMisskeyのサーバーへ、consumer_key、access_tokenを取得したPocket APIのカスタマーキーとアクセストークンへ書き換えてください。

// ==UserScript==
// @name         Save URL to Pocket
// @namespace    @[email protected]
// @version      1.0
// @description  Saves the URL to Pocket when the specified button is clicked
// @match        https://nijimiss.moe/*
// @run-at      document-idle
// @grant        GM_xmlhttpRequest
// ==/UserScript==

// ボタンを生成する関数
function createPocketButton(article) {
    const footer = article.querySelector('footer');
    if (footer) {
        const pocketButton = document.createElement('button');
        pocketButton.classList.add('_button', 'xviCy', 'pocket-button');
        pocketButton.style.height = '32px';
        pocketButton.style.borderRadius = '6px';

        const pocketIcon = document.createElement('img');
        pocketIcon.setAttribute('src', 'https://blog.estampie.work/pocket.svg');
        pocketIcon.setAttribute('width', '16');
        pocketIcon.setAttribute('height', '16');
        pocketIcon.classList.add('xeJ4G', 'x5kTm', 'x9Io4');

        pocketButton.appendChild(pocketIcon);

        pocketButton.addEventListener('click', () => {
            const noteElement = article.querySelector('a[href^="/notes/"]');
            if (noteElement) {
                const notePath = noteElement.getAttribute('href');
                const fullURL = 'http://nijimiss.moe' + notePath;

                GM_xmlhttpRequest({
                    method: 'POST',
                    url: 'https://getpocket.com/v3/add',
                    headers: {
                        'Content-Type': 'application/json; charset=UTF-8',
                        'X-Accept': 'application/json',
                    },
                    data: JSON.stringify({
                        url: fullURL,
                        consumer_key: 'カスタマーキー',
                        access_token: 'アクセストークン',
                    }),
                    onload: function(response) {
                        if (response.status >= 200 && response.status < 300) {
                            // API送信が成功した時の処理
                            pocketButton.style.backgroundColor = '#77b58c'; // ボタンの背景色を緑に変える
                        } else {
                            // API送信が失敗した時の処理
                            pocketButton.style.backgroundColor = '#FF0000'; // ボタンの背景色を赤に変える
                        }
                    }
                });
            }
        });

        footer.appendChild(pocketButton);
    }
}


// DOMが変更されたときに実行される関数
const observerCallback = function(mutationsList, observer) {
    for(let mutation of mutationsList) {
        if (mutation.type === 'childList') {
            const articles = document.querySelectorAll('article:not(.has-pocket-button)');
            articles.forEach(article => {
                createPocketButton(article);
                article.classList.add('has-pocket-button');
            });
        }
    }
};

// MutationObserverを設定
const observer = new MutationObserver(observerCallback);
observer.observe(document, { childList: true, subtree: true });

// 初期ページの記事にボタンを追加
const initialArticles = document.querySelectorAll('article');
initialArticles.forEach(article => {
    createPocketButton(article);
    article.classList.add('has-pocket-button');
});

補足

下記カスタムCSSを併用すると二行にならずに済むかもしれません。数値は任意で変更してください。

.xviCy:not(:last-child) {
    margin-right: 14px !important;
}

Misskeyでリノートやリプライのハードミュートを実行するUserScript

概要

Misskey v13.11現在、ハードミュートはリプライ元やリノートを貫通します。
プラグイン等で弄れる部分ではないため、ブラウザ側で強制非表示にするUserScriptを作成しました。
ブラウザにTampermonkeyなどの拡張機能を入れることで利用できます。

ソースコード

下記の// @match https://nijimiss.moe/*の部分を使用するサーバーに書き換えてください。
ngWords = ["ミュート", "NGワード"];部にNGワードを指定/追加してください。
(AND指定などはできません)
仮想DOM生成の度にループ処理を回すので、NGワードの数が多いと重くなります。ご注意ください。

// ==UserScript==
// @name     Misskey Mute
// @version      0.1
// @description  Mute words on misskey
// @author  @[email protected]
// @grant    none
// @match        https://nijimiss.moe/*
// @run-at   document-idle
// ==/UserScript==

(function () {
    'use strict';
    // NGワードを設定
    const ngWords = ["ミュート", "NGワード"];
    const observerConfig = {
        childList: true,
        subtree: true
    };

    function observerCallback(mutationsList, observer) {
        for (let mutation of mutationsList) {
            if (mutation.type === 'childList') {
                const divs = document.querySelectorAll('div[tabindex="-1"]');
                divs.forEach(div => {
                    const divText = div.innerText.toLowerCase();
                    for (let word of ngWords) {
                        if (divText.includes(word.toLowerCase())) {
                            div.style.display = 'none';
                        }
                    }
                });
            }
        }
    }

    const observer = new MutationObserver(observerCallback);
    observer.observe(document.body, observerConfig);
})();

導入方法

iOS/MacOS

上記のソースをテキストエディタにて適当な名前.js（misskeyng.jsなど）で保存し、iCloudドライブなどに適当なフォルダ(Userscriptsなど)を作って入れておきます。

下記のアプリをインストールします。
Userscripts
UserScriptをiOSのSafariでも実行できるようになるアプリです。

iOSの「設定」→「Safari」→「機能拡張」→で「UserScripts」をオンにします
　すべてのWebサイトを許可にしておきます
UserScriptアプリを起動して「Set Userscripts Directory」ボタンをタップし、先程のiCloudフォルダを指定します。
Safariで該当のMisskeyサイトを開き、URLの横の左上の「ああ」or「AA」のアイコンをタップし、UserScriptをタップして該当のスクリプトをオンの状態にします。ここにない場合アドレスバーに</>のアイコンがあるかもしれません。

Macも同アプリにて利用できるようです。今Macbookが使えないので下記などを参照ください。
UserScripts 公式GitHub

Android

Chromeは拡張機能が使用できないので利用できません。

FireFoxは
Tampermonkey – Android Firefoxアドオン
から導入できます。

Firefoxの右上の︙からTampermonkeyを選び、新規スクリプト作成を行って上記コードを記述してください。

PC版Chrome, Firefox, Edge

Tampermonkeyやgreasemonkeyなどの拡張機能を導入することで使用できます。
Tampermonkey – Chromeアドオン
Tampermonkey – Firefoxアドオン
Tampermonkey – Edgeアドオン

拡張メニューの「新規スクリプトを追加」から上記コードを貼り付けてください。