ほほうボタンを皆でカスタマイズ!!

Posted by : Izumikawa Fukumi 2014年3月19日水曜日

ちょっとGoogle+でリクエストがあったので、今回ほほうボタンの仕様とソースを簡単に説明しちゃいますね。

ほんとに何が言いたいのか分からない図ですが、

上記の図を見ながら処理の順序をご覧下さい。

ほほう1された時の処理

JavaScript内で使用されるほほう数を加算
PHPにPOSTでページURLと"Increment"を送信
ほほうボタンスタイル変更

ほほうが取り消された時の処理

JavaScript内で使用されるほほう数をデクリメント
PHPにPOSTでページURLと"Decrement"を送信
ほほうボタンスタイル変更

ま〜正直言ってしまうとこれ誰でも作れてしまいます。

まずページロード時に

http://izumikawa.tk/api/hohoubotan/phpint.php?data=PageURL

dataにページURLを書いて送信するだけでPHPがデータの存在を確認します。
データが存在しない場合は0を返します。

データが存在する場合はその数値を返します。

次にボタンが+1された事をPHPに教えるのですが、以下のURLにPOSTで送信します。

http://izumikawa.tk/api/hohoubotan/hohou_botan_share.php

POSTでページURLと特定の命令文字列を送信します。命令文字列によって+1と-1を使い分けます。

[Increment]+1命令文字列
[Decrement]-1命令文字列

これを送信する事によりPHP側でインクリメントかデクリメントかを判断し、
確実にデータを書き換えます。

データIDを独自の文字列に変える

PHPではURLをそのままファイル名として使える様にファイル名として使えない文字列は特定の文字列に変換する様にしています。これは何らかのエラーを回避する為の対策ですが、別にページのURLじゃなくてもいいと言う事です。

PageURLの部分はあくまでも区別しやすい様になので、独自のデータIDをここに書き込んで送信すると言う事が可能です。

ただ他のサイトで使われているIDと一緒にならない様に注意して下さい。
最低でも20文字以上がより安全かと思います。

JavaScript


var xmlHttp; 
var phpint; 
var eventlog = 'null'; 
var pageurl = location.href; 
xmlHttp = new XMLHttpRequest(); 
xmlHttp.onreadystatechange = loading; 
xmlHttp.open("GET", "http://izumikawa.tk/api/hohoubotan/phpint.php?data="+pageurl, false); 
xmlHttp.send(null); 
function loading() {
     window.addEventListener('load', function () { 
     console.log("loading: ", xmlHttp.readyState, xmlHttp.status); 
     phpint = xmlHttp.responseText; 
     if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { 
        var hohou_botanobject = document.getElementById("hohou_botan"); 
        hohou_botanobject.innerHTML = 'ほほう' + phpint; 
        hohou_botanobject.style.borderRadius = "5px"; 
        hohou_botanobject.style.MozBorderRadius = "5px"; 
        hohou_botanobject.style.WebkitBorderRadius = "5px"; 
        hohou_botanobject.style.padding = "5px"; 
        hohou_botanobject.style.color = "#FF3E3E"; 
        hohou_botanobject.style.textAlign = "center"; 
        hohou_botanobject.style.fontWeight = "bold"; 
        hohou_botanobject.style.backgroundColor = '#FFFFFF'; 
        hohou_botanobject.style.cursor = "pointer"; 
    } 
  }, false); 
} function hohou_share() { 
    if(eventlog == 'null') { 
        eventlog = 'value'; 
        phpint++; 
        var data = { main_data: 'Increment', data_url: pageurl }; 
        var http_post = new XMLHttpRequest(); 
        http_post.onreadystatechange = function () { 
            var READYSTATE_COMPLETED = 4; 
            var HTTP_STATUS_OK = 200; 
            if (this.readyState == READYSTATE_COMPLETED && this.status == HTTP_STATUS_OK) { 
                var hohou_object = document.getElementById('hohou_botan'); 
                hohou_object.innerHTML = 'ほほう' + phpint; 
                hohou_object.style.backgroundColor = '#FF3C3C'; 
                hohou_object.style.color = "#FFFFFF"; 
             } 
        }; 
        http_post.open('POST', 'http://izumikawa.tk/api/hohoubotan/hohou_botan_share.php'); 
        http_post.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 
        http_post.send(form_data(data)); 
    }else if(eventlog == 'value') { 
        eventlog = 'null'; 
        phpint--; 
        var data = { main_data: 'Decrement', data_url: pageurl }; 
        var http_post = new XMLHttpRequest(); 
        http_post.onreadystatechange = function () { 
            var READYSTATE_COMPLETED = 4; 
            var HTTP_STATUS_OK = 200; 
            if (this.readyState == READYSTATE_COMPLETED && this.status == HTTP_STATUS_OK) { 
                var hohou_object = document.getElementById('hohou_botan'); 
                hohou_object.innerHTML = 'ほほう' + phpint; 
                hohou_object.style.backgroundColor = '#FFFFFF'; 
                hohou_object.style.color = "#FF3E3E"; 
             } 
        }; 
        http_post.open('POST', 'http://izumikawa.tk/api/hohoubotan/hohou_botan_share.php'); 
        http_post.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 
        http_post.send(form_data(data)); 
    } 
} 
function form_data(data) { 
    var params = []; 
    for(var name in data) { 
        var value = data[name]; 
        var param = encodeURIComponent(name).replace(/%20/g, '+') + '=' + encodeURIComponent(value).replace(/%20/g, '+'); params.push(param); 
    } return params.join('&'); 
}

I aim to creator.

ほほうボタンを皆でカスタマイズ!!

Popular Posts

GoogleProfile