weep
@weep

Mastodonでインスタンス名を表示させるCSS #InstanceTicker

どうも、みなさん。ホエホエパー。

謎の白い物体、weep です。

よろしく。しなちく。

結論

まず、結論から。

放っから、記事を最後まで読まない人が「あっそ」って言ってブラウザバックしてくれるタイミングになればいいかなと。

こんなの作りました。

undefined.jpg

そのストーブのアイコン、超あったかそうだね!

そうじゃなくて、インスタンス名を表示させるティッカーです。

きっかけ

まず、なんでこんな CSS を作ることになったかを語ります。

おいらは、Mastodon で、お一人様インスタンスをしています。

お一人様インスタンスは、傍から見るとぼっちで悲しそうだと思われそうですが、連合タイムラインで他のサーバーさんとカジュアルにやりとりできて、ローカルタイムラインですぐギスギスするような問題児のおいらとかおいらとかにはお一人様インスタンスは、最適です。

 

しかし、お一人様インスタンスやってて思ったのですが、Mastodon では、相手がどこのインスタンスの人なのかが分かりにくいデザインでした。

undefined.jpg

https://friends.nico/@sleepnico/100926772208759379

表示名 や ID が短い人はなんとか分かるんですが。。。

 

undefined.jpg

https://odakyu.app/@ars42525/100926791889234912

え!まじで?・・・じゃなくて。。。

このように、表示名 や ID が長い人だと、どこのインスタンスの人なのかをひと目で分かりづらいのが、Mastodon の特徴ですが、たぶん Pleroma も Misskey もこんな感じだったような覚えがあるんですが、違ったらごめんなさい。

こんな不便な UI にヤキモキしていたら。。。

小田急don のカスタムCSSを知って、すっげーって思ってぱくって使っていたのです。

undefined.jpg

小田急don では、上のような感じのカスタムCSSです(SU の意味は、おいらには未だにわかりません)。

記事公開後の追記:御本人曰く

SU=Single Userでした(謎の答え合わせ)

https://odakyu.app/@ars42525/100927143588962563

とのこと。

この方法を使って、インスタンス名見やすくしようって思ったのが、おいらの策略でした。うへへ。

undefined.jpg

https://friends.nico/@mei23/100926855542257641

手打ちで改造

小田急donきょり/わんせた さんに改造して使ってますと言いながら、手打ちで改造しまくって、逐一報告する感じでした。

きょり/わんせた さんからは、「もはや原型留めてないw」的な感想を頂きました(該当トゥートを探すのが困難だったため、記憶参照です)。

undefined.jpg

初期版は上の画像ような感じでした。

 

undefined.jpg

現在は上の画像の感じ。

undefined.jpg

とまぁ、こんな CSS を作ったわけです。はい。

カスタムCSS の配信

せっかく作ったからには、「CSS をうpって、みんなで使おう!」ってことになりました。

きっかけを作って下さった きょり/わんせた さんから許可を頂いたことによって、実現しました。ありがとうございます!

当初は、Firebase Hosting に css うpって、更新するたびに firebase deploy してました。

アイコン画像は cloudinary に格納してました。

undefined.jpg

あーん恥ずかしい。このエラーは。

現在は、さくらのクラウドにある「ウェブアクセラレータ」って CDN のを使ってます。

cloudinary の画像URLだと、おいらのうんちのようにクソ長いので minify 的な感じに文字数減らすために、画像も同じサーバーに格納することにしました。

うちのインスタンスでも使いたい方へ

そんな奇特な方が居ることを願って、この CSS を配信しています。

https://weep.jp/mastodon が、案内ページです。

なお、カスタムCSSが使用できるのは、Mastodon バージョンが最新で且つ、管理者権限がある方のみですので、ご注意下さい。

 

<s>ムトーでは「カスタムCSS」を使えないバージョンであることを確認しています。

ムトーこのやろう!!

とっとと、バージョンアップしろ!!(ムトーユーザーのいち意見)</s>

 

Qrunch って斜線引けないんですか?

ガチで起こってる風になっちゃうやん?

 

注意事項(修正・加筆しました)

うんこチョコQrunchがダウン中の間。

2018年10月21日付けに事情がかわりましたので、修正・加筆しました。

当CSSは、クリエイティブ・コモンズ・ライセンスとなりました。

undefined.jpg

表示 - 非営利 - 改変禁止 4.0 国際 (CC BY-NC-ND 4.0)  

Mastodon は今後 CSP を導入し強化することになるらしく、@import url を使って外部CSS読み込むには、これから対策が必要らしいです。

observatory.mozilla.orgでインラインCSS使いながらA+にする by @unipst

 

おいらとしても、@import url をいつまでも強要するわけにもいかないみたいなので、柔軟にCSS本体をコピペして使えるようにしました。

これで、 CSP わからんってインスタンス運営者さんも使えます。

CSS製造機 #InstanceTicker by @weep

 

ブラウザ拡張機能での利用を許可をしましたので、ご利用ください。(ただし、改変は禁止です)

 

undefined.jpg

書き込みフォームの下に、とても嫌らしい感じにCSSバージョン情報とか、著作権表示がでます。

こういうことこそ、1番やりたかったって言うね。。。

謝辞

カスタムCSSを改造して使わせて下さった上に、CSS配信に快く承諾して下さった きょり/わんせた さんに、ここの場でも感謝を申し上げます。

ありがたや、ありがたや。

以上

はじめての Qrunch 記事投稿でした。

ここまで読んで頂き、ありがとうございました。

undefined.gif

お一人様インスタンスの weep でした。

では、またね。。。

関連記事

コメントはありません。
weep
@weep
ホエホエパー
フォロー
フォロワー
ブログを開設

クランチで技術ブログを
始めてみませんか?

この先は、クランチへのアカウント登録、及びログインが必要なページになります。

Markdownの書き方
見出し # 見出し(h1)
## 見出し(h2) , ### 見出し(h3) ...
リスト - 箇条書き
   - タブでインデント
番号付きリスト 1. テキスト
2. テキスト
改行 行末に半角スペース2つ
リンクの挿入 [タイトル](https://xxx.com)
引用 > テキスト
コード挿入 ```cpp:title
code
```
画像の挿入 ![代替テキスト](URL "タイトル")
太字 **テキスト**
斜体 *テキスト*
打消し線 ~~テキスト~~
水平線 ***
技術ブログを開設
ログイン