jsPerf.app is an online JavaScript performance benchmark test runner & jsperf.com mirror. It is a complete rewrite in homage to the once excellent jsperf.com now with hopefully a more modern & maintainable codebase.

jsperf.com URLs are mirrored at the same path, e.g:

https://jsperf.com/negative-modulo/2

Can be accessed at:

https://jsperf.app/negative-modulo/2

JS Refactoring - VA WSD the phantom thief (v2)

Revision 2 of this benchmark created on May 16, 2015

Preparation HTML

<!DOCTYPE html>
<html lang="ja" class="no-js">
<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <link rel="profile" href="http://gmpg.org/xfn/11">
        <link rel="pingback" href="http://designinglabo.com/xmlrpc.php">
        <title>WordPress のテーマを Github や Bitbucket から更新チェックさせる | デザイニングラボ</title>

        <script src='http://designinglabo.com/wp-includes/js/jquery/jquery.js'></script>
        <script src='http://designinglabo.com/wp-includes/js/jquery/jquery-migrate.min.js'></script>
        <script>/* <![CDATA[ */var VAWSDTPT = {"endpoint":"http:\/\/designinglabo.com\/wp-admin\/admin-ajax.php","action":"vawsdtpt_get","nonce":"f27fcc858d"};var VAWSDTPT = {"endpoint":"http:\/\/designinglabo.com\/wp-admin\/admin-ajax.php","action":"vawsdtpt_get","nonce":"f27fcc858d"};/* ]]> */</script>
</head>
<body class="single single-post postid-782 single-format-standard">
<div id="va-wsd-the-phantom-thief" class="entry-content">
        
        <p>お久しぶりの KUCKLU（<a href="http://twitter.com/kuck1u" target="_blank" class="twitter-link">@kuck1u</a>） です。
        </p>

        <p>今回は少しマニアックなネタです。</p>

        <h2>本番 / テスト環境へのファイル転送</h2>

        <p>WordPress のテーマやプラグインの開発でローカル環境での動作確認完了後、本番を想定したテストサーバーで動作確認をする事が多い思います。例えば、公開ドメインのサブドメインでテスト環境を作ってなど。<br />テストサーバーで動作確認をしようとした時、大多数の人はローカルにあるファイル一式を FTP や SSH などで転送と思います。もしくは、ちょっとイケメンな人だと WordMove というツールを使ったり。
        </p>

        <p>方法はさまざまだけど、とにかくファイルを転送しますよね。</p>

        <p>でも、正直面倒臭くないですか？・・・僕は、面倒臭いです。</p>

        <h3>Git と連動してみる</h3>

        <p>とはいえ、黒い画面は不慣れなので、ついつい SFTP クライアントとか立ち上げてドラッグ・アンド・ドロップとかしています。この作業をなるべく簡単に削減したいな〜と、実は前々から思っていたわけです。<br />開発している時はバージョン管理に、Git をいっちょ前に使っています。プライベートでは Github、仕事では Bitbucket というふうに使い分けています。1 年から 2 年前くらいに話題になったのが、Git に Push したら、テーマやプラグインが更新できたらいいよね ! という話。<br />そんな話で盛り上がっていたら、WordPress 界の神様ともいう存在の<a href="http://takahashifumiki.com/" target="_blank">高橋文樹さん</a>が Github の API を利用して、Github に Push したらサーバー上のテーマやプラグインを問答無用で更新しちゃうよ ! という素晴らしいプラグインを公開してくれたわけです。
        </p>

        <p class="va-wsd-the-phantom-thief" data-url="http://takahashifumiki.com/web/programing/3075/">
                <a href="http://takahashifumiki.com/web/programing/3075/" rel="nofollow">http://takahashifumiki.com/web/programing/3075/</a>
        </p>

        <p>Giploy という名のプラグインなのだけど、Giploy を一番最初に動かした時は感動しました。なんちゅーもん作ってくれたんや〜 (泣) と僕は小一時間くらい感動していたわけです。<br />とわいえ、このプラグイン、公開サーバーで Git コマンドが使える事が絶対条件となります。その為、Git コマンドが使えないサーバーの場合、Git コマンドを使えるように環境を整えてあげる必要があります。VPS やクラウドなら簡単だけど、共有サーバーだとそうもいかないですよね。最近だと Git が使える共有サーバーも増えてきているけれど、Git がインストールさている PATH が分からないから助けてくださいとかよくある話です。黒い画面でゴニョっとすればすぐに分かるけど、黒い画面は避けられがちですしおすし。
        </p>

        <p>じゃぁ、もっと簡単にしようぜ ! とくっくるくんは思ったわけです。そこで考えたのが、WordPress にはデフォルトで更新チェック / 自動更新機能がついています。これを使えば何とかなるんじゃない？と思ったわけです。<br />調べてみると、海外では WordPress の公式ディレクトリ以外からテーマやプラグインを更新させる方法は結構普通に使われている方法らしく、有料テーマや有料プラグインでは当たり前みたいです。<a href="http://wpgear-ja.org/" target="_blank">WordPress Gear 日本語版</a>というサイトにも色々と情報とリソースがありました。
        </p>

        <p>前置きが凄くながかったけど、これからが本題です。</p>

        <h2>テーマファイルに数行プラスするだけで簡単に自動更新 !</h2>

        <p>去年、とあるブログ記事を読んで興味がわき今回トライしてみました。</p>

        <p class="va-wsd-the-phantom-thief" data-url="http://nelog.jp/theme-update-checker-php">
                <a href="http://nelog.jp/theme-update-checker-php" rel="nofollow">http://nelog.jp/theme-update-checker-php</a>
        </p>

        <p>今回は上記サイトで紹介されているツールを使って、Bitbucket の Master ブランチから更新する方法を書いておこうと思います。Github からでも更新できると思います。</p>

        <h3>Bitbucket から更新する方法</h3>

        <p>WordPress の自動更新を有効にします。<br />使用中のテーマの functions.php か、プラグインを作るなりして下記を追加します。</p>

        <p></p>

        <div id="crayon-55568e1869f6a386893975" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" no-popup minimize scroll-always disable-anim" style=" margin-top: 12px; margin-bottom: 12px; font-size: 14px !important; line-height: 21px !important;">
                <div class="crayon-plain-wrap"></div>
                <div class="crayon-main" style="">
                        <table class="crayon-table">
                                <tr class="crayon-row">
                                        <td class="crayon-nums " data-settings="show">
                                                <div class="crayon-nums-content" style="font-size: 14px !important; line-height: 21px !important;">
                                                        <div class="crayon-num" data-line="crayon-55568e1869f6a386893975-1">1</div>
                                                </div>
                                        </td>
                                        <td class="crayon-code">
                                                <div class="crayon-pre" style="font-size: 14px !important; line-height: 21px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
                                                        <div class="crayon-line" id="crayon-55568e1869f6a386893975-1">
                                                                <span class="crayon-e">add_filter</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-s">'auto_update_theme'</span><span class="crayon-sy">,</span><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-s">'__return_true'</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-cn">99999</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span>
                                                        </div>
                                                </div>
                                        </td>
                                </tr>
                        </table>
                </div>
        </div>
        <p></p>

        <p>上記を追加しなくても、ダッシュボード→更新→もう一度確認するボタンを押下 でもいいです。<br />※自動更新じゃなくなるけど（笑）</p>

        <p>テーマ情報を記載した JSON ファイルを作成します。</p>

        <p></p>

        <div id="crayon-55568e1869f75056827284" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" no-popup minimize scroll-always disable-anim" style=" margin-top: 12px; margin-bottom: 12px; font-size: 14px !important; line-height: 21px !important;">
                <div class="crayon-plain-wrap"></div>
                <div class="crayon-main" style="">
                        <table class="crayon-table">
                                <tr class="crayon-row">
                                        <td class="crayon-nums " data-settings="show">
                                                <div class="crayon-nums-content" style="font-size: 14px !important; line-height: 21px !important;">
                                                        <div class="crayon-num" data-line="crayon-55568e1869f75056827284-1">1</div>
                                                        <div class="crayon-num crayon-striped-num" data-line="crayon-55568e1869f75056827284-2">2</div>
                                                        <div class="crayon-num" data-line="crayon-55568e1869f75056827284-3">3</div>
                                                        <div class="crayon-num crayon-striped-num" data-line="crayon-55568e1869f75056827284-4">4</div>
                                                        <div class="crayon-num" data-line="crayon-55568e1869f75056827284-5">5</div>
                                                </div>
                                        </td>
                                        <td class="crayon-code">
                                                <div class="crayon-pre" style="font-size: 14px !important; line-height: 21px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
                                                        <div class="crayon-line" id="crayon-55568e1869f75056827284-1">
                                                                <span class="crayon-sy">{</span></div>
                                                        <div class="crayon-line crayon-striped-line" id="crayon-55568e1869f75056827284-2">
                                                                <span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-s">"version"</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-s">"0.1.2"</span><span class="crayon-sy">,</span>
                                                        </div>
                                                        <div class="crayon-line" id="crayon-55568e1869f75056827284-3">
                                                                <span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-s">"details_url"</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-s">"https://example.org/your_theme_details/"</span><span class="crayon-sy">,</span>
                                                        </div>
                                                        <div class="crayon-line crayon-striped-line" id="crayon-55568e1869f75056827284-4">
                                                                <span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-s">"download_url"</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">"https://bitbucket.org/your_name/your_repository_name/get/master.zip"</span>
                                                        </div>
                                                        <div class="crayon-line" id="crayon-55568e1869f75056827284-5">
                                                                <span class="crayon-sy">}</span></div>
                                                </div>
                                        </td>
                                </tr>
                        </table>
                </div>
        </div>
        <p></p>

        <p>作成した JSON ファイルは Git Push しておいてください。</p>

        <p>自動更新する為の PHP ファイルを include して設定します。<br />使用中のテーマの functions.php か、プラグインを作るなりして下記を追加します。</p>

        <p></p>

        <div id="crayon-55568e1869f7b893570345" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" no-popup minimize scroll-always disable-anim" style=" margin-top: 12px; margin-bottom: 12px; font-size: 14px !important; line-height: 21px !important;">
                <div class="crayon-plain-wrap"></div>
                <div class="crayon-main" style="">
                        <table class="crayon-table">
                                <tr class="crayon-row">
                                        <td class="crayon-nums " data-settings="show">
                                                <div class="crayon-nums-content" style="font-size: 14px !important; line-height: 21px !important;">
                                                        <div class="crayon-num" data-line="crayon-55568e1869f7b893570345-1">1</div>
                                                        <div class="crayon-num crayon-striped-num" data-line="crayon-55568e1869f7b893570345-2">2</div>
                                                        <div class="crayon-num" data-line="crayon-55568e1869f7b893570345-3">3</div>
                                                        <div class="crayon-num crayon-striped-num" data-line="crayon-55568e1869f7b893570345-4">4</div>
                                                        <div class="crayon-num" data-line="crayon-55568e1869f7b893570345-5">5</div>
                                                        <div class="crayon-num crayon-striped-num" data-line="crayon-55568e1869f7b893570345-6">6</div>
                                                        <div class="crayon-num" data-line="crayon-55568e1869f7b893570345-7">7</div>
                                                        <div class="crayon-num crayon-striped-num" data-line="crayon-55568e1869f7b893570345-8">8</div>
                                                        <div class="crayon-num" data-line="crayon-55568e1869f7b893570345-9">9</div>
                                                        <div class="crayon-num crayon-striped-num" data-line="crayon-55568e1869f7b893570345-10">10</div>
                                                        <div class="crayon-num" data-line="crayon-55568e1869f7b893570345-11">11</div>
                                                </div>
                                        </td>
                                        <td class="crayon-code">
                                                <div class="crayon-pre" style="font-size: 14px !important; line-height: 21px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
                                                        <div class="crayon-line" id="crayon-55568e1869f7b893570345-1">
                                                                <span class="crayon-c">/**</span></div>
                                                        <div class="crayon-line crayon-striped-line" id="crayon-55568e1869f7b893570345-2">
                                                                <span class="crayon-c"> * Initialize the update checker.</span>
                                                        </div>
                                                        <div class="crayon-line" id="crayon-55568e1869f7b893570345-3">
                                                                <span class="crayon-c"> */</span></div>
                                                        <div class="crayon-line crayon-striped-line" id="crayon-55568e1869f7b893570345-4">
                                                                <span class="crayon-e">define</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-s">'YOURTHEMENAME_THEME_NAME'</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-e">basename</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-e">get_stylesheet_directory</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span>
                                                        </div>
                                                        <div class="crayon-line" id="crayon-55568e1869f7b893570345-5">
                                                                <span class="crayon-st">if</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-o">!</span><span class="crayon-e">defined</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-s">'WP_DEBUG'</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-o">||</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-e">defined</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-s">'WP_DEBUG'</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-o">&amp;&amp;</span><span class="crayon-h"> </span><span class="crayon-o">!</span><span class="crayon-v">WP</span><span class="crayon-sy">_</span>DEBUG<span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span>
                                                        </div>
                                                        <div class="crayon-line crayon-striped-line" id="crayon-55568e1869f7b893570345-6">
                                                                <span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-e">require_once</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-e">get_template_directory</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">.</span><span class="crayon-h"> </span><span class="crayon-s">'/incs/theme-update-checker.php'</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span>
                                                        </div>
                                                        <div class="crayon-line" id="crayon-55568e1869f7b893570345-7">
                                                                <span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">$</span><span class="crayon-v">tourthemename_update_checker</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-e">ThemeUpdateChecker</span><span class="crayon-sy">(</span>
                                                        </div>
                                                        <div class="crayon-line crayon-striped-line" id="crayon-55568e1869f7b893570345-8">
                                                                <span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">YOURTHEMENAME_THEME_NAME</span><span class="crayon-sy">,</span>
                                                        </div>
                                                        <div class="crayon-line" id="crayon-55568e1869f7b893570345-9">
                                                                <span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-s">'https://bitbucket.org/your_name/your_repository_name/raw/master/version.json'</span>
                                                        </div>
                                                        <div class="crayon-line crayon-striped-line" id="crayon-55568e1869f7b893570345-10">
                                                                <span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span>
                                                        </div>
                                                        <div class="crayon-line" id="crayon-55568e1869f7b893570345-11">
                                                                <span class="crayon-sy">}</span></div>
                                                </div>
                                        </td>
                                </tr>
                        </table>
                </div>
        </div>
        <p></p>

        <p>WP_DEBUG が false の時だけ動くようにしています。</p>

        <p>これで終わりです。<br />更新する時は、style.css と version.json のバージョンの項目を更新して Git Push すれば OK です。あとは、WordPress が勝手にやってくれます。<br />注意すべき点として、WordPress の自動更新は 12 時間に 1 回だった筈なので、テストサーバーではこの辺りをフックでカスタマイズしてあげるなどすればよいと思います。
        </p>

        <h2>最後に・・・</h2>

        <p>上手く利用すれば、クライアントワークでも利用できそうですね。<br />アニマック過ぎるのと、早足で書いたので文章がおかしい所があると思いますけど、許してください（笑）</p>

        <p>それでは本日はここまで。</p>

        <p>KUCKLU（<a href="http://twitter.com/kuck1u" target="_blank" class="twitter-link">@kuck1u</a>） でした。
        </p>
</div>
</body>
</html>

Test runner

Ready to run.

Test Ops/sec

Before

Testing in
Test	Ops/sec
Before	/** * The VA WSD the phantom thief Ajax * * @package WordPress * @subpackage VA WSD the phantom thief * @author KUCKLU <kuck1u@visualive.jp> * @copyright Copyright (c) 2015 KUCKLU, VisuAlive. * @license http://opensource.org/licenses/gpl-2.0.php GPLv2 * @link http://visualive.jp/ / jQuery(function($) { "use strict"; var va_wsd_the_phantom_thief = { get: function(targetURL) { var defer = $.Deferred(); $.ajax({ type: 'POST', url: VAWSDTPT.endpoint, data: { 'action': VAWSDTPT.action, 'url': targetURL, 'vawsdtpt_nonce': VAWSDTPT.nonce }, dataType: 'json', success: defer.resolve, error: defer.reject }); return defer.promise(); } }; var urlRegExp = function(str) { var re = new RegExp("https?:\/\/[a-zA-Z0-9\-_\.:@!~'\(¥);/?&=\+$,%#]+", 'g'); if (str.match(re)) { return true; } else { return false; } }; $('.va-wsd-the-phantom-thief').each(function() { var $this = $(this), $targetURL = $this.data("url"), html = []; if (true === urlRegExp($targetURL)) { va_wsd_the_phantom_thief.get($targetURL).done(function(result) { if (true === result.success) { if (true === result.data.anchor_target) { html.push('<a class="vawsdptp_anchor" href="' + result.data.post_url + '" rel="nofollow" target="_blank">'); } else { html.push('<a class="vawsdptp_anchor" href="' + result.data.post_url + '">'); } if ("" !== result.data.post_image) { html.push('<div class="vawsdptp_image"><img src="' + result.data.post_image + '"></div>'); } html.push('<div class="vawsdptp_body">'); html.push('<div class="vawsdptp_title">' + result.data.post_title + '</div>'); if ("" !== result.data.post_content) { html.push('<div class="vawsdptp_content">' + result.data.post_content + '</div>'); } html.push('<div class="vawsdptp_domain">'); if ("" !== result.data.post_favicon) { html.push('<img class="vawsdptp_favicon" src="' + result.data.post_favicon + '">'); } html.push('<span class="vawsdptp_domain_txt">' + result.data.post_domain + '</span>'); html.push('</div>'); html.push('</div>'); html.push('</a>'); $this[0].removeAttribute("data-url"); $this[0].removeChild($this[0].childNodes.item(0)); $this[0].insertAdjacentHTML('afterbegin', html.join('')); } else { $this[0].removeAttribute("data-url"); console.table(result.data); } }); } }); });	ready
After	/** * The VA WSD the phantom thief Ajax * * @package WordPress * @subpackage VA WSD the phantom thief * @author KUCKLU <kuck1u@visualive.jp> * @copyright Copyright (c) 2015 KUCKLU, VisuAlive. * @license http://opensource.org/licenses/gpl-2.0.php GPLv2 * @link http://visualive.jp/ / /* * Ready / jQuery(function($){ "use strict"; $(document).ready(function(){ $('#va-wsd-the-phantom-thief').VisuAliveWebSiteDataThePhantomThief(); }); }); (function ( $, window, document, undefined ) { "use strict"; var pluginName = "VisuAliveWebSiteDataThePhantomThief", defaults = { childrenClass: ".va-wsd-the-phantom-thief" }; function Plugin ( element, options ) { this.element = element; this.settings = $.extend( {}, defaults, options ); this._defaults = defaults; this._name = pluginName; this.init(); } $.extend(Plugin.prototype, { init: function () { var $target = $(this.element).find(this.settings.childrenClass), urlRegExp = this.urlRegExp, ajaxGet = this.ajaxGet; $target.each(function(){ var $this = $(this), $targetURL = $this.data("url"), html = []; if(true === urlRegExp($targetURL)) { ajaxGet($targetURL).done(function(result){ if(true === result.success) { if(true === result.data.anchor_target) { html.push('<a class="vawsdptp_anchor" href="' + result.data.post_url + '" rel="nofollow" target="_blank">'); } else { html.push('<a class="vawsdptp_anchor" href="' + result.data.post_url + '">'); } if ( "" !== result.data.post_image) { html.push('<div class="vawsdptp_image"><img src="' + result.data.post_image + '"></div>'); } html.push('<div class="vawsdptp_body">'); html.push('<div class="vawsdptp_title">'+result.data.post_title+'</div>'); if ( "" !== result.data.post_content) { html.push('<div class="vawsdptp_content">' + result.data.post_content + '</div>'); } html.push('<div class="vawsdptp_domain">'); if ( "" !== result.data.post_favicon) { html.push('<img class="vawsdptp_favicon" src="' + result.data.post_favicon + '">'); } html.push('<span class="vawsdptp_domain_txt">' + result.data.post_domain + '</span>'); html.push('</div>'); html.push('</div>'); html.push('</a>'); $this[0].removeAttribute("data-url"); $this[0].removeChild($this[0].childNodes.item(0)); $this[0].insertAdjacentHTML('afterbegin', html.join('')); } else { $this[0].removeAttribute("data-url"); console.table(result.data); } }); } }); }, urlRegExp: function (str) { var re = new RegExp("https?:\/\/[a-zA-Z0-9\-_\.:@!~'\(¥);/?&=\+$,%#]+", 'g'); if (str.match(re)) { return true; } else { return false; } }, ajaxGet: function (targetURL) { var defer = $.Deferred(); $.ajax({ type: 'POST', url: VAWSDTPT.endpoint, data: { 'action': VAWSDTPT.action, 'url': targetURL, 'vawsdtpt_nonce': VAWSDTPT.nonce }, dataType: 'json', success: defer.resolve, error: defer.reject }); return defer.promise(); } }); $.fn[ pluginName ] = function ( options ) { return this.each(function() { if ( !$.data( this, "plugin_" + pluginName ) ) { $.data( this, "plugin_" + pluginName, new Plugin( this, options ) ); } }); }; })( jQuery, window, document );	ready

/**
 * The VA WSD the phantom thief Ajax
 *
 * @package WordPress
 * @subpackage VA WSD the phantom thief
 * @author KUCKLU <kuck1u@visualive.jp>
 * @copyright Copyright (c) 2015 KUCKLU, VisuAlive.
 * @license http://opensource.org/licenses/gpl-2.0.php GPLv2
 * @link http://visualive.jp/
 */
jQuery(function($) {
  "use strict";

  var va_wsd_the_phantom_thief = {
    get: function(targetURL) {
      var defer = $.Deferred();
      $.ajax({
        type: 'POST',
        url: VAWSDTPT.endpoint,
        data: {
          'action': VAWSDTPT.action,
          'url': targetURL,
          'vawsdtpt_nonce': VAWSDTPT.nonce
        },
        dataType: 'json',
        success: defer.resolve,
        error: defer.reject
      });
      return defer.promise();
    }
  };

  var urlRegExp = function(str) {
    var re = new RegExp("https?:\/\/[a-zA-Z0-9\-_\.:@!~*'\(¥);/?&=\+$,%#]+", 'g');

    if (str.match(re)) {
      return true;
    } else {
      return false;
    }
  };

  $('.va-wsd-the-phantom-thief').each(function() {
    var $this = $(this),
      $targetURL = $this.data("url"),
      html = [];

    if (true === urlRegExp($targetURL)) {
      va_wsd_the_phantom_thief.get($targetURL).done(function(result) {
        if (true === result.success) {
          if (true === result.data.anchor_target) {
            html.push('<a class="vawsdptp_anchor" href="' + result.data.post_url + '" rel="nofollow" target="_blank">');
          } else {
            html.push('<a class="vawsdptp_anchor" href="' + result.data.post_url + '">');
          }
          if ("" !== result.data.post_image) {
            html.push('<div class="vawsdptp_image"><img src="' + result.data.post_image + '"></div>');
          }
          html.push('<div class="vawsdptp_body">');
          html.push('<div class="vawsdptp_title">' + result.data.post_title + '</div>');
          if ("" !== result.data.post_content) {
            html.push('<div class="vawsdptp_content">' + result.data.post_content + '</div>');
          }
          html.push('<div class="vawsdptp_domain">');
          if ("" !== result.data.post_favicon) {
            html.push('<img class="vawsdptp_favicon" src="' + result.data.post_favicon + '">');
          }
          html.push('<span class="vawsdptp_domain_txt">' + result.data.post_domain + '</span>');
          html.push('</div>');
          html.push('</div>');
          html.push('</a>');

          $this[0].removeAttribute("data-url");
          $this[0].removeChild($this[0].childNodes.item(0));
          $this[0].insertAdjacentHTML('afterbegin', html.join(''));
        } else {
          $this[0].removeAttribute("data-url");
          console.table(result.data);
        }
      });
    }
  });
});

ready

After

/**
 * The VA WSD the phantom thief Ajax
 *
 * @package WordPress
 * @subpackage VA WSD the phantom thief
 * @author KUCKLU <kuck1u@visualive.jp>
 * @copyright Copyright (c) 2015 KUCKLU, VisuAlive.
 * @license http://opensource.org/licenses/gpl-2.0.php GPLv2
 * @link http://visualive.jp/
 */

/**
 * Ready
 */
jQuery(function($){
        "use strict";

        $(document).ready(function(){
                $('#va-wsd-the-phantom-thief').VisuAliveWebSiteDataThePhantomThief();
        });
});


(function ( $, window, document, undefined ) {
        "use strict";

        var pluginName = "VisuAliveWebSiteDataThePhantomThief",
                defaults   = {
                        childrenClass: ".va-wsd-the-phantom-thief"
                };

        function Plugin ( element, options ) {
                this.element   = element;
                this.settings  = $.extend( {}, defaults, options );
                this._defaults = defaults;
                this._name     = pluginName;
                this.init();
        }

        $.extend(Plugin.prototype, {
                init: function () {
                        var $target   = $(this.element).find(this.settings.childrenClass),
                                urlRegExp = this.urlRegExp,
                                ajaxGet   = this.ajaxGet;

                        $target.each(function(){
                                var $this      = $(this),
                                        $targetURL = $this.data("url"),
                                        html       = [];

                                if(true === urlRegExp($targetURL)) {
                                        ajaxGet($targetURL).done(function(result){
                                                if(true === result.success) {
                                                        if(true === result.data.anchor_target) {
                                                                html.push('<a class="vawsdptp_anchor" href="' + result.data.post_url + '" rel="nofollow" target="_blank">');
                                                        } else {
                                                                html.push('<a class="vawsdptp_anchor" href="' + result.data.post_url + '">');
                                                        }
                                                        if ( "" !== result.data.post_image) {
                                                                html.push('<div class="vawsdptp_image"><img src="' + result.data.post_image + '"></div>');
                                                        }
                                                        html.push('<div class="vawsdptp_body">');
                                                        html.push('<div class="vawsdptp_title">'+result.data.post_title+'</div>');
                                                        if ( "" !== result.data.post_content) {
                                                                html.push('<div class="vawsdptp_content">' + result.data.post_content + '</div>');
                                                        }
                                                        html.push('<div class="vawsdptp_domain">');
                                                        if ( "" !== result.data.post_favicon) {
                                                                html.push('<img class="vawsdptp_favicon" src="' + result.data.post_favicon + '">');
                                                        }
                                                        html.push('<span class="vawsdptp_domain_txt">' + result.data.post_domain + '</span>');
                                                        html.push('</div>');
                                                        html.push('</div>');
                                                        html.push('</a>');

                                                        $this[0].removeAttribute("data-url");
                                                        $this[0].removeChild($this[0].childNodes.item(0));
                                                        $this[0].insertAdjacentHTML('afterbegin', html.join(''));
                                                } else {
                                                        $this[0].removeAttribute("data-url");
                                                        console.table(result.data);
                                                }
                                        });
                                }
                        });
                },
                urlRegExp: function (str) {
                        var re = new RegExp("https?:\/\/[a-zA-Z0-9\-_\.:@!~*'\(¥);/?&=\+$,%#]+", 'g');

                        if (str.match(re)) {
                                return true;
                        } else {
                                return false;
                        }
                },
                ajaxGet: function (targetURL) {
                        var defer = $.Deferred();
                        $.ajax({
                                type: 'POST',
                                url: VAWSDTPT.endpoint,
                                data: {
                                        'action': VAWSDTPT.action,
                                        'url': targetURL,
                                        'vawsdtpt_nonce': VAWSDTPT.nonce
                                },
                                dataType: 'json',
                                success: defer.resolve,
                                error: defer.reject
                        });
                        return defer.promise();
                }
        });

        $.fn[ pluginName ] = function ( options ) {
                return this.each(function() {
                        if ( !$.data( this, "plugin_" + pluginName ) ) {
                                $.data( this, "plugin_" + pluginName, new Plugin( this, options ) );
                        }
                });
        };
})( jQuery, window, document );

ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.

Revision 2: published on May 16, 2015