「未分類」カテゴリーアーカイブ

警報データ取得ライブラリ化検討中

出来る方はやってみてください.

これで特定日のデータは取れるようになりました.

実行すると警報が出ている地域の一覧が出ます

<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">

 
httpObj = new XMLHttpRequest();//XML読みに行ってね
httpObj.open("get", "http://api.aitc.jp/jmardb/reports/84a9b370-b399-35b1-aee5-9dbb8a03597a.json", true);//テスト用のアドレス
//httpObj.open("get", "http://api.aitc.jp/jmardb/reports/32df3636-4dab-308b-a1ad-62a609b514c7.json", 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は発令か継続か(あまりないけど解除か)
		}
	}
}
document.getElementById("result").innerHTML = txt;
}
httpObj.send(null);
</script>
 
<div id="result"></div>

 
</body>
</html>

 

これがあればスマホアプリが簡単に作れる2014秋

個人的にはプログラミングの要素の無い(アルゴリズムを考えない)作成サイトはダメと言いたいんですが,,,プログラミングはツールの進化でどうにでもなる.ところがアルゴリズムはある程度人間が考えるしかないと考えているからです.

そんなことはともかく,,

(1)HMTL5で作ったのがそのままAndroidアプリやiPhoneアプリになる.

MONACA

https://ja.monaca.io/

これが一番よさげ.作ったWEBアプリがコピペだけで動いたんで,,


(2)AndroidアプリがWEB上で作れてビルドまでできる.

App Inventor2

http://ai2.appinventor.mit.edu

子ども用プログラミング入門ツール「スクラッチ」が使えれば作れると思う.もちろnアルゴリズムは自分で考えよう!


(3)iPhoneアプリがWEB画面だけで作れる

App Builder

http://appbuilder.jp/

実機でビルドできない?(実機に専用エミュレータ入れるっぽい)

データを入力するのが面倒,データ量が多いと難しい.APIで画像を引っ張ってこれないので,写真は自分で撮影しなきゃと,作業が多いので体育会系向きかと.

TinyDBが使えるので入力した値を保存には良いかも.


(4)BRAND

https://thebrand-app.com/

詳細不明


(5)Game Salad(ゲーム作成)

結局ゲームを作るのには絵がかけなきゃいけないのね、、となって尻込みしてしまうサイト

http://japan.gamesalad.com/


(6)Unity(ゲーム作成)

http://unity3d.com/

個人のPCにインストしてね。


(7)UnrealEngine(ゲーム作成)

https://www.unrealengine.com/ja/

これも強力ツール


英語サイトでもがっかりしないで.そういうサイトは画像がしっかりしてて,英語読めなくてもある程度分かるようになっているから〜!!

 

HTML5入門その15-お絵かきツール3

PC版での入力はマウスを使いました.

このマウス入力は

canvas.addEventListener("mousemove", draw, true);//マウスが動いたとき波drawをやりな
canvas.addEventListener("mousedown", myMove, false);//マウスが押された時はmyMoveをやりな
canvas.addEventListener("mouseup", myMouseUp, false);//マウスが上がったときはmtMouseUpをやっとかめ

で取得しました.

スマートホンでマウスは使えませんから,タッチイベントというものを使います.

canvas.addEventListener("touchmove",myTouchDraw,true);
canvas.addEventListener("touchstart",myTouchStart,false);
canvas.addEventListener("touchend",myTouchEnd,false);

では,スマートホン用に改造してみましょう〜

HTML5入門その14-お絵かきツール2

お絵かきツール(PC版)です

<!DOCTYPE html>
<html>
<head>
<title>touch paint</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>
<h1>Key2</h1>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid #000000;"></canvas>

<script type="text/javascript">
var canvas;
var paintSwitch = false;//pantSwitchというスイッチを作ってとりあえず最初はオフね
var oldX = 0;//クリック始めた位置のX座標を入れる
var oldY = 0;//クリック始めた位置のY座標を入れる

//---スマホのOS取得(PC用では使わない)
var ua = navigator.userAgent;//User Agent(まぁ機種名みたいなの)を取得して変数uaに代入しなさい
//---


//以下iPhoneの時の挙動(PC用では使わない)
if (ua.indexOf("iPad") >= 0 || ua.indexOf("iPhone") >= 0 || ua.indexOf("iPod") >= 0){
//特に挙動はまだ決めていない
}

//以下Androidの時の挙動(PC用では使わない)
if (ua.indexOf("Android") >= 0){
//特に挙動はまだ決めていない
}


//---------
window.onload = function() {//これを読み込んだら
 syokika();//初期化というfunctionを実行してね
};

function syokika(){//で,これが初期化のfunction
canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
canvas.addEventListener("mousemove", draw, true);//マウスが動いたとき波drawをやりな
canvas.addEventListener("mousedown", myMove, false);//マウスが押された時はmyMoveをやりな
canvas.addEventListener("mouseup", myMouseUp, false);//マウスが上がったときはmtMouseUpをやっとかめ


}

function myMove(atai){//クリック開始時に実行させて線の描き始めの場所をoldX,oldYに入れちゃうよfunction
        paintSwitch = true;
        oldX = atai.clientX - canvas.offsetLeft;//オフセット(ずれ)の修正=よこ clientXの代わりにpageXを使うときもあるらしい
        oldY = atai.clientY - canvas.offsetTop;//オフセット(ずれ)の修正=たて clientYの代わりにpageYを使うときもあるらしい
}

function myMouseUp(){
		paintSwitch = false;//pantSwitchはオフね
}

//setInterval(draw, 10);//10msec起きに描いてね 今回は使いません

function draw(atai) {
if (!paintSwitch) return;
	var x = atai.clientX - canvas.offsetLeft;
    var y = atai.clientY - canvas.offsetTop;
    //var can = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    context.strokeStyle = "rgba(255,0,0,1)";
    context.lineWidth = 1;
    context.beginPath();
    context.moveTo(oldX, oldY);
    context.lineTo(x, y);
    context.stroke();
    context.closePath();
    oldX = x;
    oldY = y;
}



//---ファイルに書き出すよう

function screenshot(){
  var png = canvas.toDataURL();
  document.getElementById("newImg").src = png;
}
//---

</script>

<form>
<input type="button" value="画像に変換" onclick="screenshot()">
</form>
<div><img id="newImg"></div>
<!-- このDIVのIDを探してここに画像を入れる -->
</body>
</html>

次に,これをスマートホン版で作ってみます

HTML5入門その13-お絵かきツール1

マウス入力を利用してお絵かきツールを作りましょう(これはPC用)

以下をコピペしてPCで実行してみましょう

<!DOCTYPE html>
<html>
<head>
<title>Mouse Paint</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>
<h1>Mouse paint</h1>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid #000000;"></canvas>

<script type="text/javascript">
var canvas;
var paintSwitch = false;//pantSwitchというスイッチを作ってとりあえず最初はオフね
var oldX = 0;//クリック始めた位置のX座標を入れる
var oldY = 0;//クリック始めた位置のY座標を入れる

//---スマホのOS取得(PC用では使わない)
var ua = navigator.userAgent;//User Agent(まぁ機種名みたいなの)を取得して変数uaに代入しなさい
//---


//以下iPhoneの時の挙動(PC用では使わない)
if (ua.indexOf("iPad") >= 0 || ua.indexOf("iPhone") >= 0 || ua.indexOf("iPod") >= 0){
//特に挙動はまだ決めていない
}

//以下Androidの時の挙動(PC用では使わない)
if (ua.indexOf("Android") >= 0){
//特に挙動はまだ決めていない
}


//---------
window.onload = function() {//これを読み込んだら
 syokika();//初期化というfunctionを実行してね
};

function syokika(){//で,これが初期化のfunction
canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
canvas.addEventListener("mousemove", draw, true);//マウスが動いたとき波drawをやりな
canvas.addEventListener("mousedown", myMove, false);//マウスが押された時はmyMoveをやりな
canvas.addEventListener("mouseup", myMouseUp, false);//マウスが上がったときはmtMouseUpをやっとかめ


}

function myMove(atai){//クリック開始時に実行させて線の描き始めの場所をoldX,oldYに入れちゃうよfunction
        paintSwitch = true;
        oldX = atai.clientX;//clientXの代わりにpageXを使うときもあるらしい
        oldY = atai.clientY;//clientYの代わりにpageYを使うときもあるらしい
}

function myMouseUp(){
		paintSwitch = false;//pantSwitchはオフね
}

//setInterval(draw, 10);//10msec起きに描いてね 今回は使いません

function draw(atai) {
if (!paintSwitch) return;
	var x = atai.clientX;
    var y = atai.clientY;
    //var can = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    context.strokeStyle = "rgba(255,0,0,1)";
    context.lineWidth = 1;
    context.beginPath();
    context.moveTo(oldX, oldY);
    context.lineTo(x, y);
    context.stroke();
    context.closePath();
    oldX = x;
    oldY = y;
}



//---ファイルに書き出すよう

function screenshot(){
  var png = canvas.toDataURL();
  document.getElementById("newImg").src = png;
}
//---

</script>

<form>
<input type="button" value="画像に変換" onclick="screenshot()">
</form>
<div><img id="newImg"></div>
<!-- このDIVのIDを探してここに画像を入れる -->
</body>
</html>

うまく動きませんね.

原因は何でしょうか?


 

オフセットをとるコマンドがあります.まずこれを入れてみましょう.

どこに?

	var x = atai.clientX - canvas.offsetLeft;

64行目です.

うまく行くなら65行目も改変してみましょう.


 

開始点がおかしくなりますね.

開始点はoldX,oldYですがこれを代入しているfunctionは50〜54行目です.

ここも修正しましょう.

おそれおおくも人間機械論

狭い範囲でメモ

プログラミングなんて怖くないよ〜

言葉を並べる「分け入つても分け入つても青い山」(種田山頭火)

脳にインプットする

その情景が脳内に描かれる

ーーーーーーーーーーーーーーープログラム言語で書く

コンピュータで実行させる(コンパイルとか細かいことは抜き)

画面に結果が表示される

 

ーーーー

ね?簡単でしょう?