Corredor

ウェブ、プログラミングの勉強メモ。

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="mg360s"]  /* 自分の投稿を非表示にする */
{ 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 で非表示にしているだけ、裏では当該ポストも読み込まれていることに注意。

ゼロからはじめる tumblrスマートガイド

ゼロからはじめる tumblrスマートガイド

tumblrデザインカスタマイズガイド

tumblrデザインカスタマイズガイド