1. 準備 | 2. カスタマイズ方法 | 3. ボタン設置サンプルデモ
CGIのKENTWEB 最新バージョンASKA BBS(Ver:8.023)の投稿記事に自作のいいねボタンといまいちボタンやソーシャルボタンをカスタマイズしてみました。
設置できるソーシャルボタンは、twitter、facebook、hatena、pocket、pinterest、feedly、linkedin、buffer のうちいづれか1つです。
必要なファイルをダウンロードし、下記のディレクトリ構成例にならい、さーばーへアップロードします。
一般的にレス記事は、下「レス記事の例」のとおり、(1)ヘッダー、 (2)入力された記事本文および (3)フッターから構成されています。
いいねボタンを表示させるには、 (3)フッターの中に、ボタン用のタグコードを赤字の位置に埋め込みます。
例では、3つのボタン(赤字のラベルiine1とラベルiine2とtwitter)を埋め込んでいます。
↓カスタマイズ
↓カスタマイズ後
記事ファイル(log.cgi)の書き込み形式は、つぎのように、<>区切りの13の項目から構成されています。末尾の2項目(11,12,13)は、
このサンプルの追加カスタマイズ項目になります。
1.1 aska.cgi
#-----------------------------------------------------------
# 記事受付 ←150行目
#-----------------------------------------------------------
sub recv_data {
・
・
# 記事数調整 ← 198行目
my @data = ($top);
my $i = 0;
while (<DAT>) {
$i++;
push(@data,$_);
last if ($i >= $cf{maxlog}-1);
}
#以下挿入↓ 2020.11.6
my $income = $in{comment}; #ソーシャルページに送信するテキスト内容、コメントの場合
#my $income = $in{sub}; #ソーシャルページに送信するテキスト内容、タイトルの場合
$income =~ s/>/>/g; #> を > に変換
$income =~ s/<br>/ /g; #<br> を スペースに変換
my $randstr1 = randstr(2); #2桁数字の乱数(いいねボタン!1)
my $nowtime1 = get_nowtime(); #時刻 年月日時分秒 例:20201105185205
$nowtime1 = $nowtime1.$randstr1; #2桁数字の乱数+2桁数字の乱数 例:2020110518520550
my $randstr2 = randstr(2); #同上(いいね!ボタン2)
my $nowtime2 = get_nowtime();
$nowtime2 = $nowtime2.$randstr2;
# SNSソーシャルボタン設定 ソーシャルボタン名、ボタン画像名 5ステップ
my $sns_name = $cf{sns_name}; #表示ソーシャルボタン名
my ($snsfanction,$snsimage) = sns_info($sns_name); #snsボタン設置関数名、snsボタン画像ファイル名取得
my $classname = "sns-".$no; #Twitterボタン設置域のCLASS名(ユニーク)
my $askaurl = "http://urbanqee.com/webutil/aska-kentweb/aska.cgi?res=" . $no; #Twitterボタンに設定するコメントのURL
my $snsscript = "<script>\$(function(){var shareUrl = '" . $askaurl . "'; var rssUrl = ''; \$('\." . $classname . "').snsbutton('" . $snsfanction . "', { img: './img/" . $snsimage . "', title: '" . $income . "', alt: 'このページの情報を Twitter - count付き で共有する', button: '', url: shareUrl, width: '24', height: '24' });});</script>";
# SNSソーシャルボタン設定 以上↑
#$iine1、$iine2 いいね!ボタンおよびソーシャルボタン設置域 3 箇所
my $iine1 = "<DIV style='' data-file='sql' class='IineVote IineVote1' data-id='" . $nowtime1 . "' data-lock='" . $nowtime1 . "' data-count='iine-right'><img src='./img/hand-like64.png' class='IineImg IineImg1' width=16 title='いいね!'></DIV>";
my $iine2 = "<DIV style='' data-file='sql' class='IineVote IineVote2' data-id='" . $nowtime2 . "' data-lock='" . $nowtime1 . "' data-count='iine-right'><img src='./img/hand-dislike64.png' class='IineImg IineImg2' width=16 title='いまいち!'></DIV>";
my $twitter = "<DIV class='" . $classname . "'></DIV>" . $snsscript; #Twitterボタン設置域
#以上3箇所挿入↑
# 更新
seek(DAT, 0, 0);
print DAT "$no<>$date<>$in{name}<>$in{email}<>$in{sub}<>$in{comment}<>$in{url}<>$host<>$pwd<>$time<>$iine1<>$iine2<>$twitter<>\n";
print DAT @data;
truncate(DAT, tell(DAT));
close(DAT);
1.2 init.cgi
sub sns_info {
my ($sns_names) = @_;
# [SNSソーシャルボタン] ソーシャルボタン名、ボタン画像名 6ステップ追加 2020.11.6
#my $sns_name = "facebook"; #使用したいソーシャルボタン名をtwitter facebook hatena pocket pinterest feedly linkedin buffer のうちいづれか1つ指定可能。
my %sns_list = ('twitter' => 'twitterShare', 'facebook' => 'facebookShare', 'hatena' => 'hatenaBookmark', 'pocket' => 'pocketButton',
'pinterest' => 'pinTerest', 'feedly' => 'feedlyRss', 'linkedIn' => 'linkedIn', 'buffer' => 'buffer'); #ソーシャルボタン名
my $snslist = \%sns_list;
my $snsfanction = $snslist->{ $sns_names }; #snsボタン処理関数名
my %sns_imglist = ('twitter' => 'Twitter.png', 'facebook' => 'Facebook.png', 'hatena' => 'Hatena.png', 'pocket' => 'Pocket.png',
'pinterest' => 'Pinterest.png', 'feedly' => 'Feedly.png', 'linkedIn' => 'LinkedIn.png', 'buffer' => 'Buffer.png'); #ソーシャルボタン名
my $snsimglist = \%sns_imglist;
my $snsimage = $snsimglist->{ $sns_names }; #snsボタン画像ファイル名
return ($snsfanction,$snsimage);
}
2.1 aska.cgi
# ループ部 ← aska.cgi 127行目(記事表示 - bbs_list関数)
for (@log) {
my ($no,$date,$name,$eml,$sub,$com,$url,undef,undef,undef,$iine1,$iine2,$twitter) = split(/<>/);
$name = qq|$name| if ($eml);
$com = autolink($com) if ($cf{autolink});
$com =~ s/([>]|^)(>[^<]*)/$1$2<\/span>/g if ($cf{ref_col});
my $tmp = $loop;
$tmp =~ s/!num!/$no/g;
$tmp =~ s/!sub!/$sub/g;
$tmp =~ s/!name!/$name/g;
$tmp =~ s/!date!/$date/g;
$tmp =~ s/!comment!/$com/g;
$tmp =~ s/!bbs_cgi!/$cf{bbs_cgi}/g;
$tmp =~ s/!home!/home_link($url)/e;
$tmp =~ s/!iine1!/$iine1/e; #いいね!ボタン1(いいね!)
$tmp =~ s/!iine2!/$iine2/e; #いいね!ボタン2(いまいち!)
$tmp =~ s/!twitter!/$twitter/e; #挿入2020.11.06 Twitterボタン
print $tmp;
}
2.2 bbs.html
<!-- javascript jquery 挿入 2020.11.6 -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- フリーデザイン画像ボタン設定 jQuery 挿入 2020.11.6 -->
<script src="./js/jquery-snsbutton-1.3-aska.js"></script>
.
</head>
.
<!-- loop --> ← bbs.html 129行目
<div class="art">
[<b>!num!</b>] <strong>!sub!</strong>
<div class="com">!comment!</div>
<div class="ope"><table style="margin-left:100px"><tr><td>
!icon:user.png! <b>!name!</b> !icon:clock.png! !date! !home! </td><td>!iine1!
</td><td>!iine2!</td><td>!twitter!</td><td> | <a href="!bbs_cgi!?res=!num!">返信</a> | <a href="!bbs_cgi!?del=!num!">削除</a> |
</td></tr></table>
</div>
</div>
.
.
<script type="text/javascript" src="./js/clickCount-getCount-v2.js"></script> <!-- いいね!ボタン js 挿入 2020.11.6 -->
</body>
# 修正実行 ← 73行目
} elsif ($in{job} eq "edit") {
# 未入力の場合
if ($in{url} eq "http://") { $in{url} = ""; }
$in{sub} ||= "無題";
my $income = $in{comment};
$income =~ s/>/>/g; #> を > に変換
$income =~ s/<br>/ /g; #<br> を スペース に変換
# SNSソーシャルボタン設定 ソーシャルボタン名、ボタン画像名 9ステップ タイトル変更(コメント変更に対応)
my $sns_name = $cf{sns_name}; #表示ソーシャルボタン名
my ($snsfanction,$snsimage) = sns_info($sns_name); #snsボタン設置関数名、snsボタン画像ファイル名取得
my $classname = "c-".$in{no};
my $askaurl = "http://urbanqee.com/webutil/aska-kentweb/aska.cgi?res=" . $in{no};
my $snsscript = "<script>\$(function(){var shareUrl = '" . $askaurl . "'; var rssUrl = ''; \$('\." . $classname . "').snsbutton('" . $snsfanction . "', { img: './img/" . $snsimage . "', title: '" . $income . "', alt: 'このページの情報を Twitter - count付き で共有する', button: '', url: shareUrl, width: '24', height: '24' });});</script>";
my $twitternew = "<DIV class='" . $classname . "'></DIV>" . $snsscript;
#Twitterボタンのタイトル変更以上
# 読み出し
my @data;
open(DAT,"+< $cf{logfile}") or error("open err: $cf{logfile}");
eval "flock(DAT,2);";
while (<DAT>) {
my ($no,$dat,$nam,$eml,$sub,$com,$url,$hos,$pwd,$tim,$iine1,$iine2,$twitter) = split(/<>/);
if ($in{no} == $no) {
$twitter = $twitternew; #Twitterボタンのタイトル変更(コメント変更に対応)2020.11.6
$_ = "$no<>$dat<>$in{name}<>$in{email}<>$in{sub}<>$in{comment}<>$in{url}<>$hos<>$pwd<>$tim<>$iine1<>$iine2<>$twitter<>\n"; # $iine1, $iine2, $twitter挿入 2020.11.6
}
push(@data,$_);
}
if (!$flg) {
my $msg = "セッションが不正です
";
$msg .= "以下をクリックして再度投稿し直してください\n";
my $btn .= qq|<input type="button" class="color red button" onclick="window.open('$cf{bbs_cgi}','_self')" value="掲示板に戻る">|;
error($msg,$btn);
}
} ← 1003行目
#-----------------------------------------------------------
#ランダム文字列生成 aska.cgi内にに組み込み
#-----------------------------------------------------------
sub randstr {
my $length = $_[0];
my $p = $_[1]; # $p=0 数字のみ。 $p=1 英数字など。
my @char_tmp=();
if($p == 0){
# 配列にランダム生成する対象の文字列を格納
# (以下は、小文字のa~z、大文字のA~Z、数字の0~9)
#push @char_tmp, ('a'..'z');
#push @char_tmp, ('A'..'Z');
push @char_tmp, (0..9);
#push @char_tmp, ('_', '-', '$');
}
else{
# 配列にランダム生成する対象の文字列を格納
# (以下は、小文字のa~z、大文字のA~Z、数字の0~9)
push @char_tmp, ('a'..'z');
push @char_tmp, ('A'..'Z');
push @char_tmp, (0..9);
#push @char_tmp, ('_', '-', '$');
}
# 指定文字数分、ランダム文字列を生成する
my $rand_str_tmp = '';
my $i;
for ($i=1; $i<=$length; $i++) {
$rand_str_tmp .= $char_tmp[int(rand($#char_tmp+1))];
}
return $rand_str_tmp;
}
#-----------------------------------------------------------
#現在時刻取得 aska.cgi内にに組み込み
#-----------------------------------------------------------
sub get_nowtime(){
#日時の取得
my($sec,$min,$hour,$mday,$mon,$year,$wday) = localtime();
#日時の調整
$mon++;#月数には1を足す。
$year = 1900+$year;#年数には、1900を足す。
$mon = sprintf("%.2d",$mon);#2桁表示に統一する。
#$mday = "9"; #この行はコメント化 2020.11.2
$mday = sprintf("%.2d",$mday);
$hour = sprintf("%.2d",$hour);
$sec = sprintf("%.2d",$sec);
$min = sprintf("%.2d",$min);
#曜日の日本語化
my @week = ('日','月','火','水','木','金','土');
$wday = $week[$wday];
#フォーマット指定 例 2003/03/15(土) 20:12:12
my $t = "$year$mon$mday$hour$min$sec";
return $t;
}
5.1 clickCount-getCount-v2.js
//****************************************************************************************************//
//* いいね!ボタン Ver2PHP起動関数 clickCount-getCount-v2.js (UTF-8) 2918.12.12 *//
//****************************************************************************************************//
//***** カスタマイズ変更項目 **********************
var idStr = 10; //いいね!ボタンid ランダム文字列生成桁数
var getCountUrl = "iine-getCount-v2.php"; //iine-getCount-v2.phpのURL
var voteUrl = "iine-vote-v2.php"; //iine-vote-v2.phpのURL
//*********************************************
// ページ内すべてのDIV要素CLASS=IineVoteを取得する - ページONLOAD時起動される iine-getCount-v2.ph起動関数
$(".IineVote").each(function(i) {
console.log(i + ': ' + $(this).attr("data-id"));
//ランダム文字列生成
ranstr = getRndStr(idStr);
// data属性取得
var id = ""; var lockid = ""; var countpos = ""; var time = ""; var title = ""; var file = "";
if($(this).data('id')){ id = $(this).data('id'); }
if($(this).data('lock')){ lockid = $(this).data('lock'); }
if($(this).data('count')){ countpos = $(this).data('count'); }
if($(this).data('time')){ time = $(this).data('time'); }
if($(this).data('title')){ title = $(this).data('title'); }
if($(this).data('file')){ file = $(this).data('file'); } //テキストファイル、Mysqlデータベース、?
if(file == ""){file = "txt";}
if(id == ""){
id = ranstr;
$(this).data( 'id', ranstr); //親DIV data-id に値設定 $('#fruit').attr('data-number', '02');
}
if(lockid == ""){
lockid = ranstr;
$(this).data( 'lock', ranstr); //親DIV data-id に値設定 $('#fruit').attr('data-number', '02');
}
//alert("data-id");
console.log( id + " = " + $(this).data('id') );
//DIV域生成
var regRight = /right/i;
var regLeft = /left/i;
var regTop = /top/i;
var regBottom = /bottom/i;
if( regLeft.test(countpos) || regTop.test(countpos) ){
// 親divの子要素の先頭にカウント表示用div追加
$('<div id="' + id + '" class="' + countpos + '"></div>').prependTo(this); } //?
if( regRight.test(countpos) || regBottom.test(countpos) ){
// 親divの子要素の最後にカウント表示用div追加
$('<div id="' + id + '" class="' + countpos + '"></div>').appendTo(this); } //?
// img要素をdiv要素で囲む
var target = "#" + id;
$(this).children('img').wrap('<div class="iineimgdiv" title="' + title + '"></div>');
//カウント吹き出しのCLASS名取得 top/right/bottom/left
if (regRight.test(countpos) || regLeft.test(countpos)) {
$(this).children( "div" ).css({ "float": "left" });
$(this).append("<div style='clear: both; display: block;'></div>");
}
var phpurl = getCountUrl;
var obj = $(target).parent("div"); //親DIV
$(obj).css({ "cursor": "pointer" });
$.ajax({
url: phpurl, // ソーシャルボタンカウント取得PHP if (re.test(str))
dataType: "json",
type: "post",
data: { countid: id, filekind: file },
}).done(function(data){
var res = data; console.log(res); //カウンター値
$(target).text(res); //カウンター値表示
}).fail(function(data){
var res = "error";
$(target).text(res);
console.log(data);
});
});
//ランダム文字列生成
function getRndStr(p){
//使用文字の定義
var str = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
//桁数の定義
var len = p;
//ランダムな文字列の生成
var res = "";
for(var i=0;i<len;i++){
res += str.charAt(Math.floor(Math.random() * str.length));
}
return res;
}
// iine-vote-v2.php起動関数 //////////////////////////////////////////////////
$(function(){
$('.IineVote').on('click' , function(){
$this = $(this);
var id = $this.data("id"); //識別用ID(重複NG)
var lockId = id; //2018.11.16 以下5Step 修正・追加 data-lock属性省略対応
if( $this.data("lock") ){
lockId = $this.data("lock"); //排他制御ID
if(lockId == ""){ lockId = id; }
}
//alert(lockId);
var numHtml = "#" + $this.data("id"); //カウント数を表示するHTML
var nowCount = Number($(numHtml).html()); //現在のカウント数
var newCount = nowCount + 1;
var timer = ""; //クッキータイマー 有効期限(投票を制限する秒数) time()+60*60*24*30 はクッキーの有効期限を 30 日後にセット
if( $this.data("time")){
timer = $this.data("time");
}
else{ timer = "null"; } // 省略値 null
var file = ""; //カウンターファイル txt:テキストファイル sql:mysqlデータベースファイル
if ($this.data("file")){ file = $this.data("file") }
else{ file = "txt"; }
var phpurl = voteUrl;
console.log(file);
$.ajax({
type : "POST",
url : phpurl,
data: {
"file_id" : id,
"count" : newCount, "lock_id" : lockId, "cookie_time" : timer, "file_kind" : file
}
}).done(function(data){
//送信先のvote.phpから、Completeが返ってきたらカウント更新
var dataarr = data.split( "," );
if(dataarr[0] == "Complete"){
var newCount = dataarr[1];
$(numHtml).html(newCount);
}else{
alert("連続投稿はできません!・・・時間をおいてやり直してください。");
}
}).fail(function(data) {
alert("エラー!投票数を取得できません。");
});
});
});
5.2 jquery-snsbutton-1.3-aska.js
省略。
6.1 config.php
<?php
// いいね!ボタン 環境設定 config.php 2018.12.12 /////////////////////////////////////////////////////
// 共通関係設定
//投票間隔時間(秒)。この間次の投票が出来ない(いたずら防止)。
$voteTime = 30;
//いいね!ボタンid(DIVタグdata-id要素)の省略時の文字列の生成方法 r:ランダム文字列 t:現在時刻yyyymmddhhmmss+2桁ランダム数字
$iineIDkind = "r";
//いいね!ボタンidのランダム文字列を生成する文字の種類。
$radomString = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
//いいね!ボタンidの桁数。idをランダム文字列を生成するときの桁数。
$iineIDNumber = 12;
//いいね!ボタン設置ページから見たPHPのURL。clickCount-getCount-v2.jsをインクルードしたページから見たURL。
$getCountUrl = "iine-getCount-v2.php"; //iine-getCount-v2.phpのURL
$voteUrl = "iine-vote-v2.php"; //iine-vote-v2.phpのURL
// いいね!投票数カウンターファイルにデータベース MySQLを使用する設定
//MySQLサーバーのホスト名またはIP アドレス。通常、"localhost" を指定します。
$dbHost = 'localhost';
//MySQL サーバーのユーザー名(設定変更必須)
$dbUser = 'urbanqee_iine';
//MySQL サーバーのパスワード(設定変更必須)
$dbPass = 'xxxxxrCI4xVL15aeKaO4tw==';
//MySQL データベース名 (設定変更必須)
$dbName = 'urbanqee_iine';
//いいね!ボタンのデータベーステーブル名
$dbTableName = 'Mypage_iineTBL';
// いいね!投票数カウンターファイルにテキストファイルを使用する設定
//カウンターファイル名の拡張子。ファイル名はボタン設定DIVタグのdata-id属性で指定。
$txFileExt = ".count";
//カウンターファイルのパス(プルパス(絶対パス)を推奨)
$txFilePath = dirname(__FILE__) . "/log/";
//:::::::clickCount-getCount-v2.jsおよび clickCount-getCount.js とAjax通信 ::::::::::::::::::::::::::::::
if (!empty($_REQUEST['p'])) {
echo "$voteTime,$iineIDNumber,$radomString,$getCountUrl,$voteUrl,$iineIDkind";
}
// update: 2018.12.12
?>
6.2 iine-getCount-v2.php
<?php
// いいね!カウント数取得 ページオンロード時起動 ///////////////////
// *メイン *********************************************************
include_once( dirname(__FILE__) . "/config.php" );
if (!empty($_REQUEST['countid'])) {
$id = empty($_REQUEST['countid']) ? "" : $_REQUEST['countid'];
$fl = empty($_REQUEST['filekind']) ? "" : $_REQUEST['filekind'];
if($fl == "txt"){ $res = getVoteCountT($id); }
else{ $res = getVoteCountS($id); }
echo json_encode($res);
} else {
echo json_encode("syntax error");
}
// * テキストファイル処理関数 ******************************************
function getVoteCountT($id){
global $txFilePath, $txFileExt;
//カウント数を書きだしてあるファイル名
//$fileName = "./log/" . $id . ".count";
$fileName = $txFilePath . $id . $txFileExt;
//fopenでファイルを読み込む (読み込みモード)
$fp = @fopen($fileName , "r");
if($fp){
//カウント数書き込み済みのファイルの内容を取得
$vote = fgets($fp , 9182);
}else{
$vote = 0;
}
return $vote;
}
// * MYSQLデータベースファイル処理関数 **********************************
function getVoteCountS($id){
global $dbHost, $dbUser, $dbPass, $dbName;
global $dbTableName;
$dbIdColumn = 'like_id';
$dbCountColumn = 'vote_count';
$dbDateColumn = 'vote_update';
$cryptMethod = "AES-128-CBC"; //暗号化メソッド
$cryptKey = "iine!buttonVer2-MySQL database"; //暗号化キー
$dbPass = openssl_decrypt($dbPass, $cryptMethod, $cryptKey); ////復号化、暗号化パスワードを戻す
// 現在の日付を取得
$timestamp = time() ;
$date = date('Y-m-d H:i:s', $timestamp );
$conn = mysqli_connect($dbHost, $dbUser, $dbPass, $dbName);
if(! $conn ) {
return "E01";
die('Could not connect: ' . mysqli_error());
}
//echo 'Connected successfully*********<br>';
// 読み込み SELECT * FROM テーブル名 WHERE カラム名 = '条件'
$sql = "SELECT * FROM $dbTableName WHERE $dbIdColumn = '$id'";
$result = $conn -> query($sql);
//クエリー失敗
if(!$result) {
return "E02";
//echo $mysqli->error;
//exit();
}
// レコードがあるか否かカラム数で確認
$count = mysqli_num_rows($result);
$cnt=0;
if (!$count) {
$cnt = 0; // 該当idレコードなし 0
}
else { // レコードあり
while($row = $result->fetch_array(MYSQLI_ASSOC)){
//$rows[] = $row;
$cnt = $row[$dbCountColumn] ;
}
}
mysqli_close($conn);
return $cnt;
}
?>
6.3 iine-vote-v2.php
<?php
//mb_internal_encoding("UTF-8");
//vote.phpメイン //////////////////////////////////////
include_once( dirname(__FILE__) . "/config.php" );
////// ajaxデータを受信
$file_id = $_POST["file_id"]; //ファイル名id(テキストファイル)/行id(DBファイル)
$lock_id = $_POST["lock_id"]; //排他制御id(クッキーキーは vote$lock_id)
$timer = $_POST["cookie_time"]; //クッキーの有効時間(秒) 省略値"null
if($timer == "null"){
$timer = $voteTime;
}
//$count = $_POST["count"]; //投票数(未使用)
$fl = $_POST["file_kind"]; //ファイル種別 txt/sql
$ipadd = $_SERVER["REMOTE_ADDR"]; //IPアドレス
$ipadd = str_replace('.', '', $ipadd); //IPアドレス . 削除
$cookieName = $ipadd . $lock_id; //クッキー名:IPアドレス+ロックID
$cookieTime = time() + $timer; //クッキーの有効期限(投票を制限する秒数) time()+60*60*24*30 はクッキーの有効期限を 30 日後にセット
///////クッキーが有効か
if(isset($_COOKIE[$cookieName])){
echo "look"; //クッキー制御により投票不可です。";
}
else{
if($fl == "txt"){
vote_textf(); //カウンター テキストファイル xxxxxx.count(ファイル名 $file_id.count)
}
else{
vote_dbf(); //カウンター mysqlデータべースファイル(行id=$file_id)
}
}
exit();
// 関数 /////////////////////////////////////////
// * テキストファイル処理 *****************************************
function vote_textf(){
global $file_id, $lock_id, $timer, $fl, $cookieName, $cookieTime;
global $txFilePath, $txFileExt; //config.php内変数
//カウント数を書き出すファイル名
$counter_file = $txFilePath . $file_id . $txFileExt;
$counter = "1"; //初期値 文字の"1"
if (file_exists($counter_file)) {
// $counter_file) が存在
$counter_lenght = 8;
$counter = "0";
$fp = fopen($counter_file, 'r+');
if ($fp) {
if (flock($fp, LOCK_EX)) {
$counter = fgets($fp, $counter_lenght);
$counter++; //カウントアップ
rewind($fp);
if (fwrite($fp, $counter) === FALSE) {
echo 'ファイル書き込みに失敗しました';
}
flock ($fp, LOCK_UN);
}
}
fclose ($fp);
setcookie($cookieName , $counter , $cookieTime); //10秒有効のクッキーをセット
echo "Complete,$counter"; // clickCount-getCount.jsには、カウントアップ値を返す(正常)
} else {
// $counter_fileカウントファイルが存在しない
$fp = fopen($counter_file, 'w');
fwrite($fp, $counter);
fclose($fp);
setcookie($cookieName , $counter , $cookieTime); //10秒有効のクッキーをセット
echo "Complete,$counter"; // clickCount-getCount.jsには、初期値1の値を返す(正常)
}
}
// * mysql データベース処理 ************************************************************
function vote_dbf(){
global $file_id, $lock_id, $timer, $fl, $cookieName, $cookieTime;
global $dbHost, $dbUser, $dbPass, $dbName; //config.php内変数
global $dbTableName; //config.php内変数
//カラム名
$dbIdColumn = 'like_id';
$dbCountColumn = 'vote_count';
$dbDateColumn = 'vote_update';
$cryptMethod = "AES-128-CBC"; //暗号化メソッド
$cryptKey = "iine!buttonVer2-MySQL database"; //暗号化キー
$dbPass = openssl_decrypt($dbPass, $cryptMethod, $cryptKey); ////復号化、暗号化パスワードを戻す
// 現在の日付を取得
$timestamp = time() ;
$date = date('Y-m-d H:i:s', $timestamp );
////// mysqlDB操作
$conn = mysqli_connect($dbHost, $dbUser, $dbPass, $dbName);
if(! $conn ) {
die('Could not connect: ' . mysqli_error());
}
//echo 'Connected successfully*********<br>';
//exit();
// 読み込み SELECT * FROM テーブル名 WHERE カラム名 = '条件'
$sql = "SELECT * FROM $dbTableName WHERE $dbIdColumn ='$file_id'";
$result = $conn -> query($sql);
//クエリー失敗
if(!$result) {
//echo "select error!";
echo $mysqli->error;
exit();
}
// 【レコードがあるか確認】
$count = mysqli_num_rows($result);
if (!$count) { // レコードなし INSERT 初期値カウンター値は 0
$sql = "INSERT INTO $dbTableName ( $dbIdColumn, $dbCountColumn, $dbDateColumn )
VALUES ('$file_id', 1, '$date')";
if ($conn->query($sql) === TRUE) {
setcookie($cookieName , 1 , $cookieTime); // 投票間隔クッキーをセット
echo "Complete,1"; // 正常 初期値 "1" を返す New record created successfully
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}
//exit('条件に一致するレコードがありません。');
}
else { // レコードあり UPDATE
//連想配列で取得
while($row = $result->fetch_array(MYSQLI_ASSOC)){
$counter = $row[$dbCountColumn];
}
$upcount = $counter + 1; //カウンター更新
// カウンター更新
$sql = " UPDATE $dbTableName SET $dbCountColumn=$upcount, $dbDateColumn='$date' WHERE $dbIdColumn='$file_id'"; // "で括ること
if (mysqli_query($conn, $sql)) {
setcookie($cookieName , $upcount , $cookieTime); //投票間隔クッキーをセット
echo "Complete,$upcount"; // 正常 カウントアップ値を返す "Record updated successfully";
} else {
echo "Error updating record: " . mysqli_error($conn);
}
}
mysqli_close($conn);
}
?>
<?php include_once( dirname(__FILE__) . "/config.php" ); $dbhost = $dbHost; //ホスト名 $dbuser = $dbUser; //ユーザ名 $dbpass = $dbPass; //パスワード $dbname = $dbName; //データベース名 $dbtable = $dbTableName; //テーブル名 if($_SERVER["REQUEST_METHOD"] == "POST"){ $dbhost = $_POST["db_hostname"]; //ホスト名 $dbuser = $_POST["db_username"]; //ユーザ名 $dbpass = $_POST["db_password"]; //パスワード $dbname = $_POST["db_databasename"]; //データベース名 $dbtable = $_POST["db_tablename"]; //テーブル名 //パスワード暗号化 $str = $dbpass; $cryptMethod = "AES-128-CBC"; //暗号化メソッド $cryptKey = "iine!buttonVer2-MySQL database"; //暗号化キー $dbpassEncrypt = openssl_encrypt($str, $cryptMethod, $cryptKey); //暗号化 $res = tableCreate(); echo "<div style='background:#ffffff'>"; if($res == "OK"){ configUpdate(); echo "※ $dbtable テーブルを作成しました。また、config.phpを更新しました。<br>"; echo "※ 作成テーブルを確認したい場合は、フォーム下のリンクをクリックしてください。"; } else{ echo "<br><font color=red>※</font> データベースエラーのため、テーブル作成を中止しました。"; } echo "<hr></div>"; //$link_url_text = '自由ヶ丘で働くWeb屋のブログのURLはhttp://blog.diginnovation.com/です。'; //echo nl2br(ereg_replace("(http)(://[[:alnum:]\S\$\+\?\.-=_%,:@!#~*/&]+)","<a href=\"\\1\\2\" target=\"_blank\">\\1\\2</a>",$link_url_text)); } ?> <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>MySQLデータベースいいね!ボタン投票数カウントテーブル作成</title> <style> body { max-width: 800px; margin: 0 auto; padding: 0px; font-size: 15px; background: url('http://urbanqee.com/img/BingWallpaper-2017-08-17-2.jpg') repeat center top; } .iineimgdiv{ margin-right:5px; } .right{ font-size:12px; color:gray } </style> <!-- 吹き出しCSS--> <link href="http://urbanqee.com/webutil/sns/js/socialbutton-balloon.css" rel="stylesheet" type="text/css"> <!-- jquery--> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> </head> <body> <DIV style="background:#ffffff;margin-top:0px;padding:5px"> <h3 style="text-align:center"><b>いいね!ボタン投票数カウントテーブル作成</b></h3> <form method="POST" action="<?php print($_SERVER['PHP_SELF']) ?>"> <table> <tr><td>MySQLサーバ情報:</td><td></td></tr> <tr> <td valign=top align=right>・ホスト名 </td> <td><input type="text" name="db_hostname" value="<?php echo $dbhost; ?>">(localhost固定)<br><br></td></tr> <tr> <td valign=top align=right>・ユーザ名(DBユーザ名) </td> <td><input type="text" name="db_username" value="<?php echo $dbuser; ?>">(登録DBユーザー名。DB名に同じ。)<br><br></td></tr> <tr> <td valign=top align=right>・パスワード </td> <td><input type="text" name="db_password" value="<?php echo $dbpass; ?>">(登録パスワード)<br><br></td></tr> <tr> <td valign=top align=right>・データベース名 (DB名)</td> <td><input type="text" name="db_databasename" value="<?php echo $dbname; ?>">(登録DB名。DBユーザ名に同じ。)<br><br></td></tr> <tr><td>作成テーブル情報:</td><td></td></tr> <tr> <td valign=top align=right>・テーブル名 </td> <td><input type="text" name="db_tablename" value="<?php echo $dbtable; ?>">(任意のテーブル名)<br><br></td></tr> <tr><td></td> <td><input type="submit" name="btn1" value="作成する" style="background:blue;color:#ffffff"> </td></tr></table> </form> <hr width=80%> ※ 作成テーブルの確認は、<a href="iine-table-create.php?proc=sel" target="_self">ここ</a>をクリックしてください。 <!-- いいね!ボタン js --> <script type="text/javascript" src="/js/clickCount-getCount-v2.js"></script> <?php // テーブル参照 GET if($_SERVER["REQUEST_METHOD"] == "GET" && $_GET["proc"]){ $cryptMethod = "AES-128-CBC"; //暗号化メソッド $cryptKey = "iine!buttonVer2-MySQL database"; //暗号化キー $dbpassDecrypt = openssl_decrypt($dbpass, $cryptMethod, $cryptKey); ////復号化、暗号化パスワードを戻す tableSelect(); //exit(); } ?> <hr> <table width="100%" border=0> <tr> <td align=center> <img src="http://urbanqee.com/cgi-ssi/counter/wwwcount.cgi?hide+m3ico2_on.gif" border=0 title="urbanqee.com"><br> <small>2018.12</small> <br> </td> </tr> </table> </body> </html> <?php // MySQLテーブル作成 function tableCreate(){ global $dbhost, $dbuser, $dbpass, $dbname, $dbtable; $link = mysqli_init(); if (!$link) { die('mysqli_init failed'); return "NG1"; } $db_link = mysqli_connect( $dbhost, $dbuser, $dbpass, $dbname); if( mysqli_connect_errno($db_link) ) { echo "<div style='background:#ffffff'>"; echo mysqli_connect_errno($db_link) . ' : ' . mysqli_connect_error($db_link); return "NG2"; echo "</div>"; } // テーブルを作成するSQLを作成 id INT(6) UNSIGNED AUTO_INCREMENT PRIMARYKEY, $sql = "CREATE TABLE $dbtable ( like_id VARCHAR(20) NOT NULL, vote_count INT(6) UNSIGNED, vote_update DATETIME ) engine=innodb default charset=utf8"; // SQL実行 mysqli_query( $db_link, $sql); mysqli_close($db_link); return "OK"; } // config.php更新 function configUpdate(){ global $dbhost, $dbuser, $dbpassEncrypt, $dbname, $dbtable; $configfl = "config.php"; $configdata = ""; // 現在の日付を取得 $timestamp = time() ; $date = date('Y-m-d H:i:s', $timestamp ); $handle = @fopen("$configfl", 'r+'); while (($buffer = fgets($handle, 4096)) !== false) { if (preg_match("/dbHost =/", $buffer)) { $configdata .= " \$dbHost = '" . $dbhost . "';" . "\n"; } elseif (preg_match("/dbUser =/", $buffer)) { $configdata .= " \$dbUser = '" . $dbuser . "';" . "\n"; } elseif (preg_match("/dbPass =/", $buffer)) { $configdata .= " \$dbPass = '" . $dbpassEncrypt . "';" . "\n"; } elseif (preg_match("/dbName =/", $buffer)) { $configdata .= " \$dbName = '" . $dbname . "';" . "\n"; } elseif (preg_match("/dbTableName =/", $buffer)) { $configdata .= " \$dbTableName = '" . $dbtable . "';" . "\n"; } elseif (preg_match("/update:/", $buffer)) { $configdata .= "// update: $date". " \n"; } else{ $configdata .= $buffer; } } rewind($handle); fwrite($handle, "$configdata"); //rewind($handle); //echo fread($handle, filesize('init2.php')); fclose($handle); } // テーブル参照 function tableSelect(){ global $dbhost, $dbuser, $dbpassDecrypt, $dbname, $dbtable; //データベース接続 $mysqli = new mysqli($dbhost, $dbuser, $dbpassDecrypt, $dbname); if ($mysqli->connect_error){ echo $mysqli->connect_error; exit(); }else{ $mysqli->set_charset("utf-8"); } $sql = "SELECT * FROM $dbtable"; $result = $mysqli -> query($sql); //クエリー失敗 if(!$result) { echo $mysqli->error; exit(); } //レコード件数 $row_count = $result->num_rows; //連想配列で取得 while($row = $result->fetch_array(MYSQLI_ASSOC)){ $rows[] = $row; } // print_r($rows); //結果セットを解放 $result->free(); // データベース切断 $mysqli->close(); ?> <p> <b>※ 作成したいいね!テーブルはつぎのとおりです。</b> </p> <p style="margin-left:20px"> <?php echo $dbtable; ?> のレコード件数 : <?php echo $row_count; ?> <table bgcolor=brown celpadding=0 cellspacing=0 border=1 style="margin-left:20px"> <tr bgcolor=#dcdcdc><th>like_id</th><th>vote_count</th><th>vote_update</th></tr> <?php foreach($rows as $row){ ?> <tr bgcolor=#ffffff> <td><?php echo $row['like_id']; ?></td> <td align=right><?php echo $row['vote_count']; ?></td> <td><?php echo htmlspecialchars($row['vote_update'],ENT_QUOTES,'UTF-8'); ?></td> </tr> <?php } ?> </table> </p> <hr> </DIV> <?php } ?>
・ソースコード(bbs.html 66行目から)
<div class="art">
[<b>!num!</b>] <strong>!sub!</strong>
<div class="com">!comment!</div>
<div class="ope"><table style="margin-left:100px"><tr><td>
!icon:user.png! <b>!name!</b> !icon:clock.png! !date! !home! </td><td>!iine1!
</td><td>!iine2!</td><td>!twitter!</td><td> | <a href="!bbs_cgi!?res=!num!">返信</a> | <a href="!bbs_cgi!?del=!num!">削除</a> |
</td></tr></table>
</div>
</div>
$tmp =~ s/!iine1!/$iine1/e; #iine button $tmp =~ s/!iine2!/$iine2/e; #iine button $tmp =~ s/!twitter!/$twitter/e; #sns button
<script src="./js/jquery-snsbutton-1.3-aska.js"></script> </head> <body> <script type="text/javascript" src="./js/clickCount-getCount-v2.js"></script> </body>
項目名 | like_id | vote_count | vote_update |
形式 | VARCHAR(20) | INT(6) | DATETIME |
表示例 | 英数字20桁以内(ユニーク値) (例)abcde12345 | 投票カウンター 最大値は65,535 | 投票時刻 (例)2020-11-08 21:32:42E |
サンプルデモを別ページで見る場合はこちら≫。 元の掲示板 Aska BBS - KENT WEBのサンプルページはこちら≫。
1. 準備 | 2. カスタマイズ方法 | 3. ボタン設置サンプルデモ
・いいね!ボタン関連ページ
≫自分のページの「いいね!ボタン」を設置する・・・いいね!ボタン Ver1
≫できる!自分のページの「いいね!ボタン」を設置する MySQL対応新バージョン - いいね!ボタン Ver2
≫ソーシャルボタン設定関数jquery-snsbutton-1.3-aska.jsの使い方
 ソーシャルボタン関連サイト内リンク
最終更新日:2018.12.25 |
メール mailto: | 掲示板 |