HTML5, JavaScript

占いのようなスクリプト2

ちょっと加工して，CSSをつけるとこうなります．

<!doctype html>
 <html>
  <head>
   <meta charset="utf-8">
   <title>uranai2</title>
      <link rel="stylesheet" type="text/css" href="uranai.css" />
  </head>
  <body>
  
 利き腕動物占い
 <div class="myselect">
<select name="hand_select" onChange="result(this.value)">
<option value="none" selected>利き腕を選んで</option>
<option value="right">右きき</option>
<option value="left">左きき</option>
</select>
</div>

<div class="spacer"><!—-></div>

<div id="type_" class="block"></div>
  
    <script type="text/javascript">
  
 var txt = 	{ //javascriptの配列を作りtxtに入れる
 	"none":{
		0:"利き腕を選んで",
		1:"利き腕を選んで",
		2:"利き腕を選んで"
	},
	"right":{
		0:"あなたは犬タイプです",
		1:"あなたは猫タイプです",
		2:"あなたは牛タイプです"
	},
	"left":{
		0:"あなたはタヌキタイプです",
		1:"あなたはキジタイプです",
		2:"あなたはキリンタイプです"
	},
 }
 
 
 function result(myvalue){//上のselectでonChangeで関数を呼びthis.valueに入ったvalue値がmyvalueに入る

	 var randnum = Math.floor( Math.random() * 3); //０〜２の乱数を発生させよ
 var mytxt = "" + txt[myvalue][randnum];//txt配列のmyvalueの乱数値randomで配列の中身を取り出し，ダブルクォーテーションをつけて，mytxtに入れる
document.getElementById("type_").innerHTML = mytxt;
	//html内のtype_というIDのついたタグを探し，mytxtの中身を入れなさい
}
 
 
  </script>
 </body>
</html>

CSSはこちら

@charset "UTF-8";

body    {  
    background-color: #f0f8ff;  
} 



.myselect select {
	position: relative;
	width: 90%;
	padding: 10px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: 1px solid #999;
	background: #eee;
	background: -webkit-linear-gradient(top, #fff 0%,#efebe1 100%);
	background: linear-gradient(to bottom, #fff 0%,#efebe1 100%);
	    font-size: 1.4em;

    /* 文字の太さをboldに指定 */
    font-weight: bold;
}

.block {
	    font-size: 1.0em;
    color: #fff;
    background: #3cb371;
	width: 90%;
    padding: 10px;
    border: 2px dashed rgba(255,255,255,0.5);
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    box-shadow: 0 0 0 5px #3cb371, 0 2px 3px 5px rgba(0,0,0,0.5);
    -moz-box-shadow: 0 0 0 5px #3cb371, 0 2px 3px 5px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 0 0 5px #3cb371, 0 2px 3px 5px rgba(0,0,0,0.5);
}
.spacer {
    clear: both;
    width: auto;
    height: 10px;
    }

/* CSS Document */

実際の動作はこちら

http://filmm.info/liub/uranai2.html

HTML5, JavaScript

占いのようなスクリプト

利き腕を選ぶと，占いの結果が表示されるものです．

<!doctype html>
 <html>
  <head>
   <meta charset="utf-8">
   <title>array test3</title>
  </head>
  <body>
  
 利き腕動物占い
<select name="hand_select" onChange="result(this.value)">
<option value="area0" selected>利き腕を選んで</option>
<option value="right">右きき</option>
<option value="left">左きき</option>
</select>


<div id="type_"></div>
  
    <script type="text/javascript">
  
 var txt = 	{ //javascriptの配列を作りtxtに入れる
	"right":{
		0:"犬",
		1:"猫",
		2:"牛"
	},
	"left":{
		0:"タヌキ",
		1:"キジ",
		2:"キリン"
	},
 }
 
 
 function result(myvalue){//上のselectでonChangeで関数を呼びthis.valueに入ったvalue値がmyvalueに入る

	 var randnum = Math.floor( Math.random() * 3); //０〜２の乱数を発生させよ
 var mytxt = "" + txt[myvalue][randnum];//txt配列のmyvalueの乱数値randomで配列の中身を取り出し，ダブルクォーテーションをつけて，mytxtに入れる
document.getElementById("type_").innerHTML = mytxt;
	//html内のtype_というIDのついたタグを探し，mytxtの中身を入れなさい
}
 
 
  </script>
 </body>
</html>

実働例はこれです

http://filmm.info/liub/uranai.html

HTML5, JavaScript

ボタンを押すとJavascriptを実行してHTMLを入れる

ボタンをクリックすると，jsを実行して，htmlに文字を入れるサンプルです

<!doctype html>
 <html>
  <head>
   <meta charset="utf-8">
   <title>test4</title>
   <link rel="stylesheet" type="text/css" href="test4.css" />
  </head>
  <body>
  
<button type=button onclick="showtest1()">
１つめのボタン
</button> 

<div id="1st"></div>


<button type=button onclick="showtest2()">
２つめのボタン
</button> 
<div id="2nd"></div>
  
<script type="text/javascript">
 
 
 function showtest1(){
	var mytxt = "test1";
	document.getElementById("1st").innerHTML = mytxt;
	 
 }


function showtest2(){
	var mytxt2 = '<a href="http://nantoka.filmm.info/blog/">ひみつのページへ</a>';
	document.getElementById("2nd").innerHTML = mytxt2;
	
}
 
 
  </script>
 </body>
</html>

このボタンはcssでデザインしています

@charset "UTF-8";

body    {  
    background-color: #fff799;  
} 


button{
    /* 文字サイズを1.4emに指定 */
    font-size: 1.4em;

    /* 文字の太さをboldに指定 */
    font-weight: bold;

    /* 縦方向に10px、
     * 横方向に30pxの余白を指定 */
    padding: 10px 30px;

    /* 文字色を白色に指定 */
    color: #fff;

    /* ボーダーをなくす */
    border-style: none;

    /* ボタンの影の指定
     * 影の横幅を2px
     * 縦長を2px
     * ぼかしを3px
     * 広がりを1px
     * 色を#666（グレー）に指定 */
    box-shadow: 2px 2px 3px 1px #666;
    -moz-box-shadow: 2px 2px 3px 1px #666;
    -webkit-box-shadow: 2px 2px 3px 1px #666;

    /* テキストの影の指定
     * 影の横幅を1px
     * 縦長を1px
     * ぼかしを2px
     * 色を#000（黒）に指定 */
    text-shadow: 1px 1px 2px #000;

    /* グラデーションの指定 */
    background: -moz-linear-gradient(bottom, #36d, #248 50%, #36d);
    background: -webkit-gradient(linear, left bottom, left top, from(#36d), color-stop(0.5, #248), to(#36d));
}

button:hover {
    /* 透明度を20%に指定 */
    opacity: 0.8;
}
div {
    background-color:#ddeeff;
    margin:20px;
    padding:5px;
    border-radius:5px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    box-shadow:0px 0px 0px 6px #aedaf2;
    -moz-box-shadow:0px 0px 0px 6px #aedaf2;
    -webkit-box-shadow:0px 0px 0px 6px #aedaf2;
}

/* CSS Document */

 

実際の動作の様子

http://filmm.info/liub/test4.html

HTML5, JavaScript

角度で色が変わる（加速度）

スマホの角度で色が変わります

<!DOCTYPE html>
<html>
<head>
<title>touch color</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タグで　スマホの挙動を制限している -->
<meta http-equiv="Content-Style-Type" content="text/css">
<!--CSSで余白をゼロにしている -->
<style type="text/css">
body {
margin: 0px;
}
</style>
</head>
<body>

<canvas id="myCanvas"></canvas>

<!-- ↓ここからJavascript -->
<script type="text/javascript">

//変数系を初期設定
var canvas;
var context;
var myHue;


window.onload = function() {//これ読み込み終わったら
syokika();//syokikaを実行してね
}

function syokika(){//これがsyokikaね
canvas = document.getElementById("myCanvas");//どのcanvasにするか指定
canvas.width = window.innerWidth;//幅は全幅ですよ
canvas.height = window.innerHeight;//高さもフルで
context = canvas.getContext("2d");//2次元仕様で

context.fillStyle = "rgb(0, 0, 0)";//塗る準備よ！色はRGBモデルで量はそれぞれ０，０，０ね
context.fillRect(0, 0, canvas.width, canvas.height);//はい，０，０（左上）から，全幅，全高で塗って！
}

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

});


setInterval(mydraw, 100);//10msec毎に描いてね

function mydraw(){
    var myHue = (((grY + 9.8)/19.6)*180)*2;//横位値をスクリーン幅で割った値に360を掛けて色相つくりmyHueに入れる
    var myBri = ((grX + 9.8)/19.6)*100;//縦位置をスクリーン高で割った値に100を掛けてmyBriに明るさを入れる
    
    ///////---ここに描画する要素を書く
   // context.fillStyle = "hsl(" + myHue + ", 100%, 50% )"; //HSL値（色相、彩度、輝度）を指定
   context.fillStyle = "hsl(" + myHue + ", 100%, " + myBri + "% )"; //HSL値（色相、彩度、輝度）を指定
	context.beginPath();
  	context.arc(canvas.width/2, canvas.height/2, 150, 0, Math.PI*2, true);
	context.fill();
	}


</script><!-- ↑ここまでJavascript -->
</body>
</html>

サンプル−＞http://filmm.info/touch/touchcolor6.html

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>

 

Unity

UGUIで画面サイズに合わせてUIの大きさを変える

iPhoneやAndroidや，スタンドアロンアプリを作成する際に，ユーザのスクリーンサイズはどんなサイズになるかわかりません．

iPhoneであればスクリーンの大きさのパタンが決まっていますが，Android端末は規格がばらばらです．

そこでUGUI（Unity4.6以降）のCanvasのルートにcanvas scalerを入れることで，画面サイズに大きさを固定できます，

（１）canvasを選んで

canvas1

（２）component>Layout>Canvas Scaler　を追加

canvas2

（３）ゲーム画面を拡大すると，ボタンも拡大されます

 

canvas4

↓

canvas3

C#, JavaScript, Unity

Jsとcs間でのデータの受け渡し

JSとCS間ではいくらstaticが神の領域といえど，変数やクラスは呼び出せません．

とはいえ．いくつかの条件で橋渡しができます．

それにはいくつかのルールがあります．

（１）特定名のフォルダを作成し，呼ばれるスクリプトはそこに入れる

特定名のフォルダとは，Standard Assetsか，Pluginsとなります．ただ，Standard Assetsは，StandardAssetsパッケージを読み込んだ際に作られるフォルダとたぶん同名なので何かと不安．そこでPluginsフォルダを作成し，呼ばれるスクリプトはそこに入れる．

（２）必ずGameObjectにアサイン

呼ぶ側のスクリプト，呼ばれる側のスクリプトともになにかのGameObject（create emptyでもOK）にアサインする必要があります．以下の呼び出す側例はthis.○○を使っているので，同じGameObjectにアサインしています．試してはいませんが，find○○を使えば別の場所にアサインしていても呼び出せるのでは？

（３）呼ぶ側のスクリプトは特定フォルダ以外で

整理が面倒でも，呼び出す側のフォルダはPluginsフォルダ以外の場所に保存してください．なんだかエラーがでます．

スクリプト例

呼ばれる側

ーこのスクリプトはPluginsフォルダに入れる

#pragma strict
var neko : int = 100;
function Start () {
}

function Update () {
}

function test(){ //sample of call method
print("neko"); //return text message
}

呼び出す側

ーこのスクリプトはPluginsフォルダ以外に保存

using UnityEngine;
using System.Collections;

public class Scriptcall : MonoBehaviour {
	private calledVar jsScript;//calledVarはjsのファイル名．これを変数の型にするって？謎
	// Use this for initialization
	void Awake () { //Awakeは初回に1回のみ呼び出される関数
		jsScript = this.GetComponent<calledVar>(); //このオブジェクトついてるコンポーネントを呼び出すというもの
	}


	void Start () {
	
		Debug.Log (jsScript.neko); //これでjsで設定したint10が見えます


	}
	// Update is called once per frame
	void Update () {
		jsScript.test ();//これでjs内のfunctionも実行できます
//		Debug.Log (jsScript.neko);
	}
}

なぞだらけですが，これで動くみたいです．