おれ かきすてる おまえ よむ

ぶんたい いろいろ いちにんしょう ばらばら でも それでいい きにするな おまえ つよくいきろ それでいい

PocketのArticle Viewを無効にしたりするCSS

proxomitron

いわゆる「あとで読む」系サービスの一つであるRead it LaterがPocketへ改名し、ついでにPC版のUIが大幅に変更されたりしたのは2年ほど前だった気がするが、この新UIが非常によろしくない、とにかく使いづらくて仕方ない。新UIにはいわゆる「アーティクルビュー」、ウェブサイトのテキスト部分を抜き出してなんか読みやすい風に整形して表示してくれる機能が統合されたのですけど、これが嫌いなんですよ僕は本当に嫌い。

つまり、Read it Later時代の旧UI(ログインしていれば一応今でも使える)と同じように、とにかく普通にURLを開いてくれればそれでいいのだけど、その辺りの挙動を設定でアレできるようにとかしてくれる気配はなさそうなので、CSSをいじって強引に実現して、ついでにStylish用のthemeとして公開しました。どうぞご利用ください。

つかいかた

このthemeは、Pocketの新UIに以下のような改造を施す。

  1. アイテムのどこをクリックしても強制的にオリジナルページを開く
  2. 以下の位置に、デフォルトよりも押しやすくて気持ちいい「アーカイブ」ボタンを追加する
    • リストビューモードの場合 : 左側の四角いサムネイル部分
    • グリッドビューモードの場合 : 各アイテムの右上カド部分

具体的に言うと、下図の枠で囲まれた赤いエリアをクリックすれば、必ずオリジナルページが開く(これは説明用のスクリーンショットで、実際にはこのような枠線や色は表示されない)。これにより、「アーティクルビュー」の機能は一切使えなくなる。

f:id:Sizuken:20140604145424p:plain

もうひとつ。読み終えたアイテムをリストから排除するのにアーカイブボタンを良く押すと思うが、これを押すためにいちいち大きく右側へマウスを振って小さな小さなアーカイブボタンを探してaimするという現在のUIは紛れもなくクソであるので、左側のサムネイル部分を巨大アーカイブボタン化した。右側のボタンも生きているので、好きな方を使える。

f:id:Sizuken:20140604150024p:plain

この改良はほんと快適すぎて超マジ半端なくすごいので是非とも皆さんに試していただきたいと思っております。

なお、今のところタイルビューモードには対応していない。使ったことないので。対応した方が良さそうだったらコメントとかいただければそのうちアレかも。→対応しました！

Proxomitronフィルタ版

Stylishでいけるということは要するにPure CSSなので、Proxomitronフィルタとして使いたいというまるで私のように奇特な方々は次のような形でフィルタを作ると良い。

[Patterns]
Name = "Pocket (RIL) | Article-View killer PLUS 20140610"
Active = TRUE
URL = "getpocket.com/a/(queue|favorites|archive)/ $TYPE(htm)"
Limit = 7
Match = "</head>"
Replace = "</head>"
          "<style type="text/css">"
          "a.original_url:hover {"
          "  text-decoration: none !important;"
          "}"
          ""
          "a.original_url::before {"
          "  display: block;"
          "  content: "";"
          "  width: 840px;"
          "  height: 80px;"
          "  position: absolute;"
          "  top: -50px;"
          "  left: -30px;"
          "}"
          ""
          "li[tiletype] a.original_url::before {"
          "  width: 580px;"
          "  height: 257px;"
          "  top: -232px;"
          "  left: -37px;"
          "}"
          "li[tiletype="wide_split"] a.original_url::before {"
          "  left: -340px;"
          "}"
          ""
          "li .action_mark a::before,"
          "li .action_mark a::after {"
          "  display: block;"
          "  content: "";"
          "  width: 93px;"
          "  height: 80px;"
          "  position: absolute;"
          "  left: -751px;"
          "  top: -20px;"
          "  opacity: 0;"
          "  background-color: rgba(0,0,0,0.5);"
          "}"
          "li .action_mark a::after {"
          "  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjQ4IiBoZWlnaHQ9IjQ4IiB2aWV3Qm94PSIwIDAgNDggNDgiPjxwYXRoIGQ9Ik00MiAxMHEwLjg1OSAwIDEuNDMgMC41N3QwLjU3IDEuNDNxMCAwLjg0NC0wLjU3OCAxLjQyMmwtMjQgMjRxLTAuNTc4IDAuNTc4LTEuNDIyIDAuNTc4dC0xLjQyMi0wLjU3OGwtMTItMTJxLTAuNTc4LTAuNTc4LTAuNTc4LTEuNDIyIDAtMC44NTkgMC41Ny0xLjQzdDEuNDMtMC41N3EwLjg0NCAwIDEuNDIyIDAuNTc4bDEwLjU3OCAxMC41OTQgMjIuNTc4LTIyLjU5NHEwLjU3OC0wLjU3OCAxLjQyMi0wLjU3OHoiIGZpbGw9IiM4MGU3YjQiPjwvcGF0aD48L3N2Zz4=) center no-repeat;"
          "  background-size: 90%;"
          "}"
          "li .action_mark_archived a::after {"
          "  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjQ4IiBoZWlnaHQ9IjQ4IiB2aWV3Qm94PSIwIDAgNDggNDgiPjxwYXRoIGQ9Ik0yNCA0cTAuODI4IDAgMS40MTQgMC41ODZ0MC41ODYgMS40MTR2MTZoMTZxMC44MjggMCAxLjQxNCAwLjU4NnQwLjU4NiAxLjQxNC0wLjU4NiAxLjQxNC0xLjQxNCAwLjU4NmgtMTZ2MTZxMCAwLjgyOC0wLjU4NiAxLjQxNHQtMS40MTQgMC41ODYtMS40MTQtMC41ODYtMC41ODYtMS40MTR2LTE2aC0xNnEtMC44MjggMC0xLjQxNC0wLjU4NnQtMC41ODYtMS40MTQgMC41ODYtMS40MTQgMS40MTQtMC41ODZoMTZ2LTE2cTAtMC44MjggMC41ODYtMS40MTR0MS40MTQtMC41ODZ6IiBmaWxsPSIjODBlN2I0Ij48L3BhdGg+PC9zdmc+) center no-repeat;"
          "  background-size: 0;"
          "}"
          "li .action_mark a:hover::before,"
          "li .action_mark a:hover::after {"
          "  opacity: 1;"
          "  transition: background-size 0.15s cubic-bezier(0.575, 0.000, 0.385, 1.410);"
          "  background-size: 48px;"
          "}"
          ""
          "li[tiletype] .action_mark a::before,"
          "li[tiletype] .action_mark a::after {"
          "  width: 140px;"
          "  height: 140px;"
          "  top: -300px;"
          "  left: 100px;"
          "}"
          "li[tiletype] .action_mark a:hover::before,"
          "li[tiletype] .action_mark a:hover::after {"
          "  transition-property: all;"
          "  transition-delay: 0.1s; "
          "}"
          "li[tiletype] .action_mark a::before {"
          "  -webkit-transform: rotate(-45deg);"
          "  transform: rotate(-45deg);"
          "}"
          "li[tiletype] .action_mark a::after {"
          "  top: -315px;"
          "  left: 115px;"
          "  background-position: left bottom;"
          "}"
          "</style>"

あと、オリジナルページを開く際には必ずPocketのリダイレクトURLを間に挟むので、レスポンスがよくない。Proxomitronユーザであればヘッダフィルタですっ飛ばしてやると若干気持ちよくなると思う。もし「URL: URLControl (out)」ヘッダフィルタで行う場合は、URLControlリストに以下の記述を追加する。

#Pocket redilector skipper
$URL(http://getpocket.com/redirect\?url=\0)$JUMP($UESC(\0))


ProxomitronはWindowsであればブラウザに依存しないしDropbox上にでも置いておけば様々な環境で同期してくれて本当に神のようなアプリケーションなので、古くて更新もされないソフトだけど(作者が亡くなってずいぶん経つからね)、みんなもっと使えばいいよ！