リンク生成にカエレバを便利に使わせていただいていたのですが、AmazonAPIの仕様変更により、Amazonを主軸にしたリンクが生成できなくなってしまいました。
ショートコードは使いたくなかったので、なんとかコピペで自作できないか考えてみました。
もくじ
カエレバの代替
カエレバの存在を知ってすぐに使い始め、今ではリンク生成はガッツリと依存していました。
Amazonのリンク生成ができないのは、はっきり言って辛いです。
楽天やYAHOOショッピングでは、いままでどおり使えるので、これからも使っていこうと思っていますが、Amazonの商品を紹介したいとき用に代替を考えないといけません。
カエレバの代替に使えそうなツールを探してみたところ、いくつか見つかりました。
- Rinker・・・WordPressのプラグイン
- カッテネ・・・WordPressのプラグイン
- WPアソシエイトポスト・・・WordPressのプラグイン
WordPressのプラグインになっていて、割と簡単にリンク生成ができるようになっているのですが、どれもショートコードを使っています。
サーバを変えたり、テーマを変えたりしたときにネックになるので、なるべくならショートコードは使いたくありません。
ということで、コピペでなんとか簡単にできないか考えてみました。
リンクを自作
見た目は今までのカエレバと同じように、極力手間を少なくコピペ主体でリンクを作れるよう自作してみます。
生成コード完成形
コード自体は、カエレバで生成されるコードを最終的な完成形として利用します。
こうすることで、カエレバで使っていたクラスや構成がそのまま利用でき、CSSでの装飾も統一することができます。
カエレバの生成するリンク構成は、この様になっています。
<div class="cstmreba">
<div class="kaerebalink-box">
<div class="kaerebalink-image"><a href="Amazon商品リンク" target="_blank"><img style="border: none;" src="Amazon商品画像リンク" /></a></div>
<div class="kaerebalink-info">
<div class="kaerebalink-name"><a href="Amazon商品リンク" target="_blank">商品タイトル</a>
<div class="kaerebalink-powered-date">posted with <a href="https://kaereba.com" rel="nofollow" target="_blank">カエレバ</a></div>
</div>
<div class="kaerebalink-detail">製造元</div>
<div class="kaerebalink-link1">
<div class="shoplinkamazon"><a href="Amazon商品リンク" target="_blank">Amazonで見る</a></div>
<div class="shoplinkrakuten"><a href="楽天市場リンク" target="_blank">楽天市場で見る</a></div>
<div class="shoplinkyahoo"><a href="Yahooショッピングリンク" target="_blank">Yahooショッピングで見る</a></div>
</div>
</div>
<div class="booklink-footer"> </div>
</div>
</div>
赤文字の部分を書き換えることで、カエレバと同様のリンクとして、見た目も同じように表示させることができます。
グレーの部分は、不要であれば削除しても良いと思います。
半自動化
なるべくコピペのみで手間を少なくすることを目標に、半自動化を目指します。
Simplicityのクラスを利用するために、SublimeTextのSnippet機能を利用した記事で紹介した方法を利用します。
折角ですので積極的に使っていきたいと思います。
具体的な登録方法を紹介した記事はこちらになります。
Snippetの登録
新規で登録するSnippetの内容はこちら。
<snippet>
<content><![CDATA[
<div class="cstmreba">
<div class="kaerebalink-box">
<div class="kaerebalink-image"><a href="https://www.amazon.co.jp/dp/${1}/AmazonアソシエイトID" target="_blank"><img style="border: none;" src="http://images-jp.amazon.com/images/P/${1}.09.MZZZZZZZ" /></a></div>
<div class="kaerebalink-info">
<div class="kaerebalink-name"><a href="https://www.amazon.co.jp/dp/${1}/AmazonアソシエイトID" target="_blank">${2}</a>
</div>
<div class="kaerebalink-link1">
<div class="shoplinkamazon"><a href="https://www.amazon.co.jp/dp/${1}/AmazonアソシエイトID" target="_blank">Amazonで見る</a></div>
<div class="shoplinkrakuten"><a href="https://hb.afl.rakuten.co.jp/hgc/楽天アフィリエイトID/?pc=http%3A%2F%2Fsearch.rakuten.co.jp%2Fsearch%2Fmall%2F${3}%2F-%2Ff.1-p.1-s.1-sf.0-st.A-v.2%3Fx%3D0%26scid%3Daf_ich_link_urltxt%26m%3Dhttp%3A%2F%2Fm.rakuten.co.jp%2F" target="_blank">楽天市場で見る</a></div>
<div class="shoplinkyahoo"><a href="https://ck.jp.ap.valuecommerce.com/servlet/referral?sid=バリューコマースsid値&pid=バリューコマースpid値&vc_url=http%3A%2F%2Fsearch.shopping.yahoo.co.jp%2Fsearch%3Fp%3D${3}" target="_blank">Yahooショッピングで見る</a></div>
</div>
</div>
<div class="booklink-footer"> </div>
</div>
</div>
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>amzlin</tabTrigger>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<!-- <scope>source.python</scope> -->
</snippet>
黒文字の部分が、変更した箇所です。青色のIDはそれぞれご自分のIDを入力してください。
ポイントは赤文字の箇所。
Snippetを呼び出すと、${1}の４箇所にそれぞれにカーソルが来ています。
tabを押すと${2}へカーソルが移動します。
再度tabを押すと${３}の２箇所へカーソルが移動します。
最後にtabを押すと行末にカーソルが移動します。
この挙動を利用して、${1}の部分にASINを、${2}の部分に商品タイトルを、${３}の部分に検索ワードを入れて使います。
ASINの取得
ASINを毎回Amazonの商品ページから探し出してコピペするのは結構手間ですので、こちらもなるべく手間なく取得できるように、javascriptを利用します。
コードはこちらのページを参考にしました。というかそのまま使わせていただきました。
ブックマークレットに登録しておけば、クリックひとつでASINを取得できます。
取得したASINをSnippetの${1}に貼り付けます。
商品タイトルと検索ワードを入力
Snippetの${2}の箇所に商品タイトルを入力します。
今の所、コピペで商品タイトルを貼り付けるようにしています。
ここもできればBookmarklet化したいところです。
最後にSnippetの${３}の箇所に検索ワードを入力します。
「Amazonで見る」のボタンは個別商品ページに飛びますが、「楽天市場で見る」「Yahooショッピングで見る」ボタンは、検索結果画面に飛ぶようになっています。
紹介する商品の型番であったり、カテゴリーであったり、好きなワードをコピペもしくは手打ちしてください。
日本語で入力してもきちんと検索されます。
結果
このSnippetを使って作成したリンクがこちらです。
拙いテクニックですが、急場しのぎとしてはそれなりに使えそうです。
javascriptやPHPなど、もっと勉強してそれなりのものが作れるようになりたいです。
