Lazy Blocksを使ったオリジナルブロックの作り方 (Amazonアフィリエイト編その2)

アフィリエイト用のデザインも無事終わったから次は機能の実装にゃー

人物のアイコン素材 その5

無事終わったのか?

無事終わったのにゃー💢
でリンク情報を取得するにはAmazonさんから引っ張ってくるしかないのにゃー

人物のアイコン素材 その5

そこでPA-APIとかが普通は必要ですよね

調べてみると、どうやら商品検索とか値段情報の取得とか高機能を使う場合はPA-APIがいるけど普通にリンク貼るだけならアソシエイト・ツールバーでも問題ないのにゃー

人物のアイコン素材 その5

まあ公式のツールなのでそうでしょうけど

ただ公式のツールが出すリンクのデザインがダサすぎるのが問題なのにゃー

人物のアイコン素材 その5

おまゆう!

ということでアフィリエイト用のデザインを前回作ったけど、これにリンク情報をつけてあげれば完成というわけにゃー

人物のアイコン素材 その5

つまりアソシエイト・ツールバーで取得した情報を今回のアフィリエイト用のブログカードデザインに変換すればいい、ということですね

そうなのにゃー
それをカスタムブロックでつくるのにゃー

人物のアイコン素材 その5

なるほど

作ったアフィリエイト用デザインのおさらい

とりあえずデザインは完成したけどHTML的なコードはまだちゃんと見せてなかったからおさらいにゃー

人物のアイコン素材 その5

見せてもないのにおさらいも何もないだろーが!

<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の使い方は初級編とかを見てくれなのにゃー

人物のアイコン素材 その5

一方のアソシエイト・ツールバーの方はどんなリンク情報になっているのでしょうか?

例えばかなりイケてるこのランチョンマット 4枚セット 和風 撥水 防汚 丸洗い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;" />
人物のアイコン素材 その5

なるほど
aタグのhrefやimgタグのsrcが含まれているのでこちらを使うと!

そうなのにゃー
これをいちいちその部分だけコピペしてみてもいいけど流石にしんどいから、このHTMLを解析して自動的に入力する仕組みをカスタムブロックでつくるのにゃー

人物のアイコン素材 その5

自動化できると作業は捗りますね

PHPでHTMLを解析する

つーことでカスタムブロックのコード部分はPHPでやるのにゃー
例によってPHPはよくわからんので動けばよしとしているのにゃー

人物のアイコン素材 その5

一抹の不安がありますね

まずはHTMLの読み込み部分にゃー
HTMLの読み込みはPHPではDOMDocument::loadHTMLっていうやつがあるからそれを使うのにゃー

人物のアイコン素材 その5

如何にもな名前のメソッドですね

これに読ませてHTMLをパースして必要な部分を取り出せばいいのにゃー

人物のアイコン素材 その5

ふむふむ

パースするには一旦XMLにしてあげるとDOMのツリー構造でパースした情報が得られるのにゃー
これはsimplexml_load_stringを使うのにゃー

人物のアイコン素材 その5

おー
案外あっさりと必要な情報が取り出せるのですね

PHP様様なのにゃー
で、これで得たオブジェクトからhrefやsrcを取り出すのにゃー
ただこのオブジェクト、参照の仕方が超絶めんどくさいからjson_decodeで連想配列に変換したほうが扱いが楽にゃー

人物のアイコン素材 その5

処理は固定的な気がするので速度を求めるなら変換しないほうが有利ですね

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');


  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;" />
人物のアイコン素材 その5

おー
意外と簡単に作れましたね
相変わらずデザインはヤバいですけど

PHP側の関数やらを調べるのに結構手間取ったのにゃー
できてしまえばあっさりと終わったけどにゃー

人物のアイコン素材 その5

$base_styleなどはCSS関連の処理とコメントがなっているのでここで流体シェイプやニューモーフィズムのデザインを切り替える様にしているのですかね

そうなのにゃー
もうめんどくさいからLazy Blocksのコントロール部分は載せないけどSelectコントロールで切り替える様にしているにゃー
その他はテキスト入力のコントロールにゃー
あとtitle部分はアソシエイト・ツールバーにリンク情報に含まれてないから各自で入力よろ、なのにゃー

人物のアイコン素材 その5

$amzn_trackerというのは一体?

これはよくわからんのにゃー
サイズが1だから表示的には意味ないのにゃー
少し調べた感じだとir-jp.amazon-adsystem.comはトラッキング用らしいのにゃー
別に表示しなくても問題ないぽいけど一応載せておいたのにゃー

人物のアイコン素材 その5

GAFAによる個人情報収集が問題となってきているので今後こういうものはなくなっていくのでしょうけど

多分商品画像の方もトラッキングしているぽいからir-jpの方はオフっても大丈夫ぽいけどにゃー
よう知らんけど

人物のアイコン素材 その5

商品画像が無いとどうしようもないですからね

まあ時代に合わせて仕組みは変わっていくのだろうけどにゃー
様子見てオフる予定にゃー

人物のアイコン素材 その5

ということで一応完成ですかね
外部サービスを見ると楽天とかYahoo!にも対応したものを提供していますけど

そこまで手を広げるとまた各API調べたりとかダルいのでやめにゃー
リンクの管理も再利用ブロックに突っ込んでおけば再呼び出しもできるだろ
それにAmazon💖だし

人物のアイコン素材 その5

めんどくさいだけだろ!

つーことで順次サイトのリンクを新しい奴に置き換えていくのにゃー
Auf Wiedersehen.

人物のアイコン素材 その5

このシリーズ忘れてた!なぜドイツ語!?