Tag Archives: Js

(HTML5)ジオロケーションを使ってみる

html5のジオロケーションを使ってみた。

⇒サンプル

日によって位置が変わるが、そこまで遠くない。。。

◇サンプルコード(jsのみ)

  function getGeo(){
    if(navigator.geolocation == null){
      alert("このブラウザは対応していません。");
    } else {
    navigator.geolocation.getCurrentPosition(
      function(position) {
        // 位置情報取得に成功した場合の処理
        var coords = position.coords;
        var obj = document.getElementById("geo");
        obj.innerHTML = "緯度: " + coords.latitude + "<br />経度: " + coords.longitude;
        var latlng = new google.maps.LatLng(coords.latitude, coords.longitude);
        var myOptions = {
          zoom: 14,
          center: latlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        // マップを生成
        var map = new google.maps.Map(document.getElementById("map"), myOptions);
        // 地図にマーカーをつける
        var marker = new google.maps.Marker({
            position: latlng,
            map: map
        });
        infowindow.open(map, marker);
      },
      function(error) {
        // 位置情報取得に失敗した場合の処理
        alert("位置情報の取得に失敗しました。");
      },
    // 以下がオプション
      {
        maximumAge: 60 * 1000,	// 1分以内に取得した位置情報のみ使用する
        timeout: 5000		// 5秒以内に取得できなかったらエラー
      }
    );}
  }

(HTML5)クロスドキュメントメッセージングを使ってみる

クロスドキュメントメッセージングでiframeにメッセージを送信してみる

⇒サンプル
サンプルは同一ドメインだけど、別ドメインでもできた。
クロスドメインにならないのか。
PutするだけだからOKってことですか。

怖いですね、html5。

◇親ページのソース

<body>
<h3>クロスドキュメントメッセージングでiframeへメッセージを送信してみる</h3>
<div>
<input type="text" id="msg" />
<button type="button" value="submit" onclick="send()">送信</button> 
</div>

<br /><br />

<div>
  <iframe id="if" src="./iframe.htm"></iframe>
</div>

<script type="text/javascript">
function send(){
  var iframe = window.frames[0];
  var msg = document.getElementById("msg").value;
  iframe.postMessage(msg, "http://bee-bow-rock.fool.jp//home/samples/html5/iframe.htm")
}
</script>
</body>

◇子ページのソース

<head>
<script type="text/javascript">
    window.addEventListener("message", function(ev) {
        document.body.innerHTML = ev.origin + "からのメッセージを受信しました:<br>「<b>" + ev.data + "</b>」";
    }, false);
</script>
</head>
<body>

<h3>iframeです。</h3>

</body>

(HTML5)Webデータベースを使ってみる

ブラウザにデータベース??って思ったけど、普通にデータベース。

こんなのありですか。

⇒サンプル
※ChromeとSafariでしか動かないっぽいが。

◇html

<body>

<h3>送信したキーワードをWebデータベースへストアします</h3>
<div>
<input type="text" value="" id="keyword" />
<button type="button" value="submit" onclick="sendkeyword()">送信</button> 
</div>

<div>
<button type="button" value="submit" onclick="countKeyword()">現在のキーワード数をカウント</button>
<p id="countKeyword"></p>
</div>
</body>

◇javascript

<script type="text/javascript">
var db;
 try {
    if (window.openDatabase) {
      db = window.openDatabase("testDB", "1.0", "Sample Database", "1048576");
      if (!db) {
        alert("データベースストレージが使えません。");
      }
    } else {
      alert("データベースストレージはサポートされていません。");
    }
  } catch (error) {
    alert(error.message);
  }

  function sendkeyword(){
    var keyword = document.getElementById("keyword").value;
    db.transaction(
      function(tx) {
        tx.executeSql('CREATE TABLE IF NOT EXISTS KeyWordList(id INTEGER PRIMARY KEY, keyword TEXT)');
      }
    );
    db.transaction(
      function(tx) {
        tx.executeSql("INSERT INTO KeyWordList VALUES (NULL, ?)", [keyword]);
      }
    );
    
    document.getElementById("keyword").value = "";
    alert("Insertが完了しました。");
  }

  function countKeyword(){
    db.transaction(
      function(tx) {
        tx.executeSql("SELECT COUNT(*) as cnt FROM KeyWordList",[],
          function(tx, rs) {
              var wordcnt = rs.rows.item(0)['cnt'];
              document.getElementById("countKeyword").innerHTML = "現在のキーワード数は" + wordcnt + 'です。';
          }
        );
      }
    );
  }
</script>

(HTML5)ローカルストレージを使ってみる

HTML5のローカルストレージを使って、訪問回数を表示するサンプル。

⇒サンプル

js部分のみですが。

if(window.localStorage._visit == null) {
  window.localStorage._visit = "1";
} else {
  window.localStorage._visit = Number(window.localStorage._visit) + 1;
}
var count = window.localStorage._visit;
document.body.innerHTML = 'あなたは' + count + '回目の訪問です';