2020-04-28

amazletからAmaQuickへ移行

2 Comments

RYO

Amazon

老舗Amazonアソシエイトリンク作成ツール『amazlet』のサービス終了で代替先を探していたら『AmaQuick』に辿り着いた。自力でHTMLを弄る必要があり導入のハードルは高めだが、amazletのHTMLを流用することで解決。

◆ブックマークレットの登録

AmaQuick 01

AmaQuick 公式ページ | Creazy!にあるリンクをブックマークバーにドラッグ＆ドロップ。

◆設定

AmaQuick 02

amazonの商品ページで先程のブックマークレットをクリックすると、画面右上に設定ツールバーが出てくるので「設定」をクリック。

AmaQuick 03

アソシエイトIDや画像サイズの設定は簡単なのだが問題はテンプレート。画像リンクとテキストリンクはそのままでも使えるが、最初から入っているデフォルトのテンプレートは画像とテキストを組み合わせただけの簡素なもので使い勝手はイマイチ。

amazlet から AmaQuick へ: 部屋とバナナと私
そこでこのブログと同じくamazletのHTMLを流用。「~~丸パクリした~~参考にさせてもらった」なんて言いつつ載せているHTMLはAmaQuickに合わせつつ地味に改良もしてたり。

ただその改良したものを此処に丸ごと載せるのもアレだし、流用するだけなら自力でも案外何とかなったので以下はHTMLを改変するまでの手順。

◆amazletのHTMLを改変

AmaQuick 04

まず過去に自分のサイトなりブログなりに貼ったamazletのHTMLを用意。このままだと編集しづらいので適当なテキストエディタとHTML整形ツールを使用。

テキストエディタはHTMLを色分けできると見やすいので普段使っているMeryを使用。HTML整形ツールは物によって整形の仕方が微妙に違うし色々試してみたら以下のサイトがしっくりきた。
Mery 自分好みにカスタマイズできる多機能テキストエディタ
ＨＴＭＬ整形ツール（プチ・デバッグ機能付き）

AmaQuick 05

整形ツールでIndent Typeを「Tab」にして整形ボタンをクリックし、整形されたHTMLをテキストエディタに貼り付ける。実はMery単体でも整形できるけど設定見直すのも面倒なので…。

AmaQuick 06

整形後のHTMLがこちら。整形前よりだいぶ見やすくなって編集もしやすいはず。以下は編集した部分のメモだが◯行目はずれることあるかもしれないし大体の目安で。

編集箇所	備考
全体	「amazlet」を「AmaQuick」に全て置換。テキストエディタでまとめて置換するだけ。
	URL・画像・商品名などの部分をAmaQuickの変数に置換。
	見づらい箇所に半角スペースを入れるなどの微調整。
7行目 8行目	同じような内容なのにmargin-bottomとline-heightの順序が逆で違和感あったので統一。
14行目	ここに著者などの変数を入れる。複数の項目を入れる場合は改行に<br />が必要。


<div class="AmaQuick-detail">${author}
    <br />${avg_rating_img}
    <br />${formatted_price}
</div>

14行目で複数の項目を入れる場合はこんな感じ。上から著者・平均評価点星画像・整形済価格。

AmaQuick 07

改行・空白・タブ削除ツール｜ちょっと便利なツール・ジェネレーター置き場
編集を終えたらこのサイトでタブと改行をまとめて削除。設定で「改行」「タブ」にだけチェックを入れてHTMLを貼り付けるだけ。これもMeryでできることだがサイトでまとめてやった方が楽。

AmaQuick 08

AmaQuickの設定タブでテンプレートに編集したHTMLを貼り付け、保存してリロード。

AmaQuick 09

マウスオーバーでプレビューして納得いくものができたら完了。

以下が完成形したHTML。シンプルな『amazlet風』、それに評価・価格を追加した『カスタムver』。品質については保証できないので、もしこれを使う人がいるなら自己責任でお願いします。

2022/10/10追記
『CLS に関する問題』の対策をするなら画像の表示サイズを指定する必要があるので、下の広告だとaltの前辺りに『width="113" height="160"』のように手動で付け加える必要あり。自動で表示サイズの指定はAmaQuickだと無理っぽいかなあ。

▼amazlet風

少女辞典(1) (ガンガンコミックスONLINE)

posted with AmaQuick

安井万里絵(著)

Amazon.co.jpで詳細を見る

<div class="AmaQuick-box" style="margin-bottom: 0px;"><div class="AmaQuick-image" style="float: left; margin: 0px 12px 1px 0px;"><a href="${url}" name="AmaQuicklink" target="_blank"><img src="${img}" alt="${title}" style="border: none;"/></a></div><div class="AmaQuick-info" style="margin-bottom: 10px; line-height: 120%"><div class="AmaQuick-name" style="margin-bottom: 10px; line-height: 120%"><a href="${url}" name="AmaQuicklink" target="_blank">${title}</a><div class="AmaQuick-powered-date" style="font-size: 80%; margin-top: 5px; line-height: 120%">posted with <a href="https://creazy.net/amazon_quick_affiliate" title="AmaQuick" target="_blank">AmaQuick</a></div></div><div class="AmaQuick-detail">${author}</div><div class="AmaQuick-sub-info" style="float: left;"><div class="AmaQuick-link" style="margin-top: 5px"><a href="${url}" name="AmaQuicklink" target="_blank">Amazon.co.jpで詳細を見る</a></div></div></div><div class="AmaQuick-footer" style="clear: left"></div></div>

amzletの再現を目指したが、AmaQuickで売り上げランキングは表示できなかったし、広告クリックする人が発売日や広告貼った日付を気にするとも思えないので必要最低限のもののみ。著者もなければ更にシンプルになるが流石にそれは寂しいかなと。

▼カスタムver

少女辞典(1) (ガンガンコミックスONLINE)

posted with AmaQuick at 2020.04.27

安井万里絵(著)

￥628

Amazon.co.jpで詳細を見る

<div class="AmaQuick-box" style="margin-bottom: 0px;"><div class="AmaQuick-image" style="float: left; margin: 0px 12px 1px 0px;"><a href="${url}" name="AmaQuicklink" target="_blank"><img src="${img}" alt="${title}" style="border: none;"/></a></div><div class="AmaQuick-info" style="margin-bottom: 10px; line-height: 120%"><div class="AmaQuick-name" style="margin-bottom: 10px; line-height: 120%"><a href="${url}" name="AmaQuicklink" target="_blank">${title}</a><div class="AmaQuick-powered-date" style="font-size: 80%; margin-top: 5px; line-height: 120%">posted with <a href="https://creazy.net/amazon_quick_affiliate" title="AmaQuick" target="_blank">AmaQuick</a> at ${yyyy}.${mm}.${dd}</div></div><div class="AmaQuick-detail">${author}<br />${avg_rating_img}<br />${formatted_price}</div><div class="AmaQuick-sub-info" style="float: left;"><div class="AmaQuick-link" style="margin-top: 5px"><a href="${url}" name="AmaQuicklink" target="_blank">Amazon.co.jpで詳細を見る</a></div></div></div><div class="AmaQuick-footer" style="clear: left"></div></div>

評価・価格は変動しやすいので、いつ広告貼ったかの証明として一応日付も必要ではないかと。評価の★が黒背景だと見づらくなるのが難点。

◆etc

amazletのHTMLをAmaQuick向けに改変しただけのものなので、各サイトで公開されているamazletのCSSを「amazlet」から「AmaQuick」に置換するだけでたぶん使えるはず。

しかし最初に使っていたBabyLinkは3年で終了 → 10年以上続いているものだし無難だろうと使い始めたamazletは1年で終了 → amazletの製作者が代替先として勧めていたamachazlは2ヶ月で終了 → 現在使用中のAmaQuick…と利用しているサービス次々死にすぎてPA-APIの影響でかいなあ。

あと残っているのはAmazonログインの手間がかかるカエレバ風ぐらいだし選択肢がなさすぎる…。

関連記事

amazletからAmaQuickへ移行 2020/04/28
忍者AdMaxのポイントをAmazonギフト券に交換 2018/11/14
忍者AdMax レスポンシブ広告でPC・スマホの表示を切り替える 2017/11/03
Amazonアソシエイトの登録 2016/01/11
忍者AdMaxの登録＆広告の設置 2015/12/14

Comments 2

There are no comments yet.

ごんべえ

大変有用なテンプレート、ありがとうございます。
使わせていただきます。

2020/05/30 (Sat) 13:13
REPLY

ひっすー

テンプレート大変参考になりました。ありがとうございます。
amazletから流用出来たので助かりました。

2020/11/15 (Sun) 20:11
REPLY