ブログ作成こんにちは。以下記事で、PA-API(Amazonの商品検索ページから情報を取得するシステム)のアクセス権の規約変更について簡単にまとめました。PA-APIの規約変更に伴い、複数ショップの広告を同時かつコンパクトに貼り付けられるツール「カエレバ」の方針変更に伴い、Amazonの商品検索データを通じてカエレバで広告リンクを作成できなくなった点についても触れました。Amazonアソシエイト界隈が、にわかに騒々しいです。04:05プロブロガーの方やコアなアフィリエイターの方については存じませんが、カエレバは無料で誰でも簡単にリンク生成できるツールでしたので、Amazonの商品検索データからリンク生成できない今回のカエレバ側の変更によって、面食らった方も少なくないかと思われます。Amazonの商品をベースに複数ショップのアフィリエイトリンクを貼りたい場合には、代替ツールを考えなくてはいけません。収益が少なくPA-APIアクセス権が不足したり、そもそもAmazonアソシエイトのアカウントが作成できないブロガーでも、汎用性高く複数ショップのリンクを貼れるツールには、カッテネがあります。カエレバやヨメレバより使い方が簡単なカッテネ作った|クリックもされやすいよカエレバやヨメレバは、1商品についていろんなASPのアフィリエイトリンクを表示させることができ、素晴らしいアイディアだと思いました。評判の割に、実際に使ってみると結構難しい。簡単に使えるカッテネというものを作りました。webfood.infoカッテネの特徴については前回の記事に少しまとめています。簡単に言うと移動先のリンクを自分で自由に設定できるAmazonだけでなく様々なショップのリンクを移動先に設定できるPA-API権が無くても使えるWordPressユーザー以外でも使えるカエレバのような複数ショップリンクを綺麗に作れる広告上のクレジット表記が不要といった特徴があります。収益の少ないブロガーでも自由に使えるので、PA-APIアクセス権が規制された今、困窮する弱小ブロガー(僕含む)に普及してほしいツールの一つであります。唯一弱点を挙げるとすれば、リンク生成までの過程が面倒くさいということです。カエレバを使用していた者にとっては、アフィリエイトコードをASPにログインして取得し、該当する移動先リンクを探してフォームにコピーして貼り付ける手間はできる限り省きたいと思います。そこで、ASPのアフィリエイトHTMLコードから、移動先のリンクを抽出し、カッテネで使えるショートコードとHTML(カッテネリンク)を同時自動生成するツールを自作してみました。(Javascript初挑戦です。)移動先アフィリエイトリンクや画像リンクを探して抽出、コピペしショートコードやHTMLを成形する手間が省けるので、カッテネでの広告作成が捗るはずです。自動生成の仕組み、解説をまとめますので、興味のある方はぜひ使ってください。カッテネで使えるショートコードやHTMLを生成したい方は、入力フォームのURLをブックマークして頂けるとありがたいです。入力フォーム以下に必要な情報を入力し、変換ボタンを押すと、カッテネで使用できるショートコードとHTMLが生成されます。ショップ1ショップ名:ショップボタンカラー:orangeredbluegreenpinkコード入力欄:ショップ2ショップ名:ショップボタンカラー:orangeredbluegreenpinkコード入力欄:ショップ3ショップ名:ショップボタンカラー:orangeredbluegreenpinkコード入力欄:ショップ4ショップ名:ショップボタンカラー:orangeredbluegreenpinkコード入力欄:ショップ5ショップ名:ショップボタンカラー:orangeredbluegreenpinkコード入力欄:メインショップの選択(HTML生成時可、ショートコート生成時不可)画像リンク、メインリンク、タイトルを抽出したいショップを選択してください。自動生成ツールの使い方について説明します。CSSコードを設置するカッテネリンクを用いて、複数ショップの広告を表示するには、事前にカッテネの公式サイトで公開されているプラグインもしくはCSSコードをブログに設置する必要があります。プラグインはWordpressでのみ使用できます。その他のブログサービスを利用している方は公開されているCSSコードをブログのスタイルシートに貼り付ける必要があります。プラグイン、CSSコード及び設置方法についてはカッテネ公式サイトを参照してください。ASPの管理画面からアフィリエイトHTMLコードを取得カッテネリンク自動生成ツールのフォームに入力するアフィリエイトHTMLコードを、ASPの管理画面から取得してください。画像付き商品リンク(画像+テキスト)純粋なテキストのみのリンクの2パターンがありますが、ここでは画像+テキストリンクを例に説明します。基本どのASPのコードでも使用できます。Amazonや楽天の商品はもちろん、その他のショップや商品ページなどどんなアフィリエイトHTMLコードでも使えます。Amazon商品紹介をする際に使える代表的なASPとしてはもしもアフィリエイトバリューコマースA8.netがあります。ここではもしもアフィリエイトで画像+テキストリンクを取得する方法を説明します。アフィリエイトでAmazonと楽天の商品リンクを同時に取得する場合は、かんたんリンクから商品を検索し取得すると便利です。ログイン又は会員登録を行ってください。「かんたんリンクを使ってみる」をクリックします。商品の検索ワードを入力し、広告を貼りたい商品が見つかったら、「選択する」をクリックします。ページ下部の「アフィリエイトリンク作成」をクリックします。画像も取得する場合のサイズは、160×160pixelで問題ないと思います。商品ページのアフィリエイトHTMLコードが表示されるため、入力フォームにコピーしてください。各入力フォームを埋める入力フォームに適切な情報を入力します。入力フォーム及び対応する広告表示の位置は以下になります。ショップ名ショップボタン上に表示されるショップ名です。初期値では「Amazon」「楽天」「Yahoo!」「Kindle」「その他」となっていますが、掲載する広告に合わせて変更してください。ショップボタンカラーボタンの色を選択します。pink”から選択ができます。コード入力欄ASPからコピーしたアフィリエイトHTMLコードを直接コピーペーストしてください。画像付コード、テキストのみのコード、どちらでもOKです。Linkswitchやオートリンクビルダーなどを使用していて、直リンクを設置したい場合は、直リンクを入力しても正常に動作します。メインショップの選択(HTMLのみ)画像リンクおよびタイトル、メイン商品リンクをどのショップから取得するかを決めます。カッテネ用HTMLコードを取得したい場合のみ、自由に選択できます。(テキストのみのコードを入力したショップを選択すると、当然画像は空になりますのでご注意ください。)ショートコードを利用したい場合は。初期値の「ショップ1」のままにし、ショップ1にメインに設定したいショップのアフィリエイトHTMLコードを入力してください。メイン商品リンク、メイン画像リンク、メインタイトルを差し替える場合メインに表示される商品リンク、画像リンク、メインタイトルは任意のものに差し替えることが可能です。ASPの規約を確認したうえで行ってください。メインショップを選択した上で、テキストボックスに情報を入力すると、その部分だけ差し替えられたリンクが表示されます。差し替えない場合は空欄で問題ありません。ショートコードの場合はメイン商品リンクを差し替えてしまうと恐らく正常に動作しないため、メイン商品リンクの差し替えはお控えください。※ショップから取得したタイトルが長い場合(半角124文字以下)、下部のショップボタンに重なることがあるため、124文字目以降を“...”に置き換え省略する仕様にしました。省略形が望ましくない場合は、「タイトルを手動で付ける場合」に124文字以下のタイトルを手動で設定してください。商品説明メインリンク、タイトルの下のスペースに入力したい説明文やテキストがあれば入力してください。変換ボタン全ての入力が終わり、変換ボタンを押すと、下部に有効リンク数(正常に認識されたショップリンクの数)アフィリエイトリンク(href=”★★”の星の部分を抽出したもの)画像リンク(imgタグのsrc=”☆☆”の星の部分を抽出したもの)カッテネ用ショートコード及びHTMLコードが表示されます。リンク数等正常に認識されていれば、ショートコードやHTMLコードをブログのエディターにコピーし、正常にカッテネリンクが表示されるか確認をお願いします。正常に動作しない場合はご報告を頂けるとありがたいです。(改善、改良の保証はできませんが...)ショップデータ、生成データのクリアショップデータを入力したまま、新たなカッテネリンク用コードを作成したい場合は、生成結果のみクリアしてください。ページの再読み込みをすると、おそらく入力したショップデータは初期値に戻ってしまいます。自動生成ツールの仕組みについて簡単に解説します。生成されるアフィリエイト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です。none;"など、<a>タグや<img>タグの中にはその他の属性が含まれています。商品ページのリンク画像リンクタイトル部分を抽出すればカッテネリンクは成形できます。カッテネ用HTMLを成形する際にはこれらの属性も一緒に組み込んでいます。自動生成の仕組み仕組みは至って単純です。(その単純な仕組みを作るのに1か月以上かかったのですが...)カッテネ解説ページには、カッテネ用のショートコードとHTMLコードのテンプレートがあります。src=”☆☆“)タイトル部分(<a>〇〇</a>)を抽出し、カッテネのショートコード、HTMLコードのテンプレートに当てはめ、表示する仕組みになっています。最低限ASPの管理画面からアフィリエイトHTMLコードをコピーしてしまえば、あとは自動でカッテネが使えるようにコードを作ってくれる仕様です。表示されるボタンの色はプルダウンで選択することが出来ます。個人的にあったほうが良いかなと思った機能だけつけました。直リンク(バリューコマースのLinkswitch、リンクシェアのオートリンクビルダーに対応)ASPの中には、管理画面にログインしてアフィリエイトコードを取得しなくても、アフィリエイトに対応したショップページの直リンクを貼り付ければ自動的にアフィリエイトコードに変換してくれる機能を持つASPがあります。バリューコマースのLinkswitch機能、リンクシェアのオートリンクビルダー機能がそれに当たります。これらの機能を使っている場合は、管理画面からアフィリエイトコードを取得する必要もないため、自動生成入力フォームに直リンクを貼り付けても正常にカッテネ用コードに変換できるようにしてあります。Linkswitchやオートリンクビルダー対応のショップサイト、もしくは直リンクをそのままカッテネに組み込みたい場合は、直リンクをフォームに入力してください。メインショップの選択が可能(HTMLコード生成時のみ)カッテネ用HTMLコードを生成する場合は、メインショップの選択ができます。メインショップとは、画像リンクやタイトルを抽出するショップのことです。楽天のアフィリエイトHTMLコードを貼り付けて、楽天をメインショップに選べば、画像リンクとタイトルは楽天のコードから取得されます。カッテネは計5つのショップリンクを指定できますが、HTMLコードを生成する場合は、1~5のどのショップでもメインに指定することが出来ます。メインショップの選択は右端でも左端でも真ん中でもいいということですね。ショートコードの場合、メインショップはショップ1(左端のボタンの情報)しか指定ができません。他のショップを選択した場合にはタイトルや画像のリンクがうまく設定されないようです。メイン商品リンク、メインタイトル、メイン画像情報の差し替えが可能(HTML生成時のみ、注意事項あり)メインの商品リンクはAmazonからとってきたいけど、画像は楽天を使いたい、他のページから取ってきたい、ということもあると思います。その為、商品リンクやタイトル、画像リンクは、別のURLをテキストボックスに入力することで差し替えることが可能です。この機能も、HTMLコード生成時にはうまく表示されますが、ショートコードの場合には不具合がでる可能性があります。ASPが発行するアフィリエイトHTMLコードに含まれる情報以外(特に画像リンク)を、アフィリエイトコードと組み合わせる場合、ASPの利用規約違反となる恐れがあります。画像リンクを外部から取得する場合は、規約を確認したうえで行ってください。手が回る範囲内で動作テストをしてみています。そのなかでいくつか気づいた点、改善てきていない点をメモしておこうと思いますショートコード(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"で示されるショップ情報にカンマを付記する必要があります。{ショップ3},{ショップ5}](ショップ間にカンマが入っていないためエラー)ショップ情報の括弧の間にだけ、正確にカンマを入れる必要があることがわかります。2019/03/17更新時に、ショップデータに対してカンマが正常に挿入されるように修正をしました。エラーや問題が引き続き発生する場合は、ご連絡ください。「その他」(補足情報)への入力時、アフィリエイトHTMLタグ及び直リンク(テキスト)の両方で動作するよう対応このツールは、ショップ情報を含むアフィリエイトHTMLコードから、商品URL、画像URL、タイトル等を抜き出す手間を省く目的で製作したため、ショップ情報に含まれない商品リンクや画像リンク、タイトル、商品説明を入力したい場合は、直リンクやテキストをフォームに入力していただく仕様でした。「商品リンクはコードAから、画像リンクはコードBから持ってきたい」といったように、複数のHTMLコードから別々のデータを抽出してカッテネリンクを生成したいというご意見を頂きました。この場合、補足情報に直リンクやテキストしか使用できない場合であると、リンク該当部分を手動で抽出しなければいけないので面倒になります。そこで、その他(補足情報)の入力欄も、HTMLコードと直リンクやテキストの両方に対応し、アフィリエイトHTMLコードをコピペすれば必要な情報を抽出してペーストできる仕様に変更しました。(2019/03/17現在)使用例を以下に示します。メイン商品リンクをコード1から、メイン画像リンクをコード2から、商品タイトルをコード3から抽出したい場合コード1→ショップ1コード2→「メイン画像リンクを別に参照する場合」コード3→「タイトルを手動で付ける場合」にコピペしてください。その他の入力欄が空欄の場合は、ショップ情報入力欄のメインショップから情報を抽出します。その他の入力欄に情報を入力した場合は、ショップ情報よりもその他の情報がメイン情報として優先的に抽出されます。現状上手く動くはずですが、いろいろ仕様を弄ったので不具合が生じるかもしれません。不具合を発見された方はお手数ですがご報告いただけますと幸いです。おわりにとりあえず何とか使えるレベルにはなったと思うので公開します。Amazonアソシエイト界隈が、にわかに騒々しいです。目を予防するメガネで視力回復を目指すこんにちは。視力回復をする上で厄介なのが「パソコン、スマホで...記事を読む引きこもりが視力低下を防ぎ、強度近視からの視力回復を目指すメリットこんにちは。私は、将来を悲観し1年ほど前から自宅療養を続けている、「引きこもり」状態にあります。このブログを作ったのも、自分の生きる...記事を読むSNS制作の指針について当ブログのプロジェクトの一つにSNS制作を掲げました。soloの商用利用権が曖昧-フォントや素材はライセンス上使えるのかこんにちは。Solo」の商用利用についてです。僕は現在、Power...記事を読むパンやケーキ等加工食品のトランス脂肪酸フリー(ゼロ)含有量の表示はアテにならない気がするこんにちは。1年前に視力回復と体調改善に取り組み始めてから、20kgほどの減量に成功しました。ここまでは...記事を読むWinキーショートカットやロック機能は有効化したままWin+Lのみ無効化する【Autohotkey】こんにちは。キーボードのホームポジション固定(できるだけ手の位置を動かさないタイピング)にチャレンジしています。作業効率向上も目的の...記事を読む強度近視からの視力回復トレーニングを3ヶ月続けた経過こんにちは。現在、強度近視からの視力回復に対して躍起になっています。1ヶ月ほど前に、「視力回復に取り組み始めたきっかけ」や「...記事を読む面倒な甘酒作りも冷蔵庫の排熱を使えば温度管理も甘酒メーカーも不要、手軽に健康の意識改善こんにちは。発酵食品の中でも、甘酒づくりは温度管理が必要で面倒だと聞いたことがあり、しばらくトライできていませんでした。コメントをキャンセルメールアドレスが公開されることはありません。validshnum++;//HTMLか直リンクであれば有効リンク数が一つ増える。