Q&A
その「いいね」プログラムが必要な背景を書いていただければより的確な回答を得られるのではないでしょうか
初めまして。プログラミング初心者の高校生女子です。実現したい内容はタイトルの通りです。お願いしたいものはサンプルコードです…。
言い訳
安易にサンプルコードを書いて欲しいなどと甘えたことを言って申し訳ありません。現状を説明させてください。
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を用いてデータの保存と読み出し」ができるのですね。また、確かに問題点が整理できていませんでした。すみません。すこし書き方を変えさせていただきました。
・コードブロックの使い方について、教えていただきありがとうございます。修正しました。
引き続きたらないところがあれば追記させていただきたいと思います。みなさま本当にありがとうございます。
また、プログラムの初歩的な概念も未熟であるなら学校の情報の先生に聞いた方が良いですよ。
まず、全体の要件がないと回答を得るのが難しいのかな？と思います。「「いいね」ボタンを押した数だけ、その日時と????の画像を、最小限のページ遷移/再読み込みで表示できるプログラム。」だけの説明だと現状のソースで良さそうですが。質問文の中の「リロードすると消える」「他の人が追加した分が見られない」を解決することが今回の回答内容になるかと思います。質問文の中に「サービス」とあるので気になったのですが、例えばこのサイトは特定のパソコンだけではなく、誰のスマホからでも閲覧できるような状態にする必要がありますでしょうか？もし、そうであれば、サーバを用意するところから始まります。そのような必要はなく、特定のそのプログラムがあるパソコンだけで動けば良いのであれば、時刻をテキストファイルに保存しておいて最初に読み込ませるようにすれば、いいねの引継ぎはできるかなと思います。なので、問題点を適切に提示していただくのがまず最初のところかなと思います。（javascriptを用いてデータの保存と読み出しがしたいのか、PHPを導入するべきなのか判断して欲しいのかなど）
コメント追記：素javascriptだとサーバ上のファイル入出力はできないですね、失礼いたしました。
コードブロック内では横スクロールが適用するため一行の文字数が多い文章に適用してしまうと非常に読みづらくなってしまいます。コード、エラーメッセージだけに使うようにしてください
回答3件
0
PHPというのはサーバー側で動くプログラムなので、そういったサーバー環境が必要になります
いまの感じだとそこまで手をかける余裕があるとは思えないので
端的にいえば「PHP導入は無理」というのが回答になります
投稿2018/08/08 05:06
総合スコア114839
0
とりあえず動きとしてはこんな感じですか？
https://www.w3schools.com/code/tryit.asp?filename=FU4A5U1J68W7
html
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta name="viewport" content="width=device-width, initial-scale=1"> 5 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 6 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> 7 </script> 8 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 9 </head> 10 <body> 11 <div class="container"> 12 <h2>いいね増えるイメージ</h2> 13 14 <p id="origin">link: 15 <a href="#"> 16 <span class="glyphicon glyphicon-thumbs-up"></span> 17 </a> 18 </p> 19 </div> 20 <script> 21 $('#origin').on('click', () => { 22 let nowtime = (new Date()).toISOString(); 23 $('#origin').after('<p><span class="glyphicon glyphicon-thumbs-up"></span><span>'+nowtime+'</span></p>'); 24 }); 25 </script> 26 </body> 27</html> 28
投稿2018/08/09 03:19
総合スコア705
0
サーバー自体を用意しなくてはなりません。
無料版とかだったらxamppなどありますから
https://www.apachefriends.org/jp/download.html
こういうのがないとどうにも…
投稿2018/08/08 05:11
総合スコア59
サーバーはxdomainで無料のものを用意したので、作ったページには試験的にURLでアクセスすることもできる段階にあります！説明が足らずすみません…。
URLを貼っていただいたxamppというものについて調べたのですが、これをインストールしないと「PHP環境が整った」とはいえないようですね。インストールしようと思います、ありがとうございます。
xdomainのサイトを見ましたがレンタルサーバとして無料で使えるもので「HTMLサーバー機能」、「PHP・MySQLサーバー機能」、「WordPress機能」などがあると思います。「HTMLサーバー機能」を使っているのであればそもそもPHPの導入はできません（無料機能の制約上）。「PHP・MySQLサーバー機能、WordPress機能」であればPHPが導入済みになります。ただ、後者ですと無料なので広告が付くようですね。XAMPPはあくまでサーバが自由に扱える状態であるときに環境を整えるためのツールです。無料でDB機能が使いたいのであればFirebaseと言うサービスもありますがMySQLなどよりは扱うのが少し難しいかもしれません。機能実現のためのおすすめはPHPが使えるレンタルサーバにするかなと思います。（広告が嫌であれば少しお金がかかっちゃうかも。色々他にもDBを用いてやりたいことがあるならPHPが扱えた方が良いかもしれない。学習できる期間があるのであればFirebaseでも良いかもしれない。）
そうなのですね！！とても丁寧に教えていただき、本当にありがとうございます。xdomainで借りられるサーバーにそういった種類があるのは知っていましたが、何が違うのかよくわかっていませんでした…。時間があまりないので、広告は我慢して、xdomainの「PHP・MySQLサーバー機能」を使いたいと思います！！本当にありがとうございます。
あなたの回答
tips
プレビュー
