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

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

ただいまの
回答率

90.35%

  • JavaScript

    17461questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • データベース

    734questions

    データベースとは、データの集合体を指します。また、そのデータの集合体の共用を可能にするシステムの意味を含めます

【Javascript】canvas上でクリックされた座標のデータ蓄積保存方法について

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 250

miii

score 3

 前提・実現したいこと

【javascript】で作成しています。
canvas内でクリックされた座標の値を、
メモ帳/Excel等何でもよいのでデータベースとして保存していきたいです。

最終的にはそのデータを引き出して、まとめてcanvas上に表示することです。

 発生している問題・エラーメッセージ

そもそも駆け出し初心者のため他ファイルへのデータ蓄積方法がわかりません。
初歩的な質問でしたらすみません...

 該当のソースコード

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset=Shift_JIS>
    <link rel="stylesheet" href="Sample.css">
    <title>現在地の取得と表示</title>
  <script type="text/javascript">
  <!--
    var i = 0;
    var cnt;
    var isDraw=false;

  function init(){
        /*Canvas描画のテンプレ*/
        var c = document.getElementById("canvas");
           cnt = c.getContext("2d");

      /*タイマーの初期化と設定*/
      window.setInterval("getGeoLocation()",3000);

        /*クリック位置の指定*/
        c.addEventListener("click",draw,false);
  }

  function showMap(position) {
      /*現在地の取得、表示*/
      var coords = position.coords;
      var x=coords.longitude;
      var y=coords.latitude;
          gps.innerHTML= i + " 回目の取得, 経度: " + x + "度, 緯度:"+ y +"度";

            /*現在地情報の座標化*/
            var lx = (x-130.43816002511197)/0.00451095458519*500;
            var ly = (y-33.69516398003343)/0.000959185543116*500;
                coo.innerHTML= i + " 回目の取得, x座標(経): " + lx + ", y座標(緯):"+ ly ;

            /*現在地を描く*/
            cnt.globalCompositeOperation = "source-over";
      cnt.fillStyle = "rgba(242,143,143,.2)";
      cnt.fillRect(0, 0, 0, 0);
      cnt.globalCompositeOperation = "lighter";

            cnt.beginPath();
                    cnt.fillStyle = "rgba(244,117,117,1)";
                    cnt.arc(lx,ly, 3, 0, Math.PI*2.0, true);
                    cnt.closePath();
                    cnt.fill();

  }

    function draw(e){
            /*クリック位置の取得*/
             var tx=e.clientX;
             var ty=e.clientY;

             /*クリック位置を描く*/
             cnt.beginPath();
                     cnt.fillStyle = "rgba(117,190,244,1)";
                     cnt.arc(tx, ty, 3, 0, Math.PI*2.0, true);
                     cnt.closePath();
                     cnt.fill();

    }

  function handleError(error) {
      /*取得失敗のアラートを表示する*/
      alert('位置情報を取得できません。');
  }

  function getGeoLocation(){
      if (navigator.geolocation && typeof navigator.geolocation.getCurrentPosition == 'function') {
          /*位置情報を取得可能な場合*/
                    move.innerHTML="GeoLocation実行中"
              i++;
          navigator.geolocation.getCurrentPosition(showMap,handleError);
      }
      else {
          /*位置情報を取得不可能な場合*/
                    move.innerHTML="GeoLocation実行不可"
          handleError();
      }
  }
  //-->
  </script>
  <style type="text/css">
     canvas { background-color:#FFF; border: 1px solid #999; }
   </style>
</head>

<body onload="init()">
  <canvas id="canvas" width="500" height="500"></canvas>
  <a href="javascript:void(0);" onclick="init();">現在の位置を確認する</a>
  <div id="move">GeoLocation</div>
    <div id="gps">現在位置</div>
    <div id="coo">座標位置</div>
</body>

</html>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 2

+2

蓄積はDB上にして必要に応じてAjaxで取り出して表示とかでしょうか。
サーバーサイドの言語を使いたくないのであればIndexedDBというのもあります。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

checkベストアンサー

+1

これはGoogleMapなんですかね?

ざっと見たところ、ですが、何をやりたいかにもよりますが、今のままではデータを蓄積したとしても、蓄積された座標情報から地図上に再描画することは出来ないように思います。

/*クリック位置の取得*/
var tx=e.clientX;
var ty=e.clientY;


これではCanvas内のX,Y座標と取ることになり、見た目、その位置に点は打てますが、地図をスライドしてもその位置は同時にスライドしない、打った地点をDBから復元出来ない、となりそうです。

GooleMapなどの地図描画であれば、地図上をクリックしたイベントでその経度・緯度が取得出来ますので、そのイベント内で取得した経度緯度をAjaxでサーバに送ってあげ、サーバのMySQL等のDBに蓄積する、となります。その後、必要に応じてAjaxで取り出し、点を再描画、となりますね。すみませんが自力で調べましょう。その上でまた詰まったら投稿して下さい。

なお直接ブラウザからローカルWindowsのメモ帳やExcelに溜めるのは、全く違うテクニックになると思います。基本的に、ブラウザから自分のPCのメモ帳やEXCELには書き出し出来ない、と思っていた方がいいですよ。
(出来なくはないんですが・・)

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

同じタグがついた質問を見る

  • JavaScript

    17461questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • データベース

    734questions

    データベースとは、データの集合体を指します。また、そのデータの集合体の共用を可能にするシステムの意味を含めます