Go to Qiita Advent Calendar 2024 Top
LoginSignup
6
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@dexia

書籍管理を楽にする（Chrome拡張）

Last updated at Posted at 2018-06-29

動機

　以前、Google Apps Scriptを使って書籍を管理する仕組みを作りました。

　一応まだスプレッドシートで書籍を管理しているのですが、書籍の情報を追加するのが面倒に感じるようになりました。

　大体Amazonの商品ページから情報をとってきているのですが、情報が書かれている位置が離れていて手間でした。

　そこで何か楽になる手段を探していて、Chrome拡張がいいと思ったので試してみました。

Chrome拡張作成

Amazonの検索ページへのジャンプ

仕様

　新規に書籍を購読する場合は大体ブログだとか、新刊一覧のサイトから入ることが多いです。

　なので、そういう文章情報からAmazonの商品ページを開けるとまず楽かなと思いました。

　テキストを選択して右クリックすると「Googleで検索」というようなメニューが出てくるので、まずはそれに近いものを目指しました。

事前準備

　128×128のアイコン（png形式）があると捗るということで、適当にアイコンを用意します。個人用であればなくても、そこまで困らないと思います。

　自分はフリーの虫眼鏡のアイコンを用意しました。

フォルダを準備

　開発用のフォルダを準備しました。大体以下のようになっています。

├── assets
|   └── js
|       └── background.js
├── image
|   └── search.png
└── manifest.json

マニフェストを準備する

　manifest.jsonは作る拡張がどういったものかを表すJSONです。

manifest.json
{
    "manifest_version": 2,
    "version": "1.0.0",
    "name": "ToAmazon",
    "description": "Amazonの検索Windowを開きます",
    "icons": {
        "128": "/image/search.png"
    },
    "background": {
        "scripts": [
            "/assets/js/background.js"
        ]
    },
    "permissions": [
        "contextMenus",
        "tabs"
    ]
}

　大体見た通りですが、manifest_versionは必ず2にするというルールになっており、ない場合は怒られます。

　backgroundはDOMに関係なく実行されるスクリプトを指定するもので、今回の処理はここに書けば良さそうです。

　permissionsは使いたいChromeのAPI（chrome.xxx）の名前を書きます。これもAPIを使う場合は必須です。

処理を書く

background.js
chrome.contextMenus.create({
    title: "Amazonで検索",
    contexts: ["selection"],
    type: "normal",
    onclick: function (info) {
        var keyword = encodeURI(info.selectionText);
        chrome.tabs.create({
            url: "https://www.amazon.co.jp/s/?field-keywords=" + keyword
        });
    }
});　

　とてもシンプルですね。contextsはコンテキストメニューがいつ表示されるかを表します。
　今回は文字を選択したときだけでいいので、selectionを指定します。

　typeはメニューをラジオボタンにしたり、チェックボックスにしたりできるみたいですが、今回は特にいらないのでnormalです。

　あとはクリック時にAmazonの検索URLを指定して、タブを開くように書きます。

テスト

アップロード

　自作の拡張をアップする手段については下記が詳しいです。

　Chrome拡張を簡単に作れるテンプレとライブラリ造ったので紹介

コンテキストメニューをクリック

toAmazon.png

　欲しい書籍を選択して、「Amazonで検索」をクリックします。

実行結果

to-amazon2.png

　検索ページが表示されました。

書籍情報の取得

仕様

　Amazonの商品ページから以下の情報を取得できればいいなと思いました。

  • タイトル
  • 作者
  • 出版日

　書籍管理のスプレッドシートに直接書き込めたら素敵かなと思ったのですが、思いのほかタイトルが自分の欲しい形と違うことが多かったので、そこまでは求めないことにしました。

　スプレッドシートに貼り付けできる形に情報を整形してクリップボードにコピーし、あとは手動で調整というところで納めました。

jQueryのインストール

　スクレイピングするためのライブラリとしてjQueryを使いました。他にあるのかもしれませんが、自分にとっては慣れているのでとりあえずこれで行きます。

　ファイルを物理的にコピーしてもいいのですが、一応NPM経由でインストールしました。

npm init
npm install --save jquery

フォルダ構成

　結果的に次のようなフォルダ構成になりました

├── assets
|   └── js
|       └── background.js
|       └── content.js
├── image
|   └── search.png
├── node_modules
|   └── jquery
|       └── dist/jquery.min.js
└── manifest.json 
└── package.json

マニフェストの変更

manifest.json
{
    "manifest_version": 2,
    "version": "1.0.0",
    "name": "ToAmazon",
    "description": "Amazonの操作を簡単にします。",
    "icons": {
        "128": "/image/search.png"
    },
    "background": {
        "scripts": [
            "/assets/js/background.js"
        ]
    },
    "content_scripts": [
        {
            "matches": [
                "https://www.amazon.co.jp/*"
            ],
            "js": [
                "/node_modules/jquery/dist/jquery.min.js",
                "/assets/js/content.js"
            ]
        }
    ],
    "permissions": [
        "clipboardWrite",
        "contextMenus",
        "tabs"
    ]
}

　DOMを操作し、かつ裏で動くようなスクリプトを書く場合はcontent_scriptsがよさそうだったので、それを追加しました。

　スクリプトを起動させるURLのパターンはmatchesで指定します。商品ページのURLが意外に複雑だったので、とりあえずAmazon全体を対象にしました。

　あとはclipboardWriteをpermissionsに追加します。

スクレイピング

書籍情報の抜き取り
content.js
function scrapeBookInfo() {
    var title = $("#productTitle").text();
    var authors =
        $("#bylineInfo > .author a.a-link-normal")
            .map(function () {
                return this.textContent;
            }).get().join(",");

    var published =
        $("#booksTitle .a-size-medium").map(function () {
            return this.textContent && this.textContent.match(/\d{4}\/\d{1,2}\/\d{1,2}/);
        })
            .get()
            .find(Boolean)
            .replace(/\//g, "-");
    return { title, authors, published };
}

　セレクタの指定は自信がないです。特に著者名はパターンが多いので、ある程度間違った名称をひっかけることが多いです。

　上から、タイトル、著者名、出版日を取得します。

クリップボードへのコピー
content.js
// クリップボードへのテキストコピー
function copyToClipboard(text) {
    var input = document.createElement("input");
    input.style.position = "fixed";
    input.style.opacity = 0;
    input.value = text;
    document.body.appendChild(input);
    input.select();
    document.execCommand("Copy");
    document.body.removeChild(input);
};

　たぶん一般的なやり方だと思います。

書籍情報のコピー
content.js
// デフォルト値
var DEFAULT_LATEST = 1;
var DEFAULT_PERIOD = 5;
var DEFAULT_SUBSCRIBE = 1;
function copyBookInfo() {
    var bookInfo = scrapeBookInfo();
    var copiedText = [
        bookInfo.title,
        DEFAULT_LATEST,
        DEFAULT_PERIOD,
        DEFAULT_SUBSCRIBE,
        bookInfo.published,
        bookInfo.authors
    ].join("\t");
    copyToClipboard(copiedText);
}

　欲しい情報のために、整形しています。タブで連結させておけば、そのまま貼り付けられる形式になります。

アクションの追加
content.js
// ロード時
$(function () {

    // ボタンの作成
    var copyButton = $("<button/>",
        {
            text: "Copy",
            click: function () {
                copyBookInfo();
            }
        });

    // ボタンの設置
    $("#productTitle").before(copyButton);

});

　タイトルの前にボタンを設置し、それをクリックすることでコピーするようにしました。デザインは凝ったほうがいいのかもしれないですね。

テスト

to-amazon3.png

こんな感じにでれば成功です。クリックすると、クリップボードに情報がコピーされています。

所感

　ほかのいつも見ているサイトをいじってみたり、あるいは開発のデバッグの際に何かできるんじゃないかという気がします。

　可能性がないかもう少し考えてみたいです。

6
5
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
6
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?