拡張機能「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でボタンが表示されない」というのを見かけるのですが、この更新で修正されたら良いなと思っています。されなかったらご連絡下さい。

連絡先

　何かあれば

• このブログか、
• Twitter: hogas (@hogextend) | Twitter

にお伝え下さい。

似た拡張機能の紹介

• Twitter 原寸びゅー

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

• Twitter, Download Original Image

　右クリックで保存だけしたい！方はこちらをどうぞ(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だったとしても、MouseEventのclickとは区別されるようになった、のだろうと思う(詳しい方よろしければお教えください)。

環境

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

状況

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

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

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

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

MDN

　CustomEvent() - Web APIs | MDN も MouseEvent() - 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:寸分違わず同じかどうかはわからない。

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

　GoogleChrome拡張機能「twitter画像原寸ボタン」ver.2.0.5を公開しました(詳細は以下の記事)。
hogashi.hatenablog.com
　これに伴って、Greasemonkey/Tampermonkey用のスクリプト「twitter画像原寸ボタンforGreaseTampermonkey」ver.2.0.5を公開しました。

　これによって、Firefoxにもちゃんと(？)対応しました。これでChrome/Firefox/Operaには対応できたことになります。
　以下の方法でインストールを行ってください。
　なお、Chromeで使えていた拡張機能の設定(タイムラインでボタンを表示するかどうか、などのチェックボックスのアレ)は、Firefoxの方法では使えません。すべての機能がオンになります(詳しくは後述)。

目次

各ブラウザについてのインストール方法

Firefox

　FirefoxはGreasemonkey/Tampermonkeyどちらも存在するので、どちらでもOKです。

• Greasemonkey: Greasemonkey :: Add-ons for Firefox
• Tampermonkey: Tampermonkey :: Add-ons for Firefox

　(追記:) TampermonkeyはFirefox44.0に非対応なようで、インストールができなくなっていました。Greasemonkeyをお使いください。

　その後、スクリプトのリンク(以下のいずれか)をクリックします(どちらも内容は同じです)。
GitHub: tooi-forGreaseTamperMonkey.user.js - GitHub
Hogashi(個人サイト): tooi-forGreaseTamperMonkey.user.js - Hogashi

Opera

　OperaはChromeの拡張機能をそのまま使うことが出来ます。

　まず以下からDownload Chrome Extensionをインストールします。
拡張機能「 Download Chrome Extension」 - Opera アドオン

　次にChromeウェブストアからtwitter画像原寸表示をインストールします。
twitter画像原寸ボタン - Chrome Web Store

Chrome

　Chromeウェブストアからインストールするのが良いと思います。
twitter画像原寸ボタン - Chrome Web Store

　ただ、Tampermonkeyも存在するのでそれを使うことも出来ます。
Tampermonkey - Chrome ウェブストア
　この場合はFirefoxと同様に次のいずれかのリンクをクリックしてインストールします(どちらも内容は同じです)。
GitHub: tooi-forGreaseTamperMonkey.user.js - GitHub
Hogashi(個人サイト): tooi-forGreaseTamperMonkey.user.js - Hogashi

設定機能について

　Chromeでは設定機能が使えたのですが、Grease/Tampermonkeyを使うと設定機能が使えません。
　ただし、少し面倒ではありますが、自分でソースコードに手を加えるという方法があります。複雑ではないので、やろうと思えば簡単です。

Greasemonkey(Firefox)

　まず、

• 右上の横棒三本メニューから「アドオン」をクリックするか、
• アドレスバーに「about:addons」と入力する

と、左のバーに猿のアイコンがありますが、それがGreasemonkeyのスクリプト管理ページです。これをクリックします。

　「twitter画像原寸ボタンforGreaseTampermonkey」というスクリプトがインストールされているので、「設定」→「このユーザスクリプトを編集」とクリックします。

　すると新しいウィンドウでスクリプトの内容が表示されるので、これを編集します。

　編集する場所は以下(15行目～22行目)です。

// 設定項目の初期値は「有効」
// 設定を変えるにはここを「無効」にする
// 有効: 'istrue', 無効: 'isfalse'
var options = {
	// タイムラインにボタン表示
	'SHOW_ON_TIMELINE': 'istrue',
	// ツイート詳細にボタン表示
	'SHOW_ON_TWEET_DETAIL': 'istrue',
	// Enterキーで原寸を開く
	'OPEN_WITH_KEY_PRESS': 'istrue'
};

　コメント文にもある通り、項目を有効にする場合は'istrue'、無効にする場合は'isfalse'と入力します。
　例えば「タイムラインにボタン表示」の機能をオフにしたい場合、次のようになります。

// 設定項目の初期値は「有効」
// 設定を変えるにはここを「無効」にする
// 有効: 'istrue', 無効: 'isfalse'
var options = {
	// タイムラインにボタン表示
	'SHOW_ON_TIMELINE': 'isfalse',
	// ツイート詳細にボタン表示
	'SHOW_ON_TWEET_DETAIL': 'istrue',
	// Enterキーで原寸を開く
	'OPEN_WITH_KEY_PRESS': 'istrue'
};

Tampermonkey(Chrome)

　右上にあるTampermonkeyのアイコン(黒い四角に丸2つ)をクリックして、「ダッシュボード」をクリックします。
　「twitter画像原寸ボタンforGreaseTampermonkey」をクリックすると編集画面になるので、上のGreasemonkey(Firefox)と同じように編集してください。

スクリプトの中身

　2つのスクリプトのリンク先の内容は、それぞれ以下で見ることが出来ます。インストールの前に確認したい方はどうぞ(どちらも内容は同じです)。

GitHub: twitterOpenOriginalImage/tooi-forGreaseTamperMonkey.user.js at master · hogashi/twitterOpenOriginalImage · GitHub
Hogashi(個人サイト): http://hogas.moe/tooi-forGreaseTamperMonkey-user-js.html

結び

　不具合や疑問点などありましたらお寄せください。
hogas (@hogextend) | Twitter

(2017/03/06 02:44編集)個人サイトを停止中なので打ち消しを入れました。