「HTML5」カテゴリーアーカイブ

HTML5, JavaScript

データ検索２（セレクトを使った例）

プルダウンメニューでエリアのみセレクトします．

<!doctype html>
 <html>
  <head>
   <meta charset="utf-8">
   <title>JSON Test</title>
  </head>
  <body>
  
  
<select name="arae_select" onChange="showtxt(this.value)">
<option value="area0" selected>エリアを選んでください</option>
<option value="area1">エリア１</option>
<option value="area2">エリア２</option>
</select>


<div id="zip_"></div>
  
    <script type="text/javascript">
  
 var txt = 	{ //javascriptの配列をここで作りtxtに入れる
	"area1":{
		"地名1":"470-0000",
		"地名2":"470-0001",
		"地名3":"470-0002"
	},
	"area2":{
		"地名4":"470-0003",
		"地名5":"470-0004",
		"地名6":"470-0005"
	},
 }
 
 function showtxt(myvalue){//onChangeで選ばれた内容をmyvalueで受信する
	 console.log(myvalue);
 var mytxt = "" + txt[myvalue]['地名3'];//txt配列のarea1の中の地名３の中身を取り出し，ダブルクォーテーションをつけて，mytxtに入れる
// console.log(mytxt); //ここはデバッグ用の行
 
 document.getElementById("zip_").innerHTML = mytxt;//このhtml内のzip_　というidのついたタグをさがし，そこにmytxtを流し込む
 } 
  </script>
 </body>
</html>

サンプル−＞http://filmm.info/liub/jsArray2.html

HTML5, JavaScript

自分で持ってるデータを検索する

短いデータなどはHTML内に書いて置いて，検索をさせるようなことができます

まずは基本のスクリプトです．

<!doctype html>
 <html>
  <head>
   <meta charset="utf-8">
   <title>JSON Test</title>
  </head>
  <body>
  
  <div id="zip_"></div>
    <script type="text/javascript">
  
 var txt = 	{ //javascriptの配列をここで作りtxtに入れる
	"area1":{
		"地名1":"470-0000",
		"地名2":"470-0001",
		"地名3":"470-0002"
	},
	"area2":{
		"地名4":"470-0003",
		"地名5":"470-0004",
		"地名6":"470-0005"
	},
 }
 
 var mytxt = "" + txt['area1']['地名3'];//txt配列のarea1の中の地名３の中身を取り出し，ダブルクォーテーションをつけて，mytxtに入れる
// console.log(mytxt); //ここはデバッグ用の行
 
 document.getElementById("zip_").innerHTML = mytxt;//このhtml内のzip_　というidのついたタグをさがし，そこにmytxtを流し込む

  </script>
 </body>
</html>

これは郵便番号表としての使用を想定していますが，時刻表などにも使用できますね．

25行目で配列の中身を呼び出していますが，このサンプルは固定値です．

そこで，これを動的に呼び出す方法を検討しましょう．

 

HTML5, JavaScript

canvasを使ったシンプルな時計

canvasを使ったシンプルな時計の例

時刻に応じて横幅が変わるというだけですが，，

<!DOCTYPE html>
<html>
<head>
<title>Time</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<!-- metaタグで　スマホの挙動を制限している -->
</head>
<body>

<canvas id="myCanvas" width="300" height="300" style="border:1px solid #000000;"></canvas>

<script type="text/javascript">

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

function myTokei(){
context.clearRect(0, 0, canvas.width, canvas.height);
myDate = new Date();
myHours = myDate.getHours();
myMin = myDate.getMinutes();
mySec = myDate.getSeconds();
//console.log(myHours + ":"+ myMin + ":"+ mySec);

context.fillStyle = "#FF0000";//赤
context.fillRect(0, 0, (myHours/23)*300, 99);

context.fillStyle = "#00FF00";//緑
context.fillRect(0, 100, (myMin/59)*300, 100);

context.fillStyle = "#0000FF";//青
context.fillRect(0, 200, (mySec/59)*300, 100);

}

setInterval("myTokei()",1000);

</script>



</body>
</html>

 

HTML5, JavaScript, プログラミングお作法

ネットワークタイムサーバから時刻もってくる

カウントダウンのアプリなのに，デバイス毎に時刻違うってダメじゃん．

ということで，NTP（ネットワークタイムサーバ）から時刻もってくるの．

NTPについては（ここ）みんなのスマホもこれ時間合ってるんだよ。

これ，コンソールに時刻差出します．（多分コンソールで出る数字はミリ秒）

<!DOCTYPE html>
<html>
<head>
<title>Time</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<!-- metaタグで　スマホの挙動を制限している -->
</head>
<body>

<script type="text/javascript">


httpObj = new XMLHttpRequest();
httpObj.open("get", "https://ntp-a1.nict.go.jp/cgi-bin/json", true);
httpObj.onload = function(){

	var myData = JSON.parse(this.responseText);
	//var mySt = myData.st;
	var mySt = (myData.st * 1000) - Date.now();
	//var txt = "";
//	for (var i=0; i<myData.weather.length; i++){
//		txt = txt + myData.weather[i].description + "  " + myData.weather[i].main+"<br>" + "<img src=http://openweathermap.org/img/w/" + myData.weather[i].icon + ".png>";
//	}

	console.log(mySt);

}
httpObj.send(null);


</script>



</body>
</html>

で，現時刻との差分ですが

まず，コードの上の方の初期化あたりに

///ネットワーク時刻取得
var mySt;
httpObj = new XMLHttpRequest();
httpObj.open("get", "https://ntp-a1.nict.go.jp/cgi-bin/json", true);//NTPサーバに行って時間取得
httpObj.onload = function(){

	var myData = JSON.parse(this.responseText);//JSONで内容をmyDataに入れる
	mySt = (myData.st * 1000) - Date.now();//IDがstの数字をひっぱってくる．NTPの戻り値は小数点以下3桁まであるので，1000描けてUNIX時間に変更する．ほんでミリ秒の誤差を出す

}
httpObj.send(null);

いれておいて（２行目のvar myStがグルーバル変数になります）

そのあとの日付ほしいところで

var nowDate = new Date(Date.now() + mySt);//ネットワークタイムを利用して時差を埋める

で，日付入れてます．

カウントダウンなので毎回new Date();していますが，本当はこの時刻を100ミリ毎くらい引いていけばいいのですが，元のプログラムを大幅に変更するのがいやだったので，，

HTML5, JavaScript

UTCからJSTに変換

日付扱っている方，日付オブジェクトの中身を確認してください

下の例だとmyDateをコンソールで表示

時間が9時間前ならutcです．

JSTを使いたい場合，これでうまく行きそうです．

日付をとる場合、午前だと前日が表示される場合があり，その原因はUTCです．

myDate = new Date();
console.log(myDate, "UTC");
myDate.setHours(myDate.getUTCHours() + 9);//時差の9時間を足す．サマータイムはとかの突っ込みはご容赦
Year = myDate.getFullYear();
Month = myDate.getMonth() + 1;
Day = myDate.getDate();
console.log(myDate, "JST");

 

HTML5, JavaScript

警報アプリ

日付指定，UTCとJSTが混在してが面倒な場合，最新20が表示されるURLが

（機種によってはUTCが取得される？）

“http://api.aitc.jp/jmardb/search?areacode=230000&order=new”

これの中身を上から順に検索していけばよい

ただしレスポンス悪いので，ロード中は「取得中」とか表示させればいいのでは？

 

HTML5, JavaScript

警報の判定

最新時刻で警報が出ているかどうかの確認ができる．

これに現時間で判定させる仕組みを入れるとできあがり．

<html>
<head>
<title>警報書き出し</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<!-- metaタグで　スマホの挙動を制限している -->
</head>
<body>
<h2>警報データ検索（ダミーデータ）</h2>
 
<script type="text/javascript">
var hantei = new Array();
var alertURL;
//var hantei;
 
///日付からURL作成
myDate = new Date();
Year = myDate.getFullYear();
Month = myDate.getMonth();
Day = myDate.getDate();
///昨日の日付
yDate = new Date(Year, Month, Day);
yDate.setDate (yDate.getDate() - 1);
YYear = yDate.getFullYear();
YMonth = yDate.getMonth();
YDay = yDate.getDate();
 
var myURL = "http://api.aitc.jp/jmardb/search?areacode=230000&datetime=" + YYear + "-" + YMonth + "-" + YDay +"&datetime="+ Year + "-" + Month + "-" +Day;
console.log(myURL);
 
httpObj = new XMLHttpRequest();//XML読みに行ってね
httpObj.open("get", myURL, true);//発令のダミーデータがここに
httpObj.onload = function(){
var myData = JSON.parse(this.responseText);//読み込んだデータをテキスト化してmyDataに格納
console.log(myData);
var txt = "";//表示用にダブルクォーテーションで文字列化するための準備

for(i=myData.data.length-1; i > -1; i--){//warning[2]はエリア
console.log(myData.data[i].title);
if(myData.data[i].title == "気象特別警報・警報・注意報" || myData.data[i].title == "気象警報・注意報"){
alertURL = myData.data[i].link + ".json";
myAlert();
return;
}
}
}
httpObj.send(null);
 
 
 
 
function myAlert(){
 
httpObj = new XMLHttpRequest();//XML読みに行ってね
//httpObj.open("get", "http://api.aitc.jp/jmardb/reports/84a9b370-b399-35b1-aee5-9dbb8a03597a.json", true);//テスト用のアドレス
httpObj.open("get", alertURL, true);//発令のダミーデータがここに
httpObj.onload = function(){
var myData = JSON.parse(this.responseText);//読み込んだデータをテキスト化してmyDataに格納

var txt = "";//表示用にダブルクォーテーションで文字列化するための準備

for(var i=0; i < 6; i++){//warning[2]はエリア
for(var a=0; a<myData.report.body.warning[2].item[i].kind.length; a++){//itemの長さは実際に55ありiを1つずつ加算しその要素を調べる
if(myData.report.body.warning[2].item[i].kind[a].code == 5 || myData.report.body.warning[2].item[i].kind[a].code == 35 || myData.report.body.warning[2].item[i].kind[a].code == 33){//警報の要素はaを1つずつ加算し中を見る．5が暴風警報，33は大雨特別警報．35が暴風特別警報
txt += myData.report.body.warning[2].item[i].area.name + "で" + myData.report.body.warning[2].item[i].kind[a].name + myData.report.body.warning[2].item[i].kind[a].status + "<br />";
//area.nameは地域名，kind[a].nameは警報の名前　kind[a].statusは発令か継続か（あまりないけど解除とか）

var addTex = "" + myData.report.body.warning[2].item[i].kind[a].status;

hantei.push(addTex);

		}else{
		txt = "警報は出ていません";
		}
	}
	
alertCheck();

}
document.getElementById("result").innerHTML = txt;
}
httpObj.send(null);
}


function alertCheck(){
var neko = 0;
////----検索
for(i=0; i < hantei.length; i++){
if(hantei[i] == "発表"　||hantei[i] == "継続" ){
neko = neko + 1;

}
}
}

</script>
 
<div id="result"></div>

 
</body>
</html>

 

HTML5, JavaScript

ブラウザにGPS座標を記録していく

外部ライブラリneko.jsを使います

var GPS_DATA;

function myGps(pos) {
  var myIdo = pos.coords.latitude;
  var myKeido = pos.coords.longitude;
 
GPS_DATA = [myIdo, myKeido];
dataSave();
//console.log(GPS_DATA);

}

///----ここからデータセーブのライブラリ
var myData = localStorage;//”localstorage”というのは変えてはいけない
function dataSave() {
  var myDate = new Date().toLocaleString();
  //var myPos = GPS_DATA.toString();
  //myData.setItem(myDate, myPos);
  myData.setItem(myDate, JSON.stringify(GPS_DATA));//日付にJSON形式に変換したGPS座標を入力
  //console.log(GPS_DATA);
  showData();
}

function showData(){
var result = "";
 for(var i=0; i <5; i++){//５個表示
var k = myData.key(i);
result += k + "　,　" + JSON.parse(myData.getItem(k)) + "<br />";
}
  //  var k = myData.key(i);

  //上のループで作成されたテキストを表示する
 document.getElementById("myReturn").innerHTML = result;
//console.log(result);
}


function erase() {
  myData.clear();
}
////ここまで

 

これを使うhtmlです

<!DOCTYPE html>
<html>
<head>
<title>nekoライブラリ</title>
<meta charset="UTF-8">
<script src="./neko.js"></script>
</head>
<body>
    <div id="myReturn"></div>
<input type="button" value="この場所を記録する" onclick="gpsget()">
<input type="button" value="これまでの結果５件表示" onclick="showData()">
<input type="button" value="データ消去" onclick="erase()">
<script type="text/javascript">
//---GPSはここから

function gpsget(){
	if(window.confirm('GPSを記録しますか？')){
	if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(myGps);//GPS取得用
	}
}else{
		window.alert('キャンセルされました'); // 警告ダイアログを表示
	}
}

</script>


</body>
</html>