PHPのcurl_multiを使って非同期でカウント数を取得するSNSのシェアボタンを自作してみた
先日、CURLというPHPの関数を使ってシェアカウント付のSNSボタンを自作しましたが、スピードがいまいちだったので、他に高速表示できる方法がないか探してみたところ、cURL関数に非同期で値を取得できるcurl_multiという関数があることを知りました。これを使えば複数のcURLハンドルを非同期で実行できるようです。
こんなSNSをボタンを作る
CURLで自作したSNSボタンと同じボタンをcurl_multiと使って作ります。
これを表示するソース
<?php //カウント数を取得したい対象URL $targeturl = 'https://www.apple.com/jp/'; $targeturl = urlencode($targeturl);
//現在のページで取得したいとき //$url = $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"];
// 並列通信用マルチハンドルを用 $mh = curl_multi_init();
// APIごとにCurl Handleを作る // Twitter $ch_twitter = curl_init("http://jsoon.digitiminimi.com/twitter/count.json?url=$targeturl"); curl_setopt($ch_twitter, CURLOPT_RETURNTRANSFER, TRUE); curl_multi_add_handle($mh, $ch_twitter);
// Facebook $ch_facebbok = curl_init("https://graph.facebook.com/?id=$targeturl"); curl_setopt($ch_facebbok, CURLOPT_RETURNTRANSFER, TRUE); curl_multi_add_handle($mh, $ch_facebook);
// Hatena $ch_hatena = curl_init("https://b.hatena.ne.jp/entry.count?url=$targeturl"); curl_setopt($ch_hatena, CURLOPT_RETURNTRANSFER, TRUE); curl_multi_add_handle($mh, $ch_hatena);
// Pocket $ch_pocket = curl_init("https://widgets.getpocket.com/v1/button?v=1&count=horizontal&url=$targeturl&src=$targeturl");curl_setopt($ch_pocket, CURLOPT_RETURNTRANSFER, TRUE); curl_multi_add_handle($mh, $ch_pocket);
// 複数の通信を非同期で同時実行 do { curl_multi_exec($mh, $running); } while ( $running );
// APIから戻ってきた値を変数に入れる $json_twitter = curl_multi_getcontent($ch_twitter); $json_facebook = curl_multi_getcontent($ch_facebbok); $count_hatena = curl_multi_getcontent($ch_hatena); $html_pocket = curl_multi_getcontent($ch_pocket);
//cURLハンドルセットを閉じる curl_multi_remove_handle($mh, $ch_twitter) curl_close($ch_twitter); curl_multi_remove_handle($mh, $ch_facebbok); curl_close($ch_facebbok); curl_multi_remove_handle($mh, $ch_hatena); curl_close($ch_hatena); curl_multi_remove_handle($mh, $ch_pocket); curl_close($ch_pocket); curl_multi_close($mh);
/*デバッグ用 var_dump($json_twitter)."\n"; var_dump($json_facebook)."\n" var_dump($count_hatena)."\n"; var_dump($html_pocket)."\n"; */
//Twitterのカウント数を取り出す $count_twtter = json_decode($json_twitter, true ); $count_twtter = num_format(strval($count_twtter['count']));
//facebookのカウント数を取り出す $count_facrebook = json_decode($json_facebook, true ); $count_facrebook = num_format($count_facrebook['share']['share_count']);
//Hatenaのカウント数を取り出す $count_hatena = num_format($count_hatena);
//Pocketのカウント数を取り出す //HTML→DOM→XML→JSON→配列に変換 $dom_pocket = new DOMDocument('1.0', 'UTF-8'); $dom_pocket->preserveWhiteSpace = false; $dom_pocket->loadHTML($html_pocket); $xmlString_pocket = $dom_pocket->saveXML(); $xmlObject_pocket = simplexml_load_string($xmlString_pocket); $count_pocket = json_decode(json_encode($xmlObject_pocket), true); $count_pocket = num_format(strval($count_pocket['body']['div']['a']['span']['em'])) ?>
<!DOCTYPE html>
<html lang="ja" itemscope itemtype="http://schema.org/WebPage">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="//cdn.jsdelivr.net">
<style>
.sns-counter {
width: 100%;
}
.sns-counter li {
display: inline-block;
border-radius: 2px;
width: 80px;
padding: 3px;
margin-left: 3px;
}
.sns-counter li span {
display: inline-block;
text-align: center;
width: 70%;
font-size: 12px;
font-weight: bold;
color: #fff;
}
.sns-counter li i { display: inline-block;
text-align: center;
width: 30%;
color: #fff;
font-size: 14px;
position: relative;
top: 1px;
}
.sns-counter .btn-tw {
background-color: #55ACEE;
}
.sns-counter .btn-fb {
background-color: #3A5795;
}
.sns-counter .btn-hb {
background-color: #008CE1;
}
.sns-counter .btn-pk {
background-color: #ef4357;
}
.sns-counter .btn-line {
background-color: #1dcd00;
}
.sns-counter .btn-total {
background-color: #000;
}
.btn-hb:hover,.btn-tw:hover,.btn-fb:hover,.btn-pk:hover,.btn-line:hover,.btn-total:hover {
background-color: #ccc;
}
i.fa-hatena:before {
content: "B!";
font-family: Verdana;
font-weight: bold;
}
</style>
</head>
<body>
<div>
<ul class="sns-counter" title="<?php echo $targeturl; ?>"><!--
--><li class="btn-tw">
<a href="//twitter.com/intent/tweet?url=<?php echo $targeturl; ?>" target="_blank">
<i class="fab fa-twitter"></i><span><?php echo $count_twtter; ?></span>
</a>
</li><!--
--><li class="btn-fb">
<a href="//www.facebook.com/sharer/sharer.php?u=<?php echo $targeturl; ?>" onclick="window.open('https://www.facebook.com/sharer/sharer.php?u=<?php echo $targeturl; ?>', 'new', 'width=500,height=300');return false;" target="_blank">
<i class="fab fa-facebook-f"></i><span><?php echo $count_facrebook; ?></span>
</a>
</li><!--
--><li class="btn-hb">
<a href="//b.hatena.ne.jp/entry/<?php echo $targeturl; ?>" target="_blank">
<i class="fa fa-hatena"></i><span><?php echo $count_hatena; ?></span>
</a>
</li><!--
--><li class="btn-pk">
<a href="//getpocket.com/edit?url=<?php echo $targeturl; ?>" target="_blank">
<i class="fab fa-get-pocket"></i><span><?php echo $count_pocket; ?></span>
</a>
</li><!--
--><li class="btn-line">
<a href="//social-plugins.line.me/lineit/share?url=<?php echo $targeturl; ?>" target="_blank">
<i class="fab fa-line"></i><span>LINE</span>
</a>
</li>
</ul>
</div>
<script>
window.addEventListener("load",function(){ const css=[ "//cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.6.3/css/all.min.css" ];for(i in css){ let html=document.createElement("link");html.rel="stylesheet";html.href=css[i];html.async=true;document.head.appendChild(html);}}); </script> </body> </html>
たった0.5秒だけど速い！
前回は平均2秒だったのが今回1.5秒になりました。
期待していたのは1秒以下だったのですが、curl_multiを使った効果はありました。非同期なのはAPIから結果を取得しに行く部分で、表示は非同期ではありません。よってブログのページにこのボタンを埋め込むとこの1.5秒分ほどページ全体の表示を遅くさせる可能性があります。それでも純正のシェアボタンを使うよりは速いと思います。
表示も非同期にしたいときはPHPでカウント数を呼び出す部分をJavascriptから実行させることができれば可能かもしれません。jQueryでできるらしいので今度試してみたいと思います。