風柳メモ

ソフトウェア・プログラミング関連の覚書が中心

【アマゾン注文履歴フィルタ】確定申告にも便利かも？！ アマゾン(Amazon.co.jp)の領収書をまとめて表示する拡張機能／アドオン／ユーザースクリプト


■お知らせ
2020年12月下旬より、アマゾン注文履歴フィルタが突然使えなくなったというご報告をいただいており、調査したところ、今後使用できないユーザーの方が増えていく可能性が高いです。
詳しくは下記の記事をご参照ください。
memo.furyutei.work


漫画家の方などが、確定申告用にアマゾン（Amazon.co.jp）の注文履歴から Kindle を検索して領収書を個別に表示・印刷するのが手間がかかる、というようなことを Twitter でつぶやいておられたので、まとめて印刷出来たら少しは楽かな？と思い、スクリプトを書いてみました。
デジタルコンテンツ（Kindle等）以外でも、注文履歴に表示されるものについては対応しています。
2018/02/12現在、印刷(PDF出力)する他にも、注文履歴のCSVダウンロード機能がつき、データとしてより扱いやすくなりました。
また、お届け先やキーワードによる絞り込みなど、フィルタ機能も当初よりも充実しています。

PC 用ブラウザ向けの拡張機能／アドオン／ユーザースクリプトであり、Google Chrome／Firefox Quantum （ユーザースクリプトは Tampermonkey）上で動作確認しています。
拡張機能版は、Vivaldi、および、Opera＋Install Chrome Extensionsでも動作する模様。
なお、MS-Edgeでは、拡張機能版／ユーザースクリプト版共に正常に動作せず（2018/02/05現在）。
→2018/02/06現在、拡張機能版は一応 MS-Edge でも動作するようになりました（でも重いです）。GitHubからソース一式をダウンロードして、後はこちらの記事を参考にしてやれば、試すことはできると思います。なお、ユーザースクリプト(Tampermonkey)版は依然として動作しません。

インストール

Chrome 拡張機能版（Google Chrome／Vivaldi／Opera＋Install Chrome Extensions対応）

chrome.google.com

より、[+CHROME に追加] ボタンを押してインストール。
ボタンの名称はブラウザによって異なります（[+（ブラウザ名）に追加]）。

Firefox Quantum アドオン版（WebExtensions）

addons.mozilla.org

より、ページ上に表示されている [+ Firefox へ追加] ボタンを押してインストール。

ユーザースクリプト（Tampermonkey）版（Firefox／Google Chrome対応）

Firefox＋Tampermonkey、Google Chrome＋Tampermonkeyの環境で、

amzOrderHistoryFilter.user.js：アマゾン注文履歴フィルタ ・ユーザースクリプト版

GitHub - furyutei/amzOrderHistoryFilter: アマゾン(amazon.co.jp)の注文履歴を月別表示したり、月別もしくは通年の領収書をまとめて表示・印刷したりできるようになります。

をクリックし、指示に従ってインストール。

使い方

インストール後、注文履歴を表示し、対象となる年を選択します。
動作するのは、年を選択した場合だけです。「過去6カ月間」「過去30日間」では動作しませんので、ご注意を。→バージョン 0.1.0.1101 より、「過去6カ月間」「過去30日間」にも対応済。
すると、対象月を選択するためのプルダウンメニュー、および絞り込み用チェックボックスが表示されます。

対象月を選択すると、該当する注文一覧が表示されます。
表示されるまでに読み込みに時間がかかることがあります。


[領収書印刷用画面]ボタンを押すと、別タブが開き、対象となる注文の領収書を読み込みます。
ログインを行った後、領収書の読み込みが開始されます。
「☑デジタル」「☑デジタル以外」の両方にチェックしている場合、それぞれは別々のタブに開きますので、ご注意願います。

追記

バージョン0.1.0.1901以降、[領収書印刷用画面]ボタンは、デジタルとそれ以外の2つに分離しています。

なお、両方のタブで同時に読み込みを行うと、表示されていない方の処理が遅くなってタイムアウトする等の不都合が発生する場合があります。
片方にログインして読み込みが完了してから、もう片方にログインして読み込みすることをお勧めします。


領収書の読み込みが完了するまでお待ちください。
対象となる注文の数が多いほど、読み込み時間も長くなります。


読み込みが完了すると、同じページ内に複数の領収書がまとめて表示されます。
各領収書は横罫線で区切られ、便宜上のNo.が振られます。No.は個別領収書へのリンクになっています。
印刷時には、横罫線は表示されず、改ページとなります。また、No.リンクも非表示となります。

これで、ブラウザの機能により（「このページを印刷してご使用ください」リンクをクリックするか、[Ctrl]+[P]を押します）

複数の領収書がまとめて印刷できます。
Firefox では、この方法ではプレビューは表示されません。プレビューを表示したい場合、右上のメニュー（≡）→「印刷...」とします（もしくは、アドオン版0.1.0.601以降で追加された、[印刷プレビュー]ボタンを押してください）。
まとめて印刷する関係上、ヘッダがあると 、URL 等の項目が領収書と一致しなくなってしまいますので、気になる場合にはヘッダ・フッタを印刷しないようにした方が良いでしょう。
また、白紙が出力される場合には、印刷プレビュー画面の設定で、余白を減らしたり、Firefoxの場合は「拡大／縮小(S)」から「用紙に合わせて縮小」を選択するなどして、調整してください。

Google Chrome では、印刷プレビュー画面左上にある「送信先」を「PDF に保存」に変更すると、印刷する代わりに PDF ファイルとして出力することができます。
後で見直したり、必要なものだけを印刷したりする場合には、PDF に保存しておいた方が便利かもしれません。

FIrefox では、標準では PDF で保存する機能は無いようですので（当方が知らないだけかも知れませんが）、別途そのためのアプリが必要になります。
Windows 10 の場合には、標準でサポートしている「Microsoft Print to PDF」を使うのが簡単です。

無料のものだと、
www.cube-soft.jp
といったものがあるようです。

バージョンアップにより追加された機能はこちら

注文履歴のCSVダウンロード機能やフィルタ機能の強化など、より使いやすく便利になっていますので、ご活用ください。

注意事項・制限事項

本拡張機能／アドオン／ユーザースクリプト（以下、本ソフト）による表示や出力は、あくまでアマゾンより注文履歴等として表示されるページ（HTML）を独自に解析・表示しているものであるため、

  • そもそもアマゾンより提供されていないデータについては、取得や表示することはできません
  • 作者が利用していない（確認できない）品目やサービス、もしくは想定していない状況等により、正しくデータを取得・表示できない場合があります
  • ページ構造に変化があった場合には出力ができない／必要なデータが取得・表示できなくなることがあります
未対応の注文について

本ソフトでは、アカウントサービス＞注文履歴の「注文」タブにより表示され、領収書／購入明細書を発行可能な注文にのみ対応しています。

2018年3月現在、Kindle Unlimited / Music Unlimited については、本ソフトでは未対応です（表示／出力することができません）。
2020年3月現在、"Kindle Unlimited Subscription" については表示されるようになった模様。

また、プライム（Prime）会員費についても未対応です。他にも同様のものがあると考えられます。

これらについては、注文履歴右上のフォームを用いて[注文を検索]することにより表示することができます。

お手数ですが、
https://www.kimukuni.info/archives/56117www.kimukuni.info
memo.hanielu.com
といった記事を参考に、手動で表示するようにしてください。

免責事項（念のため）

ご利用の際には全て自己責任でお願いします。
不具合があったり、使用した結果等により万一何らかの損害を被ったりした場合でも、作者は一切関知いたしませんので、悪しからず。

データとして正確（正式）なものが必要な個人事業主や会社の方等は、Amazonビジネス


を利用するのがよいでしょう。

Amazon 等の通販サイトとの連携機能のある、
www.freee.co.jp
biz.moneyforward.com
www.yayoi-kk.co.jp
といったオンライン会計ソフトの使用もお勧めです。

お問い合わせ先

お問い合わせやご要望などありましたら、この記事のコメント欄か、[twitter:@furyutei]までお願いします。
不具合報告やご要望などは、GitHubのIssuesへもどうぞ。

「気に入った！」のお気持ちは、ギフト券で！

せっかくのアマゾン用の拡張機能／アドオンなので(笑)、「気に入った」「役に立った」と思われたら、いくらかでも Amazon ギフト券で頂けると、大喜びします！

Amazonギフト券(Eメールタイプ)

  • 受取人メールアドレス：「furyutei@gmail.com」
  • メッセージで何かひとこといただけると嬉しいです


贈り方は、

Amazonギフト券Eメールタイプとは？使い方を写真付で解説

等をご参照ください。

開発経緯

Twitter 上で、


のようなツイートを見かけたことがきっかけです。

もっとも、自分自身は確定申告の経験が無いため、これで役に立つのかどうかは不明です(苦笑)。

オチ


野間美由紀さんはMacユーザーで、Safari を使っていらっしゃるため、Chrome も Firefox も入れていない模様……。
うーん、Safari 用 Tampermonkey を入れれば、ユーザースクリプト版がもしかしたら動作するかもしれないのですが、手元に Mac が無いので試せないのですよね……。
来年……果たしてどうなっていますかねぇ……。
まさか節分過ぎたばかりでもう来年の話をするとは、この拡張機能を作るまでは思いもしませんでしたが(笑)。

後日談


2019年は使っていただけたようです。お役に立てて幸いです。

覚書を兼ねた独り言

作成中にハマった点など

今回も思わぬところでハマりまくりました……。

  • 領収書専用のウィンドウを開いて、そこに領収書分だけタブを開き、後で全タブ選択して印刷すればできたりしないか？
    →タブを複数選択しても、印刷されるのは現在表示されているページだけだったのでダメ
  • 注文履歴ページを $.ajax() で取得すると、よくわからない(HTMLではない)ファイルが返る
    →リクエストヘッダに X-Requested-With : XMLHttpRequest が含まれると、Amazon から HTML ではない形式で返されてしまう模様
    →crossDomainパラメータをtrueで指定してやるとX-Requested-Withが送られなくなり、HTMLファイルが取得できるようになった（参考1、参考2）
  • Firefox のアドオン版として動かしたときだけ、$.ajax() によるページ読み込みが失敗する
    →$.ajaxに指定する際、url は相対パスだとだめ（"SyntaxError: The URI is malformed."エラー）
    → new URL() で絶対パスに変換して大丈夫になった
  • 注文履歴を取得して表示する際、件数が多いと表示が固まってしまう
    →ブラウザのウィンドウ内で見えない分は非表示にし、スクロールしたときに必要分だけ表示するようにして対応
  • 領収書を $.ajax() 等で取得すると、支払情報等の欄が入っていない（デジタルコンテンツ等の領収書）
    →スクリプトで動的に表示するようになっているらしい
    →裏で(IFRAMEで)開いて、表示が落ち着くまで監視し、落ち着いたら HTML を取得して親ウィンドウに postMessage() で送信することで対応
  • 領収書の数が多いと、ブラウザが固まる・応答しなくなる等の現象が発生
    →領収書の数だけIFRAME作っていたので（開きすぎだよ……）、一定数だけ開き、終わったら使いまわすことで対応
  • 領収書を取得している最中にログイン画面になってしまい、処理が止まってしまう
    →領収書取得開始時にログイン画面を必ず出すようにし、不意のタイミングでログイン画面になってしまうのを抑制
  • アイコン作成が面倒
    →面倒だけど、やるしかなかった(苦笑)
その他に気付いたことなど

参考

アマゾン注文履歴・領収書等関連記事

https://www.amazon.co.jp/gp/help/customer/display.html?nodeId=201997890
https://www.amazon.co.jp/gp/help/customer/display.html?nodeId=201894740

アマゾンの領収書をPDFでまとめて保存＆一括印刷する方法

kindou.info

kashikoku.info

tokyo-patre.jp

leemanparadise.com

bbs-joyful.net

lapinews.com


アマゾン注文履歴関連の類似ツールなど

Windows用

Amazon 購入履歴ダウンローダ

KaimonoToExcel - ネットショッピングの履歴をリスト化してExcel出力！

Mac用
https://github.com/teruhirokomaki/amazon-order-downloadergithub.com

ブラウザ用スクリプト

Amazon購入履歴のCSVエクスポート (2017 年バージョン) · GitHub

エクセル用マクロ

amazonの購入履歴をエクセルでダウンロードするVBAマクロ

ご紹介いただいた記事

www.gigafree.org
kindou.info
internet.watch.impress.co.jp
vsdsy.com
www.kazutenbai.com
forest.watch.impress.co.jp

アマゾンの領収書をPDFでまとめて保存＆一括印刷する方法

news.mynavi.jp


関連記事（追記・機能追加のお知らせなど）

furyu.hatenablog.com
furyu.hatenablog.com
furyu.hatenablog.com

Chrome拡張機能にてシークレットウィンドウとbackgroundとのメッセージ送受信時の注意

ハマったよ……

Twitter メディアローダ
furyu.hatenablog.com
にて、Google Chrome のシークレット ウィンドウ上で実行すると、ファイルダウンロード時に

失敗 - ファイルがありません

となって正常にダウンロードできない、という現象が発生した。

シークレット ウィンドウでだけ発生するという訳の分からない状態だったので、途方に暮れていたのだが……。

何が起こっていたのか？

background → content_scripts に、ZIP化したコンテンツの Blob URL を sendResponse() で送信する仕組みにしていたのだが、なぜか受け取った content_scripts 側（シークレット ウィンドウ）で、その Blob URL にアクセスできない状態（404発生）になっていた。

原因

Manifest - Incognito - Google Chromeによると、manifest.json に指定できる "incognito" キーについて、シークレット ウィンドウ（匿名タブ）で動かせる拡張機能では"spanning"もしくは"split"が指定でき、

  • "spanning"（デフォルト）
    → 匿名タブ（ウィンドウ）と、その他の（一つのプロセス上で共有される）コンテキスト（これにはoptions_uiやbackgroundページも含む）とがあり、匿名タブは共有プロセスにアクセスできない
  • "split"
    →匿名タブ（と対応する background ページ）は、（匿名でないタブからみて）独立したプロセス上で動作し、メッセージ等のリソースもプロセス内のコンテキストのもののみを参照できる（それ以外のコンテキストとはやり取りできない）
    対応しているbackgroundとは共通のリソースにアクセスできると思われる

となっているように読める。
英語の解読に自信はないので、読み取り間違っているかもしれない。その場合はご指摘を……。

なので、manifest.json で明示していなかったために "spanning" モードで動いていた本拡張機能では、background で作成した Blob URL に匿名タブからアクセスできなかったのだと思われる。

対策

manifest.json に

,   "incognito" : "split"

を追加。

念のため、backgroundでの ZIP 化を無効化するオプションも付けておいた

副作用

Firefox では、"incognito" キーはサポートしているが、選択肢として "split" がサポートされていない。
このため、manifest.json を Chrome と共通にしていると、アドオン登録の検証時に

"/incognito" should be equal to one of the allowed values
エラー: Your JSON file could not be parsed.

というエラーが発生し、撥ねられてしまう。
やむを得ず、Chrome と Firefox とで manifest.json を分ける羽目に……せっかく共通化していたのに(苦笑)。

参考

http://aripom.hatenablog.com/entry/2016/04/29/101832aripom.hatenablog.com

拡張機能のアイコンをSVGで作ろうとInkscapeを入れてみたところ、はまった点

前書き

最近、近傍ツイート検索
furyu.hatenablog.com
の拡張機能用のアイコンをリニューアルした。

実は、2014年6月当時にやっつけで作ったまま（厳密には2016年2月にマイナーチェンジしているが）だったので、いつか作り直そう……と思いつつ、面倒なので長らく放置していた。

(2014/6/9作成)(2016/2/1微修正)

それが先日、ふと「アイコンを SVG で作ってみよう」と思い立ち、初めて Inkscape なる OSS のベクトル画像ドローソフトをインストールしてみた。
ところが、まっとうに使い始める前に例によって色々とはまってしまったので*1、それらの点についてメモ書きしておく。
導入したバージョンは、Inkscape 0.92.2 (5c3e80d, 2017-08-06)

はまった点

Python のエラー……？

Inkscape がデフォルトで出力する SVG ファイル（Inkscape SVG フォーマット）は色々と情報が入っていてサイズが大きいので、これを圧縮する方法を調べていると……

SVGのエクスポート – Inkscape@JP

標準で、『最適化 SVG』というフォーマットがあり、これはかなりサイズが小さくなるっぽい。

で、『名前を付けて保存』メニューから、その出力を試そうとしたら……

The fantastic lxml wrapper for libxml2 is required by inkex.py and therefore this extension. Please download and install the latest version from http://cheeseshop.python.org/pypi/lxml/, or install it through your package manager by a command like: sudo apt-get install python-lxml

Inkscapeは、実行したスクリプトから追加データを受け取りました。スクリプトはエラーを返しませんでしたが、実行結果が意図しないものになっていることを示唆している可能性があります。

というエラーが出てしまい、保存に失敗する。

Inkscape が自分でインストールする Python 2.7 と、別件で既にインストールされていた Python 2.7 と競合しているのかと思って、PYTHONHOME や PYTHONPATH の設定変更や削除、C:\Python27 のリネーム等、いろいろと試してみたが、

Traceback (most recent call last):
  File "C:\Python\Lib\site-packages/site.py", line 73, in <module>
    __boot()
  File "C:\Python\Lib\site-packages/site.py", line 3, in __boot
    import os
ImportError: No module named os

とかいったエラーに変わるだけで、どう設定してもうまくいかない。

結局、いったん Inkscape をアンインストールしたあと、インストール時のコンポーネント選択で、
f:id:furyu-tei:20171202111555p:plain
☑ Python 2.7 のチェックを外してインストールしてみると、上記エラーが出なくなった。

なお、代わりに、自身が構築している Python 2.7 の環境上に、いくつかのライブラリを手動でインストールしておく必要があるので注意。

> python -m pip install lxml numpy scour
デフォルトは mm 単位で、A4 サイズ……？

インストールした Inkscape を起動すると、新規ドキュメントが開くが、デフォルトではこれがサイズの単位が mm で、かつ、A4 サイズになっている。
f:id:furyu-tei:20171202113915p:plain

ドキュメントのプロパティ（ファイル(F)→ドキュメントのプロパティ(D)）はこんな感じ。
f:id:furyu-tei:20171202111611p:plain

この設定ではアイコンを作るのには不便そうなので、Chrome 拡張機能の基本サイズ 96px × 96px にしようと思い、
f:id:furyu-tei:20171202113835p:plain
のように設定。
※変更したのは、

  • 『Display units』→ px
  • 『カスタムサイズ』→幅(W)：96.0000、高さ(H)：96.0000、単位(N)：px
  • 『拡大縮小』→ Scale x：1.00000
  • 『Background』→☑ Checkerboard background（チェックを付ける）
  • 『境界線』→☑ 描画より前面に境界線を表示する(T)（チェックを付ける）、□ 境界線に影を表示する(S)（チェックを外す）

これで、ドキュメントは
f:id:furyu-tei:20171202113901p:plain
といった感じになる。

よく見てみたら、ドキュメントのプロパティの『ページサイズ』に、"Icon 48x48" といったものもあった。

ただ、毎回設定するのは大変なので、デフォルトを変えたい。

Setting up page template - InkscapeForum.com

などを参考に、↑のように設定変更したドキュメントを

%UserProfile%\AppData\Roaming\inkscape\templates

の下に、default.ja.svg というファイル名で保存しておく。
すると、新規ドキュメントを開いたときに、上記設定が反映されるようになる。

『最適化 SVG』形式で保存すると……画面いっぱいのアイコンが？！

苦戦しつつもアイコンを描き終わり、『最適化SVG』形式で保存し、これをブラウザで表示してみると……
f:id:furyu-tei:20171202115705p:plain
……でかっ!!

エディタで当該 SVG ファイルを見てみると……

<?xml version="1.0" encoding="UTF-8"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg version="1.1" viewBox="0 0 96 96" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:osb="http://www.openswatchbook.org/uri/2009/osb" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">

viewBox は指定されているものの、width と height が抜けている……？
そこで、SVG タグを修正し

<svg version="1.1" viewBox="0 0 96 96" width="96" height="96" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:osb="http://www.openswatchbook.org/uri/2009/osb" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">

「width="96" height="96" 」を付け加えたところ、

f:id:furyu-tei:20171202120010p:plain
なんとか普通に表示されるようになった。

なお、『Inkscape SVG』形式や、『プレーン SVG』形式の場合には、width・height は入っているため、『最適化 SVG』形式の場合の不具合かもと考えている。
ちなみに、

  • 『カスタムサイズ』→幅(W)：25.4000、高さ(H)：25.4000、単位(N)：mm

にしておくと、『最適化 SVG』であっても width・height が入り、

<svg width="25.4mm" height="25.4mm" version="1.1" viewBox="0 0 96 96" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:osb="http://www.openswatchbook.org/uri/2009/osb" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">

見た目上の表示もまっとうになる。
ただし、ピクセルとの変換が面倒。

他のサイズで出力するには……？

96px × 96px で作成しているが、例えば Chrome 拡張機能用には、48px、96px、128px というサイズのアイコンが必要になる。
しかも、128pxは、96px のアイコンの周囲を 16px の透過ピクセルで囲んだもの。

SVG 形式の場合
ドキュメントのプロパティをその都度変更しつつ、名前を付けて保存してもよいが、96px の最適化 SVGを出力しておき、これをコピーして、テキストエディタで width、height、viewBox を書き換える方が簡単かも。
※ 96px

<svg version="1.1" viewBox="0 0 96 96" width="96" height="96" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:osb="http://www.openswatchbook.org/uri/2009/osb" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">

※ 48px

<svg version="1.1" viewBox="0 0 96 96" width="48" height="48" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:osb="http://www.openswatchbook.org/uri/2009/osb" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">

※ 128px（周囲16pxは透過）

<svg version="1.1" viewBox="-16 -16 128 128" width="128" height="128" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:osb="http://www.openswatchbook.org/uri/2009/osb" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">

ちなみに、viewBox と width・height の関係は、以下のサイトの解説が分かりやすかった。
old-pine.net

私的に、こんな↓感じだと理解。
f:id:furyu-tei:20171203003948p:plain
間違っていたらご指摘を。
なお、preserveAspectRatioの指定によって、viewBox を width-height の矩形に投影する際の動作が異なってくる模様。
developer.mozilla.org

追記：@rikuoさんにご紹介いただいたわかりやすい記事
www.sarasoueidan.com

Interactive SVG Coordinate System


PNG 形式の場合
Inkscape の『PNG 画像にエクスポート(E)』（Shift+Ctrl+E）により出力するのが簡単。
通常は、『画像サイズ』欄に出力したいサイズを入力して、エクスポートするだけでよい。
ただし Chrome 拡張機能の 128px の場合には、エクスポート領域で、透過ピクセル部分を含んだ x0、y0、x1、y1（-16, -16, 112, 112）を指定してやる必要がある。
f:id:furyu-tei:20171202124108p:plain

サゲ


苦労して（？）作成した SVG ファイルも、Chrome 拡張機能の manifest.json や、拡張機能のアイコン登録画面などでは、指定できない罠。

*1:絵心が無いとかそういう、人間のソフトウェアに依存したどうしようもない理由ではなく

近傍ツイート検索で最近リツイートしたユーザーを表示する機能を追加しました（version 0.2.6.100）

前書き

近傍ツイート検索
furyu.hatenablog.com
にて、個別ツイートをリツイートした最近のユーザーを表示する機能を追加しました。
また、該当するユーザーが RT 前後の 10 分間にツイートしていた内容（概要）を表示することも出来るようになりました。

早い話が、『RtRT』（"（Find the） Reference to ReTweet"）や、
リツイート直後のツイートを表示するやつみたいなことを、ユーザースクリプトや拡張機能でもやりたかったのです……サイトに行って調べるのが面倒なので(苦笑)。
とは言っても色々と制限が厳しく、Webサービスみたいにはいきませんが……。
調子に乗ってあちこちのツイートで試していると API 制限（時間当たりの回数制限）に引っかかるかも知れません。悪しからずご了承ください。

新機能について

当然ながら、ブラウザに近傍ツイート検索の最新版がインストールされていることが前提です。
まだの方は、お使いのブラウザ環境に合わせて
github.com
chrome.google.com

近傍ツイート検索 – Firefox 向けアドオン

からインストールしてください。

使い方

インストール／更新後に Web 版公式ツイッターを開くと、リツイートされているツイートの下の方に [Re:RT] というボタンがついています。
f:id:furyu-tei:20171125034556p:plain

これをクリックすると、当該ツイートを RT したユーザーのうち、最近行った方々が表示されます。
f:id:furyu-tei:20171125034607p:plain

ユーザーのプロフィールの右側に [↓↑] というボタンが表示されますが、
f:id:furyu-tei:20171125034626p:plain

これをクリックすると、
f:id:furyu-tei:20171125034640p:plain

RT 前後 10 分間のツイート概要が表示されます。
RTした人は、その前後に当該ツイートについて言及していることもよくある、という経験則に基づきます。

オプションとしては、表示するユーザー数を変更できます。
f:id:furyu-tei:20171125034653p:plain
これは、最大 100 ユーザーまでです。
Twitter API の仕様による制限です。

注意書き

更新の際に無効化されてしまう

上記の機能に関して、拡張機能に新たな権限が追加されています。
f:id:furyu-tei:20171127045119p:plain

0.2.5.200以前バージョンから更新された場合、いったん拡張機能が無効化され、有効化しようとすると、

「近傍ツイート検索」の最新バージョンは、さらに許可が必要なため無効になっています。

のようにメッセージが表示されて、再度有効にするかどうかの確認があります。
f:id:furyu-tei:20171127034910p:plain

[再度有効にする]ボタンを押してください。
上記は Chrome の場合ですが、Firefox の場合にも同様のダイアログが表示されることがありますので、その場合は[更新(U)]ボタンを押してください。

※キャンセルを押してしまった場合などは……
　Google Chrome → 拡張機能の画面 chrome://extensions/ （「≡」（右上のハンバーガーメニュー）→「その他のツール(L)」→「拡張機能(E)」）を開き、「近傍ツイート検索」を探して、「□ 有効にする」のチェックボックスにチェックを入れてください。
　Firefox Quantum → アドオンマネージャー about:addons （[Ctrl]+[Shift]+[A]、「≡」（右上のハンバーガーメニュー）→アドオン）を開き、「近傍ツイート検索」を探して、[有効化]ボタンを押してください。

ここで、Google Chrome の場合には

・twitter.com の全サイト、twitter.com 上にある自分のデータの読み取りと変更

とあるので（特に『変更』と出てしまっているので）不安に思われる方もいらっしゃるようですが、「ユーザーデータには変更を加えてはいません」のでご安心ください。
Firefox Quantum の場合、同様のダイアログでは、「・twitter.com の保存されたデータへのアクセス」という表現になっていると思います。
作者本人がそう言っても不安だ・信用できない、という方は、公開しているソースコードをご覧になるか、使用をお控えください。

これは、今回の機能の中で、「個別ツイートをリツイートした最近のユーザー」の情報を取得するために、新たにアクセス権を追加したためです。
Twitter 側に設定してある本拡張機能用のアクセス権限は、「読み取り専用」（Read-only）としているのですが、
f:id:furyu-tei:20171127035554p:plain
拡張機能には「読み取り専用」という権限はなく、アクセスを許可しようとすると自動的に「読み取りと変更」ということになってしまいます。

なお、上記の権限に関して、実際に使用している Twitter の API は以下の通りです。

POST oauth2/token — Twitter Developers
GET application/rate_limit_status — Twitter Developers
GET statuses/retweets/:id — Twitter Developers

余談

参考サイト・記事

esuji5.hateblo.jp
retweets.azurewebsites.net

ブラウザ拡張機能用に background で ZIP 化するためのライブラリを試作（Chrome拡張機能／Firefox Quantum WebExtensions 用）

前書き

WebExtensions について調べていると、Promise を使用して云々……という記述が出てきて、今さらながらに Promise というものの存在を知りました（ｦｲ。
慣れれば使い勝手が良さそうなので、練習を兼ねて、ブラウザ拡張機能の background で ZIP 化することが出来るようなライブラリを試作してみました。
github.com
習作なので、いつも以上に動作保証できません。ご利用は計画的に(汗)。

概要

content_scripts に対し、ZipRequest クラスを提供します。
ZipRequest#open()/file()/generate()/close() という一連の関数にて、background に対してメッセージを送ることで ZIP 化に関する指示を出し、background からの応答メッセージで結果を受け取り、content_scrips に返します。
background での ZIP 化には、JSZip を使用しています。

比較する意味もあって、content_scripts 用には Promise を使ったもの(Promise版・zip_request.js) と、使わないもの(コールバック版・zip_request_legacy.js)とがあります。
background 用のもの(zip_worker.js)は共通です。

サンプル

はてなブログ（"*://*.hatenablog.com/*"）を開くと、画像を適当な数選んで ZIP 化・ダウンロードする、という迷惑な(汗)サンプルコード（抜粋）です。
サンプルソースコード全文は、こちらをご覧ください。

並列処理

複数のファイルを同時並行で取得しながらアーカイブする処理です。
コールバック版（zip_request_legacy.js）の場合

'use strict';

( function () {

var zip_request = new ZipRequest(),
// (中略)

zip_request.open();

files.forEach( function ( file ) {
    var url = file.src || file.href,
        filename = get_filename( url );
    
    console.log( '[start]', url, filename );
    
    zip_request.file( {
        url : url,
        filename : filename,
        zip_options : {
            date : new Date( '2017-01-01' )
        }
    }, function ( result ) {
        console.log( '[result]', url, filename, result );
    } );
} );

zip_request.generate( 'blob', function ( response ) {
    zip_request.close();
    
    // 以下、Aタグのdownload 属性を使ったダウンロード処理
} );

} )();

Promise版（zip_request.js）の場合

'use strict';

( async function () {

let zip_request = new ZipRequest(),
// (中略)

await zip_request.open();

await Promise.all(
    files.map( async ( file ) => {
        let result,
            url = file.src || file.href,
            filename = get_filename( url );
        
        console.log( '[start]', url, filename );
        
        result = await zip_request.file( {
            url : url,
            filename : filename,
            zip_options : {
                date : new Date( '2017-01-01' )
            }
        } )
        .catch( result => { return result } ); // Promise.all() を停止させないための対策
        
        console.log( '[result]', url, filename, result );
        
        return result;
    } )
);

let response,
    download_link;

response = await zip_request.generate( 'blob' );

await zip_request.close();

// 以下、Aタグのdownload 属性を使ったダウンロード処理

} )();

コールバック版のライブラリ内で多少工夫をしていることもあり、並列処理に関しては、一見したところそれ程違いは無いかもしれません。
コールバック版では、例えば file() に対応する応答が background からまだ来ない状態で generate() が呼ばれたとしても、全てのファイルについて結果が返るのを待って background に要求を出すようにしているため、上記の書き方が可能。ただし、close() については、generate() のコールバック後に呼び出す必要あり。

直列処理

ファイルを一つずつ順番に取得しながら（逐次）アーカイブする処理です。
コールバック版（zip_request_legacy.js）の場合

'use strict';

( function () {

var zip_request = new ZipRequest(),
// (中略)

zip_request.open( function ( result ) {
    var file_index = 0;
    
    function zip_files() {
        if ( files.length <= file_index ) {
            zip_request.generate( 'blob', function ( response ) {
                zip_request.close();
                
                // 以下、Aタグのdownload 属性を使ったダウンロード処理                                
            } );
            return;
        }
        
        var file = files[ file_index ++ ],
            url = file.src || file.href,
            filename = get_filename( url );
        
        console.log( '[start]', url, filename );
        
        zip_request.file( {
            url : url,
            filename : filename,
            zip_options : {
                date : new Date( '2017-01-01' )
            }
        }, function ( result ) {
            console.log( '[result]', url, filename, result );
            
            zip_files();
        } );
    }
    
    zip_files();
} );

} )();

Promise版（zip_request.js）の場合

'use strict';

( async function () {

let zip_request = new ZipRequest(),
// (中略)

await zip_request.open();

for ( let file of files ) {
    // files.map( async ( file ) => { ... } ) は使えないことに注意
    // ※ map() では、コールバック関数の戻り値が Promise object になり、直列処理されない
    let url = file.src || file.href,
        filename = get_filename( url ),
        result;
    
    console.log( '[start]', url, filename );
    
    result = await zip_request.file( {
        url : url,
        filename : filename,
        zip_options : {
            date : new Date( '2017-01-01' )
        }
    } )
    .catch( result => { return result } ); // エラーで停止させないための対策
    
    console.log( '[result]', url, filename, result );
}

let response,
    download_link;

response = await zip_request.generate( 'blob' );

await zip_request.close();

// 以下、Aタグのdownload 属性を使ったダウンロード処理

} )();

こちらは、Promise 版のメリットが出ていると思います。
コールバック版は処理の流れが一見解りにくいのに対し、Promise 版では上から下への自然な流れで解りやすくなっています。

はまった点など

  • Promise.all() は、並列実行中の Promise オブジェクトが一つでもエラーになると異常終了してしまう（catchされてしまう）ため、中断したくない場合、それぞれの Promise で reject() ではなく resolve() を呼び、戻り値によって判別するようにする
  • Array#map() 等のコールバック処理を持つものは、直列処理では使用できない（コールバックの結果が Promise オブジェクトで返されるため）
  • Promise の resolve() や reject() は、呼んだ後も続きが実行される（実行されないようにするには、直後に return が必要）
  • background における、browser/chrome.runtime.onMessage.addListener() のコールバック関数内で、非同期の処理を呼んでから sendResponse()を返す場合、コールバック関数の戻り値に true を設定する必要がある（chrome.runtime - Google Chrome）
  • content_scripts と background 間のやり取り（sendMessage()/sendResponse()）では、JSON で基本的にはシリアライズ可能なオブジェクトしか渡せない……ところが、渡せるオブジェクトの種類に、ブラウザ間で差異がある（関数オブジェクトは Firefox で NG、Blob が渡せるのは Firefox のみ、等）
  • background で URL.createObjectURL() により得られた Blob URL を content_scripts に送ると、Chrome では download 属性付き A タグでダウンロード可能なのに対し、Firefox や MS-Edge では不可（Firefoxについては、なぜか Blob がそのまま content_scripts に送れるため、そちらで Blob URL に変換することで対応している）
  • MS-Edge では、作成した ZIP をダウンロードさせる術が見つからない

Promise/async/awaitやclassの書き方でもっとはまると思っていたが、これらはそれ程でもなかった代わりに、拡張機能の仕様やブラウザ間の細かい差異の方が難解。