SQLの窓

2014年02月05日


Win8.1 ストアアプリ(JS) : Visual Studio 2013 で Three.js(v65) の WebGLRenderer の動作を確認しました

Visual Studio 2013 Professional の 90 日間の無償評価版をダウンロードしてインストールし、動作確認しました。


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta charset="utf-8" />
    <title>App1</title>

    <!-- WinJS 参照 -->
    <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

    <!-- App1 参照 -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
    <script src="/js/three.min65.js"></script>
    <script src="/js/OrbitControls.js"></script>
    <script src="/js/user_three.js"></script>

    <style>
        #three_area {
            margin: 20px 0px 0px 190px;
            width: 850px;
            height: 400px;
            border: solid #ffffff 1px;
        }

        #title_area {
            margin: 150px 0px 0px 190px;
            width: 820px;
            height: 60px;
            border: solid #ffffff 1px;
            font-size: 25px;
            padding: 15px;
        }

    </style>
</head>
<body>

    <div id="title_area">Windows 8.1 + Visual Studio 2013 + WebGL + Three.js v65</div>

    <div id="three_area"></div>

    <script>

        var cameraCube, sceneCube;

        var w = 850;
        var h = 400;

        // カメラ作成
        USER.camera = new THREE.PerspectiveCamera(70, w / h, 1, 10000);
        USER.camera.position.set(0, 0, 1);

        USER.camera2 = new THREE.PerspectiveCamera(50, w / h, 1, 500);
        USER.camera2.position.z = 0;

        // シーン作成
        USER.scene = new THREE.Scene();
        USER.scene2 = new THREE.Scene();

        // テクスチャの準備
        var path = "/images/";
        var format = '.jpg';
        var urls = [
                path + 'px' + format, path + 'nx' + format,
                path + 'py' + format, path + 'ny' + format,
                path + 'pz' + format, path + 'nz' + format
        ];

        // テクスチャの実装
        mesh = USER.meshPanorama(urls);
        USER.scene2.add(mesh);

        // レンダラー作成
        USER.renderer = new THREE.WebGLRenderer();
        USER.renderer.setSize(w, h);

        // 表示エリア設定
        document.getElementById("three_area").appendChild(USER.renderer.domElement);

        // コントロール作成
        USER.orbit();
        USER.controls.autoRotate = true;
        USER.controls.autoRotateSpeed = 0.5; //default 2.0

        // アニメーション開始
        USER.animate();

        // オーバーライド
        USER.animate = function () {

            requestAnimationFrame(USER.animate);

            USER.camera2.rotation.copy(USER.camera.rotation);
            USER.camera2.position.copy(USER.camera.position);
            USER.controls.update();
            USER.renderer.render(USER.scene2, USER.camera2);

        }


    </script>

</body>
</html>

▼ このコードは、実際 WEB 上で動作しているものです。

Three.js : WebGL限定の Cube テクスチャによる『パノラマ背景』

この時の Three.js は v57 で、Windows8.1 で動作確認するにあたり、最新版は v65 でした。しかし、v65 のほうでは OrbitControls.js の内部処理がかなり変更された結果、Windows8.1 上では画面がちらつくので元のコードに近い状態に変更して動作させました。( 373 行目の scope.update(); をコメントにしました )

以下は、メインコードを簡潔にする為のユーザコードです( user_three.js )
USER = {};
USER.camera = null;
USER.scene = null;
USER.camera2 = null;
USER.scene2 = null;
USER.renderer = null;
USER.controls = null;

USER.animate = function () {
	requestAnimationFrame( USER.animate );
	USER.controls.update();
}

USER.render = function() {
	USER.renderer.render( USER.scene, USER.camera );
}

USER.orbit = function() {

	USER.controls = new THREE.OrbitControls( USER.camera );
	USER.controls.addEventListener( 'change', USER.render );

}

USER.meshPanorama = function(urls) {

	var reflectionCube = THREE.ImageUtils.loadTextureCube( urls );
	reflectionCube.format = THREE.RGBFormat;

	// Skybox
	var shader = THREE.ShaderLib[ "cube" ];
	shader.uniforms[ "tCube" ].value = reflectionCube;

	var material = new THREE.ShaderMaterial( {

		fragmentShader: shader.fragmentShader,
		vertexShader: shader.vertexShader,
		uniforms: shader.uniforms,
		depthWrite: false,
		side: THREE.BackSide

	} );

	return new THREE.Mesh( new THREE.CubeGeometry( 100, 100, 100 ), material );

}




posted by lightbox at 2014-02-05 17:38 | Win8 ストアアプリ | このブログの読者になる | 更新情報をチェックする

2013年11月11日


WinJS ストア : Three.js を組み込んで、『画像を飛ばす』テンプレート( Bird.js を利用 )

SkyDrive へ移動




WinJS ストア : 『背景画像をチェンジする2画面アプリ』のテンプレート を元に、2画面目で Three.js の canvas_geometry_birds を組み込んで通常の Bird をテスト飛行させてから、平面画像で飛ばすように変更しています。元々、WEB ベースの Three.js で実装済だったものを、Windows ストアの JavaScript で実装しました。製品版になる前より、Three.js の Canvas バージョンは動作する事が解っていましたが、今回あらためて動作確認しました。但し、飛ばせる数は WEBブラウザよりはかなり少なくなります。

▼ 飛ばす画像( 背景透過 )


もともと、Bird(3Dデータ) は簡単なアニメーションで成り立っています。その羽ばたき部分を平面画像の各頂点の移動に変えて実現しています。

ですから、ソースコード上の Bird オプジェクトは使用せずに、THREE.PlaneGeometry を使用しており、マテリアルとして画像をテクスチャ使用しています。また、さらに material.side = 2 なので両面仕様です。
( THREE.FrontSide=0;THREE.BackSide=1;THREE.DoubleSide=2 )
			texture = new THREE.Texture(this);
			texture.needsUpdate = true;
			material = new THREE.MeshBasicMaterial({ map: texture, overdraw: true });
			material.side = 2


var SCREEN_WIDTH = window.innerWidth,
SCREEN_HEIGHT = window.innerHeight,
SCREEN_WIDTH_HALF = SCREEN_WIDTH / 2,
SCREEN_HEIGHT_HALF = SCREEN_HEIGHT / 2;

var camera, scene, renderer = null,
birds, bird;

var boid, boids;



var Bird = function () {

	var scope = this;

	THREE.Geometry.call( this );

	v(   5,   0,   0 );
	v( - 5, - 2,   1 );
	v( - 5,   0,   0 );
	v( - 5, - 2, - 1 );

	v(   0,   2, - 6 );
	v(   0,   2,   6 );
	v(   2,   0,   0 );
	v( - 3,   0,   0 );

	f3( 0, 2, 1 );
	// f3( 0, 3, 2 );

	f3( 4, 7, 6 );
	f3( 5, 6, 7 );

	this.computeCentroids();
	this.computeFaceNormals();

	function v( x, y, z ) {

		scope.vertices.push( new THREE.Vector3( x, y, z ) );

	}

	function f3( a, b, c ) {

		scope.faces.push( new THREE.Face3( a, b, c ) );

	}

}

Bird.prototype = Object.create( THREE.Geometry.prototype );


var Boid = function () {

	var vector = new THREE.Vector3(),
	_acceleration, _width = 500, _height = 500, _depth = 200, _goal, _neighborhoodRadius = 100,
	_maxSpeed = 4, _maxSteerForce = 0.1, _avoidWalls = false;

	this.position = new THREE.Vector3();
	this.velocity = new THREE.Vector3();
	_acceleration = new THREE.Vector3();

	this.setGoal = function (target) {

		_goal = target;

	}

	this.setAvoidWalls = function (value) {

		_avoidWalls = value;

	}

	this.setWorldSize = function (width, height, depth) {

		_width = width;
		_height = height;
		_depth = depth;

	}

	this.run = function (boids) {

		if (_avoidWalls) {

			vector.set(-_width, this.position.y, this.position.z);
			vector = this.avoid(vector);
			vector.multiplyScalar(5);
			_acceleration.add(vector);

			vector.set(_width, this.position.y, this.position.z);
			vector = this.avoid(vector);
			vector.multiplyScalar(5);
			_acceleration.add(vector);

			vector.set(this.position.x, -_height, this.position.z);
			vector = this.avoid(vector);
			vector.multiplyScalar(5);
			_acceleration.add(vector);

			vector.set(this.position.x, _height, this.position.z);
			vector = this.avoid(vector);
			vector.multiplyScalar(5);
			_acceleration.add(vector);

			vector.set(this.position.x, this.position.y, -_depth);
			vector = this.avoid(vector);
			vector.multiplyScalar(5);
			_acceleration.add(vector);

			vector.set(this.position.x, this.position.y, _depth);
			vector = this.avoid(vector);
			vector.multiplyScalar(5);
			_acceleration.add(vector);

		}/* else {

						this.checkBounds();

					}
					*/

		if (Math.random() > 0.5) {

			this.flock(boids);

		}

		this.move();

	}

	this.flock = function (boids) {

		if (_goal) {

			_acceleration.add(this.reach(_goal, 0.005));

		}

		_acceleration.add(this.alignment(boids));
		_acceleration.add(this.cohesion(boids));
		_acceleration.add(this.separation(boids));

	}

	this.move = function () {

		this.velocity.add(_acceleration);

		var l = this.velocity.length();

		if (l > _maxSpeed) {

			this.velocity.divideScalar(l / _maxSpeed);

		}

		this.position.add(this.velocity);
		_acceleration.set(0, 0, 0);

	}

	this.checkBounds = function () {

		if (this.position.x > _width) this.position.x = -_width;
		if (this.position.x < -_width) this.position.x = _width;
		if (this.position.y > _height) this.position.y = -_height;
		if (this.position.y < -_height) this.position.y = _height;
		if (this.position.z > _depth) this.position.z = -_depth;
		if (this.position.z < -_depth) this.position.z = _depth;

	}

	//

	this.avoid = function (target) {

		var steer = new THREE.Vector3();

		steer.copy(this.position);
		steer.sub(target);

		steer.multiplyScalar(1 / this.position.distanceToSquared(target));

		return steer;

	}

	this.repulse = function (target) {

		var distance = this.position.distanceTo(target);

		if (distance < 150) {

			var steer = new THREE.Vector3();

			steer.subVectors(this.position, target);
			steer.multiplyScalar(0.5 / distance);

			_acceleration.add(steer);

		}

	}

	this.reach = function (target, amount) {

		var steer = new THREE.Vector3();

		steer.subVectors(target, this.position);
		steer.multiplyScalar(amount);

		return steer;

	}

	this.alignment = function (boids) {

		var boid, velSum = new THREE.Vector3(),
		count = 0;

		for (var i = 0, il = boids.length; i < il; i++) {

			if (Math.random() > 0.6) continue;

			boid = boids[i];

			distance = boid.position.distanceTo(this.position);

			if (distance > 0 && distance <= _neighborhoodRadius) {

				velSum.add(boid.velocity);
				count++;

			}

		}

		if (count > 0) {

			velSum.divideScalar(count);

			var l = velSum.length();

			if (l > _maxSteerForce) {

				velSum.divideScalar(l / _maxSteerForce);

			}

		}

		return velSum;

	}

	this.cohesion = function (boids) {

		var boid, distance,
		posSum = new THREE.Vector3(),
		steer = new THREE.Vector3(),
		count = 0;

		for (var i = 0, il = boids.length; i < il; i++) {

			if (Math.random() > 0.6) continue;

			boid = boids[i];
			distance = boid.position.distanceTo(this.position);

			if (distance > 0 && distance <= _neighborhoodRadius) {

				posSum.add(boid.position);
				count++;

			}

		}

		if (count > 0) {

			posSum.divideScalar(count);

		}

		steer.subVectors(posSum, this.position);

		var l = steer.length();

		if (l > _maxSteerForce) {

			steer.divideScalar(l / _maxSteerForce);

		}

		return steer;

	}

	this.separation = function (boids) {

		var boid, distance,
		posSum = new THREE.Vector3(),
		repulse = new THREE.Vector3();

		for (var i = 0, il = boids.length; i < il; i++) {

			if (Math.random() > 0.6) continue;

			boid = boids[i];
			distance = boid.position.distanceTo(this.position);

			if (distance > 0 && distance <= _neighborhoodRadius) {

				repulse.subVectors(this.position, boid.position);
				repulse.normalize();
				repulse.divideScalar(distance);
				posSum.add(repulse);

			}

		}

		return posSum;

	}

}


function init() {

	if (renderer == null) {
		camera = new THREE.PerspectiveCamera(75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000);
		// エリアの中に視点を置く
		camera.position.z = 300;

		scene = new THREE.Scene();

		birds = [];
		boids = [];

		//for (var i = 0; i < 30; i++) {

		//	boid = boids[i] = new Boid();
		//	boid.position.x = Math.random() * 400 - 200;
		//	boid.position.y = Math.random() * 400 - 200;
		//	boid.position.z = Math.random() * 400 - 200;
		//	boid.velocity.x = Math.random() * 2 - 1;
		//	boid.velocity.y = Math.random() * 2 - 1;
		//	boid.velocity.z = Math.random() * 2 - 1;
		//	boid.setAvoidWalls(true);
		//	boid.setWorldSize(500, 500, 400);

		//	bird = birds[i] = new THREE.Mesh(new Bird(), new THREE.MeshBasicMaterial({ color: Math.random() * 0xffffff, side: THREE.DoubleSide }));
		//	bird.phase = Math.floor(Math.random() * 62.83);
		//	bird.position = boids[i].position;
		//	scene.add(bird);

		//}

		var image = new Image()
		image.onload = function () {

			texture = new THREE.Texture(this);
			texture.needsUpdate = true;
			material = new THREE.MeshBasicMaterial({ map: texture, overdraw: true });
			material.side = 2

			for (var i = 0; i < 30; i++) {

				boid = boids[i] = new Boid();
				boid.position.x = Math.random() * 400 - 200;
				boid.position.y = Math.random() * 400 - 200;
				boid.position.z = Math.random() * 400 - 200;
				boid.velocity.x = Math.random() * 2 - 1;
				boid.velocity.y = Math.random() * 2 - 1;
				boid.velocity.z = Math.random() * 2 - 1;
				boid.setAvoidWalls(true);
				boid.setWorldSize(500, 500, 400);

				birds[i] = new THREE.Mesh(new THREE.PlaneGeometry(30, 30, 2, 1), material);
				bird = birds[i]
				bird.phase = Math.floor(Math.random() * 62.83);
				bird.position = boids[i].position;
				scene.add(bird);

			}

		};
		image.src = "/images/Black_Eagle_Miku_Elf4.png";


		renderer = new THREE.CanvasRenderer();
		Debug.writeln("new THREE.CanvasRenderer()");
		// renderer.autoClear = false;
		renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);

		document.addEventListener('mousemove', onDocumentMouseMove, false);
	}
	var target = document.querySelector("#contentHost");
	target.appendChild(renderer.domElement);
//	document.body.appendChild(renderer.domElement);

	if (renderer == null) {
		window.addEventListener('resize', onWindowResize, false);
	}

}

function onWindowResize() {

	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();

	renderer.setSize(window.innerWidth, window.innerHeight);

}

function onDocumentMouseMove(event) {

	var vector = new THREE.Vector3(event.clientX - SCREEN_WIDTH_HALF, - event.clientY + SCREEN_HEIGHT_HALF, 0);

	for (var i = 0, il = boids.length; i < il; i++) {

		boid = boids[i];

		vector.z = boid.position.z;

		boid.repulse(vector);

	}

}

//

function animate() {

	requestAnimationFrame(animate);
	render();

}

function render() {

	for (var i = 0, il = birds.length; i < il; i++) {

		boid = boids[i];
		boid.run(boids);

		bird = birds[i];

		bird.rotation.y = Math.atan2(-boid.velocity.z, boid.velocity.x);
		bird.rotation.z = Math.asin(boid.velocity.y / boid.velocity.length());
		bird.rotation.x = (180 * Math.PI / 180) / 2;
		bird.phase = (bird.phase + (Math.max(0, bird.rotation.z) + 0.1)) % 62.83;

		bird.geometry.vertices[0].z = bird.geometry.vertices[2].z = Math.sin(bird.phase) * 15;

		//color = bird.material.color;
		//color.r = color.g = color.b = (500 - bird.position.z) / 1000;

		//bird.rotation.y = Math.atan2(-boid.velocity.z, boid.velocity.x);
		//bird.rotation.z = Math.asin(boid.velocity.y / boid.velocity.length());

		//bird.phase = (bird.phase + (Math.max(0, bird.rotation.z) + 0.1)) % 62.83;
		//bird.geometry.vertices[5].y = bird.geometry.vertices[4].y = Math.sin(bird.phase) * 5;

	}

	renderer.render(scene, camera);

}

Windows JS ストアとしての改造のキモは、default.html の contentHost をうまく使うところです。



posted by lightbox at 2013-11-11 19:35 | Win8 ストアアプリ | このブログの読者になる | 更新情報をチェックする

2013年11月01日


WinJS ストア : 『背景画像をチェンジする2画面アプリ』のテンプレート

SkyDrive へ移動



( 自作のイラストを背景画像として使用しています )

製品になる前のサンプルコードから様変わりし、以前のままでは動作しなかったものを修正しました。以前から比べて、アプリバーのボタンの作成方法が変わり、画面定義にイベント記述ができないようになっていました。しかし、その他の大きな骨格は基本的に以前と変わっていませんでした。
default.js
(function () {
    "use strict";

    WinJS.Binding.optimizeBindingReferences = true;

    var app = WinJS.Application;
    var nav = WinJS.Navigation;
    var activation = Windows.ApplicationModel.Activation;

	// ************************************************
	// 開始処理
	// ************************************************
    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
        	if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {

        		nav.navigate("/HomePage.html");

            } else {
                // TODO: このアプリケーションは中断状態から再度アクティブ化されました。
                // ここでアプリケーションの状態を復元します。
            }
            args.setPromise(WinJS.UI.processAll());
        }
    };

	// ************************************************
	// Navigate された時の処理( 画面変更 )
	// ************************************************
    WinJS.Navigation.addEventListener("navigated", function (ev) {
    	Debug.writeln("navigated");
    	Debug.writeln(ev.detail.location);
		// 画面を切り替えるコンテンツエリア
    	var target = document.querySelector("#contentHost");
    	WinJS.Utilities.empty(target);
		// 画面の初期処理
    	WinJS.UI.Fragments.render(ev.detail.location, target).then(function () {

    		// ************************************************
    		// 戻るボタンがあった場合の処理
    		// ************************************************
    		var backButton = document.querySelector(".win-backbutton");
    		if (backButton) {
    			backButton.addEventListener('click', function () {
    				WinJS.Navigation.back();

    			}, false);
    			if (WinJS.Navigation.canGoBack) {
    				backButton.removeAttribute('disabled');
    			}
    			else {
    				backButton.setAttribute('disabled', 'true');
    			}
    		}

    		// ************************************************
    		// 画面が切り替わった時の処理
    		// ************************************************
    		if (ev.detail.location == "/HomePage.html") {
    			var body = document.getElementsByTagName("body")[0];
    			body.style.backgroundImage = "url(/images/back_001.jpg)";
    		}
    		if (ev.detail.location == "/NextPage.html") {
    			var body = document.getElementsByTagName("body")[0];
    			body.style.backgroundImage = "url(/images/back_002.jpg)";
    		}

    	});

    }, false);

	// ************************************************
	// イベント処理の登録
	// ************************************************
    var page = WinJS.UI.Pages.define("/default.html", {
    	ready: function (element, options) {
    		document.getElementById("home")
                .addEventListener("click", EVENT.navigateHome, false);
    		document.getElementById("play")
                .addEventListener("click", EVENT.navigateGame, false);
    		document.getElementById("rules")
				.addEventListener("click", EVENT.navigateRules, false);
    		document.getElementById("scores")
				.addEventListener("click", EVENT.navigateScores, false);
    		document.getElementById("credits")
				.addEventListener("click", EVENT.navigateCredits, false);
    	},
    });

	// ************************************************
	// 実際のイベント処理
	// ************************************************
    function navigateHome() {
    	Debug.writeln("メニュー");
    	document.getElementById("appbar").winControl.hide();
    	nav.navigate("/HomePage.html");
	}
    function navigateGame() {
    	Debug.writeln("ゲーム");
    	document.getElementById("appbar").winControl.hide();
    	nav.navigate("/NextPage.html");
    }
    function navigateRules() {
    	Debug.writeln("ルール");
    	document.getElementById("appbar").winControl.hide();
    }
    function navigateScores() {
    	Debug.writeln("スコア");
    	document.getElementById("appbar").winControl.hide();
    }
    function navigateCredits() {
    	Debug.writeln("クレジット");
    	document.getElementById("appbar").winControl.hide();
    }

    app.oncheckpoint = function (args) {
    };

    app.start();

	// ************************************************
	// 各ページから参照可能な名前空間の定義
	// ************************************************
    WinJS.Namespace.define("EVENT", {
    	navigateHome: navigateHome,
    	navigateGame: navigateGame,
    	navigateRules: navigateRules,
    	navigateScores: navigateScores,
    	navigateCredits: navigateCredits
    });


})();



default.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>JSBasic</title>

    <!-- WinJS 参照 -->
    <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

    <!-- JSBasic 参照 -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>

</head>
<body>
	<!-- 画面切り替え用エリア -->
    <div id="contentHost"></div>

	<!-- アプリケーションバー -->
    <div
        id="appbar"
        data-win-control="WinJS.UI.AppBar"
        aria-label="Command Bar">

        <button 
            data-win-control="WinJS.UI.AppBarCommand" 
            data-win-options="{id:'home', label:'メニュー', icon:'&#xE10F;', section: 'global'}">
        </button>

        <button 
            data-win-control="WinJS.UI.AppBarCommand" 
            data-win-options="{id:'play', label:'ゲーム', icon:'&#xE102;', section: 'global'}">
        </button>

        <button 
            data-win-control="WinJS.UI.AppBarCommand" 
            data-win-options="{id:'rules', label:'ルール', icon:'&#xE104;', section: 'global'}">
        </button>

        <button 
            data-win-control="WinJS.UI.AppBarCommand" 
            data-win-options="{id:'scores', label:'スコア', icon:'&#xE113;', section: 'global'}">
        </button>

        <button 
            data-win-control="WinJS.UI.AppBarCommand" 
            data-win-options="{id:'credits', label:'クレジット', icon:'&#xE10C;', section: 'global'}">
        </button>

    </div>
</body>
</html>

第二画面にコンテンツは無く、背景画像のみ変更するようにしています。



※ アプリバーは動作します


posted by lightbox at 2013-11-01 21:05 | Win8 ストアアプリ | このブログの読者になる | 更新情報をチェックする

2013年10月29日


Framework4.5(C#)ストア : HttpClient で Post と Get する汎用 static クラス

UrlEncode をキャラクタセットを指定して送れるようになっています。受信データは、Content-Type でキャラクタセットが指定されておれば、自動的に変換されています。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Net.Http.Headers;
using System.Text;
using System.Threading.Tasks;

namespace winofsql {

	class Tool {

		// 戻される文字列は、サーバー側で Content-Type に Charset が
		// 指定されておれば自動変換されます

		// *********************************************
		// UTF-8 POST
		// *********************************************
		public static async Task<string> Post(string url, Dictionary<string, string> param) {
			string result = "";

			try {
				HttpClient httpClient = new HttpClient();
				httpClient.MaxResponseContentBufferSize = int.MaxValue;
				HttpContent content = new FormUrlEncodedContent(param);
				var response = await httpClient.PostAsync(url, content);
				String text = await response.Content.ReadAsStringAsync();

				result = text;
			}
			catch (Exception Err) {
				result = "ERROR: " + Err.Message;
			}

			return result;

		}

		// *********************************************
		// エンコード指定 POST
		// *********************************************
		public static async Task<string> Post(string url, string encoding, Dictionary<string, string> param) {
			string result = "";
			string query_string = "";
			byte[] data1 = null;
			byte[] data2 = null;
			string data3 = null;

			foreach (KeyValuePair<string, string> kvp in param) {
				if (query_string == "") {
					query_string += "";
				}
				else {
					query_string += "&";
				}

				data1 = Encoding.GetEncoding(encoding).GetBytes(kvp.Value);
				data2 = WebUtility.UrlEncodeToBytes(data1, 0, data1.Length);
				data3 = Encoding.GetEncoding(encoding).GetString(data2, 0, data2.Length);
				query_string += kvp.Key + "=" + data3;
			}

			try {

				HttpClient httpClient = new HttpClient();
				HttpContent content = new StringContent(query_string);
				content.Headers.ContentType = new MediaTypeHeaderValue("application/x-www-form-urlencoded");
				var response = await httpClient.PostAsync(url, content);
				String text = await response.Content.ReadAsStringAsync();

				result = text;
			}
			catch (Exception Err) {
				result = "ERROR: " + Err.Message;
			}

			return result;

		}

		// *********************************************
		// URL のみ呼び出し GET
		// *********************************************
		public static async Task<string> Get(string url) {
			string result = "";

			HttpClient httpClient = new HttpClient();

			HttpResponseMessage response = null;
			try {
				response = await httpClient.GetAsync(url);
			}
			catch (Exception Err) {
				result = "ERROR: " + Err.Message;
			}
			// 接続に失敗
			if (response == null) {
				return result;
			}

			try {
				response.EnsureSuccessStatusCode();
			}
			catch (Exception Err) {
				result = "ERROR: " + Err.Message;
			}
			// HTTP 応答の失敗
			if (!response.IsSuccessStatusCode) {
				return result;
			}

			// 内容を文字列として取得
			try {
				String text = await response.Content.ReadAsStringAsync();

				result = text;
			}
			catch (Exception Err) {
				result = "ERROR: " + Err.Message;
			}

			return result;

		}

		// *********************************************
		// データ呼び出し( UTF-8 ) GET
		// *********************************************
		public static async Task<string> Get(string url, Dictionary<string, string> param) {

			string query_string = "";

			foreach (KeyValuePair<string, string> kvp in param) {
				if (query_string == "") {
					query_string += "?";
				}
				else {
					query_string += "&";
				}
				query_string += kvp.Key + "=" + WebUtility.UrlEncode(kvp.Value);
			}

			return await Get(url + query_string);

		}

		// *********************************************
		// データ呼び出し( エンコード指定 ) GET
		// *********************************************
		public static async Task<string> Get(string url, string encoding, Dictionary<string, string> param) {

			string query_string = "";
			byte[] data1 = null;
			byte[] data2 = null;
			string data3 = null;

			foreach (KeyValuePair<string, string> kvp in param) {
				if (query_string == "") {
					query_string += "?";
				}
				else {
					query_string += "&";
				}
				data1 = Encoding.GetEncoding(encoding).GetBytes(kvp.Value);
				data2 = WebUtility.UrlEncodeToBytes(data1, 0, data1.Length);
				data3 = Encoding.GetEncoding(encoding).GetString(data2, 0, data2.Length);

				query_string += kvp.Key + "=" + data3;
			}

			return await Get(url + query_string);

		}

	}
}


呼び出し
string result = await winofsql.Tool.Post(
	"http://localhost/lightbox/sample/test.php",
	"shift_jis",
	new Dictionary<string, string>() { { "field1", "日本語" }, { "field2", "表示" } });

if (result.PadRight(5).Substring(0, 5) == "ERROR") {
	Debug.WriteLine(result);
}

関連する記事

Framework4(C#) : WebClient で Post と Get する汎用 static クラス
Framework4(C#) : Windows Phone OS 7.1 : WebClient で Post と Get する汎用 static クラス
Android で Post と Get


posted by lightbox at 2013-10-29 21:02 | Win8 ストアアプリ | このブログの読者になる | 更新情報をチェックする

2013年10月26日


VS2012ストア(C#) : WebView テンプレート

きちんとした、WebView の利用は Windows 8.1 + VS2013 で行ったほうがよさそうですが、API を使用したWEB アプリ関連のログイン処理はこれを使うしかありません。ほとんどたいした事はできませんが、テンプレートを作ってみました。

Windows ストア用に作ったイラストを 5 枚同梱しています。以下はそのうちの一つを使ったものです





イベントは、LoadCompleted で Navigate 後の処理を行う事ができます。

ページ内で JavaScript を実行するには、以下のようにすれば大抵は実行可能のようです。
this.webView.InvokeScript("eval", new[] { "history.back()" });



posted by lightbox at 2013-10-26 00:22 | Win8 ストアアプリ | このブログの読者になる | 更新情報をチェックする

2013年10月11日


VS2012(C#)ストア : ListView Twitter 検索テンプレート

OneDrive へ移動




インターネットから取得した JSON のデータをいかに ListView にバインドするかをまとめたテンプレートです。

Twitter_Search.cs

Twitter API の GET のテンプレートでもあります。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Net;
using System.Diagnostics;
using System.Net.Http;
using System.IO;
using System.Threading.Tasks;
using Windows.Security.Cryptography;
using Windows.Storage.Streams;
using Windows.Security.Cryptography.Core;

namespace VS2012_Twitter {
	class Twitter_Search {
		private string _consumer_key;
		private string _consumer_secret;
		private string _token;
		private string _secret;

		private string _tweet_api = "https://api.twitter.com/1.1/search/tweets.json";

		public Twitter_Search(
			string consumer_key,
			string consumer_secret,
			string token,
			string secret
			) {
			_consumer_key = consumer_key;
			_consumer_secret = consumer_secret;
			_token = token;
			_secret = secret;
		}

		public async Task<string> Tweet(string text, int count) {

			HttpClient hc = new HttpClient();

			// ソートされるリスト
			SortedDictionary<string, string> sl = new SortedDictionary<string, string>();
			sl.Add("count", count.ToString());
			sl.Add("oauth_consumer_key", _consumer_key);
			sl.Add("oauth_nonce", Nonce());
			sl.Add("oauth_signature_method", "HMAC-SHA1");
			sl.Add("oauth_timestamp", TimeStamp());
			sl.Add("oauth_token", _token);
			sl.Add("oauth_version", "1.0");
			sl.Add("q", Uri.EscapeDataString(text));

			// http ヘッダ用シグネチャ作成
			string work = "";
			foreach (KeyValuePair<string, string> kvp in sl) {
				if (work != "") {
					work += "&";
				}
				work += kvp.Key + "=" + kvp.Value;
			}

			string work2 = "";
			// メソッド
			work2 += "GET" + "&";
			// API URL
			work2 += Uri.EscapeDataString(_tweet_api) + "&";
			// Oauth + データ
			work2 += Uri.EscapeDataString(work);

			// OAuth tool チェック用
			Debug.WriteLine(work2);

			string oauth_signature = Signature(work2);

			// ヘッダ情報を作成
			work = "";
			foreach (KeyValuePair<string, string> kvp in sl) {
				// oauth_* のみを使用する
				if (work != "") {
					if ((kvp.Key + "      ").Substring(0, 6) == "oauth_") {
						work += ", ";
					}
				}
				if ((kvp.Key + "      ").Substring(0, 6) == "oauth_") {
					work += kvp.Key + "=" + Dd(kvp.Value);
				}
			}
			// シグネチャを追加( ヘッダーはソートの必要は無い )
			work += ", oauth_signature=" + Dd(Uri.EscapeDataString(oauth_signature));

			// OAuth tool チェック用
			Debug.WriteLine(work);

			string result = null;
			try {
				// フォーマットは、 OAuth tool で確認。
				hc.DefaultRequestHeaders.Add("Authorization", "OAuth " + work);

				// 投稿
				result = await hc.GetStringAsync(new Uri(
					_tweet_api +
					"?" +
					"q=" + sl["q"] +
					"&count=" + sl["count"]
				));
			}
			catch (Exception ex) {
				result = "{\"error\", \"" + ex.Message + "\" }";
			}

			return result;

		}

		// Framework 4.5 では必要無い
		private string rfc3986(string base_string) {
			string result = base_string.Replace("!", "%21");
			result = result.Replace("'", "%27");
			result = result.Replace("(", "%28");
			result = result.Replace(")", "%29");
			result = result.Replace("*", "%2A");
			return result;
		}

		// ダブルクォートで挟む
		private string Dd(string base_string) {
			return "\"" + base_string + "\"";
		}

		private string Nonce() {
			Random rand = new Random();
			int nonce = rand.Next(1000000000);
			return nonce.ToString();
		}

		// タイムスタンプ
		private string TimeStamp() {
			TimeSpan ts = DateTime.UtcNow - new DateTime(1970, 1, 1, 0, 0, 0, 0);
			return Convert.ToInt64(ts.TotalSeconds).ToString();
		}

		// シグネチャ
		private string Signature(string target) {
			String signingKey = _consumer_secret + "&";
			signingKey += _secret;

			IBuffer keyMaterial = CryptographicBuffer.ConvertStringToBinary(signingKey, BinaryStringEncoding.Utf8);
			MacAlgorithmProvider hmacSha1Provider = MacAlgorithmProvider.OpenAlgorithm("HMAC_SHA1");
			CryptographicKey macKey = hmacSha1Provider.CreateKey(keyMaterial);
			IBuffer dataToBeSigned = CryptographicBuffer.ConvertStringToBinary(target, BinaryStringEncoding.Utf8);
			IBuffer signatureBuffer = CryptographicEngine.Sign(macKey, dataToBeSigned);
			String signature = CryptographicBuffer.EncodeToBase64String(signatureBuffer);
			return signature;
		}
	}
}




posted by lightbox at 2013-10-11 11:34 | Win8 ストアアプリ | このブログの読者になる | 更新情報をチェックする
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定> 詳細設定> ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。

また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。

※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです

対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。


※ エキスパートモードで表示しています

アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります

<% if:page_name eq 'archive' -%>
アーカイブページでのみ表示される内容
<% /if %>

<% if:page_name eq 'category' -%>
カテゴリページでのみ表示される内容
<% /if %>

<% if:page_name eq 'tag' -%>
タグページでのみ表示される内容
<% /if %>
この記述は、以下の場所で使用します
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり