ミライのおもちゃ箱

プログラミング・VR・ドローンとか

はてなブログで、カエレバの代替サービス・カッテネを元にじぶん用のボタン生成ツールをつくってみた

ブログでAmazonなどのアフィリエイトをする際に、これまで非常に活躍していたカエレバというリンク生成ツールが、AmazonのProduct Advertising API (PA-API) のポリシー変更で、楽天市場主体の使いにくいサービスになってしまいました。

 

www.wakatta-blog.com

 

長らく使わせていただいていたので感謝しかありませんが、せっかくプログラミングスクールでコードを書けるようになったので、じぶんでリンク生成ツールをつくってみました備忘録です。

 

まずはググってみた

じぶんでリンク生成ツールをつくろうかな~~~とググってみると、カッテネという代替サービスが見つかりました。

 

webfood.info

 

なかなかいいですよね。が、カエレバ風なデザインに個人的に飽きていたのと、複数のボタンを設置してもほとんどAmazonからしか発生しないというこれまでの経験から、ボタンはひとつでいいのでは?と考えました。

 

きんどうさんの真似をしてみた

そして、ボタンがひとつなら、日々利用させていただいている「きんどう」さんの真似をしようと、ボタンの構造を調べてみました。

 

kindou.info

 

ふむふむ。それでできたボタンはこちら。こちらのブログ(ミライのおもちゃ箱)でCSS設定して改めてリンク貼るのめんどくさかったので、とりあえずみー子のブログのスクショです笑

 

f:id:sayadoki:20190328154252p:plain

 

スマホ用のデザインをいじってみた

きんどうさんのボタンを分析する中で、ウィンドウ幅が小さいと説明文を消すとか、スマホなどの小さな画面でも一覧性高く表示できるところとか、学びが深かったです。

 

そんでレスポンシブ対応でスマホもばっちりかな~~~とやってみると、

 

f:id:sayadoki:20190328155342j:plain

 

Oh!ガッデム!使わせていただいてるはてなブログのテーマ「Contents」の影響で、スマホ画面の余白が大きく、もろもろズレちゃって微妙な仕上がりに。

 

一時は「はてなブログのテーマを自作しなきゃか~~~」と思いましたが、調べてみるとはてなブログのテーマはCSSデータがそのままダウンロードできるので、ダウンロードして中身をチェック。

 

全体で3000行程度と初心者にはなかなかボリューミーでしたが、該当する箇所だけGoogle Chromeの検証ツールでチェックしながら修正すれば、簡単でした。

 

で、修正してこんな感じに。

 

f:id:sayadoki:20190328155349j:plain

 

ちょっと例にだしたVer.Kaのサザビーが商品名が長すぎで微妙ですが、もろもろ収まったのでひと安心です。

 

あと、はてなブログのテーマ「Contents」にはウィンドウ幅を変えたときに768~784pxでグローバルメニューが消えるというバグがありますが、jQueryとCSSを書き換えてデバックしました。

リンクを貼り替えまくった

とりあえずボタンができたので、ぜー子のこれまでのブログ、85記事に対してリンクの貼り替え作業をしました。下のHTMLの該当部分にAmazonから情報をコピペして、貼りなおしてとクソめんどくさい作業でした。

 

f:id:sayadoki:20190328160621p:plain

 

作業後にリンク生成ツールをつくってみた

かなり時間がかかりましたが無事作業が終わったので、少しでも作業が楽になるようにじぶん用のリンク生成ツールをつくることにしました。

 

下の画面でもろもろの情報をコピペして入力すると、先ほどの黒い画面の画像のような<div>…と続く加工後の情報を得られるようにつくりました。

 

f:id:sayadoki:20190328161451p:plain

 

入力すると下の画像のようにデータベース上で管理できるわけです。これまでなかった一覧性があって、修正も楽なのでやったね!

 

f:id:sayadoki:20190328161752p:plain

 

とはいえ、データベースでみるのも大変なので、検索できるようにしました。

 

f:id:sayadoki:20190328161409p:plain

 

上の画像のように検索したいワードを入力すると、下の画像のように、検索したワードがタイトルに入っているものに対して、生成後のリンクのイメージとそのために必要なコードがつらつらとでてきます。

 

f:id:sayadoki:20190328161405p:plain

 

ふう。ここまでやって一旦開発を終了しました。

 

他に追加したい機能とか、必要な機能とかもろもろありますが、半日の作業なのでこんなもんでしょう。記事中で興味があるものとかあったら聞いてください(Twitterでもコメントでも)。

 

このアイデアをベースにやりたいことができたので、なる早で改良してぜー子のブログで試してみます…!

 

記事公開後に実装したもの

試したかったのはカタログみたいに商品を並べる機能でした。

 

思ったより簡単に実装できたので、ぜー子のブログで実際に使ってもらいました。以下の記事のようにカタログ風に商品を貼りつけられて、一覧性が高くていいです…かね!

 

www.kure-choro.club