開発

AmazonアフィリンクをHTMLへ。ブックマークレットを作ってついでに拡張機能にしてみた。

作ったもの

これです。Chorme拡張機能で配信しているので以下のリンクから追加してください。


Chromeウェブストアページ

できること

Amazonアフィリエイトアカウントでログインしている状態で商品ページを開き、拡張機能ボタンをクリック。

指示通りに進めると、下のようなデザインのHTMLコードが入手できます。

SHURE イヤホン SEシリーズ SE215 カナル型 高遮音性 Special Edition トランススルーセントブルー SE215SPE-A 【国内正規品】

￥ 10,620(※2018/7/6時点)

amazonから購入

ブックマークレットとは

ブックマークにjavascriptのプログラム登録しておくことで、ブックマークをクリックするだけでプログラムの実行ができるみたいな仕組み。

JQueryも使えるみたいだが、導入がめんどくさそう。

ブックマークレットで jQuery を使う魔法の 210 文字

こんな記事もあったが、まだJQueryを対して勉強していないのでやめといた。

(本当はやってみたけど、うまくできなかった。)

なんで作ったの？

これまでカエレバを使っていたが、いろいろとめんどくさいし、とあるきっかけがあったので作ってみたという感じ。

プログラムを書かない人に対して、HTMLを使ったパーツのマニュアルとか作っているうちに、これ自動化できたらとても便利だし、マニュアル作らなくていいし、最強なのではと思った。

実際とても楽になったし、個人的にいろいろと試行錯誤できて面白かったので、いい時間が過ごせたと思う。

まぁ制作から完成まで合計10時間くらいかかったけどね。

経過

1,prompt()の初期値にコードを入れて取得

amazonの画像アフィリンクが長すぎるのか、それとも生成したソースコードが長すぎるのか、途中省略されてしまう案件発生。console.log()では全文表示されていたので、prompt()の問題っぽい。というわけで断念。

2,コードをテキストファイルで出力。

brob()を使って、'a'タグにコード入れてテキストダウンロードみたいな感じなはず。

実装できたが、使用感が最悪だったので却下。

3,ボタンを押せばコードがクリップボードにコピーされる。

ボタンを押すだけでHTMLコードがクリップボードにコピーされたら神なのでは？と思って実装。

よく、Webサイトでテキストエリアにハイライト状態でなんかを生成するものがあるが、最初からクリップボードに貼り付けてくれって感じだ。

大きな変化はこの３段段階。

最初から３つ目にたどり着けばいいけど、まぁそううまく行かないのが世の常である。

課題

• アフィリエイトの画像のリンクをクリックしなくてはならない。
• キンドルとかには対応していない。if文かけばいいだけだけど、使う予定なさそうだったからやってない。いつかやろう(やらない)
• コードが汚い(と思う)

リンクをクリックしなくてはならないというところ。click()を使ってみたんだけど、なんかうまく動かせなくて、１時間くらい格闘して断念した。

一度開いたあとであれば開いたんだけど、読み込みあとの一回目はまったく反応しなかった。残念。とりあえずアラートだしているから大丈夫だと思われる。

商品名に関してどう取得しようか迷ったんだけど、迷った挙げ句、商品名が書いてある要素のIDを取得することにした。

document.titleでも良かったんだけど、最初に”Amazon | ”が入るから個人的に嫌だった。削除してもいいけど…。

キンドルとか考えればdocument.title取得していらないところをカットしたほうがよかったと思うので、気が向いたらそうする。

node使ってhtml生成をきれいにやっている人がいたので、最初真似してみたんだけど、うまく行かなかった。あんまり時間をかけたくなかったので、また今度。

今回はHTMLを切り貼りしているので” ' がたくさんあって気持ち悪い。

続きというか改良というか…そんな感じです↓

AmazonアフィリエイトリンクをHTMLコードに変えるChrome拡張機能。大幅に進化させてみた。
http://akairomiracle.blogspot.com/2018/07/amazonhtmlchrome.html
生産的なダラダラ。

コード

コードはこれ。これをブックマークのURL部分に貼り付けても動くよ！