こんにちは。
以下記事で、PA-API(Amazonの商品検索ページから情報を取得するシステム)のアクセス権の規約変更について簡単にまとめました。
また、PA-APIの規約変更に伴い、複数ショップの広告を同時かつコンパクトに貼り付けられるツール「カエレバ」の方針変更に伴い、Amazonの商品検索データを通じてカエレバで広告リンクを作成できなくなった点についても触れました。
プロブロガーの方やコアなアフィリエイターの方については存じませんが、カエレバは無料で誰でも簡単にリンク生成できるツールでしたので、Amazonの商品検索データからリンク生成できない今回のカエレバ側の変更によって、面食らった方も少なくないかと思われます。
Amazonの商品をベースに複数ショップのアフィリエイトリンクを貼りたい場合には、代替ツールを考えなくてはいけません。
収益が少なくPA-APIアクセス権が不足したり、そもそもAmazonアソシエイトのアカウントが作成できないブロガーでも、汎用性高く複数ショップのリンクを貼れるツールには、カッテネがあります。
カッテネの特徴については前回の記事に少しまとめています。
簡単に言うと
- 移動先のリンクを自分で自由に設定できる
- Amazonだけでなく様々なショップのリンクを移動先に設定できる
- PA-API権が無くても使える
- WordPressユーザー以外でも使える
- カエレバのような複数ショップリンクを綺麗に作れる
- 広告上のクレジット表記が不要
といった特徴があります。
収益の少ないブロガーでも自由に使えるので、PA-APIアクセス権が規制された今、困窮する弱小ブロガー(僕含む)に普及してほしいツールの一つであります。
ただ、唯一弱点を挙げるとすれば、リンク生成までの過程が面倒くさいということです。
カエレバを使用していた者にとっては、アフィリエイトコードをASPにログインして取得し、該当する移動先リンクを探してフォームにコピーして貼り付ける手間はできる限り省きたいと思います。
そこで、
を自作してみました。
(Javascript初挑戦です。多めに見てください。)
移動先アフィリエイトリンクや画像リンクを探して抽出、コピペしショートコードやHTMLを成形する手間が省けるので、カッテネでの広告作成が捗るはずです。
以下に
- 入力フォーム
- 使い方
- 自動生成の仕組み、解説
をまとめますので、興味のある方はぜひ使ってください。
すぐにカッテネで使えるショートコードやHTMLを生成したい方は、入力フォームのURLをブックマークして頂けるとありがたいです。
入力フォーム
以下に必要な情報を入力し、変換ボタンを押すと、カッテネで使用できるショートコードとHTMLが生成されます。
結果
使い方
自動生成ツールの使い方について説明します。
ブログにプラグインor CSSコードを設置する
カッテネリンクを用いて、複数ショップの広告を表示するには、事前にカッテネの公式サイトで公開されているプラグインもしくはCSSコードをブログに設置する必要があります。
プラグインはWordpressでのみ使用できます。その他のブログサービスを利用している方は公開されているCSSコードをブログのスタイルシートに貼り付ける必要があります。
プラグイン、CSSコード及び設置方法についてはカッテネ公式サイトを参照してください。
ASPの管理画面からアフィリエイトHTMLコードを取得
カッテネリンク自動生成ツールのフォームに入力するアフィリエイトHTMLコードを、ASPの管理画面から取得してください。 アフィリエイトHTMLコードをASPから取得する場合は、
- 画像付き商品リンク(画像+テキスト)
- 純粋なテキストのみのリンク
の2パターンがありますが、ここでは画像+テキストリンクを例に説明します。
基本どのASPのコードでも使用できます。Amazonや楽天の商品はもちろん、その他のショップや商品ページなどどんなアフィリエイトHTMLコードでも使えます。
Amazon商品紹介をする際に使える代表的なASPとしては
があります。ここではもしもアフィリエイトで画像＋テキストリンクを取得する方法を説明します。
もしもアフィリエイトでAmazonと楽天の商品リンクを同時に取得する場合は、かんたんリンクから商品を検索し取得すると便利です。
- Amazon、楽天 かんたんリンク
にアクセスします。ログイン又は会員登録を行ってください。
- 「かんたんリンクを使ってみる」をクリックします。
- 商品の検索ワードを入力し、広告を貼りたい商品が見つかったら、「選択する」をクリックします。
- ページ下部の「アフィリエイトリンク作成」をクリックします。画像も取得する場合のサイズは、160×160pixelで問題ないと思います。
- 商品ページのアフィリエイトHTMLコードが表示されるため、入力フォームにコピーしてください。
各入力フォームを埋める
入力フォームに適切な情報を入力します。
入力フォーム及び対応する広告表示の位置は以下になります。
- ショップ名
ショップボタン上に表示されるショップ名です。初期値では「Amazon」「楽天」「Yahoo!」「Kindle」「その他」となっていますが、掲載する広告に合わせて変更してください。 - ショップボタンカラー
ボタンの色を選択します。”orange” ”red” ”blue” ”green” ” pink”から選択ができます。 - コード入力欄
ASPからコピーしたアフィリエイトHTMLコードを直接コピーペーストしてください。画像付コード、テキストのみのコード、どちらでもOKです。
Linkswitchやオートリンクビルダーなどを使用していて、直リンクを設置したい場合は、直リンクを入力しても正常に動作します。 - メインショップの選択(HTMLのみ)
画像リンクおよびタイトル、メイン商品リンクをどのショップから取得するかを決めます。カッテネ用HTMLコードを取得したい場合のみ、自由に選択できます。(テキストのみのコードを入力したショップを選択すると、当然画像は空になりますのでご注意ください。)
ショートコードを利用したい場合は。初期値の「ショップ1」のままにし、ショップ1にメインに設定したいショップのアフィリエイトHTMLコードを入力してください。 - メイン商品リンク、メイン画像リンク、メインタイトルを差し替える場合
メインに表示される商品リンク、画像リンク、メインタイトルは任意のものに差し替えることが可能です。ASPの規約を確認したうえで行ってください。
メインショップを選択した上で、テキストボックスに情報を入力すると、その部分だけ差し替えられたリンクが表示されます。差し替えない場合は空欄で問題ありません。ショートコードの場合はメイン商品リンクを差し替えてしまうと恐らく正常に動作しないため、メイン商品リンクの差し替えはお控えください。
※ショップから取得したタイトルが長い場合(半角124文字以下)、下部のショップボタンに重なることがあるため、124文字目以降を“…”に置き換え省略する仕様にしました。省略形が望ましくない場合は、「タイトルを手動で付ける場合」に124文字以下のタイトルを手動で設定してください。 - 商品説明
メインリンク、タイトルの下のスペースに入力したい説明文やテキストがあれば入力してください。空欄でも構いません。
変換ボタン
全ての入力が終わり、変換ボタンを押すと、下部に
- 有効リンク数(正常に認識されたショップリンクの数)
- アフィリエイトリンク(href=”★★”の星の部分を抽出したもの)
- 画像リンク(imgタグのsrc=”☆☆”の星の部分を抽出したもの)
- カッテネ用ショートコード及びHTMLコード
が表示されます。
リンク数等正常に認識されていれば、ショートコードやHTMLコードをブログのエディターにコピーし、正常にカッテネリンクが表示されるか確認をお願いします。
もし、正常に動作しない場合はご報告を頂けるとありがたいです。(改善、改良の保証はできませんが…)
ショップデータ、生成データのクリア
ショップデータを入力したまま、新たなカッテネリンク用コードを作成したい場合は、生成結果のみクリアしてください。ページの再読み込みをすると、おそらく入力したショップデータは初期値に戻ってしまいます。
解説
自動生成ツールの仕組みについて簡単に解説します。
ASPから取得できるアフィリエイトHTMLコードの構造
ここでは、Amazonの商品紹介を高料率で行えるASP もしもアフィリエイト で生成されるアフィリエイトHTMLコードを例に示します。ただバリューコマースやA8.netなど他のASPから取得しても、コードの基本構造は変わりませんので、どのASPのコードでも使用できるはずです。
基本構造
得られるHTMLコードは以下の基本構造を持っています。
<a>タグ
<a~~~~>〇〇〇</a>のように、aで表されている<a>タグがメインとなります、<a>タグを用いと、テキストをクリックした閲覧者を商品ページに飛ばすことが出来ます。
<a>タグの内部に含まれる、href=以降の文字列(href=”★★”の星の部分)が移動先の商品リンクになります。ASPから取得したコードの場合は、href=”アフィリエイトリンク”なるため、href=で記述されたリンクに適切に飛ばしてあげることで、クリック成果がカウントされます。
また、<a~~~>と</a>で囲まれた文字列(<a~~~>〇〇</a>の丸の部分)がテキスト部分になります。一般的に商品名や宣伝文句が入っています。
<img>タグ
商品紹介ページの画像リンクが格納されています。
＜img~~~>の中に含まれるsrc=の後の文字列(src=”☆☆“の星の部分)が、画像リンクになります。
テキストのみのHTMLコードを取得した場合には、この<img>タグが無いコードと認識していただければOKです。
その他の属性について
target=”_blank”、rel=”nofollow”、style=”border: 0px none;”など、<a>タグや<img>タグの中にはその他の属性が含まれています。
基本的に、
- 商品ページのリンク
- 画像リンク
- タイトル部分
を抽出すればカッテネリンクは成形できます。ただ、カッテネ用HTMLを成形する際にはこれらの属性も一緒に組み込んでいます。
自動生成の仕組み
仕組みは至って単純です。(その単純な仕組みを作るのに1か月以上かかったのですが…)
カッテネ解説ページには、カッテネ用のショートコードとHTMLコードのテンプレートがあります。
自動生成ツールでは、アフィリエイトHTMLコードから、
- 商品ページへのリンク(href=”★★“)
- 画像リンク(img ~~ src=”☆☆“)
- タイトル部分(<a>〇〇</a>)
を抽出し、カッテネのショートコード、HTMLコードのテンプレートに当てはめ、表示する仕組みになっています。
つまり、最低限ASPの管理画面からアフィリエイトHTMLコードをコピーしてしまえば、あとは自動でカッテネが使えるようにコードを作ってくれる仕様です。
また、表示されるボタンの色はプルダウンで選択することが出来ます。
その他の機能
個人的にあったほうが良いかなと思った機能だけつけました。
直リンク(バリューコマースのLinkswitch、リンクシェアのオートリンクビルダーに対応)
ASPの中には、管理画面にログインしてアフィリエイトコードを取得しなくても、アフィリエイトに対応したショップページの直リンクを貼り付ければ自動的にアフィリエイトコードに変換してくれる機能を持つASPがあります。
バリューコマースのLinkswitch機能、リンクシェアのオートリンクビルダー機能がそれに当たります。
これらの機能を使っている場合は、管理画面からアフィリエイトコードを取得する必要もないため、自動生成入力フォームに直リンクを貼り付けても正常にカッテネ用コードに変換できるようにしてあります。
Linkswitchやオートリンクビルダー対応のショップサイト、もしくは直リンクをそのままカッテネに組み込みたい場合は、直リンクをフォームに入力してください。
メインショップの選択が可能(HTMLコード生成時のみ)
カッテネ用HTMLコードを生成する場合は、メインショップの選択ができます。
メインショップとは、画像リンクやタイトルを抽出するショップのことです。例えば、楽天のアフィリエイトHTMLコードを貼り付けて、楽天をメインショップに選べば、画像リンクとタイトルは楽天のコードから取得されます。
カッテネは計5つのショップリンクを指定できますが、HTMLコードを生成する場合は、1~5のどのショップでもメインに指定することが出来ます。つまり、メインショップの選択は右端でも左端でも真ん中でもいいということですね。
ただし、ショートコードの場合、メインショップはショップ1(左端のボタンの情報)しか指定ができません。他のショップを選択した場合にはタイトルや画像のリンクがうまく設定されないようです。
メイン商品リンク、メインタイトル、メイン画像情報の差し替えが可能(HTML生成時のみ、注意事項あり)
メインの商品リンクはAmazonからとってきたいけど、画像は楽天を使いたい、他のページから取ってきたい、ということもあると思います。
その為、商品リンクやタイトル、画像リンクは、別のURLをテキストボックスに入力することで差し替えることが可能です。
この機能も、HTMLコード生成時にはうまく表示されますが、ショートコードの場合には不具合がでる可能性があります。
補足及びバグ修正履歴
手が回る範囲内で動作テストをしてみています。そのなかでいくつか気づいた点、改善てきていない点をメモしておこうと思います
ショートコード(JSON形式)は改行の入る位置によってエラーになる
カッテネ用ショートコードはJSON形式で記述されています。
初めは、生成後のコードを手動でも改変しやすいように、改行を加えて見やすく表記したいと思っていました。しかし、
- 5つのショップについて反復処理を行う際に改行を入れるとそれが元でエラーになる
- フォームに入力するアフィリエイトHTMLコードや直リンク内に改行が含まれるとそれが元でエラーになる
等々、改行がもとでショートコードが機能しないことが多いようです。
テキストボックスの改行を全て取り除く
適切に改行を行えばエラーは出ないのだと思いますが、ちょっと面倒なので(笑)、
- アフィリエイトコード入力欄
- 「その他」のテキストボックス(複数行の入力が可能なテキストボックス)
の改行は全て取り除くことで、生成したショートコードのエラーを避けています。
カッテネ用HTMLコードを生成する場合は、タイトルや説明欄などに意図的に改行を入れたい場合もあると思うのですが。これらも生成の過程で全て消してしまっているので、申し訳ありませんが生成後に手動で改行を加えてください。
テキストのみのアフィリエイトコードを貼り付けた場合の画像リンクについて
商品画像リンクを含まない、テキストリンクのみのアフィリエイトコードを貼り付けた場合の注意点です。
アフィリエイトHTMLコードを観察すると2種類のimgタグがあることがわかります。1つ目が商品ページの画像リンク、2つ目がWebビーコンと呼ばれる非常に小さな透明の画像です。Webビーコンはアクセス解析のために用いられる画像であるため、広告掲載時の見た目には寄与しません。
このWebビーコンは、アフィリエイトコードが「画像+テキストリンク」「テキストリンクのみ」どちらの場合であっても、aタグの後ろ(</a>の後)に付記されます。
この自動生成ツールでは、HTMLコードの初めからimgタグとsrc=”☆☆”の部分を探し出し画像リンクを抽出します。
「画像+テキストリンク」をフォームに入力する場合、おそらくほとんどのアフィリエイトHTMLコードは、aタグに挟まれた商品リンクが先に現れるので、正常に抽出できると思います。
ただ、「テキストリンクのみ」をフォームに入力した場合は、imgタグとして存在するものはWebビーコンしかありませんので、このWebビーコンが画像リンクとして抽出されてしまいます。
そのため、画像リンクが抽出されていたとしてもそれは商品ページの画像ではないため正しく表示することが出来ません。(以下のようになるはずです)
Webビーコンが抽出されてしまい正しく表示されない場合は、画像リンク(aタグに挟まれたimgタグ)が含まれるショップをメインショップ(ショートコードの場合はショップ1)に指定するか、もしくはアフィリエイトの規約を確認したうえで、画像リンクを別途追加して広告を生成してください。
もし商品画像リンクよりも先にWebビーコンが表記されていて、正しく商品画像リンクが抽出できない場合は、コメントを頂けると幸いです。できる限り対処いたします。
ショートコード生成時のショップ間のカンマについて
ショートコードにショップ情報を反映し、ブログ上でエラーなく表示するためには、ルールにのっとり、”sites”で示されるショップ情報にカンマを付記する必要があります。
例を以下に挙げます。
“sites”:[{ショップ1},{ショップ2},{ショップ4}]
“sites”:[{ショップ1},{ショップ2},{ショップ4},{ショップ5}]
“sites”:[{ショップ1},{ショップ2},{ショップ4},](末尾にカンマが挿入されているためエラー)
“sites”:[{ショップ1} {ショップ3},{ショップ5}](ショップ間にカンマが入っていないためエラー)
ショップ情報の括弧の間にだけ、正確にカンマを入れる必要があることがわかります。
2019/03/17更新時に、ショップデータに対してカンマが正常に挿入されるように修正をしました。エラーや問題が引き続き発生する場合は、ご連絡ください。
「その他」(補足情報)への入力時、アフィリエイトHTMLタグ及び直リンク(テキスト)の両方で動作するよう対応
このツールは、ショップ情報を含むアフィリエイトHTMLコードから、商品URL、画像URL、タイトル等を抜き出す手間を省く目的で製作したため、ショップ情報に含まれない商品リンクや画像リンク、タイトル、商品説明を入力したい場合は、直リンクやテキストをフォームに入力していただく仕様でした。
ただ、アフィリエイトHTMLコードを取得する際に、
「商品リンクはコードAから、画像リンクはコードBから持ってきたい」
といったように、複数のHTMLコードから別々のデータを抽出してカッテネリンクを生成したいというご意見を頂きました。
この場合、補足情報に直リンクやテキストしか使用できない場合であると、リンク該当部分を手動で抽出しなければいけないので面倒になります。
そこで、その他(補足情報)の入力欄も、HTMLコードと直リンクやテキストの両方に対応し、アフィリエイトHTMLコードをコピペすれば必要な情報を抽出してペーストできる仕様に変更しました。(2019/03/17現在)
使用例を以下に示します。
コード1→ショップ1
コード2→「メイン画像リンクを別に参照する場合」
コード3→「タイトルを手動で付ける場合」
にコピペしてください。
その他の入力欄が空欄の場合は、ショップ情報入力欄のメインショップから情報を抽出します。
その他の入力欄に情報を入力した場合は、ショップ情報よりもその他の情報がメイン情報として優先的に抽出されます。
現状上手く動くはずですが、いろいろ仕様を弄ったので不具合が生じるかもしれません。不具合を発見された方はお手数ですがご報告いただけますと幸いです。
おわりに
とりあえず何とか使えるレベルにはなったと思うので公開します。
次Javascriptにトライするのは何年後になるだろうか…