フリーソフトやChrome拡張機能の使い方、ゲーム攻略、漫画感想など雑多な内容。

amazletからAmaQuickへ移行

1 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 自分好みにカスタマイズできる多機能テキストエディタ
HTML整形ツール(プチ・デバッグ機能付き)


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』。品質については保証できないので、もしこれを使う人がいるなら自己責任でお願いします。

▼amazlet風
<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
<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ログインの手間がかかるカエレバ風ぐらいだし選択肢がなさすぎる…。
関連記事
RYO
管理人RYO

Comments 1

There are no comments yet.
ごんべえ

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

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