初めまして。プログラミング初心者の高校生女子です。実現したい内容はタイトルの通りです。お願いしたいものはサンプルコードです…。
言い訳
安易にサンプルコードを書いて欲しいなどと甘えたことを言って申し訳ありません。現状を説明させてください。
javascriptを使い、「ボタンを押すと画像が"複製"され、時刻と一緒に表示される」という形で、動きだけは辛うじて、それっぽく作れました。しかし、現状のコード(下記)ではサーバー側にデータを保存できないということを知りました。
「リロードすると追加した分が消える」、または、「他の人が追加した分を見られない」、のでは、多くの方にURLを通じてアクセスしていただくサービスとして、意味がなくなってしまいます。
そこで、「サーバー側で「クリックされた数と時刻」の保存をして、リロード等をしても、画像を今までにクリックされた数だけ表示し、またその時刻も表示されるようにしたい」と思ったのですが、諸事情で__(Javascriptすら学習中の身であり、サーバーサイドスクリプトは動作をどうやって試せばいいのかすらわからない状態です。またそのプログラムを文化祭に利用したい兼ね合いで、時間をかけて勉強することが今はできません。加えて、用語がわからないせいなのか、検索して必要な情報を見つけることもうまくできません。)__ 自力でサーバーサイドスクリプトを書くことができません。
こういうわけで、本当に情けないですが、コピーペーストして応用しやすいような、サンプルコードを書いていただけるととてもとても助かります。自力で調べた範囲では、PHPを使うとよいらしいのですが、方法が他にあるのであれば、本当になんでもありがたいです!!よろしくお願いいたします。
ソースコード
(様々なサンプルを参考にしながら、やっとこ完成させたので、拙いものですみません。)
<!DOCTYPE html> <head> <meta charset="utf-8" /> <title>ボタンクリックで画像を複製、その日時も表示</title> </head> <body> <button id="thumbsupper" onclick="duplicate()"> いいねを送る </button> <div id="duplicater"> <img src="いいねの画像.png"> </div> <script> document.getElementById('thumbsupper').onclick = duplicate; var i = 0; var original = document.querySelector('#duplicater img'); function duplicate() { var div = document.createElement("div"); div.textContent = now_date_time(); var clone = original.cloneNode(true); clone.id = "pics" + ++i; original.parentNode.appendChild(clone); original.parentNode.appendChild(div); } function now_date_time(){ var now = new Date(); var year = now.getFullYear(); var month = now.getMonth()+1; var day = now.getDate(); var hour = now.getHours(); var minute = now.getMinutes(); return year+"."+month+"."+day+" "+hour+":"+minute; } </script> </body> </html>
解決方法のぼんやりとした予想
多少は自分なりに調べたものの、こんな曖昧なイメージをもつことしかできませんでした。恥ずかしいですが、私が何をしたいのかという説明の補足~~&私の無知さの指標~~になれば嬉しいです↓
画像の数:ボタンがクリックされた回数を保存→その数だけHTMLにimgタグを書き込む(この時にリロード?)
時刻:ボタンがクリックされた時刻を、区別するために名前を割り振って保存?→それぞれ順番に?、imgタグと同じdivの中に文字列として呼び出す?
お願いしたいもの
「いいね」ボタンを押した数だけ、その日時と????の画像を、最小限のページ遷移/再読み込みで表示できるプログラム。
(連打されること、不特定多数にアクセスされることを想定したものです。)
(可能であればボタンをクリックするたびにリロードすることは避けたいですが、難しければかまいません)
(画像が「複製」されることにこだわりはありません。むしろ「生成」できるのであればそうしたいです。)
知識が非常に薄いため、説明や質問者としての自覚が足りなければ申し訳ありません。ご指摘くださると幸いです。よろしくお願いいたします。
追記
namda様、razuma様、mts10806様、質問の仕方のアドバイスをいただき本当にありがとうございます。
・いいねプログラムが作りたい理由は、文化祭の情報をのせたサイト上で、「いいね」を送って盛り上げよう!という機能を実装したいためです。(数字のカウントだけでなく、画像が増えていくというところが味噌…のつもりです。学生の遊びというか、あほらしい目的ですみません…)
・プログラムという言葉の使い方が間違っているところがあれば、すみません。
・サーバーはxdomainで無料のものを借りることができたので、誰でもアクセスできるようなURLは準備できると思います。
・てっきりPHP以外に方法はないと思い込んでおりました。「javascriptを用いてデータの保存と読み出し」ができるのですね。また、確かに問題点が整理できていませんでした。すみません。すこし書き方を変えさせていただきました。
・コードブロックの使い方について、教えていただきありがとうございます。修正しました。
引き続きたらないところがあれば追記させていただきたいと思います。みなさま本当にありがとうございます。