ブログでAmazonなどのアフィリエイトをする際に、これまで非常に活躍していたカエレバというリンク生成ツールが、AmazonのProduct Advertising API (PA-API) のポリシー変更で、楽天市場主体の使いにくいサービスになってしまいました。
長らく使わせていただいていたので感謝しかありませんが、せっかくプログラミングスクールでコードを書けるようになったので、じぶんでリンク生成ツールをつくってみました。備忘録です。
まずはググってみた
じぶんでリンク生成ツールをつくろうかな～～～とググってみると、カッテネという代替サービスが見つかりました。
なかなかいいですよね。が、カエレバ風なデザインに個人的に飽きていたのと、複数のボタンを設置してもほとんどAmazonからしか発生しないというこれまでの経験から、ボタンはひとつでいいのでは？と考えました。
きんどうさんの真似をしてみた
そして、ボタンがひとつなら、日々利用させていただいている「きんどう」さんの真似をしようと、ボタンの構造を調べてみました。
ふむふむ。それでできたボタンはこちら。こちらのブログ（ミライのおもちゃ箱）でCSS設定して改めてリンク貼るのめんどくさかったので、とりあえず妻のブログのスクショです笑
スマホ用のデザインをいじってみた
きんどうさんのボタンを分析する中で、ウィンドウ幅が小さいと説明文を消すとか、スマホなどの小さな画面でも一覧性高く表示できるところとか、学びが深かったです。
そんでレスポンシブ対応でスマホもばっちりかな～～～とやってみると、
Oh！ガッデム！使わせていただいてるはてなブログのテーマ「Contents」の影響で、スマホ画面の余白が大きく、もろもろズレちゃって微妙な仕上がりに。
一時は「はてなブログのテーマを自作しなきゃか～～～」と思いましたが、調べてみるとはてなブログのテーマはCSSデータがそのままダウンロードできるので、ダウンロードして中身をチェック。
全体で3000行程度と初心者にはなかなかボリューミーでしたが、該当する箇所だけGoogle Chromeの検証ツールでチェックしながら修正すれば、簡単でした。
で、修正してこんな感じに。
ちょっと例にだしたVer.Kaのサザビーが商品名が長すぎで微妙ですが、もろもろ収まったのでひと安心です。
あと、はてなブログのテーマ「Contents」にはウィンドウ幅を変えたときに768～784pxでグローバルメニューが消えるというバグがありますが、jQueryとCSSを書き換えてデバックしました。
リンクを貼り替えまくった
とりあえずボタンができたので、妻のこれまでのブログ、85記事に対してリンクの貼り替え作業をしました。下のHTMLの該当部分にAmazonから情報をコピペして、貼りなおしてとクソめんどくさい作業でした。
作業後にリンク生成ツールをつくってみた
かなり時間がかかりましたが無事作業が終わったので、少しでも作業が楽になるようにじぶん用のリンク生成ツールをつくることにしました。
下の画面でもろもろの情報をコピペして入力すると、先ほどの黒い画面の画像のような<div>…と続く加工後の情報を得られるようにつくりました。
入力すると下の画像のようにデータベース上で管理できるわけです。これまでなかった一覧性があって、修正も楽なのでやったね！
とはいえ、データベースでみるのも大変なので、検索できるようにしました。
上の画像のように検索したいワードを入力すると、下の画像のように、検索したワードがタイトルに入っているものに対して、生成後のリンクのイメージとそのために必要なコードがつらつらとでてきます。
ふう。ここまでやって一旦開発を終了しました。
他に追加したい機能とか、必要な機能とかもろもろありますが、半日の作業なのでこんなもんでしょう。記事中で興味があるものとかあったら聞いてください（Twitterでもコメントでも）。
このアイデアをベースにやりたいことができたので、なる早で改良して妻のブログで試してみます…！
記事公開後に実装したもの
試したかったのはカタログみたいに商品を並べる機能でした。
思ったより簡単に実装できたので、妻のブログで実際に使ってもらいました。以下の記事のようにカタログ風に商品を貼りつけられて、一覧性が高くていいです…かね！