お知らせ

「ララカム」というセキュリティ・カメラ管理アプリの販売＆サポート始めました！詳しくは、ララカムの販売＆サポートページへ。

（本サイトは、アフィリエイト広告を利用しています）

Yahooショッピングの注文履歴をCSVにする　Chrome 拡張機能を作りました

2023年11月29日知的生産

著者テック大家さんは、自分で所有している賃貸物件にさまざまな工夫を凝らして、入居者への魅力を提供すべく努力しています。このサイトでは、テクノロジー好き賃貸大家さんが、DIYで入居者向けのフリー・インターネットを提供したり、セキュリティシステムを導入したりしたときの技術要素を解説しています。

DIYを頑張るのは、私だけではありません。建築士の妻もコスト削減のため、自ら前のめりに建築工事のできる部分をやるわけです。

そして、そのときに必要になるのがオンライン・ショッピング。最近、便利に使っているのは、Yahooショッピングです。建築材料や設備機器など様々なものをネットで購入するわけです。もはや工務店のしごとです。そして工事の全体コストを計算するために時として活躍するのが「注文履歴」。しかし、これがまた使いにくい。

そこで、テック大家さんの登場です。注文履歴をCSVファイルにする Chrome 拡張機能を作りました。その名もズバリ、「Yahooショッピング　注文履歴CSV」という拡張機能です。

＊ 2023年12月25日、v0.2へバージョンアップ！合わせてご覧下さい（「Yahooショッピングの注文履歴をCSVに(v0.2)　Chrome 拡張機能をバージョンアップしました」）

機能と使い方

「Yahooショッピン注文履歴CSV」をインストールして、Yahooショッピングの注文履歴のページに進みます。正常に拡張機能が動作していれば、「CSVファイルの取得」ボタンがページ上に表示されます。

このボタンを押すと、ダイアログボックスが表示されます。将来的にはここにいくつかのオプション機能を用意する予定です。今はなにもないので、単に「開始」ボタンを押します。

すると以下のように、データの取得が開始されます。進捗はバー表示で確認でき、100%まで進むと、ファイルに保存ダイアログが出てきます。これで、生成されたCSVファイルを保存します。

CSVファイルなので、Excelで読み込むなり、Googleスプレッドシートにインポートするなり、煮るなり焼くなり、好きなように加工することができます。

拡張機能のインストール

では、実際に「Yahooショッピング注文履歴CSV」をインストールしましょう。

拡張機能は「Chromeウェブストア」からインストールできます。以下がストア上のページです。下のリンクを開いて、画面右上の「Chromeに追加」ボタンを押してインストールして下さい。

あとは、上記で述べたようにYahooショッピングの「注文履歴」ページに進むだけ。

プライバシーポリシー

本拡張機能のプライバシーポリシーを公開しています。「Yahooショッピング注文履歴CSV」拡張機能が、個人情報（ここではユーザーの買い物履歴）をどのように取得し、どのように使うのか、といった詳細を記述しています。

以下の「仕組み」の章で書きますが、拡張機能は悪用しようと思えばいくらでも危険なことを実現できてしまいます。ですので、プライバシーポリシーに記載した内容をごご理解の上、ご利用下さい。

ここから下は、技術的な興味のある方、拡張機能を使うのが不安な方のみお読み下さい。

ソースコード公開

一般にChrome拡張機能というと、中身がHTML/JavaScriptからなるソフトウェアのことを示します。ユーザーが利用するChromeブラウザの一部として動作させることができます。

具体的な仕組みは後述しますが、Chromeブラウザの一部として動作するので開発者はある程度好き勝手にできる世界です。悪意のある開発者なら利用者の個人情報を取り出すこともできてしまいます。もちろん、筆者はそういった悪意を持っているわけではありません。が、どんな輩が何をしでかすかわからないのがインターネットの世界。私開発者としては、自分がそのような悪意のある非道な人間ではないことをいかに利用者に理解してもらうかが重要なわけです。

そこで、ソースコードもGithubで公開することにしました。見る人が見れば、この拡張機能が「悪いこと」をしないことを確認できるようにするのが意図です。加えて、第三者が私のソースコードを流用して何か別のソフトウェアを構築したとしても、同様に公開することで安全性を担保してほしいと考えました。それで、改変後のソースコードも公開しなければならないライセンス形態であるGPLライセンスで公開することにしました。

「Yahooショッピング注文履歴CSV」のソースコードはGithubの以下のリポジトリでご覧いただけます。

ソースコードの公開とプライバシーポリシーの策定は安全性の証明のために筆者が意志を持って実行しています。

でもこういう話って、「安全です、安全です」と相手から言われれば言われるほど、疑わしく思ったり心配になったりするものではないでしょうか。

そういう意味で、実は、過度に安全であることを強調するのははばかられます。著者の考慮と配慮をご理解いただけると幸いです。はい。

Chrome拡張機能の仕組み

安全性とリスクを理解していただくために、Chrome拡張機能の仕組みについて解説します。元々、本サイト「テック大家さん」はテックネタを語るサイトですので、そういう意味でも真剣に話題として(!)取り上げます。

Chrome拡張機能は、ブラウザの機能を拡張するためのHTML/JavaScriptからなるソフトウェアです。色々なことができますが、本拡張機能では、そのうちのContent Scriptという仕組みを使っています。

どの拡張機能も、内部にmanifest.jsonと呼ばれる「この拡張機能は何をするものであるかをブラウザに伝える」ためのファイルを含みます。Contents Scriptは、その中に「この拡張機能が動作すべきURL」を指定します。そうすることで始めて、その拡張機能が指定したURLのページ上で動作できるようになります。

「Yahooショッピング注文履歴CSV」では以下のように記載しています。もちろん、実際のソースコードもご覧いただけます。

 "content_scripts": [
   {
     "matches": ["https://odhistory.shopping.yahoo.co.jp/order-history/*"],

このURLは、Yahooショッピングの注文履歴のページです。manifest.jsonでこのように書いておくと、このページをユーザーが開いたときに拡張機能はそのページのDOM（Document Object Model）にアクセスできるようになるわけです。

では、DOMとは何か。

拡張機能のことを知らなくても、一般的にウェブサイトがHTMLという言語で書かれていることはご存じの方も多いでしょう。HTMLはページの文章を木構造で記述できるものです。例えば、商品の項目は以下のような「タグ」付きの文書として書かれます。

      <li class="elProductInfo">
        <div class="elProductDetail">
          <p class="elTitle">
            
                <a href="https://store.shopping.yahoo.co.jp/issei5/1159344.html"
                   data-cl-params="itemnm:埋込スイッチB 片切  10個入 WT5001-10;">
                  <span>埋込スイッチB 片切  10個入 WT5001-10</span>
                </a>
            
          </p>
        </div>
        <div class="elAddButton">
          <p class="elPrice">
            <span>1,639円</span>
          </p>

こういった木構造にプログラム（JavaScript）からアクセスできる仕組みがDOMです。拡張機能は、manifest.jsonにURLを明示することにより、そのページのHTML内部をJavaScriptのプログラムからすべて読み取りできるというわけです。

この仕組みを利用して「Yahooショッピング注文履歴CSV」拡張機能は「注文履歴」ページに書かれたすべてのデータ（購入日、商品名、価格、数量など）を上記のようなDOMから読み取り、カンマ区切りのCSV形式へと変換しているのです。

さて、このような便利なContent Scriptですが、悪用しようと思えばいくらでも悪用可能です。ちょうど最近、以下のような記事を見かけました。

もし、サイトの制作者（私の場合はYahooショッピングサイト）が、ユーザーに見せようが見せまいがHTML内部にユーザーのパスワードなどを埋め込んでしまったとします。HTMLにはユーザーが通常見えないような形でデータを埋め込むことも可能なのです。悪意のある拡張機能は、Content Scriptの仕組みを利用して、HTML内のDOMを調べます。すると、その埋め込まれたパスワードなどの情報を読み取りることができてしまいます。ユーザーがページ上で見えないデータも含めて、です。そして、JavaScriptのプログラムは、ブラウザのHTTP/HTTPSの転送機能を利用して開発者自身のサイトや開発者が利用しているサイトなどに転送してしまうこともできるのです。

私の拡張機能は、Yahooショッピングの注文履歴のページしかmanifest.jsonに指定していません。つまり、ユーザーの注文履歴のページしか読み取ることができません。ですが、悪意のある拡張機能はここに「*（アスタリスク）」のみを記載することで、どんなサイトのページも読み取り可能にしてしまうでしょう。こうして、ユーザーが閲覧するすべてのページの中身を拡張機能が読み取りでき、それによって個人情報など重要なデータを取得してしまう可能性があるのです。

もちろん、たとえサイトの制作者がパスワードを埋め込んでしまったとしても、悪意のある拡張機能をあえてインストールしていなければこんな悪いことにはなりません。そこは利用者の責任として、その拡張機能を本当に使う意味があるのか見極めてインストールする必要があるということです。（マルウエアのたぐいはユーザーにとって有用な機能を提供しつつも悪さをしてしまうので厄介なわけですが…）

長くなりましたが、というわけで、善良な開発者を自認する筆者としては、悪者でないことを証明(?!)したいというわけです。はい。私は、悪者ではありません！信じて下さい！と。ソースコードを公開したり、プライバシーポリシーで宣言したりするのはそのためなのです。

最後に

このツール「Yahooショッピング注文履歴CSV」は、上記のようにオープンソースにしておりますので、勝手に使っていただいて結構です。月並みですが、本拡張機能の使用によってあなたが何かしらの損害を被ったとしても、私は一切責任を負いません。その点はご理解いただきご使用下さい。不具合・質問など、お困りでしたら、お気軽にお問い合わせフォームからご連絡下さい。

また、寄付を受け付けております。以下の「今すぐ支払う」ボタンでお支払い可能です。いただけたら機能アップに力が入ります。どうぞよろしくお願いいたします。

と、ここまで書いて…

と、ここまで書いて、ブログの「公開」ボタンを押して公開しようと思ったその時！

Yahooのサイトに「パーソナルデータのダウンロード」という機能があることに今更気づきました。奥さんに言ったら、「そうだ、そんなのあるね。使ったことあるかもー」だって…自分がChrome拡張機能の実装をする前に少しネットで調べたんだけど、なんと、この機能に気づかなかったようです。

それがあれば、私が作った拡張機能はいらないかも？？と思いましたが、パーソナルデータのダウンロードはダウンロードを実行してから手元にデータがくるまで数日かかるのだとか。それもどうなんだ？？

というわけで、まだまだこの「Yahooショッピング　購入履歴CSV」拡張機能は有用のようです。はい。

メールマガジンにて本サイト(Tech Landlordテック大家さん)の更新情報をご連絡します。
本サイトのプライバシーポリシーをご確認の上、是非メールアドレスをご登録下さい！


プロフィール

テック大家さん
ソフトエンジニア兼不動産オーナー。
某超有名日本メーカーにおいてソフトウエア開発畑を30年近く勤務。
かつてはWindowsのアプリ開発や、組み込み機器のソフト開発を行う。プロジェクトマネジメント・オフショア開発・要件管理などの経験あり。現在は、個人開発で、JavaScript/TypeScript/React/Express、PHP/Laravel、Firebase、Google cloud、Arduino(C++)などでプログラミングを楽しむ。
サラリーマンの傍ら不動産経営を始め、現在、１棟モノの賃貸４物件を東京・神奈川に所有。夫婦でおよそ20年の賃貸経営の実績。
最近の物件では、入居者向けフリーWiFiなど、テック系の設備はDIYで自ら構築。
海外MBA取得。

知的生産

Posted by テック大家さん