「授業用」カテゴリーアーカイブ

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

HTML入門その16-タッチでお絵かき1

スマートホンでタッチした座標を取り出す仕組みを組み込んでみましょう

構文は

canvas.addEventListener(“touchstart”,myTouchStart,false);

です．

このcanvasはすでに

canvas = document.getElementById(“myCanvas”);

で指定していますね．

canvas.addEventListener(“touchstart”,myTouchStart,false);

平たくいうと「反応検出器(EventListner)を追加（add）して，そのうち”touchstart”という反応が出たら」という意味でしょうか．

canvas.addEventListener(“touchstart”,myTouchStart,false);

myTouchStarというfuctionを実行してね．

で最後のfalseはこういうものだと思ってください．どの説明みてもよく分かりません，，，気になる方はキャプチャリングフェーズとか補足フェーズで検索してみてください．

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

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, JavaScript, プログラミングお作法, 未分類

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, JavaScript, プログラミングお作法, 未分類

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行目です．

ここも修正しましょう．

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

HTML5その12-加速度センサでお絵かき

改良版です 改良箇所はハイライト表示しています．

<!DOCTYPE html>
<html>
<head>
<title>DeviceGravity</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 = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

var myX = 0;
var myY = 0;

var grX =0;
var grY =0;
//---スマホのOS取得

var ua = navigator.userAgent;//User Agent（まぁ機種名みたいなの）を取得して変数uaに代入しなさい

//---

//----以下加速度検出用
window.addEventListener("devicemotion", function(evt){//これの反応をみててください，その反応がdevidemotionという種類であればその値をevtに入れなさい
grX = evt.accelerationIncludingGravity.x;  // evtのx軸の傾きを出してgrXに入れなさい
grY = evt.accelerationIncludingGravity.y;  // evtのx軸の傾きを出してgrXに入れなさい
//重力なので出力される値は-9.8~9.8（G)です

//以下iPhoneの時の挙動
if (ua.indexOf("iPad") >= 0 || ua.indexOf("iPhone") >= 0 || ua.indexOf("iPod") >= 0){
myX = myX + grX * 2;//myXの値に傾きを足す
myY = myY + grY * -2;//myYの値に傾きをを足す
}

//以下Androidの時の挙動
if (ua.indexOf("Android") >= 0){
myX = myX + grX * -2;//myXの値に傾きを足す
myY = myY + grY * 2;//myYの値に傾きをを足す
}


});
//---------

function draw() {

//--以下真ん中に表示させる用
if(myX < -130){
myX = -130;
}

if(myX > 130){
myX = 130;
}

if(myY < -130){
myY = -130;
}
if(myY > 130){
myY = 130;
}
//----

//ランダム色で塗るrandom color
context.fillStyle = '#'+ Math.floor(Math.random()*16777215).toString(16);//Math.floorはもらった数で小さい方の整数を出す．10.9なら10　-5.9なら-6. Math.randomは０〜１のランダム値を実数で出す．なのでfloat扱い．それにフルカラーの数1677万をかけて，toString(16)で16進数に変更する．個人的にはRGB別々に色を扱っていないので強引なやり方に見えます

context.beginPath();//線を描き始めます
context.arc((myX + 150),(myY + 150),(Math.random()*30),0,Math.PI*2,false);
//context.arc(myX,myY,(Math.random()*10),0,Math.PI*2,false);//円形はmyX,myYの位置から，1〜0の乱数出して，乱数小さいんで10倍して，ラジアンで0度の位置から始めて，Math.PI*2はラジアンで言うところの１＝すなわち360度で描き終えて，描く方向は反時計回りやで
context.fill();//塗りつぶせ
}
setInterval(draw, 10);//10msec起きに描いてね

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

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>

 

24行目で動作しているデバイスの情報を取得し，35〜44行目でAndoridとiPhone等と別々の挙動をさせています．

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

HTML5入門その11-加速度センサで描く

加速度センサを使って抽象画というかミニマルアートっぽいのを描きます

IMG_6727

<!DOCTYPE html>
<html>
<head>
<title>DeviceGravity</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 = document.getElementById("myCanvas");
var context = canvas.getContext("2d");




//---------以下加速度検出用
window.addEventListener("devicemotion", function(evt){//これの反応をみててください，その反応がdevidemotionという種類であればその値をevtに入れなさい
var grX = evt.accelerationIncludingGravity.x;  // evtのx軸の傾きを出してgrXに入れなさい
var grY = evt.accelerationIncludingGravity.y;  // evtのx軸の傾きを出してgrXに入れなさい
//重力なので出力される値は-9.8~9.8（G)です
var myX = 0;
var myY = 0;

myX = myX + grX;//myXの値に傾きを足す
myY = myY + grY;//myYの値に傾きをを足す(iPhoneならここに-1をかけ算する）
 
});
//---------

function draw() {

if(myX < 0){
myX = 0;
}

if(myX > 320){
myX = 320;
}

if(myY < 0){
myY = 0;
}
if(myY > 320){
myY = 320;
}

//ランダム色で塗るrandom color
context.fillStyle = '#'+ Math.floor(Math.random()*16777215).toString(16);//Math.floorはもらった数で小さい方の整数を出す．10.9なら10　-5.9なら-6. Math.randomは０〜１のランダム値を実数で出す．なのでfloat扱い．それにフルカラーの数1677万をかけて，toString(16)で16進数に変更する．個人的にはRGB別々に色を扱っていないので強引なやり方に見えます

context.beginPath();//線を描き始めます
context.arc(myX,myY,(Math.random()*10),0,Math.PI*2,false);//円形はmyX,myYの位置から，1〜0の乱数出して，乱数小さいんで10倍して，ラジアンで0度の位置から始めて，Math.PI*2はラジアンで言うところの１＝すなわち360度で描き終えて，描く方向は反時計回りやで
context.fill();//塗りつぶせ
}
setInterval(draw, 10);//10msec毎に描いてね

</script>


<div id="screen"></div>
</body>
</html>

2カ所間違えているのでこのままでは動作しません．グローバル変数とローカル変数に気をつけて，どこが間違っているのかよく探してみましょう．

誤りを見つけて修正してみてください．

C#, JavaScript, Unity

Unity-他のスクリプトへメッセージ送信

C#なんてわしゃやらんよ，，けどちびっとかいてみる，，

Unityでの他のオブジェクトへメッセージを送る方法です

SendMessageというものをつかいます．

同じゲームオブジェクト内のスクリプトであれば，こんなことしなくても，関数名だけで動きますよ〜

またこのほかにfindで探させる方法もあります．この場合はタグをつけてあげるのもいいでしょう．また，BroadcastMessageというのもあります．

たぶんその面クリア！なんていうときに，「敵というタグ」のついたオブジェクト全部に一斉に自爆指令を放送してメッセージを送るとかに使うのかな？

本題です．

スクリプトは２つからなります

（１）受信側のスクリプト　test1.cs

16行目にpublicがついています．これが必要なようです．

using UnityEngine;
using System.Collections;

public class test1 : MonoBehaviour {

	// Use this for initialization
	void Start () {

	}

	// Update is called once per frame
	void Update () {

	}

	public void neko(bool mybool){//publicで他からsendできます．メッセージがここで受信します．引数はブーリアンでmyboolに格納します
		Debug.Log(mybool);//myboolに格納されたブーリアンを出力します
	}
}

 （２）送信側のスクリプト  testzero.cs

これを実行すると画面にボタンが表示されます．

using UnityEngine;
using System.Collections;

public class testzero : MonoBehaviour {
	public GameObject player;//playerという名のゲームオブジェクトを指定します
//UnityのGUI側にゲームオブジェクトを選択できるGUIができますので，そこに受信側のスクリプトが含まれているゲームオブジェクトをアサインしてください．例えばCreate EmptyでスクリプトだけあてたゲームオブジェクトでもOKです

	// Use this for initialization
	void Start () {

	}
	void OnGUI() {

		if (GUI.Button(new Rect(10, 70, 50, 30), "Click"))//GUIボタン表示
		player.SendMessage("neko", true);//playerにアサインされたスクリプトのうち neko　というクラスにアクセスし trueを引数で渡します
	}
	// Update is called once per frame
	void Update () {

	}
}

そのボタンをクリックするとコンソールにtrueと表示されます．

これ，Javascriptでは

function neko(mybool:bool){//引数の型の定義は不要だったかな？
//処理
}

 

では動作しません

static function neko(mybool:bool){
//処理
}

とstaticをつけると動きます．

どこかに書いてましたが　static　は「神の領域」らしいです．

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

HTML5入門その10-実機で動作させる（準備）

実機での動作にはWEBサーバが必要です

  1. WEBサーバにプログラムを保存
  2. スマホでそのページへアクセス
  3. 実行結果を見てみる

という流れです。

無料のWEBサーバをうまく探せなかった方は、Wドライブを使ってください。
ただしWドライブは来年度以降なくなる予定です。

いずれにしろ、自分が権利を保持していないコンテンツはアップロードしないようにしましょう．

 

まずはグローバル変数とローカル変数についておさらいしておきましょう

変数の扱いについて

変数には，（例えば）hogeという関数　function hoge(){  ~  }　内でだけ使えるローカル変数と，プログラム内のどこでも使えるグローバル変数があります．

<!DOCTYPE html>
<html>
<head>
<title>Global or Local</title>
<meta charset="UTF-8">
</head>
<body>
<h1>Global or Local</h1>
<script type="text/javascript">
var neko = 10;
function inu(){
var dog = 5;
}
inu();
console.log("neko=" + neko);
console.log("dog=" + dog);
</script>
</body>
</html>

このHTMLを実行し，WEBコンソールを確認してみてください．cosole-global

このように表示され，14，14行目のconsole.logのうち，15行目が実行されていません．

10行目の var neko = 10;のnekoはfunctionの外で宣言されています．ので，プログラム内のどこでも（function の中でも）使用できます．これをグローバル変数と言います．世界用ですね．

しかし12行目のvar dog = 5;　はfunction inuの中で宣言されています．この変数dogはfunction inuの中でしか使えません．これをローカル変数と呼びます．ご近所さん用ですね．

carGlobal

では．14行目，15行目を変更せず，コンソールに両方の変数が表示されるためにはどうしたら良いでしょうか？

解答例（１）

<!DOCTYPE html>
<html>
<head>
<title>Global or Local</title>
<meta charset="UTF-8">
</head>
<body>
<h1>Global or Local</h1>
<script type="text/javascript">
var neko = 10;
var dog = 5;//ここで宣言するとグローバル変数になるのでどこでも使える♪
function inu(){
//var dog = 5;//コメントアウトして無効にしています
}
inu();
console.log("neko=" + neko);
console.log("dog=" + dog);
</script>
</body>
</html>

解答例（２）

<!DOCTYPE html>
<html>
<head>
<title>Global or Local</title>
<meta charset="UTF-8">
</head>
<body>
<h1>Global or Local</h1>
<script type="text/javascript">
var neko = 10;
var dog = 0;//変数 dogをグローバルで宣言
function inu(){
dog = 5;//dogに5を代入
}
inu();//function inu を実行
console.log("neko=" + neko);
console.log("dog=" + dog);
</script>
</body>
</html>