Stylish 拡張機能で Tumblr のダッシュボードを tmbrtext 化する

普段、Tumblr でテキストを読みたくて tmbrtext という iOS アプリを使っているのだが、最近何やら Text ポストの中に img 要素が埋め込まれていて、画像を含んだポストに遭遇することがある。

面白画像なんかであればまだ良いのだが、NFSW な画像が開くのは嫌なので、なんとかならないかと思って試行錯誤していた。

最初は Tumblr API を利用してダッシュボードを読み込み、画像ポストを除去するか…とか考えていたのだが、OAuth が面倒臭そうで断念。

Tumblr 公式が出している tumblr.js という npm パッケージを使うと、CLI で Tumblr API が叩けてテキストだけ取得はできたのだが、リブログ等がやりづらくコレも諦めた。ローカルに閉じてやるなら、tumblr.js を叩く Express サーバみたいなのを作ってゲートウェイ的な API を作ってやれば、SPA なアプリに渡して動作させたりもできそうかなーと思ったのだが、たかだか Tumblr 見るだけでローカルサーバは面倒なので止めた。

んで、考え方を変えて、「画像さえ表示させないようにできればいい」ということにして、思いついたのが、Firefox や Chrome の拡張機能である Stylish を使って、tumblr.com ドメイン配下の img 要素を非表示にしてしまえばいい、ということだった。

昔々は Proxomitron というローカルプロキシのフリーソフトがあって、コイツに特定のページだけ HTML 編集させたりしていたのだが、Stylish はいわばコレの CSS 限定版なワケだ。JS も埋め込める拡張機能があったら嬉しいのだけど、Greasemonkey や Tampermonkey (Chrome 用) みたいなのを使うまでもないか？と思い、まずはやってみた。

Stylish に新規スタイルを作り、以下のようにコーディング。

/* 画像を含め要素を非表示にする */
img,    /* 画像 */
embed,  /* 動画 */
#new_post_buttons,       /* 新規投稿部分 */
#right_column,           /* 右カラム */
#sidebar_footer_nav,     /* 右下フッタ */
.l-header-container,     /* ヘッダ */
.post_avatar_wrapper,    /* 投稿者アイコン */
.post_header,            /* 投稿者名 */
.popover,                /* ユーザ名フォーカス時の PopOver */
.post_media,             /* メディア投稿 */
.photoset,               /* 写真セットの投稿 */
.external-image-wrapper, /* External Image */
.safemode,               /* セーフモードの案内 */
.post_tags,              /* ポスト内タグ */
.post_notes,             /* リアクション */
.post-control-icon.share,  /* 共有アイコン */
.post-control-icon.reply,  /* 返信アイコン */
.post-control-icon.like,   /* ライクアイコン */
.standalone-ad-container,  /* 広告ポスト */
.post-margin,        /* リブログ時の投稿者アイコン */
.source-field,       /* リブログ時のオプション */
.caption-field,      /* リブログ時のオプション */
.post-form--footer,  /* リブログ時のフッタ */
.views,              /* リブログ時のテキスト追記部分 */
.rapid-recs,         /* その他の素晴らしい投稿 */
.post[data-tumblelog="neos21"]  /* 自分の投稿を非表示にする */
{ display: none !important; }

/* 1カラム風にする */
body { overflow-x: hidden !important; overflow-y: scroll !important; }
.l-container, .left_column, .post { width: auto !important; }
.l-container { max-width: 800px !important; }
#posts.posts { margin: 0 !important; }

/* リブログ窓をコンパクトに */
.post-content-text { height: 100px !important; overflow: scroll !important; }

/* テキストサイズを均一に */
.post_wrapper   *,  /* ポスト */
.post-container *   /* リブログ時のプレビュー */
{ font-size: .9rem !important; }

そして「適用先」で「ドメイン上の URL」を選び、「tumblr.com」を追加する。

コレで、Tumblr にログインした後のダッシュボードを画面中央に1カラムで配置し、全ての画像を非表示にできた。

一番大事なのは img { display: none !important; } だけで、あとはオマケ。

1カラム風にするための処理はもう少し詰められそうだが、やりたいことはできたのでいいや。「共有」や「ライク」などのアイコンなども非表示にしているが、ココは各自のお好みで。

.post[data-tumblelog="MY_USER_ID"] という指定の仕方で、自分のリブログを非表示にしているが、コレを応用して常に非表示にするユーザを指定することもできるだろう。

いわずもがな、これらは CSS で非表示にしているだけ、裏では当該ポストも読み込まれていることに注意。