質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.02%

ボタンが押されるとカウントアップするシンプルなHTMLを作りたい

受付中

回答 4

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 788

koikogarey

score -2

やりたいこと

ボタンをクリックして1つずつカウントアップするHTMLをつくりたい

ためしたけどできないこと

自分で実際にソースを書きためしたが、画面がクリアするとゼロになってしまう。
そうではなく、タブレットやブラウザが変わってもひたすらカウントアップする仕組みをつくりたい。
例えば同時にカウントアップした場合など、正確性は問わないのでだいたいカウントアップされればいいです。

やりたいことを1分で示すと

ボタンをクリックすると1ずつカウントアップ
日本でブラウザを閉じて、ひらいたら2からスタートしクリック
アメリカでブラウザひらいたら3からスタート

ボタンがクリックされる度にカウンターがあがるイメージです。
何度もいいますが正確性はあまり問いません。同時にブラウザをひらいちゃった時は無視でも良いです。
それよりも実装の簡易性を優先します。できるだけSQLではなく簡単な仕組みで実装したいです。

ご教示ください。宜しくお願いします。

やったこと・ためしたこと・実際にかいたコード

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="center">
        <p>何回かカウント</p>
        <p>カウント回数: <span id="countsample">0</span></p>
        <div><input type="button" value="カウント" onclick="CountUp();"></div>
    </div>
<script language="javascript" type="text/javascript">
var kaisu = 0;
function CountUp() {
    document.getElementById( "countsample" ).innerHTML = ++kaisu;
}
</script>
</body>
</html>

css

/**/

body {
  background-color: white
}
 img { width: 100%; }

.center {
        margin-top: 0.5em;
        text-align: center;
    }
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • m.ts10806

    2019/06/02 15:55

    タグにあるJavaはどのように関係するのでしょうか。

    キャンセル

  • 退会済みユーザー

    退会済みユーザー

    2019/06/02 20:58

    JavaとJavaScriptは名前は似てますが中身は結構別物ですよ

    キャンセル

  • 退会済みユーザー

    2019/06/12 10:32

    複数のユーザーから「やってほしいことだけを記載した丸投げの質問」という意見がありました
    「質問を編集する」ボタンから編集を行い、調査したこと・試したことを記入していただくと、回答が得られやすくなります。

回答 4

+3

HTMLだけでは作成できないかと思います。
アクセスした際のカウンター数をDBやサーバーに持っておく必要があるのではないでしょうか。
以下サイト様などが参考になるかもしれません。
https://www.web-jozu.com/php/counter_s.html

以下も見てみるといいと思います。
https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1248395782

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/06/03 09:30

    ありがとう

    キャンセル

+2

「タブレットやブラウザが変わっても」という条件なら、なんらかの方法でその「タブレットやブラウザ」の間で情報を引き継ぐ必要があるので、HTMLだけでは無理です。

「なんらかの方法」というのは、通常は「インターネット上でアクセス可能なサーバー(WEB,DBサーバー)を用意する」という意味です。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/06/02 14:30

    webサーバーは用意しました。

    キャンセル

  • 2019/06/02 14:37

    つまりサーバーサイドをどう作ったら良いのかわからない、という意味ですか?
    質問内容からはそのあたりが読み取れませが、「SQLではなく」というのはDBを使わずにサーバー側でデータを保存する方法が知りたいという趣旨ですか?

    キャンセル

  • 2019/06/02 21:45

    サーバー側でデータを保存する方法が知りたいという趣旨ですか?

    そうです。そういうことです。

    キャンセル

+1

そうではなく、タブレットやブラウザが変わってもひたすらカウントアップする仕組みをつくりたい。

この時点で、HTML、JavaScript(クライアントサイド)側だけでは、不可能になります。
また、IndexedDBという、サーバーのデータベースを使わずにブラウザ上でデータベースを扱い、アクセス毎ではクリアさせない方法がありますが、
それも、ブラウザベースなので、ブラウザ、デバイスが変われば、当然値は引き継げません。

できるだけSQLではなく簡単な仕組みで実装したいです。

ここに関して、yoshi0819さんのおっしゃる通り、HTML、javascriptだけではできませんが、
phpや、Perlなど、サーバーサイドを使えば、テキストファイルなどを、カウントアップの度に書き換える、とすれば、デーテベースないし、SQLや、Firbbaseを使わなくても、可能です。

-------- 以下元回答 --------
となると、サーバーのデータベースは使わないで、ということでよろしいですよね?
それであれば、Firebaseを使うという方法があります。
これは、通常のWebサーバーとは違い、クラウド上でサーバーと同様のものを扱うことができるというもので、
サーバーを自身で構築する必要がなく、かなりフロントエンドエンジニア向けのものとなっています。
Firebaseにて、データベースを使い、ユーザーのアクセス、そのユーザーのカウントアップを残しておくという手法だといかがでしょうか。
ただし、SQL覚えて使う以上に難しいんじゃないかな?と個人的にはお見受けします。(というか、使ったことがあるわけではないので、どれだけの難易度かはわからない・・・)

ようは、クライアントサイドだけで、難しいことをせず、質問者さんの意図するようなものを作成することはできない、ということになります。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/06/03 09:30

    firebase......

    キャンセル

  • 2019/06/03 10:15

    閉口なさった通り、firebase、多分、ハードル高いんですよね。
    勝手な印象でなんとも言えませんが。。。
    yoshi0819さんのご回答通り、サーバーのtxtファイルなどの書き込みで実装されるのが一番簡単かと思います。
    だいたいのサーバーサイド(PHP、Perlなど、ようはCGIスクリプト)で行うことができるはずです。

    キャンセル

  • 2019/06/03 10:43

    横から失礼します。以前顧客からの相談でfirebaseを使った簡単なチャットサービスを実装しましたがかなり簡単でした。自分で組み立てるのは多少労力がかかりますが不可能ではありません。
    ぜひお調べください。

    キャンセル

  • 2019/06/03 10:46

    yoshi0819さん>大変にありがとうございます・・・!
    やはり、勝手な印象でモノ言ってはいけませんね・・・。
    私自身、使って体感してみようと思います。
    dfjileさん>どうか、挑戦してみてはいかがでしょうか??

    キャンセル

+1

できるかどうかわからない&セキュリティ上の問題が発生しそうだけどphpファイルとtxtファイルでいけそうな気がするのは私だけでしょうか?
例えばtxtファイルに書き込んだ値をphpで読み込んでそれに1を足した値をtxtに上書きするとか...

追記

PHP使えるならfopenあたり?って思います。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/06/03 09:29

    まさにそれですね。tyt用意してphpでカウントするイメージです。ただカウンターではなくソースのようにボタンクリックでアップですが。正確性はいりません。ファイルオープンなら実装もらくですね。

    キャンセル

  • 2019/06/03 10:25

    dfjileさん>カウントアップの時に、ajaxで、カウントアップ用phpに送信し、ファイルに書き込み、って感じで行けるかと。
    HTML側では、最初、ソースコード上で、PHP出力するか、ajaxで、カウント数取得用のphpからカウント数返してもらい、ってやるといいかなと。(カウントアップとカウント数取得は、一つのPHPファイルで行うほうがいいかも)

    ソースコード付きの回答でお願いするならば、まずはご自分で、調査し、やってみて、わからない部分、うまくいかない部分を、質問本文に記載するのはどうでしょうか?
    今の質問状態で、PHPロジック付きの回答を求めるのは、丸投げと思われてしまうかもしれません・・・。

    キャンセル

  • 2019/06/10 19:20

    あ、それならいけますね。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.02%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる