質問編集履歴

7

文字化け部分訂正

2020/11/06 06:25

投稿

Miii
Miii

スコア30

test CHANGED
File without changes
test CHANGED
@@ -142,6 +142,8 @@
142
142
 
143
143
 
144
144
 
145
+
146
+
145
147
  .balloon_top {
146
148
 
147
149
  position: relative;
@@ -156,7 +158,7 @@
156
158
 
157
159
  margin-bottom:5px; padding:3px;
158
160
 
159
- font-family: arial, "�l�r �S�V�b�N",sans-serif;
161
+ font-family: arial, sans-serif;
160
162
 
161
163
  border-radius: 5px; color: #808080;
162
164
 
@@ -226,7 +228,7 @@
226
228
 
227
229
  margin-left:5px; padding:4px; margin-top:30px;
228
230
 
229
- font-family: arial, "�l�r �S�V�b�N",sans-serif;
231
+ font-family: arial,sans-serif;
230
232
 
231
233
  border-radius: 5px; color: #808080;
232
234
 
@@ -292,7 +294,7 @@
292
294
 
293
295
  text-align:center;
294
296
 
295
- font-family: arial, "�l�r �S�V�b�N",sans-serif;
297
+ font-family: arial,sans-serif;
296
298
 
297
299
  margin-bottom:5px; padding:3px;
298
300
 
@@ -362,7 +364,7 @@
362
364
 
363
365
  text-align:center;
364
366
 
365
- font-family: arial, "�l�r �S�V�b�N",sans-serif;
367
+ font-family: arial, sans-serif;
366
368
 
367
369
  margin-bottom:5px; padding:4px;
368
370
 
@@ -418,6 +420,8 @@
418
420
 
419
421
 
420
422
 
423
+
424
+
421
425
  ``` 
422
426
 
423
427
   

6

訂正2

2020/11/06 06:25

投稿

Miii
Miii

スコア30

test CHANGED
File without changes
test CHANGED
@@ -56,13 +56,7 @@
56
56
 
57
57
   
58
58
 
59
- **パスの箇所のみ編集しています。**
59
+  
60
-
61
-
62
-
63
- HTMLはダウンロードファイルに含まれていなかったので、
64
-
65
- 作成しました。
66
60
 
67
61
 
68
62
 

5

内容訂正

2020/11/06 06:23

投稿

Miii
Miii

スコア30

test CHANGED
File without changes
test CHANGED
@@ -40,9 +40,7 @@
40
40
 
41
41
 
42
42
 
43
- サイトのソースコードをここに載せていいのか、
43
+
44
-
45
- 微妙なので、自分が手をくわえたところだけ載せます。
46
44
 
47
45
 
48
46
 

4

コードと環境の追記

2020/11/06 06:22

投稿

Miii
Miii

スコア30

test CHANGED
File without changes
test CHANGED
@@ -1,3 +1,15 @@
1
+ **追記**
2
+
3
+ →コードを追記しました(11/6)
4
+
5
+ →環境:IIS
6
+
7
+  
8
+
9
+  
10
+
11
+
12
+
1
13
  以下のサイトを参考に、いいね!ボタンを作成したいのですが、
2
14
 
3
15
  404エラーが出て、うまくいきません。
@@ -12,7 +24,7 @@
12
24
 
13
25
 
14
26
 
15
-  
27
+
16
28
 
17
29
   
18
30
 
@@ -56,11 +68,25 @@
56
68
 
57
69
 
58
70
 
59
- index.htmlもサイトに書かれているものですが、
71
+ **【index.html】**
60
72
 
61
73
  ```html
62
74
 
63
-
75
+ <!DOCTYPE html>
76
+
77
+ <html lang="ja">
78
+
79
+ <head>
80
+
81
+ <meta charset="UTF-8">
82
+
83
+
84
+
85
+ <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
86
+
87
+
88
+
89
+ <script type="text/javascript" src="clickCount-getCount.js"></script>
64
90
 
65
91
  <!-- 吹き出しCSS(必要時) -->
66
92
 
@@ -78,41 +104,583 @@
78
104
 
79
105
 
80
106
 
81
-
107
+ </head>
108
+
82
-
109
+ <body>
110
+
111
+
112
+
113
+ <p>・例 - カウント件数をボタン画像の右に</p>
114
+
115
+ <DIV style="width:64px" class="letsVote" data-id="ex01-balloon-r" data-lock="likebuttonRight">
116
+
83
- ~~~省略~~~~
117
+ <div>
84
-
85
-
86
-
118
+
87
- <img src="img/hart-likegray.png" width=32> <!-- いいね!ボタンアイコン画像 -->
119
+ <img src="img/hart-likegray.png" width=32>
120
+
121
+ </div>
122
+
123
+ <div id="ex01-balloon-r" class="balloon_right" style="margin-top:6px;margin-left:6px">
124
+
125
+ </div>
126
+
127
+
128
+
129
+ </DIV>
130
+
131
+ <!-- いいね!カウント ページロード時表示 javascript -->
132
+
133
+ <script>getCountSet("ex01-balloon-r");</script>
134
+
135
+
136
+
137
+ </body>
138
+
139
+ </html>
88
140
 
89
141
  ```
90
142
 
91
- の部分と、jqueryのバージョンが古かったので最新に変えてます。
92
-
93
-
94
-
95
-
96
-
97
- 肝心のパス部分とディレクトリ階層も以下に掲載します。
98
-
99
-  
100
-
101
-  
102
-
103
-  
104
-
105
- **【clickCount-getCount.js(15行目と、42行目を編集)】**
143
+
144
+
145
+
146
+
147
+ **【socialbutton-balloon.css】**
148
+
149
+ ```css
150
+
151
+
152
+
153
+ .balloon_top {
154
+
155
+ position: relative;
156
+
157
+ background: #fcfcfc;
158
+
159
+ border: 1px solid gray; /*#242a2e;*/
160
+
161
+ font-size:11px;
162
+
163
+ text-align:center;
164
+
165
+ margin-bottom:5px; padding:3px;
166
+
167
+ font-family: arial, "�l�r �S�V�b�N",sans-serif;
168
+
169
+ border-radius: 5px; color: #808080;
170
+
171
+ }
172
+
173
+ .balloon_top:after, .balloon_top:before {
174
+
175
+ top: 100%;
176
+
177
+ left: 50%;
178
+
179
+ border: solid transparent;
180
+
181
+ content: " ";
182
+
183
+ height: 0;
184
+
185
+ width: 0;
186
+
187
+ position: absolute;
188
+
189
+ pointer-events: none;
190
+
191
+ }
192
+
193
+
194
+
195
+ .balloon_top:after {
196
+
197
+ border-color: rgba(252, 252, 252, 0);
198
+
199
+ border-top-color: #fcfcfc;
200
+
201
+ border-width: 5px;
202
+
203
+ margin-left: -5px;
204
+
205
+ }
206
+
207
+ .balloon_top:before {
208
+
209
+ border-color: rgba(36, 42, 46, 0);
210
+
211
+ border-top-color: gray; /*#242a2e;*/
212
+
213
+ border-width: 6px;
214
+
215
+ margin-left: -6px;
216
+
217
+ }
218
+
219
+
220
+
221
+
222
+
223
+ .balloon_right {
224
+
225
+ position: relative;
226
+
227
+ background: #ffffff;
228
+
229
+ border: 1px solid gray; /*#0a0c0d;*/
230
+
231
+ font-size:11px;
232
+
233
+ text-align:center;
234
+
235
+ margin-left:5px; padding:4px; margin-top:30px;
236
+
237
+ font-family: arial, "�l�r �S�V�b�N",sans-serif;
238
+
239
+ border-radius: 5px; color: #808080;
240
+
241
+ }
242
+
243
+ .balloon_right:after, .balloon_right:before {
244
+
245
+ right: 100%;
246
+
247
+ top: 50%;
248
+
249
+ border: solid transparent;
250
+
251
+ content: " ";
252
+
253
+ height: 0;
254
+
255
+ width: 0;
256
+
257
+ position: absolute;
258
+
259
+ pointer-events: none;
260
+
261
+ }
262
+
263
+
264
+
265
+ .balloon_right:after {
266
+
267
+ border-color: rgba(255, 255, 255, 0);
268
+
269
+ border-right-color: #ffffff;
270
+
271
+ border-width: 3px; /*5px;*/
272
+
273
+ margin-top: -3px; /*5px;*/
274
+
275
+ }
276
+
277
+ .balloon_right:before {
278
+
279
+ border-color: rgba(10, 12, 13, 0);
280
+
281
+ border-right-color: gray; /*#0a0c0d;*/
282
+
283
+ border-width: 4px; /*6px;*/
284
+
285
+ margin-top: -4px; /*6px;*/
286
+
287
+ }
288
+
289
+
290
+
291
+ .balloon_bottom {
292
+
293
+ position: relative;
294
+
295
+ background: #fff;
296
+
297
+ border: 1px solid gray;
298
+
299
+ font-size:11px;
300
+
301
+ text-align:center;
302
+
303
+ font-family: arial, "�l�r �S�V�b�N",sans-serif;
304
+
305
+ margin-bottom:5px; padding:3px;
306
+
307
+ border-radius: 5px; color: #808080;
308
+
309
+ }
310
+
311
+ .balloon_bottom:after, .balloon_bottom:before {
312
+
313
+ bottom: 100%;
314
+
315
+ left: 50%;
316
+
317
+ border: solid transparent;
318
+
319
+ content: " ";
320
+
321
+ height: 0;
322
+
323
+ width: 0;
324
+
325
+ position: absolute;
326
+
327
+ pointer-events: none;
328
+
329
+ }
330
+
331
+
332
+
333
+ .balloon_bottom:after {
334
+
335
+ border-color: rgba(255, 255, 255, 0);
336
+
337
+ border-bottom-color: #fff;
338
+
339
+ border-width: 5px;
340
+
341
+ margin-left: -5px;
342
+
343
+ }
344
+
345
+ .balloon_bottom:before {
346
+
347
+ border-color: rgba(220, 220, 220, 0);
348
+
349
+ border-bottom-color: gray;
350
+
351
+ border-width: 6px;
352
+
353
+ margin-left: -6px;
354
+
355
+ }
356
+
357
+
358
+
359
+
360
+
361
+ .balloon_left {
362
+
363
+ position: relative;
364
+
365
+ background: #fff;
366
+
367
+ border: 1px solid gray;
368
+
369
+ font-size:11px;
370
+
371
+ text-align:center;
372
+
373
+ font-family: arial, "�l�r �S�V�b�N",sans-serif;
374
+
375
+ margin-bottom:5px; padding:4px;
376
+
377
+ border-radius: 5px; color: #808080;
378
+
379
+ }
380
+
381
+ .balloon_left:after, .balloon_left:before {
382
+
383
+ left: 100%;
384
+
385
+ top: 50%;
386
+
387
+ border: solid transparent;
388
+
389
+ content: " ";
390
+
391
+ height: 0;
392
+
393
+ width: 0;
394
+
395
+ position: absolute;
396
+
397
+ pointer-events: none;
398
+
399
+ }
400
+
401
+
402
+
403
+ .balloon_left:after {
404
+
405
+ border-color: rgba(255, 255, 255, 0);
406
+
407
+ border-left-color: #fff;
408
+
409
+ border-width: 5px;
410
+
411
+ margin-top: -5px;
412
+
413
+ }
414
+
415
+ .balloon_left:before {
416
+
417
+ border-color: rgba(220, 220, 220, 0);
418
+
419
+ border-left-color: gray;
420
+
421
+ border-width: 6px;
422
+
423
+ margin-top: -6px;
424
+
425
+ }
426
+
427
+
428
+
429
+ ``` 
430
+
431
+  
432
+
433
+  
434
+
435
+
436
+
437
+ **【getCount.php】**
438
+
439
+ ```php
440
+
441
+ <?php
442
+
443
+ if (!empty($_GET['countid'])) {
444
+
445
+ $id = empty($_GET['countid']) ? "" : $_GET['countid'];
446
+
447
+ $res = getVoteCount($id);
448
+
449
+ echo json_encode($res);
450
+
451
+ } else {
452
+
453
+ echo json_encode("syntax error");
454
+
455
+ }
456
+
457
+
458
+
459
+ function getVoteCount($id){
460
+
461
+ $fileName = "log/" . $id . ".count";
462
+
463
+ $fp = @fopen($fileName , "r");
464
+
465
+
466
+
467
+ if($fp){
468
+
469
+ $vote = fgets($fp , 9182);
470
+
471
+ }else{
472
+
473
+ $vote = 0;
474
+
475
+ }
476
+
477
+ return $vote;
478
+
479
+ }
480
+
481
+ ?>
482
+
483
+ ```
484
+
485
+  
486
+
487
+ **【vote.php】**
488
+
489
+ ```php
490
+
491
+ <?php
492
+
493
+ $file_id = $_POST["file_id"];
494
+
495
+ $lock_id = $_POST["lock_id"];
496
+
497
+ $timer = $_POST["cookie_time"];
498
+
499
+ $count = $_POST["count"];
500
+
501
+ $ipadd = $_SERVER["REMOTE_ADDR"];
502
+
503
+ $ipadd = str_replace('.', '', $ipadd);
504
+
505
+ $cookieName = $ipadd . $lock_id;
506
+
507
+ $cookieTime = time() + $timer;
508
+
509
+
510
+
511
+ if(isset($_COOKIE[$cookieName])){
512
+
513
+ echo "cookie";
514
+
515
+ }else{
516
+
517
+ $count = $_POST["count"];
518
+
519
+ $fileName = "log/" . $file_id . ".count";
520
+
521
+ $fp = @fopen($fileName , "w");
522
+
523
+ flock($fp , LOCK_EX);
524
+
525
+ fputs($fp , $count);
526
+
527
+ flock($fp , LOCK_UN);
528
+
529
+ fclose($fp);
530
+
531
+ setcookie($cookieName , $count , $cookieTime);
532
+
533
+ echo "Complete";
534
+
535
+ }
536
+
537
+ ?>
538
+
539
+ ```
540
+
541
+  
542
+
543
+ **【clickCount-getCount.js】**
106
544
 
107
545
  ```js
108
546
 
547
+ // vote.php起動関数 2018.3.11 - 2018.11.16 //////////////////////////////////////////////////
548
+
549
+ $(function(){
550
+
551
+ $('.letsVote').on('click' , function(){
552
+
553
+ $this = $(this);
554
+
555
+ var id = $this.data("id"); //識別用ID(重複NG)
556
+
557
+ var lockId = id; //2018.11.16 以下5Step 修正・追加 data-lock属性省略対応
558
+
559
+ if( $this.data("lock") ){
560
+
561
+ lockId = $this.data("lock"); //排他制御ID
562
+
563
+ if(lockId == ""){ lockId = id; }
564
+
565
+ }
566
+
567
+ var numHtml = "#" + $this.data("id"); //カウント数を表示するHTML
568
+
569
+ var nowCount = Number($(numHtml).html()); //現在のカウント数
570
+
571
+ var newCount = nowCount + 1;
572
+
573
+ var timer = 20; //クッキーの有効期限(投票を制限する秒数) time()+60*60*24*30 はクッキーの有効期限を 30 日後にセット
574
+
109
- var phpurl = "http://localhost/php-nyumon/count/vote.php"; // 15行目
575
+ var phpurl = "http://localhost/php-nyumon/count/vote.php"; // 要修正 *******
576
+
110
-
577
+ console.log(phpurl);
578
+
579
+ $.ajax({
580
+
581
+ type : "POST",
582
+
583
+ url : phpurl,
584
+
585
+ data: {
586
+
587
+ "file_id" : id,
588
+
589
+ "count" : newCount, "lock_id" : lockId, "cookie_time" : timer
590
+
591
+ }
592
+
593
+ }).done(function(data , datatype){
594
+
595
+ //送信先のvote.phpから、Completeが返ってきたらカウント更新
596
+
597
+ if(data == "Complete"){
598
+
599
+ $(numHtml).html(newCount);
600
+
601
+ }else{
602
+
603
+ alert("連続投稿はできません!・・・時間をおいてやり直してください。");
604
+
605
+ }
606
+
607
+ }).fail(function(XMLHttpRequest, textStatus, errorThrown) {
608
+
609
+ $("#XMLHttpRequest").html("XMLHttpRequest : " + XMLHttpRequest.status);
610
+
611
+ $("#textStatus").html("textStatus : " + textStatus);
612
+
613
+ $("#errorThrown").html("errorThrown : " + errorThrown.message);
614
+
615
+ });
616
+
617
+ });
618
+
619
+ });
620
+
621
+
622
+
623
+ // getCount.php起動関数 2018.3.11 /////////////////////////////////////////////////////
624
+
625
+ function getCountSet(id){
626
+
627
+ var target = "#" + id;
628
+
111
- var phpurl = "http://localhost/php-nyumon/count/getCount.php"; // 42行目
629
+ var phpurl = "http://localhost/php-nyumon/count/getCount.php"; // 要修正 ******
630
+
631
+ var obj = $(target).parent("div");
632
+
633
+ $(obj).css({ "cursor": "pointer" });
634
+
635
+ $.ajax({
636
+
637
+ url: phpurl, // ソーシャルボタンカウント取得PHP if (re.test(str))
638
+
639
+ dataType: "json",
640
+
641
+ data: { countid: id },
642
+
643
+ }).done(function(data){
644
+
645
+ var res = data;
646
+
647
+ $(target).text(res);
648
+
649
+ var classname = $(target).attr("class"); //吹き出しのCLASS名取得 top/right/bottom/left
650
+
651
+ if (/right/.test(classname) || /left/.test(classname)) {
652
+
653
+ var obj = $(target).parent("div"); //親要素OBJ取得、全子要素にFloat属性設定、Float属性解除設定(以下3ステップ)
654
+
655
+ $(obj).children( "div" ).css({ "float": "left" }); //, "margin": "2px" }); //, "display": "inline", "vertical-align": "bottom", "cursor": "pointer"
656
+
657
+ $(obj).append("<div style='clear: both; display: block;'></div>");
658
+
659
+ }
660
+
661
+ }).fail(function(data){
662
+
663
+ var res = "error";
664
+
665
+ $(target).text(res);
666
+
667
+ console.log(data);
668
+
669
+ });
670
+
671
+ }
672
+
673
+
112
674
 
113
675
  ```
114
676
 
115
- の部分のようにパスを変えました。
677
+  
678
+
679
+
680
+
681
+  
682
+
683
+
116
684
 
117
685
  C:からの記述にしてみたり、色々してみたんですが、うまくいきませんでした。
118
686
 

3

追記

2020/11/06 06:22

投稿

Miii
Miii

スコア30

test CHANGED
File without changes
test CHANGED
@@ -102,7 +102,7 @@
102
102
 
103
103
   
104
104
 
105
- **【clickCount-getCount.js(15行目と、42行目)】**
105
+ **【clickCount-getCount.js(15行目と、42行目を編集)】**
106
106
 
107
107
  ```js
108
108
 

2

文章修正

2020/11/05 14:05

投稿

Miii
Miii

スコア30

test CHANGED
File without changes
test CHANGED
@@ -24,7 +24,7 @@
24
24
 
25
25
  サンプルのファイル階層と、指定でもうまくいかなかったので、
26
26
 
27
- パス指定やファイル名などの問題かと思い、同じディレク### ヘディングのテキスリにいれるようにしてみたり色々試しているのですが、カウント表示されません。
27
+ パス指定やファイル名などの問題かと思い、同じディレクトリにいれるようにしてみたり色々試しているのですが、カウント表示されません。
28
28
 
29
29
 
30
30
 

1

リンクづけ

2020/11/05 14:03

投稿

Miii
Miii

スコア30

test CHANGED
File without changes
test CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  404エラーが出て、うまくいきません。
4
4
 
5
- http://urbanqee.com/webutil/sns/mypage-likecount.html
5
+ [http://urbanqee.com/webutil/sns/mypage-likecount.html](http://urbanqee.com/webutil/sns/mypage-likecount.html)
6
6
 
7
7
 
8
8