概要

マストドン(fedibird.com)のホームをUserCSSで見た目を落ち着いた感じにしてみました。

ブラウザのアドオンのStylusを使用しています。iPhoneではfeatherクライアントを使用しているのでこれでブラウザからでもすっきりした見た目で使えるかも。iPadの場合はUserScriptに書き換えれば使えるかも

before

after

CSS

よく見るページのみ触ったので元のままの部分も結構ありそうです。適宜修正するかも

/* navigation周り(普段見ないものを非表示) */
.navigation-panel a[href*="timelines/public"],
.navigation-panel a[href*="/web/accounts/2"],
.navigation-panel a[href*="/web/circles"],
.navigation-panel a[href*="/web/group_directory"],
.navigation-panel a[href*="/web/directory"],
.navigation-panel a[href*="/web/suggestions"],
.navigation-panel a[href*="/web/trends"],
.navigation-panel a[href*="timelines/tag/fedibird"]{display:none !important;}
.navigation-panel a span{display:none !important;}
.reactions-bar__item{background-color:#eeeeee;
    border-radius:8px !important;}
.column-link{border-radius:10px;}
/* カラム周り */
.compose-form__publish button{background-color:#aaa;border-radius:10px}
.compose-form,.compose-panel{border-radius:10px !important;
    flex: 1;
    overflow-x: hidden;
    margin-bottom:0 !important;
    padding-bottom:0 !important;
    min-height: 10px !important;}
.compose-form__poll-button{display:none !important;}
.columns-area__panels__pane__inner{position: static;}
.columns-area__panels__pane__inner{width:auto;}
.column-link__icon {margin:0;}
    
/* header */
.column-header__button,.notification__filter-bar button{background-color:#aaa;}
.column-header,.column-header__back-button{background-color:#ccc;}
    
/* footer */
.getting-started__footer {opacity: 0.2;}

CSSではなくプラグインです。設定→プラグインに入力して下さい

※2024/5のMisskeyバージョンアップにより不具合発生したためコードを書き直しました。新しいコードを利用下さい。

概要

Misskeyのノート上の特定の文字列を置換するプラグインです。
通常・RN・返信のユーザー名・注釈・本文を置換します。
他にも置換したいものがあればlists内を書き換えてください。
とりあえずサンプルではにじみすサーバーの動きの速いカスタム絵文字とrainbowタグ→scaleタグへ置換されるように書かれています。

コード

{a: "置換前の文字列", b:"置換後の文字列" }のように記載してください。

/// @ 0.18.0
### {
  name: "置換プラグイン"
  version: "0.0.2"
  author: "@[email protected]"
  description: "特定の文字列を置換します"
  permissions: []
  config: {}
}
Plugin:register_note_view_interruptor(@(note){
  // {a: "置換前の文字列", b:"置換後の文字列"}
  let lists = [
    { a: ":ablobfoxhyper:"; b: ":blobfoxowo:" }
    { a: ":ablobcathyper:"; b: ":ameowbouncefast:" }
    { a: ":moshakoparty:"; b: ":moshako:" }
  ]
  for let i, lists.len {
    if (note.renote == null ) {
        if (note.text != null) note.text = note.text.replace(lists[i].a, lists[i].b)
        if (note.cw != null) note.cw = note.cw.replace(lists[i].a, lists[i].b)
        if (note.user.username != null) note.user.username = note.user.username.replace(lists[i].a, lists[i].b)
    }
    if (note.renote != null) {
      if (note.renote.text != null) note.renote.text = note.renote.text.replace(lists[i].a, lists[i].b)
      if (note.renote.cw != null) note.renote.cw = note.renote.cw.replace(lists[i].a, lists[i].b)
      if (note.renote.user.username != null) note.renote.user.username = note.renote.user.username.replace(lists[i].a, lists[i].b)
      if (note.renote.reply != null) {
        if (note.renote.reply.text != null) note.renote.reply.text = note.renote.reply.text.replace(lists[i].a, lists[i].b)
        if (note.renote.reply.cw != null) note.renote.reply.cw = note.renote.reply.cw.replace(lists[i].a, lists[i].b)
        if (note.renote.reply.user.username != null) note.renote.reply.user.username = note.renote.reply.user.username.replace(lists[i].a, lists[i].b)
      }
    }
    if (note.reply != null) {
      if (note.reply.text != null) note.reply.text = note.reply.text.replace(lists[i].a, lists[i].b)
      if (note.reply.cw != null) note.reply.cw = note.reply.cw.replace(lists[i].a, lists[i].b)
      if (note.reply.user.username != null) note.reply.user.username = note.reply.user.username.replace(lists[i].a, lists[i].b)
    }
  }
  note
})

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

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


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

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

準備

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

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

UserScriptコード

PCブラウザ, Android, iOSでのそれぞれの導入方法はこちらの記事を参照ください。
下記のうち@matchのURLを利用するMisskeyのサーバーへ、consumer_keyaccess_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;
}

前回はwebサーバーを立てるところまでやってみました。

サイトのデータがリモートリポジトリのmasterブランチにマージされたらNext.jsアプリをビルドして公開ディレクトリに同期というのをGitHub Actionsでやってる方を見てそれやりたいな~~と思いました。ただGitHubは性的な内容は駄目で同人サイトには向かないので、その辺の絡みでさくらVPSで同様の機能をやりたい感じです。

今回は仮想サーバー上にリモートリポジトリを作成してWindows側のVScodeからSSH接続でpushできるようにします。さらにリモートリポジトリにpushされたらGit HookでNext.jsアプリをビルドしてrsyncで公開フォルダに同期します。

何言ってるのかよくわかんないですが「サイトの更新準備が出来たらボタンポチーでサーバー上のデータが更新できて、弄った部分の変更履歴も取れる」みたいな感じ

続きを読む

前回の続きです。備忘録です。

今回はWinSCPで公開鍵認証&root権限付与、Nginx+Node.jsの導入までです。

要はwebサーバーを立てます。

続きを読む

動機

のくです。最近めっきりMisskeyのにじみす鯖にいます。昔の雑談掲示板のようで居心地が良いです。
MisskeyはActivityPubのプロトコルを使用した分散型SNSで、Mastodonに比べて思想的(反中央集権主義)なものも少なくまったりしています。

作品を載せる場の所感としては(ActivityPub全体がそうですが)

  • サーバー横断検索に弱い
  • ノート配信の仕組みのため作品の掲載範囲のコントロールしづらい

などが創作物の公開に関してはちょっと難があるように感じました。
そのためか、Misskey内部の創作系鯖では個人サイト作成で盛り上がってる部分もあり、私も個人サイト作りたい!!という気持ちがどんどん湧いてきました。

というかここも個人サイトなのですが、一昨年使用していないMovableTypeが脆弱性を突かれて改竄されスパムの踏み台にされたため、該当のディレクトリ以外は改竄されなかったのですがコンテンツを色々と下げてしまいました…。

せっかくなので新しいことがやりたい!という気持ちもあって、

  • VPSサーバーを借りる
  • 独自ドメインを取る
  • Nginx+Node.jsで構築
  • Next.jsあたりで動的サイト作成
  • Gitのリモートリポジトリを置いてGithubには置けない年齢制限のある小説もgit管理する
  • PleromaでActivityPubのおひとりさまサーバー作成

あたりを目標に考えています。以前HTML4+PHPで動的サイトを作っていて、技術の進歩にちょっと浦島太郎ですが頑張りたいです。

続きを読む

概要

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でも実行できるようになるアプリです。

  1. iOSの「設定」→「Safari」→「機能拡張」→で「UserScripts」をオンにします
      すべてのWebサイトを許可にしておきます
  2. UserScriptアプリを起動して「Set Userscripts Directory」ボタンをタップし、先程のiCloudフォルダを指定します。
  3. 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アドオン

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

MisskeyはカスタムCSSで見た目を変更したり、AiScriptという独自言語でウィジェットやプラグインやゲームを作成できます。

Misskeyプラグインはこちら

自作したもの置き場です。23/7/23最終更新 Misskey v13.14.1対応

続きを読む

公式Twitterの画面はごちゃごちゃしているので、ユーザーCSSを記述して見た目を変更して使用しています。

こんな感じ

Firefox,Chrome,Edgeで使用できます。PC版SafariでもユーザーCSSを指定すると適用できます。

ついでに最近実装されたインプレッション数も非表示にしています。

続きを読む

こんにちは。たまに思い立ったように二次創作小説を書いているのくです。

クラウドで.txtデータをやりとりしつつ、AndroidのJota+、Windows10ではMery、Linuxの入ったノートとiPhoneではNolaでちまちま書いていました。……が、この間Nolaで書いたものをクラウド上のテキストファイルに上書きした所、Nolaの方で上手く同期ができておらず、しばらくポチポチして書いた部分がパーになってしまいました。泣いています。

Meryだと自動で複数バックアップを取ってくれたりもするけど、いちいちファイルを増やしてのバックアップを取るのも面倒……そういえばプログラマーみたいに小説をgit管理で書いている方がいた…!私もやろう、そうしよう!

そういうわけで、Visual Studio CodeをエディタとしてGit&Githubを使って差分管理しながら小説を書く方法まとめです。Windows/Mac/Linuxで利用できます。あと自己責任になりますがAndroidでも行う方法を後ろの方に書いています。iOSでも有料アプリ(Working Copy)でPush出来るようです。

そもそも何が出来るの?

小説を書いてコミットという操作をすると、gitというプログラムが変更履歴を作成してくれます。履歴が管理されるので、進捗管理や、消したり書き換えたところを戻したり再利用したい…という場合便利です。

また、例えばデスクトップとノートPCで別々の行を編集して保存した場合、なんとそれらの変更を合体(マージ)させることができます。ワオ…!

統合(マージ)のイメージ

同じ行が編集されていた場合は競合が発生しますが、履歴が残るのでどちらを残すかも決められます。

実際何をするの?

Visual Studio Codegitを公式サイトよりダウンロードしてインストールし、ブラウザからGitHubのサイトに登録して、それらを連携すると準備完了です。

実際に小説を書きながらやることを簡単にまとめると

  1. pullという操作でweb上から書きかけの小説データをダウンロード
  2. 小説の続きを書く
  3. コミットという操作で変更履歴を作成
  4. pushという操作で変更履歴と小説データをweb上にアップロード

を繰り返すイメージです。太字の操作はエディタにあるボタンを押すだけで進みます。小説は自分で書くしかないです。でも画像中のサンプル文章を書いたのはAIのべりすとくんなのでウナギに焼き印を押した戦犯は彼/彼女です。私は悪くない…

続きを読む