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

JavaScript, Unity

Unity-GUI Layout

どうやらUnityのGUIは普通のGUIとGUI Layoutというものがあります．GUI-Skinを適用すると大きさや書体やデザインを自由に変えられます．これ，cssのようなものとおもってください．

それはともかく，GUIです．

var hSliderValue : int = 0;
var akairo : float = 0.0;


function OnGUI () {
hSliderValue = GUI.HorizontalSlider (Rect (25, 25, 100, 30), hSliderValue, 0, 255);
akairo = hSliderValue / 256.0;
// slider value display
GUILayout.BeginArea (Rect (130,20,150,70));
GUILayout.BeginVertical();
GUILayout.Box("R(8bit=0-255): " + Mathf.Round(hSliderValue));
GUILayout.EndVertical();
GUILayout.EndArea();
}

function Update () {
light.color = Color(akairo, 0.0, 0.0);
}

GUILayout.BeginAreaから始まって，GUILayout.EndAreaで終わります．この２つで囲むことが重要です．

JavaScript, Unity

Unity-if文の基本

いや，HTML5と同じですが，，一応，，

var cubecount : int = 0;//Unityの変数宣言，コロンで型を指定しますよ
function Update () {
 if (cubecount < 9) {//もし9未満なら

   print(cubecount);//cubecountを表示せよ
   cubecount = cubecount+ 1;//一個増やす
 }
 else {//そうじゃやないなら
   print("end");//endを表示
 }
 }

 

JavaScript, Unity

Unityークローンする

Unityで対象のオブジェクトを複製するJavaScriptです

//クローンする
var prefab : Transform;
for (var i : int = 0;i < 10; i++) {
Instantiate (prefab, Vector3(i * 1.1, 0, 0), Quaternion.identity);
}
//end clone script
function Update () {
}

Create EmptyしたGame Objectにスクリプトをアサインし，GUIからPrefabを指定してください．

実行すると10個複製します．

clone

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

CSSの例

CSSの例です

今回はクラス名でcssを作成します

文字代入でかなりIDを多用します．このID指定と混乱を避けるためあえてクラスで指定します．

サンプルです．CSSはmycss.cssという名前で，HTMLと同じ階層に保存してください．HTMLの方は好きな名前でかまいません．

@charset "UTF-8";
/*
CSSのコメントの書き方
*/

.cat{/*クラス名の宣言*/
	background: #b3b3b3;/*背景色の設定*/
	border-radius: 10px 10px 10px 10px;/*角を丸める*/
	height: 100px;/*高さは100ピクセル*/
	margin: 40px;/*余白*/
	width: 80%;/*幅はピクセルでも全体に対しての割合でもOK*/
	text-align: center;/*文字の横方向をセンタリング*/
}/*catクラスここまで*/

つづいてHTMLです．

開く際はこのHTMLを開いてください．

<!DOCTYPE html>
<html>
<head>
<link href="mycss.css" rel="stylesheet" type="text/css">
<!-- CSSを読み込む-->

<title>CSSの使い方</title>
<meta charset="UTF-8">
</head>
<body>

<div>ここには表示されない</div>

<div class="cat">ここにはCSSが適用される</div>


</body>
</html>

次のように表示されます．

css

これを応用すると，動くボタンなどが作成できます

CSS デザイン

や

CSS アニメーション

で検索し，使えそうなクラスを探してみましょう．

ちなみにブロック要素とインライン要素で適用できないCSSもありますので注意を．

アニメーションなど一部機能のうちスマートホンでは，-webkit-　を頭につけないと動かないものもあります．

PC版とスマホ版を共用したい場合は，併記しましょう．

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

配列の例５つ

配列の例を５つあげます

<!DOCTYPE html>
<html>
<head>

<title>外部ライブラリの使い方</title>
<meta charset="UTF-8">
</head>
<body>

<div id="hyouji"></div>
<!--idを探させる場合，探す前にそのID付きのタグを書いておくこと（この場合，下のdocumen.getElementの前ってこと）-->


<script type="text/javascript">

var animal = new Array("豊田市","梅坪","上豊田","浄水","三好ヶ丘","米野木","日進","赤池");//変数に配列を入れ込む．この配列を

//----（１）配列の長さを調べる
var kazu = animal.length;
console.log("長さ"+kazu);//webコンソールで確認
//「長さ8」と表示される

//----（２）配列を検索する（浄水駅が何番目か調べる）
var nanban = animal.indexOf("浄水");
console.log("浄水駅は" + nanban);//webコンソールで確認
//「浄水駅は３」と表示される　実際には4番目ですが，順番は0から始まっている３と表示


//---（３）配列の要素を指定（5番目の駅を表示させる）
var banme = animal[4];//0から始まるので5番目は4です
console.log(banme + "駅です");//webコンソールで確認
//「三好ヶ丘駅です」と表示される


//---（４）（３）の応用（変数eki番目の駅を表示する）
var eki = 5;
var banme = animal[eki];//0から始まるので5番目は4です
console.log(eki + "番目の駅は" + banme + "駅です");//webコンソールで確認
//「"5番目の駅は米野木駅です"」と表示される


//--（５）今17分で，次の電車の時間（22分）を検索する
var jikoku = new Array(10,15,22,29);//rinjiって変数に配列を入れ込む
var mytime = 17;//今の時間を仮に17分とする

function myKensaku(nowTime){
for (i = 0; i < jikoku.length; i++) {//jikokuの要素を1つずつ取り出す．最大値はjikokuの長さまで
   if(nowTime < jikoku[i]){//もしmytime(17分）より大きい要素が入ったら
   nextTram = jikoku[i];//nextTramはその要素ね
   return nextTram;//22がnextTramに入って戻る．returnは処理を止める
   }
   }
   }
mynext = myKensaku(mytime);//変数mynextには，myKensakuを実行した戻り値を入れなさい
var nokorijikan = mynext - mytime + "分残り";//残り時間を変数nokorijikanに入れる
document.getElementById("hyouji").innerHTML = nokorijikan;//ID hyoujiのあるタグを探して，umaを代入せよ．
//「5分残り」表示されます
//---ここまで

</script>


</body>
</html>

 

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

外部ライブラリを自作して使う

面倒くさい関数は外部ライブラリ化してシンプルにします．

tora.jsという外部ライブラリ（ファイル名はかならずtora.jsに）

function neko(){
var cat = 300;//変数catに300を入れる
return cat;//変数catを返す（返事するってこと）
}

このライブラリは次のhtmlから呼び出します

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="tora.js"></script>
<!-- ここで外部のJavaScriptライブラリを読み込む-->

<title>外部ライブラリの使い方</title>
<meta charset="UTF-8">
</head>
<body>

<div id="hyouji"></div>
<!--idを探させる場合，探す前にそのID付きのタグを書いておくこと（この場合，下のdocumen.getElementの前ってこと）-->


<script type="text/javascript">
var uma = neko();//JavaScriptライブラリを読み込んでおけば，関数（function neko()）をいきなり呼び出せる．その結果を変数umaに入れる
document.getElementById("hyouji").innerHTML = uma;//ID hyoujiのあるタグを探して，umaを代入せよ．
</script>


</body>
</html>

tora.jsとこのhtmlファイルは同じ階層に置いてください．

tora.jsで変数に入れた300がhtmlから読み込めていますね．

面倒な処理は外部ライブラリ化すると，htmlの記述も減ってすっきりしますよ〜（整理にもなり，バグの場所も分かりやすくなります）

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

バスアプリの処理フロー

バスアプリのワークフローです。
他の時刻表の表示にも応用可能ですよ〜

1)日付けを取得
2)日付けリストに日付けを渡して、運行スケジュールを取得
3)運行スケジュールに時刻を渡して次のバス時刻を取得
4)現在の時刻が終バスを越えていたら、終了表示
5)運行時間中であれば、残時間を計算
6)残時間を表示
7)1秒おきに再計算

日付けは、全て1月1日を起点に何日目がどのダイヤか検索しています。
ダイヤは全てで6種類あります。

ダイヤは午前0時を起点として、何分かで検索しています。
午前8時は480分という具合に。

この数字はエクセルなどで一気に計算できます。これをテキストツールでカンマで区切り、配列として組み込んでいます。

今後のレクチャー予定
1)エクセルで時刻リスト
2)検索置換
3)配列の基本
4)配列の検索
5)cssでレイアウト

など
iPhone でも動作しています。

IMG_6929.PNG

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

バスのWebアプリ

ということで，バスのWEBアプリが一通りできました．

ソースは公開しません〜（関連するテクニックは順次公開）

とりあえず、自力で作ってみてください．

画像は使わずCSSでレイアウトしています

bus

HTML5とjavaScriptで作成していますので，このままスマホアプリも作成できます．（最近のスマホアプリはHTML5で開発できるようになっています）

コピペ5分ほどでAndroidで実行可能に，，，（ビルドにはMonacaを使っています）

もう3分ほどで.apk（Androidのアプリファイル）もビルドできました．

android

この程度であれば，開発コストはHTML5の方が安いかもです．

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

document.getElementByIdでnullのエラー

3日いろいろなサイトをあたってようやく解決．

現象：document.getElementById(“dia”).innerHTML = hoge;

で，JavaScriptの書き方で反映されないときがある．

自分用時刻表アプリを書いています．出発までの残時間はリアルタイムで反映され便利です．問題は，終バスが出た後のに「本日終了〜」みたいな文字を入れたいのですが，それが表示されずエラーが出ます．

出るエラーは

TypeError: document.getElementById(…) is null

で，この意味はどうやら

「おまえ，そんなID無いよボケ！！」

みたい．

でもHTML上にはちゃんと，

<div.time id=”dia”><p>aaa</p></div>

があります．

で，3日間いろいろなサイトを当たりましたが，どうも実行順の問題のようです．

HTML書類は行の上から実行されますが，HTMLの最後に書かれている<DIV>タグを読み込む前にID検索しようとして，無いと言われるみたい．

解決方法は，HTML全部読み込んだ後にID検索すればいいじゃん！ってことなんですが，ここにも罠が．

</script>の直前にgetDocument~が入っているfucnctionのshowTime()を実行させようと，

window.onload=showTime();

と書いてもエラーが．

何でも，この場合は

window.onload=showTime;

と()無しで実行するらしい．

はぁ〜？何でしょこれ？

()をつけると関数を実行，()をつけないと関数を参照という意味らしいですが，，見に行くって，，ねぇ

でもこれでうまく行きそう．

 

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

平日か土日かを判定させる（時刻表用）

バスの時刻を表示させる場合は，今日のダイヤが何かを判定する必要があります．

ダイヤは5種あります

  • Aダイヤ（平日，講義日）
  • Bダイヤ（平日の集中講義や補講日）
  • Cダイヤ（土曜日）
  • 臨時（定期試験，入試，学祭など）
  • 運休日（日曜，祝日，大学の休みの日）

そのプログラムを考え，どのタイミングで判定させると効率が良いか考えてみましょう．例えば先に土日の判定をするとそこで別の処理へ行き，臨時ダイヤの土曜日のif文までたどりつけない可能性があります．

一般の電車の時刻表などは，元旦と祝日が例外日で，後は平日か土日かの処理です．ただし運行会社によっては，土曜と日曜のダイヤが異なることもあるようですので注意してください．

<!DOCTYPE html>
<html>
<head>
<title>Byou</title>
<meta charset="UTF-8">
</head>
<body>
<h1>Byou</h1>


<script type="text/javascript">
setInterval(myYoubi, 100);//myByouってfucitonを100ミリ秒おきに実行してね
var kyouYoubi;
//----曜日だけとるなら100ミリごとにやらなくてもいいですが，，

function myYoubi() {
myDate = new Date();//日付をとってきてmyDateにいれる．このfunctionの外に書くと1回しか日付をとってこないので，秒が更新されない
myYou = myDate.getDay();//myDateの中から曜日だけとりだす.getDay()がその機能．0が日曜，6が土曜日／ちな，日付はgetDate()らしい

//------ifをつかった条件分岐はここから------
if(myYou == 0 && myYou == 6){//もしもmyYouが0（日曜）と等しく，かつ（&&）6（土曜）と等しければ，
document.bgColor = "peru";//背景色を赤にせよ
kyouYoubi = "今日は土日のダイヤです"

//--土日の時の次のバス時間表示プログラムをここに

}
else{//それ以外の時は
document.bgColor = "powderblue";//背景色を白にせよ
kyouYoubi = "今日は平日のダイヤです"

//--平日の時の次のバス時間表示プログラムをここに

}
//----ifはここまで-------

//---ここは文字表示のシステム
document.getElementById("myYou_hyouji").innerHTML = kyouYoubi;//myYou_hyoujiというIDを検索してkyouYoubiを代入しなさい
//-----文字表示ここまで------

}//myByouのfunctionはここまで
</script>

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