Lazy Blocksを使ったオリジナルブロックの作り方 (WebAPI編)
2020-12-28
応用編にしては偏りすぎて広く応用が効かない内容だったと思いますけど
WebAPIで他サイトのデータと連携したカスタムブロックを作るのにゃー
その連携する他サイトがサービス終了したら使えなくなってしまうのでは?
ちゃんとサービス継続してくれるところを探すか
自前のWebAPIシステムも運用している方々とか限定されてくるのでは?
時代は動いているのだ!!
デザインだけがブロックの用途では無いのだ!!!
どうやら未来を見ている私についてこれていないようだな!!!!
程度は知れている
お題は
完璧なルックス、気品、愛らしさッ!
空前絶後、超絶怒涛の完全生物!!
脊椎動物の頂点、即ち神!
猫画像を表示するカスタムブロックなのにゃー
全宇宙の愛猫家の歓喜とむせび泣く声が聞こえてきますぜッ!
世界遺産級、至高のWebAPIがコレにゃー
つーことで早速作成に入るッ!!
覇業の一歩
王者らしく中央寄せで、スペースが少ないサイトでも表示できるように拡大縮小もできるようにしてやろう
<p style="text-align: center">
<img id="{{blockId}}-img" src="" width="{{size}}%" height="{{size}}%" alt="{{alt}}" />
</p>
皇帝様の名声は高まるばかりでございます!
兄貴って言ってただろオマエ
sizeが画像サイズ
altが代替テキスト
blockIdは組み込み変数、以前の記事を読んでいれば理解できるだろう
誠に恐悦至極
民草共もこの上ない幸せを感じていることでございましょう!
srcはどうなってんだよ
これじゃあ何も表示されないだろうが
ソレこそ、このカスタムブロックの肝
肝要な部分の実装はこれからぢゃっ
これだから下賤な者は・・
コントロールの天命
こんな感じぢゃ!
neko-apiとはこれ如何に!?
selectコントロールを使うことで2つのWebAPIを選べるようにしてやったわッ!!
あの至宝のWebAPIを自ら選ぶことができるとはッ!!
どちらを使うのか、これは贅沢な悩みですなぁ~
https://aws.random.cat/meow
と
https://api.thecatapi.com/v1/images/search
を使用させてもらっているにゃ
無くても取得だけはできるようですけど
これはあくまで例題でェェェ
本格的な運用の際にはAPIキーも必要になって来るだろうがァ
当然の意見をわざわざ指摘するとはなァァァァアァ・・・
あってはならぬ驕傲!
以後、慎むことだなッ
この痴れ者が!
ajaxの計
このneko-apiでございますがどの様に処すれば・・・
御指南いただきたく・・・・・・・・・
WebAPIを使うにはJavaScriptで呼び出せば良かろう
WordPressにはjQueryが標準で組み込まれているようだからコレを使うのが手っ取り早かろう
Lazy Blocks恐るべしっ!!!
つまりこんな感じのコードを書くのにゃー
<p style="text-align: center">
<img id="{{blockId}}-img" src="" width="{{size}}%" height="{{size}}%" alt="{{alt}}" />
</p>
<script type="application/javascript" charset="utf-8">
jQuery(function($){
$.ajax({
url: '{{neko-api}}',
dataType: 'json',
timeout: 10000
})
.done(function(response) {
// console.log(response);
if (response.file !== undefined) {
var img = response.file;
}else{
var img = response[0].url;
}
$('img[id={{blockId}}-img]').attr('src', img);
})
});
</script>
doneのコード内で取得したレスポンスから画像のURLをゲットできる、と
responseの構造の違いでそれぞれのWebAPI別に処理を変えているぞ
簡易的な例題だからこの程度で良かろう
悠久の大海を軽やかに進む優雅な一艘の船の如く堂々としたコードでございますなぁ
そのタイピング音からは真夏の海を疾走する汽船の情景がありありと浮かぶようですぞォッ!!
ここにWordPress開発の新たな伝説が歴史に刻まれましたなぁ!!!
我ながら自分の才能がおそろしい!
空気を吸って吐くことのように!!!
HBの鉛筆をベキ!っとへし折る事と同じ様にッ!!!!
大切なのは認識することですじゃ!
貴方様はこの世の帝王ッ!!
WordPressを支配して当然ですじゃあああああぁ――ッ!!!
ケケケケケケケケケケケケケケッ!!!!!
貴様のような不遜極まりない輩が上奏とは!
畏れ多い事よのぅ
イマドキどのブラウザもJavaScriptなどサポートしているだろうが!
これだとAPIキーもクライアント側に漏れるだろうが!!👊
おがあ・・・ぢゃ・・・・・・・・・ん
若い方というものは血気が盛んすぎていかんことだのぅ
フォッフォッフォッ
修正してもらおう・・・!👊
PHPの世界
きさま、何者だァ――ッ!
このワシに
こ・・・こんなことをして
許されると思っちょるのかあ――ッ!?
許されるはずがない!
誰であろうと
このワシに対してこんなことをしていいはずがない・・・
高校、大学は一番の成績で卒業した!
大学ではキャットファイト部のキャプテンも務め
社会に出ても誰からも慕われ
尊敬されたからこそ政治家になれた・・・
ハワイに1000坪の別荘を持っている!
30歳年下の美人モデルを妻にした!!
税金だって他人の50倍は払っているッ!
どんな敵だろうとブチのめしてきた・・・
ワシは猫だぞ――ッ!
いいか聞け、若僧ッ
終身刑にしてやる!
絶対に終身刑にしてやるからな――ッ!!
修正しろ⏱️
な、なんでぇぇ――――ッ!
キーボードの前から離れたはずなのに~~~~!?!?
どっどっ
どおーして前にィィ―――ッ!?
できなければ消す
わかっているな!?
はい―――ッ!!
(な、なんで前にィィ!?
どおしてェェ~~~~~~~~~~~~~!?
そ・・・そうだ!
ワシが猫だからだ!
猫にできないことは無いからだッ!
ワハハハハハハハハハハハハハハハハハハハ――ッ)
サーバサイドで処理するように書き直せ
書き直せといわれても
Handlebarsでは・・・できません・・・
書き直せ
PHPの知識は無いんですよォォォ~~~~
直せ
はいいぃィィィ~~~~~~~~~!!
<p style="text-align: center">
<img
id="<?php
echo(esc_attr($attributes['blockId']));
?>-img"
src="<?php
$url=esc_url($attributes['neko-api']);
$response=wp_remote_get($url, array('timeout' => 10));
$json=json_decode($response['body'],true);
if (strpos($url,'random') === false) {
echo($json[0]['url']);
} else {
echo($json['file']);
}
?>"
width="<?php
echo(esc_attr($attributes['size']));
?>%"
height="<?php
echo(esc_attr($attributes['size']));
?>%"
alt="<?php
echo(esc_attr($attributes['alt']));
?>" />
</p>
PHPのメソッドの使い方があっているのかわかりませんがJSと同様に動きました――ッ!!
こっ・・・
ここまでやったんです!!
わたしの存在はッ
この猫の私の存在だけは消えないですよねぇ~~~~ッ
そ・・・そうか!!
これは夢だ!
この猫のワシの存在が無くなるわけがないッ!
夢だ!夢だ!バンザイ――ッ!
そいつの名はCustom Helper
これはLazy Blocksのドキュメント!?
悲しむ・・・・・・・・・と・・・思うか?
あんたのこと・・・
消えちまってよオオォォォ
あんたは頭もすごく良くて・・・
角砂糖を投げて遊んでくれるし
とても強いって思っていた
でも弱いじゃあねーかよォォォォォ
消えちまったんじゃあよオオオオオオ
もう好きじゃあなくなったよッ!
ぜーんぜんねェェェェェッ!
だが、まだ事態は・・・更に悪化している!
危機はこの猫だ
コイツがコードを触りだしたら・・・コイツは暴走するッ!
せめて練習用のWebAPIのコレを使え!
バレているッ!
Handlebarsでも可能だということが!
コイツに知られている!
functions.phpに追加する気だッ!
向かわせんッ!
たくらんでると思ったが
必死にやったのはこの程度の事かよ
もう終わりだッ!
Handlebarsを変更して
<p style="text-align: center">
<img id="{{blockId}}-img" src="{{neko_api neko-api}}" width="{{size}}%" height="{{size}}%" alt="{{alt}}" />
</p>
APIキーも漏れない!
くらえッ!
<?php
function lazy_neko_api_helper ($handlebars) {
$handlebars->registerHelper('neko_api', function($url) {
$response=wp_remote_get($url, array('timeout' => 10));
$json=json_decode($response['body'],true);
if (empty(($json['file']))) {
return $json[0]['url'];
} else {
return $json['file'];
}
});
}
add_action('lzb/handlebars/object', 'lazy_neko_api_helper');
このCustom Helper・・・
処理がデグレしてやがるッ!
これで終わりだ――ッ!
えっ・・・
あばばばばばああぁぁァァ――ッ!💀
functions.phpの追加をミスりやがったッ!
サイトが再起不能に・・・
くっ・・・・・・・・・
仕方ない・・・バックアップからリストアだ――ッ!
なんとか元に戻ったようですね
歌でも一つ歌いたいようなイイ気分なのにゃー✨
さあ、WebAPIでカスタムブロックを作成するにゃ――ッ!
ホントこのシリーズなんなの?
インターネット,開発gutenberg,Handlebars,Lazy Blocks,PHP,Random.Cat,TheCatAPI,WebAPI,WordPress,オリジナルブロック,カスタムブロック,ジョジョネタ,プラグイン
Posted by 管理人
関連記事
いつの間にか二周年 過去記事を振り返ってみるよ
ブログサイトを初めていつの間にか二年経っていたのにゃー 早いものですね、ってデジャヴュ感がありますけど アニバーサリーな恒例企画ブログあるある振り返りネタ人気記事の発表のお時間です 前回記事 やっぱり 今回もGoogleさんの情報を元にどんな記事が人気だったのかランキング形式で発...
2019年 出会えてよかったものベスト
今年も買い物以外でまとめておくのにゃー 去年もやった買い物以外で巡り合ってよかったものですね 2018年 出会えてよかったものベスト 今年は少なめなのにゃー 暑くて天候も悪かったので比較的外出が少なかったですかね 夏の暑さがすべてのやる気を奪ったのにゃーとりあえず紹介するのにゃー...
いつの間にか五周年 過去記事を振り返ってみるよ
ブログサイトを初めていつの間にか五年経っていたのにゃー 早いものですね、ってデジャヴュ感がありますけど アニバーサリーな恒例企画ブログあるある振り返りネタ人気記事の発表のお時間です もうマンネリ化しているなこのやり取りも いつの間にか4 いつの間にか3 いつの間にか2 いつの間に...
Lazy BlocksとBlock Labどっちがいいの?比較しました
追記 (2020/11) Block LabはWP Engineに買収されたようなので今後は新機能の追加なし、メンテナンスモードに。 新たに後継として、Genesis Custom Blocksがリリースされました。 Lazy BlockはJSONでインポート・エクスポートできる...
いつの間にか三周年 過去記事を振り返ってみるよ
ブログサイトを初めていつの間にか三年経っていたのにゃー 早いものですね、ってデジャヴュ感がありますけど アニバーサリーな恒例企画ブログあるある振り返りネタ人気記事の発表のお時間です いつの間にか二周年 過去記事を振り返ってみるよ いつの間にか一周年 過去記事を振り返ってみるよ や...
最近のコメント