Lazy Blocksを使ったオリジナルブロックの作り方 (Amazonアフィリエイト編その2)
アフィリエイト用のデザインも無事終わったから次は機能の実装にゃー
無事終わったのか？
無事終わったのにゃー💢
でリンク情報を取得するにはAmazonさんから引っ張ってくるしかないのにゃー
そこでPA-APIとかが普通は必要ですよね
https://webservices.amazon.com/paapi5/documentation/調べてみると、どうやら商品検索とか値段情報の取得とか高機能を使う場合はPA-APIがいるけど普通にリンク貼るだけならアソシエイト・ツールバーでも問題ないのにゃー
まあ公式のツールなのでそうでしょうけど
https://affiliate.amazon.co.jp/help/stripe.htmlただ公式のツールが出すリンクのデザインがダサすぎるのが問題なのにゃー
おまゆう！
ということでアフィリエイト用のデザインを前回作ったけど、これにリンク情報をつけてあげれば完成というわけにゃー
つまりアソシエイト・ツールバーで取得した情報を今回のアフィリエイト用のブログカードデザインに変換すればいい、ということですね
そうなのにゃー
それをカスタムブロックでつくるのにゃー
なるほど
作ったアフィリエイト用デザインのおさらい
とりあえずデザインは完成したけどHTML的なコードはまだちゃんと見せてなかったからおさらいにゃー
見せてもないのにおさらいも何もないだろーが！
<aside class="base-container ">
<div class="base-container image-container svgicon5">
<a href="#" target="_blank" rel="noopener noreferrer"><img class="image-base" src="#" width="100px" height="100px"></a>
</div>
<div class="base-container text-container">
<p class="title-base">
<a href="#" " target="_blank" rel="noopener noreferrer">
Friction between the air and its fur produces static electricity. When Electrike runs, it makes a crackling sound.Every day, it tilts its head in the same rhythm. A long time ago, people raised these Pokémon to serve as clocks.Electricity permeates its body. It swings its arms round and round to charge up electricity before unleashing a punch.
</a>
<div id="wave-container" class="wave-container"><div class="dot" id="d1"></div><div class="dot" id="d2"></div><div class="dot" id="d3"></div><div class="dot" id="d4"></div><div class="dot" id="d5"></div><div class="dot" id="d6"></div><div class="dot" id="d7"></div><div class="dot" id="d8"></div><div class="dot" id="d9"></div></div>
</p>
<div class="base-container button-container">
<a href="#" class="button-base button-design" target="_blank" rel="noopener noreferrer">Amazonで見る</a>
</div>
</div>
</aside>
流体シェイプのデザインはこんな感じにゃー
ニューモーフィズムも似たようなものにゃー
CSSはめんどくさいから割愛にゃー
あとはaタグのhrefとかimgタグのsrcとかをちゃんとしたやつにしてあげれば完成なはずにゃー
Lazy Blocksの使い方は初級編とかを見てくれなのにゃー
https://possiblytrue.com/インターネット/lazy-blocksを使った...一方のアソシエイト・ツールバーの方はどんなリンク情報になっているのでしょうか？
例えばかなりイケてるこのランチョンマット ４枚セット 和風 撥水 防汚 丸洗いOK 食卓飾りのリンク情報はアソシエイト・ツールバーの「画像」中サイズから取るとこんな感じにゃー
<a href="https://www.amazon.co.jp/dp/B07GZKV6Y8?coliid=I2HNDBH4T7Z9D9&colid=1TZHT2U1GKPHX&psc=1&linkCode=li2&tag=enfpossibletrue-22&linkId=663e94d8fcdf2e5a9d4207051e677e6c&language=ja_JP&ref_=as_li_ss_il" target="_blank"><img border="0" src="//ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&ASIN=B07GZKV6Y8&Format=_SL160_&ID=AsinImage&MarketPlace=JP&ServiceVersion=20070822&WS=1&tag=enfpossibletrue-22&language=ja_JP" ></a><img src="https://ir-jp.amazon-adsystem.com/e/ir?t=enfpossibletrue-22&language=ja_JP&l=li2&o=9&a=B07GZKV6Y8" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />
なるほど
aタグのhrefやimgタグのsrcが含まれているのでこちらを使うと！
そうなのにゃー
これをいちいちその部分だけコピペしてみてもいいけど流石にしんどいから、このHTMLを解析して自動的に入力する仕組みをカスタムブロックでつくるのにゃー
自動化できると作業は捗りますね
PHPでHTMLを解析する
つーことでカスタムブロックのコード部分はPHPでやるのにゃー
例によってPHPはよくわからんので動けばよしとしているのにゃー
一抹の不安がありますね
まずはHTMLの読み込み部分にゃー
HTMLの読み込みはPHPではDOMDocument::loadHTMLっていうやつがあるからそれを使うのにゃー
https://www.php.net/manual/ja/domdocument.loadhtml.php如何にもな名前のメソッドですね
これに読ませてHTMLをパースして必要な部分を取り出せばいいのにゃー
ふむふむ
パースするには一旦XMLにしてあげるとDOMのツリー構造でパースした情報が得られるのにゃー
これはsimplexml_load_stringを使うのにゃー
https://www.php.net/manual/ja/function.simplexml-load-string
おー
案外あっさりと必要な情報が取り出せるのですね
PHP様様なのにゃー
で、これで得たオブジェクトからhrefやsrcを取り出すのにゃー
ただこのオブジェクト、参照の仕方が超絶めんどくさいからjson_decodeで連想配列に変換したほうが扱いが楽にゃー
https://www.php.net/manual/ja/function.json-decode処理は固定的な気がするので速度を求めるなら変換しないほうが有利ですね
PHPビギナーだから楽な方を優先にゃー
最終的なLazy Blocks化をする
あとはさっきのブログカードのHTMLにはめ込めばOKにゃー
<?php
$html = $attributes['content'];
$domDocument = new DOMDocument();
@$domDocument->loadHTML('<?xml encoding="UTF-8">' . $html);
$xmlString = $domDocument->saveXML($domDocument->doctype) . $domDocument->saveXML($domDocument->documentElement);
@$xmlObject = simplexml_load_string($xmlString);
$json=json_decode(json_encode($xmlObject),true);
$title = htmlspecialchars($attributes['title'], ENT_QUOTES, 'UTF-8');
$amzn_tracker = htmlspecialchars($json['body']['img']['@attributes']['src'], ENT_QUOTES, 'UTF-8');
$amzn_link = htmlspecialchars($json['body']['a']['@attributes']['href'], ENT_QUOTES, 'UTF-8');
$amzn_img = htmlspecialchars($json['body']['a']['img']['@attributes']['src'], ENT_QUOTES, 'UTF-8');
// CSS関連の処理
if (strcmp('fluid', $attributes['style']) === 0) {
$base_style = "";
$btn_style = htmlspecialchars('button-design', ENT_QUOTES, 'UTF-8');
$img_style = htmlspecialchars('svgicon5', ENT_QUOTES, 'UTF-8');
$fluid_wave = '<div id="wave-container" class="wave-container"><div class="dot" id="d1"></div><div class="dot" id="d2"></div><div class="dot" id="d3"></div><div class="dot" id="d4"></div><div class="dot" id="d5"></div><div class="dot" id="d6"></div><div class="dot" id="d7"></div><div class="dot" id="d8"></div><div class="dot" id="d9"></div></div>';
} elseif (strcmp('normal', $attributes['style']) === 0) {
$base_style = '';
$btn_style = htmlspecialchars('button-design', ENT_QUOTES, 'UTF-8');
$img_style = '';
$fluid_wave = '';
} else {
$base_style = htmlspecialchars($attributes['style'], ENT_QUOTES, 'UTF-8');
$btn_style = htmlspecialchars($attributes['style'], ENT_QUOTES, 'UTF-8');
$img_style = htmlspecialchars($attributes['style'], ENT_QUOTES, 'UTF-8');
$fluid_wave = '';
}
?>
<aside class="base-container <?php echo $base_style; ?>">
<div class="base-container image-container <?php echo $img_style; ?>">
<a href="<?php echo ($amzn_link); ?>" target="_blank" rel="noopener noreferrer"><img class="image-base" src="<?php echo ($amzn_img); ?>"></a>
</div>
<div class="base-container text-container">
<p class="title-base">
<a href="<?php echo ($amzn_link); ?>" target="_blank" rel="noopener noreferrer"><?php echo $title; ?></a>
<?php echo $fluid_wave; ?>
</p>
<div class="base-container button-container">
<a href="<?php echo ($amzn_link); ?>" class="button-base <?php echo $btn_style; ?>" target="_blank" rel="noopener noreferrer">Amazonで見る</a>
</div>
</div>
</aside>
<img src="<?php echo ($amzn_tracker); ?>" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />
おー
意外と簡単に作れましたね
相変わらずデザインはヤバいですけど
PHP側の関数やらを調べるのに結構手間取ったのにゃー
できてしまえばあっさりと終わったけどにゃー
$base_styleなどはCSS関連の処理とコメントがなっているのでここで流体シェイプやニューモーフィズムのデザインを切り替える様にしているのですかね
そうなのにゃー
もうめんどくさいからLazy Blocksのコントロール部分は載せないけどSelectコントロールで切り替える様にしているにゃー
その他はテキスト入力のコントロールにゃー
あとtitle部分はアソシエイト・ツールバーにリンク情報に含まれてないから各自で入力よろ、なのにゃー
$amzn_trackerというのは一体？
これはよくわからんのにゃー
サイズが1だから表示的には意味ないのにゃー
少し調べた感じだとir-jp.amazon-adsystem.comはトラッキング用らしいのにゃー
別に表示しなくても問題ないぽいけど一応載せておいたのにゃー
GAFAによる個人情報収集が問題となってきているので今後こういうものはなくなっていくのでしょうけど
https://wedge.ismedia.jp/articles/-/18262
https://jp.techcrunch.com/2021/06/25/2021-06-24-is-google-ab...
https://jp.techcrunch.com/2021/06/19/2021-06-16-on-a-growth-...
多分商品画像の方もトラッキングしているぽいからir-jpの方はオフっても大丈夫ぽいけどにゃー
よう知らんけど
商品画像が無いとどうしようもないですからね
まあ時代に合わせて仕組みは変わっていくのだろうけどにゃー
様子見てオフる予定にゃー
ということで一応完成ですかね
外部サービスを見ると楽天とかYahoo!にも対応したものを提供していますけど
そこまで手を広げるとまた各API調べたりとかダルいのでやめにゃー
リンクの管理も再利用ブロックに突っ込んでおけば再呼び出しもできるだろ
それにAmazon💖だし
めんどくさいだけだろ！
つーことで順次サイトのリンクを新しい奴に置き換えていくのにゃー
Auf Wiedersehen.
このシリーズ忘れてた！なぜドイツ語！？
