hogashi.*

日記から何から

拡張機能「twitter画像原寸ボタン」ver.2.1.2公開

 拡張機能twitter画像原寸ボタン」ver.2.1.2です。
 先日のver.2.1.1で修正した部分でバグが出たので更に修正をしました。

 使い方などは2.1.1の記事(下リンク)を参照してください。ここには更新内容について書きます。

hogashi.hatenablog.com

更新内容

 「リンクを共有ページでEnterが効かない」問題を報告頂いたので、それを含めて画像が無い場合はEnterの本来の動作を止めないよう修正しました。

 DM、リンク共有ページなどで改行などができなかった問題が改善されます。
 設定で「Enterキーで画像を開く」をOFFにして対策をしていた場合は戻してOK(なはず)です。

 まだ修正できてないとか、新しく変になったとかありましたらお伝え下さい。

雑記

 今回のバグは完全に盲点で(僕が共有などをあまり使わないのが大きいですが)、地味に不便なバグでした。

 コードのお話としては、修正にあたって、ドメインtwitter.com(manifest.jsonで振り分けできない)だしDOM構造は(おそらく)似ていて、色々判別するのが大変だと思うので、例外処理の判別式は変えませんでした。
 というかそもそも処理手順をミスっていて、「ブラウザ本来の挙動を取りやめる」処理をするのが早すぎていました。画像のURLが取得できなかったら、その処理は行うべきではありません(ブラウザ本来の挙動をさせてあげるべき)でした。なのでそこだけ変更しました。

拡張機能「twitter画像原寸ボタン」ver.2.1.1公開

 拡張機能twitter画像原寸ボタン」ver.2.1.1を公開しました。

 更新内容は、真ん中あたりに書きました。何が変わったの?が知りたい方はどうぞ。

 求める権限に「閲覧履歴の読み取り」がありますが、閲覧履歴を読み取ることはしていません
 ※タブ間の設定共有のために、タブ操作の権限を使っていて、それが「閲覧履歴の読み取り」と表示されています。公式ドキュメント: chrome.tabs - Google Chrome

インストール

Chromeウェブストア:

Grease/TamperMonkey(リンクをクリックでインストールが始まります):
tooi-forGreaseTamperMonkey.user.js


上記2つはGitHub上で公開しています。
GitHub - hogashi/twitterOpenOriginalImage: is a GoogleChrome extension which opens original image to new tab.

概要・使い方

 Twitter公式Web/TweetDeckで、画像ツイートに原寸表示用ボタンを設置する拡張機能です。

1. Twitter公式Webの

  • タイムライン
  • ツイート詳細
  • 画像ギャラリー

と、TweetDeckの

  • タイムライン

で、「Original」と書かれたボタンを設置します

 Originalボタンをクリックすると、原寸画像が別タブで開きます
 ※原寸画像とは……画像URLに「:orig」を足すだけです。

 複数画像は、1枚目がアクティブなタブとなって枚数分タブが開きます。

2. Twitter公式Webのツイート詳細では、Enterキーでも原寸を別タブで開けます

3. 画像を開いたページ(URLが「https://pbs.twimg.com/~」)では、[Ctrl]+[s](または[Cmd]+[s])で拡張子を校正して保存します
 ※保存先は、Chromeの設定「ダウンロード保存先」で指定された場所です。

表示/動作設定

 Chrome右上の拡張機能のボタン(もしくはChrome拡張機能一覧から拡張機能のオプション)で、設定画面が開きます。

 各種動作をする/しないを選び、「設定を保存」をクリックすると設定が保存されます
 ※ページを再読み込みしないと反映されないと思います。

更新内容

  • TweetDeckタイムラインでボタンが表示されない問題を修正した(設定でcolumnをnarrowにしても表示されるようにした)
  • 画像ページ(URLが「https://pbs.twimg.com/~」)で保存できない問題を修正した
  • [Ctrl]+[s]と[Cmd]+[s]両方で画像の拡張子を校正するようにした
  • 画像の拡張子校正をスムーズにした
  • 設定画面をマテリアルデザインっぽくした
  • ボタンにフォーカスがあるときEnterを押しても2タブ開かないよう(1タブに)修正した
  • TweetDeckで動画ツイートにボタンをつけないようにした
  • 使うメモリを減らすべくbackground pagesをevent pages形式にした
  • ~Monkey用のuserjsをver.2.1.1に更新した

 ちらほらと「TweetDeckでボタンが表示されない」というのを見かけるのですが、この更新で修正されたら良いなと思っています。されなかったらご連絡下さい。

連絡先

 何かあれば

にお伝え下さい。

似た拡張機能の紹介

 別タブなんて煩わしい!とか、一気に保存したい!という方はこちらをどうぞ。
furyu.hatenablog.com

 右クリックで保存だけしたい!方はこちらをどうぞ(Chromeウェブストア)。
chrome.google.com

その他・雑記

 これからTweetDeckのツイート詳細や画像ギャラリーにゆったりと対応していきたいと思っています。
 GitHubのREADMEも古いので書き直したいです。

GoogleChrome拡張機能「twitter画像原寸ボタン」とChrome53

 Chrome53がリリースされましたが、伴ってGoogleChrome拡張機能twitter画像原寸ボタン」ver.2.1 の一機能が止まった報告です。

 この修正を含んだ更新は、近々行います。

状況

 Chrome53において、twitter画像原寸ボタンver.2.1の「[Ctrl-s]時に画像の拡張子を校正する」機能が止まりました
 原因は(ご指摘を受け)判明したので、次の更新(近々します)で修正予定です。

 これによって、[Ctrl-s]を押しても保存がされなくなっています。ブラウザ本来の保存動作も動きません。

 Chrome52では動作します。

一時策

 マウスで画像を右クリックして「名前を付けて画像を保存」を使えます。

 [Ctrl-s]については、「[Ctrl]+[s]で拡張子を校正」設定をオフにすると、ブラウザ本来の保存動作がされます。
 ただ、拡張機能が更新されたら戻してください。(やっぱりブラウザ本来の動作が良い!となったら戻さずOKです。)

 更新のお知らせはブログで記事を書くくらいになります。

原因

 今のところの原因(?)については前記事に書きました(正しいかどうかはわかりません……)

hogashi.hatenablog.com

Chrome53でnew CustomEvent('click')がマウスクリックじゃなくなった?

 GoogleChromeをバージョン 53.0.2785.89 mにアップデートしたら、new CustomEvent('click')がマウスクリックの挙動をしなくなった*1

結論?

 先に考えたことを書くと、CustomEvent - Web APIs | MDN によればCustomEvent

The CustomEvent interface represents events initialized by an application for any purpose.

イベントを勝手につくるためのものだから、CustomEventでつけたイベント名がclickだったとしても、MouseEventclickとは区別されるようになった、のだろうと思う(詳しい方よろしければお教えください)。

環境

OS: Windows7
Chrome: バージョン 53.0.2785.89 m

状況

 対象のエレメントelemに対して、クリックイベントを起こしたい。

elem.dispatchEvent(new CustomEvent('click'));

 これがChrome52ではクリックイベントとして動いていたのだけれど、Chrome53から動かなくなった。戻り値はtrueなのだけど、見た目には何も起こっていない状態。

 ちなみに、new MouseEvent('click')を使うと、ちゃんとクリックされた挙動が起こる*2elem.click()でも起こる。

MDN

 CustomEvent() - Web APIs | MDNMouseEvent() - Web APIs | MDN も健在だが、後者のブラウザ対応状況では Safari の Basic support に「?」がついている。

結び

 これからはclickにはMouseEventを使います。

*1:自分が書いたコードに指摘を頂いた(ありがとうございます)。

*2:*1に同じ

 なんとなく、大学数学を勉強するごとに、今まで習ってきた数学を俯瞰するみたいに(一般化されて)見方が変わるように感じている。それはそうと今日は勉強していた訳でなく、単に人に数学の話をしていたら突然それが起こって驚いた。

 複素関数の話を、「y=f(x)」くらいならわかる人に説明しようとしていたところ、「複素数が関数で映る?みたいな言い方をされるんだけど」とかいうふんわりした言葉で喋っていたらわからんみたいな顔をされていた。とにかくわかる概念から理解していかないといけないのでy=f(x)で説明しようとしたら、「数直線上のxってのがfって関数でyに映る」とかいう自分も聞き覚えのない考え方がスラスラ口から出てきた。聞き手はわかってくれたようでよかったんだけど自分はびっくりながら話を続けていて、「複素数は実数にひとつ次元が足されるから数直線じゃ表せなくて平面になって、平面から映った先も平面だからいっこで表すにはy=f(x)の座標平面みたいな2次元じゃ無理*1で」とかどんどん喋っていた。
 つまり「数直線上の実数xを関数で映した先の数直線上の値がy」という考え方が会話の中で湧いて出た。「y=f(x)のグラフはその映る前と映った先の点(無限個)を結んだ、映る前後の関係性を表すもの」とかいう言葉も出てすごかった。

 複素関数の理解が若干追いついてなかったところだったので今日の会話で助かった。会話できる頭を維持していきたい。

*1:2次元と2次元で4次元グラフになるのだろうか

GoogleChrome拡張機能「twitter画像原寸ボタン」ver.2.1

[追記(2016/08/28)]: ver.2.1はすっかり公開してました。もうすぐver.2.1.1を公開するので、そちらへどうぞ。

――――

 GoogleChrome拡張機能twitter画像原寸ボタン」ver.2.1を(そろそろ)公開します。
 前回のミス(ブログ書く前に更新しちゃうやつ)を繰り返しそうなので取り急ぎ書いています。

 今回、TweetDeckに少し対応しました。その影響でおそらく「tweetdeck.twitter.comのなんとか許可」みたいなことを聞かれると思います。
 また、画像を表示したページ(pbs.twimg)での保存の挙動に挑戦しています。これも「pbs.twitter.comのなんとか許可」とか聞かれるかもしれません。

 詳しくは後日書きますが、おおまかな更新を書きます。

更新内容(簡易版)
  • TweetDeckのタイムラインにOriginalボタンを追加

 クリックで原寸画像を新しいタブに開きます。

  • 画像を開いたページ(pbs.twimg)での保存動作の改善

 [Ctrl] + [s] での保存で「.jpg-orig/.png-orig」ではなく「.jpg/.png」で保存するようにしました。


 あまり保存を主目的としないつもりでいるので、直感的に正しい挙動になるくらいを目指しています。

 monkey系は追って更新します。

増えるファイルを古い順に削除して一定数に保つbashスクリプト

 もっといい方法がありそうだけど思いついてちょっと面白かったので備忘録。

目的
  • ファイルが同じ階層に不定期に増えていくので、その総数を100に保つ
  • 100を超えたら古いファイルから削除する
 # 最初
content/ -+- 001.txt
          `- 002.txt

 # 総数が100を超える
content/ -+- 001.txt # <- 削除
          |- 002.txt
          |...
          |- 100.txt
          `- 101.txt

 # 総数が103のとき
content/ -+- 101.txt # <- 削除
          |- 102.txt # <- 削除
          |- 103.txt # <- 削除
          |- 104.txt
          |...
          |- 202.txt
          `- 203.txt

 これをするスクリプトを毎日1回cronで実行する。

方策

 lsしてtailしてrmに渡す。

rm `ls -t content/* | tail -n+101`

 これだけだとファイルが100を超えていないときrmに何も渡されずエラーになるので、渡すファイルがあるか確認する。

[ -n "`ls -t content/* | tail -n+101`" ] && rm -v `ls -t content/* | tail -n+101`
# 以下でもok、[ hoge ] は test hoge と置き換え可能
if test -n "`ls -t content/* | tail -n+101`";then
  rm -v `ls -t content/* | tail -n+101`
fi
解説
rm `ls -t content/* | tail -n+101`

 バッククォートの中身は次。

  • 「ls -t」: ファイルを更新日時順に表示(下が古い)
  • 「tail -n+101」: 101行目から末行までを表示(頭行から100行目までカット)

 これでrmに「『100番目に新しいファイル』より古いファイル」を渡せる。つまり最新100個だけ残して古いものを削除する。

 ちなみにバッククオートの外側をダブルクォートしてはいけない。してしまうと引数が1つに固まってしまい、「rm: `content/002.txt\ncontent/001.txt' を削除できません: そのようなファイルやディレクトリはありません」とか言われる。
 「content」ではなく「content/*」とするのは、lsの出力が

  • 前者では「001.txt 002.txt ...」

とファイル名だけなのに対して

  • 後者では「content/001.txt content/002.txt ...」

相対パスが含まるので、rmにそのまま渡せるから。

[ -n "`ls -t content/* | tail -n+101`" ] && rm `ls -t content/* | tail -n+101`
  • 「[ -n "`~`" ]」: 「[」コマンド。角括弧の中に条件式を入れる。「-n」は「文字列の長さが0より大きければ真」つまり「101個以上ファイルが存在したら真」となる
  • 「&&」: 直前の式が真のとき次の式を実行する

 角括弧の内側はそれぞれ空白を空けなければならない。これは「[」がコマンドだからという理由らしい。
 条件式の部分ではバッククォートの外側をダブルクォートしなければならない。しないと、常に真が返ったりする*1

# 以下でもok、[ hoge ] は test hoge と置き換え可能
if test -n "`ls -t content/* | tail -n+101`"; then
  rm `ls -t content/* | tail -n+101`
fi
  • 「test -n "`~`"」: 角括弧と代替可能なtestコマンド*2
結び

 やることがワンラインで書けるならそのままcronに書けて便利。ただし「&&」はOKだけど「;」は使えないので、いくら1行に書いたからといってifが使えるというわけではない。
 あとcronの実行環境は全然違ったりするので環境変数はじめ色々気をつける点が多い。「bash -l コマンド」とか書くとbash環境下で実行してくれる。

*1:「[ ! -z `~` ]」だとクォートしなくても思い通りの真偽が得られる。何故なのか……。

*2:寸分違わず同じかどうかはわからない。