プログラミング

個人サイトを作ろう(2) Nginx+Node.js導入

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

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

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

個人サイトを作ろう(1) Ubuntu Serverを動かそう

動機

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

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

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

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

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

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

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

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

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アドオン

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

MisskeyカスタムCSSとか

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

Misskeyプラグインはこちら

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

カスタムCSS

カスタムCSSはMisskeyの設定→全般の一番下にあるカスタムCSSをクリックして出てきた画面のフォームに入力して保存すると適用されます。

PCブラウザの場合Misskeyの設定に入力するよりStylusなどのアドオンを入れてそちらに入力したほうがいいかと思います（misskey本体だと内容によっては設定画面にアクセスできなくなる可能性があるため）

画像サムネイルのサイズを縮小する（2023/7/29更新）

7/29 Misskey v13.14.2で表示が少しおかしくなる為微調整

枚数に関わらずサイズを固定します。

このままだと1/4サイズ、3行目のminmax(calc(25% - 10px), 1fr))の25%の部分を50%に変更すると1/2サイズになります。

デスクトップでは1/4サイズ、スマホでは1/2サイズがオススメ

/* 画像サムネイル縮小 */  
article .xutAY:not(.plyr) {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(calc(25% - 10px), 1fr)) !important;
      grid-template-rows:auto !important;
      grid-gap: 10px;
      height:100% !important;
}
article .xihRJ:not(.plyr),article .xsfFg:not(.plyr),article .xCjAS:not(.plyr),article .xqN41:not(.plyr){
    aspect-ratio:auto !important;
}

article .xutAY:not(.plyr) .xesxE {
    aspect-ratio:1/1 !important;
    
}
article  .xutAY:not(.plyr)>.xesxE{
    grid-column:auto !important;
    grid-row:auto !important;
}


article .xutAY:not(.plyr) .x4RFf{
    font-size:4px;
    top:0;
    left:0;
}
article .xutAY:not(.plyr) .ti-eye-off{
        top:0;
        right:0;  
}
article .xutAY:not(.plyr) button:has(.ti-dots){
        bottom:0;
        right:0;  
        padding:0;
    }
@media (max-width: 500px) {
article .xutAY {
      grid-gap: 2px;
}
article .xutAY .ti-eye-off{
        top:0 !important;
        right:0;  
}
article .xutAY button:has(.ti-dots){
        bottom:0;
        right:0;  
        width:12px;
        height:12px;
        padding:0;
    }
article .xutAY .ti-dots{
        font-size:4px;
    }
}
/* 画像サムネイル縮小ここまで */

画像付きノートの画像を非表示

外でスマホで見るときなど画像自体を非表示にしたい方向け。
タイムラインの投稿画像を見えなくします。
画像が見たいときはノートの投稿時刻の部分をタップしてノート単独ページに遷移してください。
※あくまでもCSSで見えなくしているだけなので画像自体は読み込まれます。通信量が減ったりはしません。

/* 画像付きツイートの画像を非表示 */
article div:has(>.xutAY)::before{
    content: "画像あり";
}
article div:has(>.xutAY){
    height:20px;
    width:100%;
    background-color:var(--accentedBg);
    color:var(--accent);
    border-radius: 10px;
    margin:5px;
    text-align: center;
}
article div:has(>.xutAY) div{
        display:none;
}

TLの特定のサーバーのみ画像つきノートの画像を非表示にする

misskey.ioのところ(2ヶ所)を指定サーバーに変更ください。
画像は投稿時間をクリックしてノート単独ページに飛べば見えます

/* 指定のサーバーの画像付きツイートの画像を非表示 */
article:has(a[title*="misskey.io"]) .xbIzI:has(.xutAY)::before{
    content: "画像付き";
    display: inline-block;
    height:20px;
    width: 100%;
    background-color:var(--accentedBg);
    color:var(--accent);
    border-radius: 10px;
    margin:5px;
    text-align: center;
}

article:has(a[title*="misskey.io"]) .xutAY{
    display:none;
}

CWに隠れた画像(添付ファイル)付きノートを目立たせる

CWで折りたたまれた中に画像や添付ファイルがあれば目立たせます

/* 添付ファイル付きのCWノートに目印をつけるCSS */
article div[style*="inline-size"]:has(div[style*="none"]):has(div[data-id][class*=image])::before{
    content: "　画像つきCW　";
    display: inline-block;
    height:20px;
    width:100%;
    background-color:var(--accentedBg);
    color:var(--accent);
    border-radius: 10px;
    margin:5px;
    text-align: center;
}

画像(添付ファイル)付きのCWを常に開いておく

上のCSSと併用がオススメ

CWされた本文に背景色も付けられます　画像はぼかしをかけるようにしてますが不要なら後半を削除してOK

:has(div[data-id][class*=image])(数カ所)を消すと画像がないのも全部CW自動オープン

/** 添付ファイル付きのCWノートは常に開く **/
article div[style*="inline-size"]:has(div[style*="none"]):has(div[data-id][class*=image]) .xmqJ1 + div {
    display: block !important;
    /* ↓隠された本文の背景色など */
    background-color: rgba(200, 200, 200, 0.20) !important;
    padding:10px;
    border-radius: 10px;}
article div[style*="inline-size"]:has(div[style*="none"]):has(div[data-id][class*=image]) .xd2wm {
    display: none !important;
}
/* ここ以下は画像へぼかしをかけます　要らなければ削除 */
article div[style*="inline-size"]:has(div[style*="none"]):has(div[data-id][class*=image]) .xmqJ1+ div a img {
    filter: blur(10px);
    transition-duration: 0.5s;
}   
article div[style*="inline-size"]:has(div[style*="none"]):has(div[data-id][class*=image]) .xmqJ1 + div a img:hover {
    filter: blur(0);
    transition-duration: 0.5s;
}  
/** 添付ファイル付きのCWノートは常に開くここまで **/

カスタム絵文字の周りに灰色の輪郭線をつける

ダークモードでカスタム絵文字が同化して見にくい方向け
ぼかしの度合い(3番目の数値)や色(4番目の数値)を適宜変更ください

/* カスタム絵文字の周りに灰色の輪郭線をつけるカスタムCSS */
article .xeJ4G{
    filter: drop-shadow(0 0 2px #ddd);
}

スマホ表示(幅500px以下)のときホバー通知を非表示にする

ポップアップされる通知自体を非表示にします。Misskey本体の更新によりポップアップ通知の表示位置などが変更できるようになったので不要かも

/* 500px以下でホバー通知を表示しない */
@media (max-width: 500px) {
  .xpjbG{
    display:none !important;
  }
}

横長のカスタム絵文字を画面内に収める

スマホなどで横長絵文字が見切れる！のが困る方向け

有効範囲はTLの本文とリアクションのみです。

拡大x2系と拡大縮小scale系のMFMには適用されないver(flipはscale(-1)なので効きません)

/** 横長カスタム絵文字をリサイズ **/
.x48yH>span>img.xeJ4G,
.x48yH>span span:not(span[style*="scale"],span[class*="mfm"]) img.xeJ4G,
button.xDRXD>img.xeJ4G{
    max-width: 100%;
    object-fit: contain;
}

MFMにも適用されるver

/** 横長カスタム絵文字をリサイズ **/
.x48yH>span img.xeJ4G,button.xDRXD>img.xeJ4G{
    max-width: 100%;
    object-fit: contain;
}

特定のユーザーの被RNを非表示

絵文字botなど同じノートが沢山RNされてTLを圧迫するのがしんどいかた向け　特定のIDの被RNを表示にします。IDは後方一致、$=を*=にすると部分一致

.xcSej:has(span.xzyAJ):has(a[href$="@ここにID"].x6tH3){display:none}

苦手な絵文字などを見えなくするCSS

/* ノート下部の特定のリアクションを消す */
button:has(img[title*=":絵文字の文字列:"]){display:none}
/* ノート本文内の絵文字を消す */
article span img[title*=":絵文字の文字列:"]{display:none}

本文投稿欄の高さを変える

.xr8AW .x8B0D{min-height:150px}

ウィジェット

にじみす鯖用です。他鯖で使いたい場合にはカスタム絵文字などを書き換えてください。

「ウィジェットを編集→AiScript App追加」で以下のソースを貼り付けてください。
入力画面左下のshowHeaderをオフにすると上のAppの文字が消えます。

ヨシゴイちゃんウィジェット

ヨシゴイちゃんをランダムで表示するだけのウィジェットです。
しゅいろママのおみくじを書き換えただけです。[":yoshigoi:"]の部分を増やしたりすることで好きな絵文字を追加できます。

/// @ 0.13.1
// ランダムでヨシゴイちゃんを表示するウィジェット

// 選択肢
let yoshigois = [
    ":yoshigoi:"
    ":yoshigoi_byon:"
    ":yoshigoi_daba:"
    ":yoshigoi_gata:"
    ":yoshigoi_zairu:"
    ":yoshigoicoffee:"
    ":yoshigoicuteeye:"
    ":yoshigoiface:"
    ":yoshigoifloofpat:"
    ":yoshigoimoji:"
    ":yoshigoiparty_1:"
    ":yoshigoiparty_2:"
    ":yoshigoisit:"
    ":yoshigoisunglasses:"
    ":yoshigoiwalk:"
]


// ランダム
let chosen = yoshigois[Math:rnd(0 (yoshigois.len - 1))]

// 結果
let result = `$[x3 {chosen}]`

// UIを表示
Ui:render([
    Ui:C:container({
        align: 'center'
        children: [Ui:C:mfm({ text: result })]
    })
])

Misskey Play

AiScriptでゲームがつくれます。

迷路ゲーム

穴掘り法というアルゴリズムでランダムにマップが生成される迷路ゲームです。現在11×11マス(外周含む)のマップになっています。左上(南向き開始)からスタートし、右下がゴールです。

ヨシゴイちゃんの冒険

ツチノコ村上さんの冒険

ダイス

(1〜10)個の(2〜100)面ダイスを振ることができます。

🎲にじみすダイスロール

参考サイト

Stylusでブラウザ版Twitterの見た目の変更

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

こんな感じ

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

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

Stable Diffusion web UIの導入方法

10/13最新バージョン用に更新

Stable Diffusion web UIは画像生成AIであるStable Diffusionをブラウザから簡単に使用でき、PCに導入する場合にはバッチファイルを実行するだけで必要なものが自動でインストールされるので、プログラミングの知識が無くても非情に簡単にStable Diffusionを扱うことができます。せっかくなのでPCへの導入方法を記載しました。

Stable Diffusionで色々生成

webブラウザ上でStable Diffusionをパラメータ指定しつつ弄れるStable Diffusion web UIを導入しました。

python3.10.6とgitがインストールしてある状態で学習済みモデルを指定のフォルダに置き、バッチファイルを実行するとvenvで仮想環境を立てて色々導入してくれます。これから始めたい人には楽ちん！(Nvidiaのグラボを使用している必要があります/自分はRTX3060無印)

パラメータの詳細や使い方はこちらの記事を参考

ガチャを回してるみたいで楽しい…！

「花畑にいるウォンバット」

「金髪で司祭服を着た青年」メギド72のフォルネウスぽいのが作りたかった模様

人物は難しそうです

呪文：Beautiful blond boy with medium length hair.shining and crown with white feathers, blue eyes, priest’s white habit, full-length portrait , elegant, unity, anime, digital painting, concept art, highly detailed, unreal engine.sharp focus.highly detailed.cinematic lighting.Fantastic