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

HTML5入門その２ーコンソールの使い方

2014/09/30 admin

この項，実質Javascript入門です

［準備］

プログラムの動きを見るためにコンソールという機能を使用します．この機能はプログラム内の変数や実行した場所がちゃんと実行されているか検知することができます．私はテスター代わりに使用しています．

このテスターになるコマンドは
console.log(hoge);
です．

（余談）ちなみにUnityでは
Debug.Log (hoge);//C#,JSとも

このコンソールをFirefoxでは
ツール＞Web開発＞Webコンソール
で表示できます

［使い方］

実行を検知したいだけであれば，検知したい場所（行）に
console.log(“固有名詞”);
と入力します
その行が実行されれば，コンソールに”固有名詞”と表示されます．

変数たとえばhogeという名前の変数の中身をチェックしたければその検知したい場所（行）に
console.log(hoge);
と入力します
その行が実行されれば，コンソールに変数の中身＝例えば3　とか　4.3　とか false　などと表示されます

（コンソールにtrueと表示された例）

まずは，このテスターを作ってみましょう．

<!DOCTYPE html>
<html>
<head>
<title>コンソールのテスト</title>
<meta charset="UTF-8">
</head>
<body>
<h1>コンソールの表示テスト</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 mycolor = "#ff0000";
context.fillStyle = mycolor;//変数mycolorがここに代入
context.fillRect(100, 100, 20, 20);
console.log(mycolor);
</script>
</body>
</html

解説

（クリックで拡大）

結果はこのように表示されます

１６行目の

console.log(mycolor);

を

console.log("mycolor");

に変更してみましょう．ダブルクォーテーションで囲むだけです．
結果はどうなりましたか？

“　”で囲むと，変数ではなく「固有名詞」となり，それ自信を表示してくれます．

これはバグの取り方にも使われます．（次へ）

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

パスについて

2014/09/30 admin

pathとpassは意味が異なりますので注意を〜

ここではpathについて

/　スラッシュは「フォルダ」（文化によってはディレクトリ）の意味と考えてください

ただの「　/　」はrootと呼び，最上位を意味します．
コンピュータの中身で言えばHDDを開いた最初の場所のこと．
ちなみに「デスクトップ」の階層はかなり下です．地下でいうと3階とか6階とかくらい．

コンピュータでは，フォルダをどんどん開いて中に入ることを「下りる」と表現したりします．
/neko/inu/kaba　はnekoフォルダの中のinuフォルダの中のkabaというファイルかフォルダという意味です

この移動の指定には絶対パスか相対パスを使います．

「ビルの12階」という表現の仕方が絶対パス（絶対番地）
「2階下のフロア」という表現が相対パス（相対番地）

絶対番地の書き方

絶対番地はURLを全て書けばいいわけですから省略します

相対番地の書き方

URLの指定などで今いるフォルダの１つ上のフォルダに行くときは「　../　」と書きます
省略できるのであまり使いませんが現在の位置は「　./　」と書きます

その他

コマンドプロンプトかteratermで表示されるコマンドラインでもこの操作が可能です

pwd ＝　print working directory　現在のフォルダの位置を表示

ls　＝　フォルダ内を全て表示

cd　＝　change directory　フォルダを変更　後に ../　や/inu　などの相対パスか絶対パスを入力

Unity

Unity-ランダムな場所にプレファブ生成

2014/09/30 admin

ワークショップで作ったスクリプトその５

#pragma strict

var ranprefab : Transform;//プレファブの位置
var numberOfObjects = 50;//個数
var rposxMax : int;//xの上限
var rposyMax : int;//xの上限
var rposzMax : int;//zの上限
var rposxMin : int;//xの下限
var rposyMin : int;//yの下限
var rposzMin : int;//zの下限

//numberOfObjectsの個数だけ生成　範囲は上記
for (var i : int = 0;i < numberOfObjects; i++) {
        var pos = Vector3(Random.Range(rposxMin,rposxMax), Random.Range(rposyMin,rposyMax), Random.Range(rposzMin,rposzMax));
        Instantiate(ranprefab, pos, transform.rotation);
}

Unity

Unity-Uniduinoの値を計算

2014/09/29 admin

ワークショップで作ったスクリプトその４くらい


using UnityEngine;
using System.Collections;
using Uniduino; //aruduino tukau nara hitsu you

public class analog_test : MonoBehaviour {// haifun wa tsukae nai no?


	public Arduino arduino;//
	
	public int pin = 0;//?
	public int pinValue;//pin level get
	public int yValue;
	public int zValue;

	public int pinValueX;
	public int pinValueY;
	public int pinValueZ;
	

	public float spinSpeed;//kaiten sokudo
	public GameObject rotBone;//add my bone here

	public double rotZ = 0;

//ここあらネットで拾ったスクリプト組み合わせ大会
	ArrayList pinValueListX = new ArrayList();
	ArrayList pinValueListY = new ArrayList();
	ArrayList pinValueListZ = new ArrayList();
	// smoothing回数 多いほど滑らか
	int SMOOTHING_LENGTH = 20; 
	

	void Start () {//初期化など
		
		arduino = Arduino.global;
		arduino.Log = (s) => Debug.Log("Arduino: " +s);//log dakara huyou?
		arduino.Setup(ConfigurePins); //call ConfigurePins function
		
		//cube = GameObject.Find("Cube");

	}
	
	void ConfigurePins( )
	{
		//arduino.pinMode(pin, PinMode.ANALOG); //
		//arduino.reportAnalog(pin, 1); //pin number 1 is enable(1)
		arduino.pinMode(0, PinMode.ANALOG); 
		arduino.reportAnalog(0, 1);
		arduino.pinMode(1, PinMode.ANALOG); 
		arduino.reportAnalog(1, 1);
		arduino.pinMode(2, PinMode.ANALOG); 
		arduino.reportAnalog(2, 1);
	//	spinSpeed = 0.1;
	}



	
	void Update () {

		//以下も追加

		updatePinValueList (
			arduino.analogRead (0),
			arduino.analogRead (1),
			arduino.analogRead (2)
			);


		pinValueX = getSmoothedValue (pinValueListX);
		pinValueY = getSmoothedValue (pinValueListY);
		pinValueZ = getSmoothedValue (pinValueListZ);
		///追加

		double degX = Mathf.Atan2(pinValueX - 536, pinValueZ - 500) / 3.14159 * 180.0 ;//角度を加速度から
		double degY = Mathf.Atan2(pinValueY - 530, pinValueZ - 500) / 3.14159 * 180.0 ;//climb
		//double degZ = Mathf.Atan2(pinValueZ - 500, pinValueX - 533) / 3.14159 * 180.0 ;//角度を加速度から
		double degZ = Mathf.Atan2(pinValueZ - 500, pinValueY - 530) / 3.14159 * 180.0 ;//角度を加速度から

		if(degX > 1)
		{
			rotZ = rotZ - (degX * 0.01);
		}if(degX < -1){
			rotZ = rotZ - (degX * 0.01);
		};
	}


	void updatePinValueList(int x, int y, int z){
		if (pinValueListX.Count > SMOOTHING_LENGTH) {
			pinValueListX.RemoveAt(0);	
		}
		if (pinValueListY.Count > SMOOTHING_LENGTH) {
			pinValueListY.RemoveAt(0);	
		}
		if (pinValueListZ.Count > SMOOTHING_LENGTH) {
			pinValueListZ.RemoveAt(0);	
		}
		// smoothingしたの値
		pinValueListX.Add (x);
		pinValueListY.Add (y);
		pinValueListZ.Add (z);
	}
	
	int getSmoothedValue(ArrayList list){
		if (list.Count < SMOOTHING_LENGTH) {
			return 0;
		}
		
		int sum = 0;
		for (int i=0; i<list.Count; i++){
			sum += (int)list[i];
		}
		return (int)(sum / SMOOTHING_LENGTH);
	}

}

Unity

Unity-スピード関係のスクリプト

2014/09/29 admin

今回のワークショップで作ったスクリプトその３

#pragma strict
var mySpeed : Vector3;
var maxHeight : int;
var currentHeight : int;

function Start(){
yield WaitForSeconds (5);//いきなりスタートさせると子ども困るので5秒待たせてる．カウントダウンの絵とか入れたかったなぁ
SpeedCheck(true);//SpeedCheckをtrueにすると動きます
}


function Update() {
        currentHeight = transform.position.y;//いまの高さ出します
     if (currentHeight > maxHeight){//maxheightより高ければ
       transform.position.y = maxHeight;//maxheightの高さで固定ね
     }
       transform.Translate(mySpeed);//移動〜
    }
    
function SpeedCheck(sp : boolean){//falseが来たら
   if(sp == false){
   mySpeed = Vector3(0,0,0);//飛行機停止
   GetComponent(myAlt).fallOff();//爆発のスクリプト実行
   yield WaitForSeconds (5);//残念でした画面の前に5秒待ちます
Application.LoadLevel ("bad");//シーンbad読み込み
   }if(sp == true){
      mySpeed = Vector3(2,0,0);//普段は常に2移動
   }
   }

Unity

Unity-墜落時のスクリプト

2014/09/29 admin

今回のワークショップで作ったスクリプトその２

#pragma strict
var explosionPrefab : Transform;//爆発のプレファブをアサイン．アセットストアからもってきたよ
var uniduinoObj : GameObject;//Uniduino関係をオフに．でないと爆発しても地面の中を飛び回るから
var myscript : GameObject;//止めるだかのスクリプトの位置を指示するために作った変数．後で出てくる
var AudioClip02: AudioClip;//音をここにアサイン．．ジェット機の音．Macの作曲用の音源使ったよ
var counterObj : GameObject;//なんだっけ？


function Start () {
audio.loop = true;//音ループ再生
audio.clip = AudioClip02;//音はこれね
audio.volume = 0.5f;//音のボリューム．けっこうひかえめやね．1がMaxかな
audio.Play();//再生しちゃえ
}


function OnCollisionEnter(collision : Collision) {//コリジョンが入ったら

    var contact = collision.contacts[1];
    var rot = Quaternion.FromToRotation(Vector3.up, contact.normal);//墜落地点をゲット
  var pos = contact.point + Vector3(0, 5, 0);//墜落地点じゃ低すぎるんで上に５ったところで爆発
  Instantiate(explosionPrefab, pos, rot);//爆発オブジェクト出します（ところで爆発五郎って知ってる？）
audio.volume = 0.0f;//ジェット音を停止．でないと幽霊飛行機だ！
Destroy (gameObject, 0);//舞台から消す
Destroy (uniduinoObj, 0);//舞台から消す
myscript.SendMessage("SpeedCheck", false);//アサインしたスクリプトのSppedCheckってファンクションのブールをFalseに
counterObj.SetActive(false);//これなんだっけ？

}

Unity

Unity-高度計を表示

2014/09/29 admin

今回のワークショップで作ったスクリプトメモ　その１

#pragma strict
var Alt:int;//staticにしたほうが良いかな？
var customSkin : GUISkin;//スキンの設定なので無くて良い（なんであるの？）
var vSliderValue : float = 0.0;//高度計を画面右隅に
var AudioClip01: AudioClip;//低高度警告音をここにアサイン
var myTexture : Texture2D;//なんだっけ？
var warningGameobject : GameObject;//高さによって警告表示するそのゲームオブジェクトをここでアサイン
var myBool : boolean;//墜落したときのスイッチ用

	
function Start () {
audio.loop = true;//音はループ再生ね
audio.clip = AudioClip01;//音はこれね
audio.volume = 0.0f;//とりあえず音量ゼロね
audio.Play();//ほんで再生しちゃえ！
myBool = true;//墜落スイッチはtrueで
}

function OnGUI(){//高さのスライドバーと高さの数値表示関係
GUI.skin = customSkin;
	GUI.Label(Rect(Screen.width-20, Screen.height-40, 40, 50), "ft");
	GUI.Label(Rect(Screen.width-80, Screen.height-40, 100, 50), vSliderValue.ToString());
	vSliderValue = GUI.VerticalSlider (Rect (Screen.width-60, 20, 100, Screen.height-80), vSliderValue, 6000, 0.0);
//GUI.DrawTexture(Rect(Screen.width/2-256,Screen.height/2-64,512,128), myTexture);

}


function Update () {
Alt=this.transform.position.y;//Y軸の絶対値を入れます

if(myBool==false){//myBoolがfalseなら
fallOff();//fallOffのファンクションをやって
}else{//ちゃうなら
altCheck();//高さチェックね
}

}

function altCheck(){
vSliderValue=Mathf.Round(this.transform.position.y / 0.3048);//Yの高さ（ｍ）をフィートに直します

var posx = transform.position.x;
var posz = transform.position.z;
var height : float = Terrain.activeTerrain.terrainData.GetInterpolatedHeight(posx / Terrain.activeTerrain.terrainData.size.x, posz / Terrain.activeTerrain.terrainData.size.z);//このスクリプトがついているｘ，ｙ座標のterrain＝地形の表面からの高さ＝を計測してheightに入れて

var jimen : float = Alt - height;//現在高度ー地面の高さで実際の地形との高さを出してjimenに入れちゃう

if(jimen < 100){//実際の高さが100以下なら
audio.volume = 0.8f;//警告音のボリュームを上げる（つまり警告音はずっと再生されていた！）
warningGameobject.SetActive(true);//warnignGameobjectにアサインしているゲームオブジェクトを表示させる
}else{
audio.volume = 0.0f;//高度を上げたら
warningGameobject.SetActive(false);//警告を非表示に
}


}

function fallOff(){//墜落時の挙動はここに
myBool = false;//myBookはfalseに
audio.volume = 0.0f;//警告音も消す（死んでるから）
warningGameobject.SetActive(false);//警告表示も消す（死んでるから）
}

Unity, プログラミングお作法

GUIスキンを使用するスクリプト

2014/09/23 admin

GUIスキンを使用するスクリプト
事前にGUISKinを作成しておいてください

#pragma strict
var customSkin : GUISkin;//変数customSkinをGUISkinという型で定義します．スクリプトをゲームオブジェクトにアサインしたあと，画面にskinを入れます

function Start () {
}

function OnGUI(){
GUI.skin = customSkin;//ここで使用するSkinはcustomSkinです
GUI.VerticalSlider (Rect (20, 20, 100, 100), 50, 100, 0);//このスライダがGUISkinで指定した色などに変更されます
}


function Update () {
}

これで動くかな？

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

HTML5入門その1-canvas

2014/09/23 admin

HTML5で実装されているcanvasを実行してみましょう．
以下を別の名前で作成し，保存してください．

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>無題ドキュメント</title>
</head>

<body>

 <canvas id="myCanvas" width="200" height="200"
style="border:1px solid #000000;"><!--キャンバスを設定，名前はmyCanvas　幅200，高さ200，境界線hは１ピクセルの1本線で黒色-->
</canvas>

<script type="text/javascript">
var c = document.getElementById("myCanvas");//入れ物（変数）cはmyCanvasって名前のやつね
var ctx = c.getContext("2d");//変数ctxに入れろ＝＞変数ｃを2次元としてね

//var ctx = myCanvas.getContext("2d");//これもOK
ctx.fillStyle = "#FF0000";//色　HEX値（16進数）で指定
ctx.fillRect(0,0,10,100);//左上0,0の座標から幅10,高さ100に彩色される
line();//lineって指示のセットあるでしょ，あれをこのタイミングでやっちゃって

function line(){//lineって名前の指示の塊をはここからですよ〜
ctx.lineWidth = 5;//ctxってやつに線を用意します幅は5pxで
ctx.strokeStyle = '#00FF00';//ctxってやつに描くときの色は#00ff00ね
ctx.beginPath();//ctxの書き始めるんで一旦リセットね
ctx.moveTo(0, 0);//ctxの０，０に移動して
ctx.lineTo(200, 200);//ctxに線を引きます200，200まで
ctx.closePath();//パスはここまでね
ctx.stroke();//じゃ描いて

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

何かが描画されたかたと思います．

必ず，HTML5でcanvas対応のブラウザを使ってくださいね．

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

HTML復習その２

2014/09/23 admin

タグの影響範囲について考えてみよう

<html>
<head>
<title>泣ける猫写真館</title>
</head>
<body>
泣ける猫は，，，

<br/>
<a href="http://www.yahoo.co.jp/">YahooJapanのサイトへ</a>

</body>
</html>

8行目，9行目を追加し，ブラウザで開いてみましょう。
こんな表示になっているかと。

泣ける猫は，，，

YahooJapanのサイトへ

YahooJapanウェブサイトへのリンクができましたね．

タグの影響範囲について確認するために9行目を以下のように変更してみましょう．

<a href="http://www.yahoo.co.jp/">YahooJapan</a>のサイトへ

↓こうなりましたか？

YahooJapanのサイトへ

リンクする文字列が変わりましたね．
これだけできれば大丈夫！

なんとか研究室

月別アーカイブ: 2014年9月

HTML5入門その２ーコンソールの使い方

［準備］

［使い方］

パスについて

絶対番地の書き方

相対番地の書き方

Unity-ランダムな場所にプレファブ生成

Unity-Uniduinoの値を計算

Unity-スピード関係のスクリプト

Unity-墜落時のスクリプト

Unity-高度計を表示

GUIスキンを使用するスクリプト

HTML5入門その1-canvas

HTML復習その２